Що таке UI: як людина керує програмою

Коротко

• UI (user interface, інтерфейс користувача) — це все, через що ви взаємодієте з програмою, сайтом, додатком чи пристроєм: кнопки, екрани, жести, голос, навіть звук підтвердження.
• Це не «красива картинка». Інтерфейс — шар між людиною і логікою системи. Якщо шар кривий, навіть геніальний продукт здається дурним.
• UI і UX — різні речі. UX думає про шлях і відчуття від задачі. UI збирає конкретні елементи, якими цей шлях проходять.
• Найпоширеніший тип сьогодні — графічний інтерфейс (GUI). Поруч живуть командний рядок, голосові й жестові інтерфейси.
• Добрий UI не змушує згадувати, де що лежить. Він підказує стан системи, дозволяє скасувати помилку і говорить мовою людини, а не внутрішнім жаргоном команди розробки.
• Перевіряти інтерфейс варто на реальних сценаріях: зареєструватися, знайти товар, скасувати дію, прочитати помилку. Якщо на цих кроках спотикаєтесь ви — спотикнеться і користувач.

UI — це місце, де ви і машина нарешті зустрічаєтесь. Не код, не база даних, не «бекенд». Саме екран, кнопка, рядок пошуку, повзунок гучності в авто, меню банкомата, голосова команда «постав таймер на сім хвилин». Без цього шару програма існує лише для інших програм.

Люди часто плутають UI з «дизайном взагалі» або з UX. Це зрозуміло: у вакансіях пишуть «UI/UX дизайнер» одним рядком, ніби це одна професія з двома літерами для солідності. Насправді інтерфейс — конкретний інструмент взаємодії. Досвід користувача ширший: чи взагалі варто було робити цю кнопку, чи людина знайде потрібне, чи не злиться через п’ять зайвих екранів.

Нижче розберемо, з чого складається інтерфейс, чим він відрізняється від сусідніх понять, які типи UI існують і за якими правилами його збирають. Без магії і без обіцянки, що після тексту ви одразу станете дизайнером. Просто щоб наступного разу, коли хтось скаже «треба покращити UI», було зрозуміло, про що саме мова.

Що саме ховається за абревіатурою UI

UI розшифровується як user interface — інтерфейс користувача. Українською Вікіпедія формулює це як засіб зручної взаємодії людини з інформаційною системою. Англійський словник Merriam-Webster фіксує термін у значенні програмного забезпечення, яке дозволяє користувачеві взаємодіяти з системою: обирати опції, вводити команди, натискати елементи. Перше зафіксоване вживання слова в цьому сенсі — 1967 рік.

У ширшому сенсі інтерфейс існує не лише в додатках. Панель ліфта — теж UI. Крутилка на пральній машині. Кнопки на пульті. Різниця лише в тому, що в цифрових продуктах цей шар майже завжди малюють на екрані, а реакцію системи програмують окремо.

Три шари зручно тримати в голові:

• Апаратний — клавіатура, миша, тачскрін, мікрофон, камера, контролер.
• Програмний — вікна, меню, поля, іконки, жести, голосові фрази.
• Зворотний зв’язок — підсвітка кнопки, спінер завантаження, вібрація, звук помилки, текст «платіж прийнято».

Без третього шару інтерфейс німий. Натиснули — і тиша. У практиці саме це дратує сильніше за «немодний» колір: людина не розуміє, чи система її почула.

UI і UX: де межа, і навіщо її тримати

UX (user experience) — досвід користувача. Термін популяризував Дон Норман на початку 1990-х, працюючи в Apple: йшлося не лише про екран, а про всю взаємодію людини з продуктом і компанією. UI — видима і тактильна частина цього досвіду.

Класичне пояснення з матеріалів Nielsen Norman Group звучить приблизно так: ідеальний каталог фільмів із зручними кнопками все одно дасть поганий досвід, якщо в базі немає того фільму, який людина шукає. Інтерфейс тут ні при чому. Проблема глибша.

Вони не конкурують. Поганий UI ламає навіть продуманий сценарій. Гарний UI не врятує продукт, який змушує людину робити зайву роботу. У невеликих командах одну людину часто просять закрити обидва фронти — і тоді корисно хоча б у голові розділяти: спочатку «що людина намагається зробити», потім «як це виглядає на екрані».

Які бувають типи інтерфейсів

Коли кажуть «UI», майже завжди мають на увазі графічний інтерфейс. Це зручне спрощення, але неповне. Типів більше, і вони часто живуть в одному продукті поруч.

CLI — командний рядок

Користувач вводить текстову команду, система відповідає текстом. Так працювали ранні системи з кінця 1960-х, так досі працюють адміністратори серверів, розробники, аналітики. Швидко, якщо знаєш синтаксис. Жорстоко, якщо ні. Помилка в одній літері — і команда або не виконується, або виконує не те.

TUI — текстовий інтерфейс

Теж букви на екрані, але вже з меню, рамками, списками, які можна обирати стрілками. Багато старих бухгалтерських і складських систем виглядали саме так. Для людини, яка робить одну й ту саму операцію сотні разів на день, це досі інколи швидше за «гарний» веб.

GUI — графічний інтерфейс

Вікна, іконки, меню, вказівник. Англійською цей набір називають WIMP: windows, icons, menus, pointer. Ідеї збирали роками: у 1962 Іван Сазерленд показав Sketchpad, у 1968 Дуглас Енгельбарт продемонстрував мишу, вікна і гіпертекст, у 1970-х лабораторія Xerox PARC зібрала ці частини в робочу систему, а масовим GUI став після Macintosh 1984 року і пізніше Windows.

Саме GUI зробив комп’ютер річчю «для всіх», а не лише для тих, хто пам’ятає команди. Файл став значком. Видалити можна перетягнути в кошик. Це не дрібниця — це зміна ментальної моделі: замість згадувати синтаксис ви впізнаєте об’єкт на екрані.

VUI, жести, NUI

Голосовий інтерфейс (VUI) — колонки, автомобільні системи, голосовий набір. Зручно, коли руки зайняті. Погано, коли шумно, акцент не той або система не підтверджує, що саме вона почула.

Сенсорний і жестовий шар з’явився з смартфонами: свайп, щипок, довге натискання. Natural user interface (NUI) — спроба зробити керування «як у житті»: дотик, рух руки, погляд. Звучить приємно, поки жест не збігається з випадковим рухом і додаток не закривається сам.

У житті продукти гібридні. Банківський додаток — GUI з біометрією. Телевізор — пульт плюс голос. Адмінка сайту інколи ховає CLI для тих, кому так швидше. Це нормально. Погано, коли різні канали суперечать один одному: голосом сказали одне, на екрані написано інше.

З чого зібраний типовий цифровий UI

Дизайнери називають це компонентами або елементами інтерфейсу. Користувач просто бачить «штуки на екрані». Варто знати назви, бо саме ними оперують у макетах і в розмовах із розробниками.

• Навігація — меню, вкладки, «хлібні крихти», нижня панель у мобільному додатку.
• Дії — кнопки, посилання, іконки-кнопки, плаваюча кнопка створення.
• Ввід — поля тексту, чекбокси, радіокнопки, перемикачі, слайдери, датапікери.
• Вміст — заголовки, абзаци, картки, таблиці, списки, зображення.
• Зворотний зв’язок — тости, модалки, скелетон-завантаження, прогрес-бари, порожні стани.
• Системні стани — помилка, успіх, нічого не знайдено, немає інтернету, немає прав доступу.

Помічав таке на рев’ю макетів: екран «щасливого шляху» намальований ідеально, а стану помилки немає взагалі. Ніби користувач ніколи не введе не той пароль і мережа ніколи не відпаде. Саме там інтерфейс зазвичай і сиплеться.

Окремо стоїть дизайн-система: набір повторюваних компонентів, кольорів, відступів, правил. Не обов’язкова для лендінга на одну сторінку. Майже обов’язкова, коли екранів десятки і над ними працює кілька людей. Інакше кнопка «Далі» на одному екрані синя й округла, на іншому — чорна й гостра, і мозок щоразу гальмує.

Принципи, на яких тримається зрозумілий інтерфейс

Найвідоміший робочий список — десять евристик Якоба Нільсена. Він зібрав їх разом із Рольфом Моліхом близько 1990-го і уточнив у 1994-му. Це не закон і не чекліст «для галочки». Це швидкий спосіб подивитися на екран і зрозуміти, де людину підставляють.

1. Видимість стану системи. Після кліку має бути зрозуміло, що відбувається. Кнопка натиснулась, файл вантажиться, лист пішов.
2. Мова реального світу. «Кошик», а не «entity cart_v2». «Немає інтернету», а не код 0x800704CF.
3. Контроль і свобода. Скасувати, повернутися, закрити. Людина має право передумати.
4. Узгодженість і стандарти. Однакове означає однакове. Іконка кошика не повинна на одному екрані видаляти, на іншому — зберігати.
5. Запобігання помилкам. Краще не дати видалити все одразу, ніж потім писати вибачення.
6. Впізнавання замість пригадування. Підказки в полі, видимі опції, історія пошуку. Не змушуйте тримати в голові те, що можна показати.
7. Гнучкість для новачка і для профі. Новачок іде кнопками. Досвідчений — гарячими клавішами і збереженими фільтрами.
8. Естетика і мінімум шуму. Красиво — добре. Декор, який ховає головну дію, — вже ні.
9. Зрозумілі помилки. Що сталось, чому, що зробити далі. Без внутрішніх кодів у червоному банері.
10. Довідка, коли вона справді потрібна. Ідеально — щоб без неї обходились. Реально — коротка підказка поруч із складним полем.

Поруч живуть «золоті правила» Бена Шнейдермана: послідовність, зрозумілий відгук, запобігання помилкам, легке скасування дії. І визначення зручності з ISO 9241-11: система придатна до використання, якщо конкретні люди можуть досягти своїх цілей ефективно, результативно і з прийнятним рівнем задоволення в конкретному контексті. Зверніть увагу на хвіст: «в конкретному контексті». Інтерфейс каси самообслуговування в супермаркеті і інтерфейс біржового термінала не можна міряти однією лінійкою «подобається / не подобається».

Звідси незручна правда. Гарний UI для бухгалтера з десятирічним стажем може виглядати «перевантаженим» для людини з вулиці. І навпаки: великий «дружній» майстер на сім кроків біситиме того, хто робить операцію щодня.

Як виглядає робота над UI на практиці

Процес рідко починається з вибору шрифту. Якщо починається — це вже сигнал. Спочатку треба знати, хто користується і що намагається зробити. Далі — груба структура екранів. Потім — візуал і стани. Потім — перевірка на людях, навіть на трьох колегах із сусіднього відділу, які продукт не малювали.

Типовий ланцюжок такий:

1. Зібрати сценарії: реєстрація, пошук, оплата, скарга, повторне замовлення.
2. Накидати схему екранів без кольору. Сірі прямокутники. Так дешевше сперечатися.
3. Визначити головну дію кожного екрана. Одна, не сім.
4. Зібрати компоненти: поля, кнопки, повідомлення, порожні стани.
5. Перевірити дрібниці: фокус клавіатури, контраст тексту, розмір зони натискання, поведінку на вузькому екрані.
6. Віддати розробці не «картинку», а набір станів і правил.

Інструменти змінюються швидше за принципи. Зараз часто малюють у Figma, збирають прототипи там само або в окремих інструментах, перевіряють контраст окремими сервісами, дивляться поведінку в браузері та на телефоні. Назви програм менш важливі за звичку не вважати перший макет фінальним.

За спостереженнями, найдорожчі правки трапляються не через «не той відтінок синього», а через те, що кнопку поставили туди, куди рука не дотягується великим пальцем, або форму розбили на кроки так, що людина втрачає контекст. Колір дешевий. Переробка логіки екрана — ні.

Типові помилки, які видають слабкий інтерфейс

Список нижче зібраний не з теорії, а з того, на що люди реально нарікають, коли просять «подивитися сайт, бо ніхто не залишає заявки».

• Головна дія не головна. «Оплатити» виглядає як другорядне посилання, а банер зі знижкою кричить на весь екран.
• Форма як допит. Двадцять полів, з яких потрібні чотири. Обов’язковий телефон «для уточнення», після якого ніхто не телефонує.
• Помилка без інструкції. «Сталася помилка». Де? У якому полі? Чи збереглися введені дані?
• Іконки без підписів. Три рисочки, сердечко, квадратик із стрілкою. Дизайнеру очевидно. Новому користувачеві — ні.
• Різні правила на сусідніх екранах. Десь збереження автоматичне, десь треба окрема кнопка, і про це ніде не сказано.
• Мобільна версія як стиснутий десктоп. Дрібні посилання, горизонтальний скрол, меню, яке відкривається і не закривається.
• Декор замість ієрархії. Анімація є, контрасту немає. Гарно на макеті, сліпо на сонці.

Окрема історія — доступність. Контраст тексту, підписи до полів, можливість пройти форму з клавіатури, зрозумілі мітки для скрінрідера. Це не «додаткова фіча для галочки». Це частина інтерфейсу. Людина з поганим зором, людина з однією вільною рукою в транспорті, людина, яка збільшила шрифт у системі — усі вони користуються тим самим UI.

Ще одна пастка: копіювати чужий інтерфейс «бо в великого бренду так». Великий бренд має впізнаваність, звичку користувачів і інколи просто інші задачі. Сліпе копіювання нижньої панелі з п’ятьма іконками не зробить ваш сервіс зрозумілішим, якщо у вас дві реальні функції, а не п’ять.

Як зрозуміти, що UI працює

Не за внутрішнім відчуттям «мені подобається». І не лише за тим, що «виглядає сучасно». Сучасність минає. Зручність перевіряється задачами.

Прості перевірки, які можна зробити без лабораторії:

• Дати людині ззовні задачу в один рядок: «Знайдіть і замовте X». Мовчати. Дивитися, де рука зупиняється.
• Пройти сценарій самому на телефоні в одній руці, у транспорті, при яскравому світлі.
• Вимкнути мишу і пройти ключову форму клавіатурою.
• Прочитати всі тексти помилок уголос. Якщо соромно — переписати.
• Порівняти час на задачу в старої і нової версії. Якщо нова красивіша, але довша — це не покращення інтерфейсу.

Команди з ресурсом додають аналітику: де відвалюються, які поля кидають, куди клікають мімо. Це корисно. Але цифри без спостереження брешуть по-своєму. Людина може «успішно» завершити замовлення і все одно більше ніколи не повернутися, бо шлях був принизливо заплутаний.

У практиці я кілька разів бачив одну й ту саму картину: після редизайну «метрики залученості» зростали, бо з’явилось більше кліків. Кліків стало більше, бо люди не розуміли, куди тиснути, і тикали навмання. Інтерфейс ніби ожив. Насправді він почав шуміти.

Кому це знати, навіть якщо ви не дизайнер

Розробнику — щоб не зібрати «як у макеті» лише щасливий шлях і забути порожній список. Менеджеру продукту — щоб не ставити задачу «зробіть красиво» і не дивуватися результату. Маркетологу — щоб банер не вбивав головну дію сторінки. Власнику невеликого бізнесу — щоб відрізняти косметику від справжньої перешкоди в замовленні.

Якщо коротко про роль: UI-дизайнер відповідає за те, щоб елементи були видимі, узгоджені, досяжні й зрозумілі в конкретних станах системи. Він не замінює дослідження аудиторії. І не замінює розробку. Він збирає шар, яким люди будуть користуватися щодня, інколи сотні разів.

Навчатися можна з кількох боків одночасно: розбирати продукти, якими користуєтесь самі (де злилися, де навпаки стало легко), читати евристики Нільсена, дивитися гайдлайни платформ — Human Interface Guidelines у Apple і Material Design у Google. Це не святе письмо, але спільна мова. Користувач уже навчений цими системами. Ламати звичку можна, лише якщо виграш очевидний.

Що робити з цим знанням далі

Якщо ви замовили сайт або додаток — дивіться не лише на головний екран у спокійному стані. Просіть показати помилку оплати, порожній кошик, лист на пошту, екран без інтернету. Якщо цього немає в макеті, цього, швидше за все, не буде і в продукті. Або з’явиться вночі перед релізом у найгіршому вигляді.

Якщо робите інтерфейс самі — почніть з однієї задачі користувача і проведіть її до кінця. Одна. Не «всі розділи одразу». Підпишіть поля людською мовою. Зробіть головну кнопку помітною. Додайте скасування. Потім уже обирайте палітру.

А якщо просто хочете краще розуміти, що вам продають під вивіскою «покращимо UI», ставте одне питання: яку конкретну дію людині стане легше виконати? Якщо відповіді немає, вам пропонують новий шаблон кнопок, а не інтерфейс.

Інтерфейс — це не прикраса системи. Це єдине місце, де система взагалі стає видимою. Варто ставитися до нього як до робочого інструмента: щоб ним можна було зробити справу, не замислюючись над самим інструментом.