Коротко
- Помилка дизайну — це не «негарний колір», а місце, де людина зупиняється, сумнівається або йде геть.
- Найчастіше ламають інтерфейс слабкий контраст, крихітні кнопки, форми з зайвими полями і повідомлення без інструкції, що робити далі.
- Красивий макет без ієрархії читається гірше за скромний, але зрозумілий.
- Доступність — не опція «на потім»: низький контраст досі стоїть у топі проблем головних сторінок інтернету.
- Більшість типових промахів ловиться коротким тестом із кількома людьми, а не ще одним редизайном «для свіжості».
Помилки дизайну — це рішення в інтерфейсі, через які людина не розуміє, куди дивитися, що натиснути і чи взагалі система її почула. Не обов’язково кричущі. Частіше тихі: сірий текст на сірому, кнопка, яка виглядає як заголовок, форма, де обов’язкове поле ховається десь унизу. Користувач рідко каже «тут поганий UX». Він просто закриває вкладку.
У практиці я все частіше бачу не брак смаку, а брак тертя з реальним сценарієм. Макет зібраний, на презентації всі кивають, а на телефоні в маршрутці людина не влучає в іконку кошика. Нижче — розбір промахів, які з’їдають увагу, довіру і заявки. І що з цим робити, якщо ви самі малюєте інтерфейс або приймаєте роботу підрядника.
Що вважати помилкою, а що — смаком
Смак — суб’єктивний. Помилка дизайну — перевіряється. Якщо кілька різних людей на одній дії спотикаються в одному місці, це вже не «їм не зайшло». Це збій у моделі: інтерфейс обіцяє одне, робить інше. Евристики юзабіліті Якоба Нільсена тримаються десятиліттями саме тому, що спираються на поведінку, а не на моду. Система має говорити мовою людини і показувати свій стан. Коли цього немає, починається тиха катастрофа.
Корисне розрізнення, яке рятує від вічних сварок на рев’ю. Є slips — промахи через неуважність: хотів «Зберегти», влучив у «Видалити», бо кнопки стоять поруч. І є mistakes — свідомі помилки через хибну картину світу: людина думає, що «Профіль» — це налаштування акаунта, а там портфоліо. Перші лікуються відстанню, підтвердженням, нормальним розміром цілі. Другі — словами, підписами, структурою.
Логіка має бути на екрані, не в голові дизайнера. Якщо пояснення «ну це ж логічно» займає більше одного речення — логіки в інтерфейсі немає. Це не жорсткість. Це економія нервів усім, хто потім цей екран відкриє.
- Помилка — користувач не знаходить дію за кілька секунд на типовому екрані.
- Помилка — після кліку нічого видимого не відбувається, і людина тисне ще раз.
- Помилка — текст читається лише на великому моніторі в ідеальному світлі.
- Не помилка — комусь не подобається ваш відтінок синього, якщо контраст і ієрархія на місці.
Ця рамка відсікає смакові війни. Можна сперечатися про «теплий» чи «холодний» бренд. Не можна сперечатися, чи має кнопка виглядати як кнопка.
Візуальні промахи, які око ловить раніше за думку
Людина ще не встигла «оцінити дизайн», а вже вирішила, чи варто напружуватися. Візуальний шум, слабкий контраст і плоска ієрархія роблять сторінку важкою, навіть якщо текст хороший. За спостереженнями, саме тут новачки плутають чистоту з невидимістю: прибрали все зайве — і разом із зайвим зникли підказки.
Сірий текст, який здається елегантним
Світло-сірий на білому виглядає дорого на макеті. У житті це туман. За критеріями WCAG 2.1 для звичайного тексту потрібен контраст щонайменше 4,5:1, для великого — 3:1. Рівень AAA ще жорсткіший: 7:1 для звичайного тексту. Це не примха аудиторів. Це запас на знижену гостроту зору, відблиск, дешевий екран, полудень біля вікна.
Звіт WebAIM Million за 2026 рік зафіксував низький контраст тексту на 83,9% головних сторінок із вибірки в мільйон сайтів. Це знову найчастіша автоматично виявлена проблема доступності. У середньому на сторінку виходило 34 окремі випадки слабкого контрасту. Не «дрібний огріх маленьких лендингів». Норма інтернету, і вона погана.
У практиці я кілька разів рятував лендинг одним рухом: замінив блідий сірий на щось ближче до графітового — і «нечитабельний блок» став звичайним абзацом. Дизайнер ображався, що зникла легкість. Користувачі перестали мружитися. Легкість, яка заважає читати, уже не легкість.
- Контраст перевіряйте не на око, а в інструменті: Contrast Checker, Stark, аудит у Chrome.
- Не кладіть дрібний текст на фото без підкладки або затемнення.
- Плейсхолдер у полі — не заміна підпису. Він світліший і зникає, щойно людина починає друкувати.
- Посилання мають відрізнятися не лише кольором. Близько 8% чоловіків мають порушення кольорового зору, найчастіше червоно-зеленого типу.
Колір як єдиний носій сенсу — окрема класика. «Зелене — ок, червоне — помилка» працює, доки в аудиторії немає людини з дальтонізмом і доки скріншот не пішов у чорно-білий друк. Іконка, текст, патерн — дешевші страховки, ніж здається.
Типографіка без ритму
Тут падають навіть сильні візуали. Занадто багато кеглів. Занадто щільна міжрядкова. Рядок на всю ширину монітора, де око губить початок наступного. Шрифт із тонкими штрихами, який на мобільному стає сірою кашею.
Працює проста дисципліна. Два-три розміри для тексту, один акцентний заголовок, чітка сходинка: H1 помітно більший за H2, H2 — за H3, тіло не стрибає туди-сюди. Міжрядкова для абзацу зазвичай комфортніша в районі 1,4–1,6. Ширина рядка — орієнтовно 45–75 символів. Окремий гріх — текст у картинках. Красиво в макеті, смерть для масштабування, перекладу і скрінрідерів.
Немає ієрархії, усе «важливе»
Коли на екрані все кричить, не кричить нічого. Три CTA одного розміру. Банер, бейдж, акція, таймер, чат-віджет і ще стікер «хіт». Людина сканує сторінку, а не читає лінійно. Дослідження айтрекінгу Nielsen Norman Group ще з 2006 року описало F-подібний візерунок: більше уваги вгорі і ліворуч, далі погляд падає вниз по краю. Якщо головна дія сидить у правому нижньому куті сірим текстом — її просто не помітять.
Ієрархія будується розміром, контрастом, порожнім простором і положенням. Не кількістю тіней. Порожній простір — не дірка, яку треба чимось закрити. Це пауза, яка каже: ось це головне.
Інтерфейсні збої: людина не розуміє, що клікабельне
Візуал може бути охайним, а користувач усе одно стоїть як у чужій кухні. Не знає, де двері. Ось тут уже не «картинка», а шлях.
Навігація, якій потрібен екскурсовод
Пункти з однаковими назвами. «Послуги» і «Рішення». «Блог» і «Медіа». Меню з дванадцяти рядків плюс бургер, усередині якого ще три рівні. Людина шукає не архітектуру інформації. Вона шукає відповідь. Якщо відповідь схована за абстрактним словом, її немає.
За досвідом, найшвидший тест — карткове сортування: дайте реальні назви сторінок людям із цільової аудиторії і попросіть розкласти. Їхня логіка майже ніколи не збігається з вашою оргструктурою. «Про нас» у момент задачі шукають рідко. «Ціни», «Доставка», «Вхід» — постійно.
- Назви пунктів — з мови клієнта, не з мови відділу маркетингу.
- Поточний розділ має бути видно. «Де я?» — базове питання, його не можна ігнорувати.
- Пошук потрібен, коли контенту багато. І він має знаходити, а не показувати нуль на опечатку.
- Футер не рятує зламане меню в шапці. Це запасний вихід, не головний.
Мобільне меню окремо вміє ховати критичні дії. Телефон, кошик, вхід — якщо вони зникли в «ще», частина людей до них не добереться. Бургер — компроміс, не досягнення.
Іконки, які розуміє лише автор
Серце, зірка, прапорець, три крапки. Що з цього «зберегти», «обрати», «поскаржитися», «ще»? Без підпису — лотерея. Нестандартна іконка без тексту — загадка. Навіть стандартна інколи роз’їжджається між платформами: «поділитися» на iOS і Android виглядає по-різному.
Мінімалізм тут часто бреше. Ви не очистили інтерфейс. Ви зняли підказки. Іконка плюс коротке слово майже завжди виграє в одиначки, особливо в продуктах, якими користуються рідко. Банківський додаток раз на тиждень — не стрічка, де жест уже в м’язах.
Цілі, в які неможливо влучити
Кнопка чи заголовок? На макеті очевидно. На сонці, на дешевому екрані, однією рукою — уже ні. Плоский дизайн прибрав тіні й «випуклість» кнопок, а разом із ними — підказку «в мене можна тицьнути». Посилання без підкреслення. Кнопка-текст. Картка, яка клікається вся, але курсор це не видає. Або навпаки: велика картка, а жива лише крихітна назва.
Apple в Human Interface Guidelines радить зону натискання щонайменше 44×44 pt. Material Design — близько 48×48 dp. Це про палець, не про естетику пікселя. Між двома посиланнями в футері на мобільному має бути повітря, інакше люди відкриватимуть «Політику» замість «Контактів» і злитимуться на вас, не на свій палець.
Окремо — руйнівна дія поруч із підтвердженням. «Зберегти» і «Видалити» одного кольору, в одному рядку, з однаковою вагою. Це фабрика випадкових промахів. Небезпечну дію відсуньте, перефарбуйте, попросіть підтвердження. Не після кожного кліку в налаштуваннях, а там, де ціна помилки висока.
Форми, тиша системи і тексти, від яких хочеться закрити ноут
Форма — місце, де макет зустрічається з бюрократією. Тут відвалюються не через кернінг. Тут просять занадто багато і погано пояснюють, що пішло не так.
Поля «про всяк випадок»
Кожне зайве поле — маленьке «а воно мені треба?». Телефон, коли ви не телефонуватимете. «По батькові», якого ніде далі немає. Факс. Друга адреса. Капча на три кроки раніше, ніж потрібно. Я якось відкрив чекаут клієнта і нарахував чотирнадцять полів, серед яких було «назва компанії» для покупки однієї свічки. Маркетинг хотів сегментацію. Люди хотіли свічку.
Підписи ставте зовні, не всередині поля. Позначте і обов’язкові, і необов’язкові — двозначність тут дорого коштує. Маски телефону робіть під реальні формати, не під фантазію розробника. Автозаповнення браузера не ламайте самописними інпутами без нормального autocomplete. Пароль із вимогою «спецсимвол, велика, мала, число і ще щось» без підказки сили — це не безпека, це бар’єр. Краще довжина і менеджер паролів.
- Не дробити дату на три випадайки, якщо підійде один календар.
- Не ховати кнопку оплати під ще однією сторінкою з розсилкою.
- Показувати доставку і підсумок до введення карти.
- Дозволяти гостьове оформлення. Примусовий акаунт перед цінністю — класика відвалу.
Валідація — в момент, коли ще можна виправити, не після сабміту двадцяти полів. І не лише червона рамка: напишіть, що саме не так. «Невірний формат» — погано. «Схоже, пропущено @ у пошті» — уже можна жити.
«Щось пішло не так»
Це речення варто винести з продукту внутрішнім регламентом. Воно не каже, що зламалося, чи зникли дані, чи варто спробувати ще, чи писати в підтримку. Поганий фідбек взагалі один із найдорожчих промахів: людина натиснула, екран мовчить. Пів секунди — нормально. Три секунди — уже тривога. Для дій на кілька секунд потрібен індикатор очікування, для довших — прогрес, який реально рухається. Інакше повторні кліки, подвійні замовлення, лють.
Хороше повідомлення про помилку має три частини: що сталося, чому це важливо, що зробити зараз. Людською мовою. Без коду 500 посеред екрана. Без провини користувача. «Ви ввели неправильно» звучить як догана. «Цей пароль не підійшов. Залишилося дві спроби або скиньте його тут» — уже діалог.
Порожні стани теж частина інтерфейсу. Перший вхід у «Мої замовлення» без жодного рядка — не біла пустеля. Це місце сказати: тут з’являться покупки, почати можна з каталогу. Інакше людина вирішить, що розділ зламаний.
Доступність, мобільна версія і швидкість
Доступність відкладають на другий етап, якого не буває. Це не окрема аудиторія «десь там». Це людина з зайнятою рукою, зі старим телефоном, із сонцем на екрані, з розмитою оптикою після мігрені. Далі за контрастом — фокус із клавіатури, підписи до полів, альтернативний текст до змістовних зображень, справжні заголовки, а не просто жирний текст.
Клавіатурою має бути можливо пройти форму і меню. Фокус видимий, не знятий через естетику «без рамки» і порожню заміну. Відео з автозапуском звуку — окремий вид ворожнечі. Рухомі банери, що не зупиняються, збивають тих, кому важко втримати увагу. Дрібні шрифти в юридичному підвалі не стають неважливими лише тому, що так зручніше верстати.
Мобільна версія досі вміє бути стиснутим десктопом. Кнопки наїжджають. Горизонтальний скрол. Модалка, яку не закрити великим пальцем. Фіксована шапка з’їдає третину екрана. Ховер-ефекти, яких на тачі немає, — і людина не бачить, що елемент живий. Адаптив — не «натягнути контейнер». Це інший пріоритет: спочатку дія, потім прикраси.
Швидкість теж входить у дизайн. Важкий герой-ролик, три сімейства шрифтів, аналітика пачкою — інтерфейс ніби є, але його ще немає. Людина не оцінює паралакс. Вона оцінює, чи встигне оформити квиток, поки не від’їхав вайфай.
Звідки ростуть ці промахи
Дивно звинувачувати тільки виконавця. Більшість прорахунків народжується раніше за макет. Ще до першого прямокутника в Figma вже закладено кривий бриф, чужі слова і звичку погоджувати «красиві картинки», а не шлях людини.
- Немає реального користувача в брифі. Є «аудиторія 25–45, активні».
- Малюють екранами, а не сценарієм. Гарна вітрина, порожня каса.
- Тексти залишають на потім. Потім у кнопки пишуть «Відправити» і «ОК».
- Компоненти плодяться без системи: кожна сторінка — свій інпут.
- Погоджують статичні картинки, а не клікабельний прототип.
- Тестують на команді. Команда вже знає, куди тикати.
Останнє найпідступніше. Ви не можете бути наївним користувачем власного продукту. Мозок добудовує те, чого немає на екрані. Тому «нам і так зрозуміло» не рахується. Невелика якісна вибірка ловить левову частку очевидних проблем: орієнтир близько п’яти людей на ітерацію часто витягує близько 85% таких збоїв, після чого дизайн варто правити і дивитися знову. Для тонкої аналітики цього замало. Для відповіді «куди натискати» — часто досить, щоб перестати гадати.
Ще одна яма — мода. Скло, неоновий градієнт, прихований скрол, кастомний курсор, який лагає. Тренд не є аргументом. Якщо він з’їдає зрозумілість, він поганий для цього екрана. Можна зробити сміливо. Не можна зробити загадково там, де людина віддає гроші або свої дані.
Як перевірити макет, поки не пізно
Окремий відділ досліджень не потрібен, щоб прибрати грубі помилки дизайну. Потрібна звичка дивитися на екран чужими руками. Навіть пів години з телефоном колеги з іншого відділу показує більше, ніж десятий раунд правок «щоб виглядало дорожче».
- Пройдіть головний сценарій на телефоні, однією рукою, у неідеальному світлі.
- Приберіть колір у голові: чи зрозумілі стани без червоного і зеленого?
- Пройдіть форму з клавіатури. Куди дівається фокус?
- Дайте макет людині поза командою і мовчіть. Без «ну ось же, справа вгорі».
- Прочитайте мікротексти вголос. Якщо соромно — перепишіть.
- Перевірте контраст заголовків, абзацу, плейсхолдерів і кнопок, зокрема вимкнених.
- Знайдіть дії, які стоять надто близько: видалити і зберегти, назад і далі, відхилити і підтвердити.
Список навмисно побутовий. Він ловить більшість того, через що потім соромно на продакшені. Теплові карти й серія інтерв’ю потрібні, коли гігієну вже зроблено. Інакше вимірюєте шум.
| Типова помилка | Як проявляється | Що зробити |
|---|---|---|
| Слабкий контраст | Текст видно лише на хорошому моніторі | Довести до 4,5:1, прибрати сірий на сірому |
| Неясні цілі кліку | Не зрозуміло, що кнопка — це кнопка | Підпис, видима ціль, зона 44–48 pt |
| Форма-анкета | Кидають на середині | Прибрати зайве, підписати поля, валідувати вчасно |
| Мовчазний інтерфейс | Повторні кліки, подвійні заявки | Миттєвий відгук і нормальний текст помилки |
| Навігація для своїх | Шукають сайт через Google, навіть будучи на ньому | Мова клієнта, видимий стан «де я» |
| Декор замість ієрархії | Немає однієї головної дії | Один акцент, повітря, другорядне — тихіше |
Порівняння грубе, так і задумано. Більшість продуктів падає не на унікальних проблемах, а на цьому наборі. Якщо закриєте шість рядків таблиці — уже обженете купу «гарних» сайтів, які малювали настрій, а не шлях.
Що робити з уже живим продуктом
Редізайн усього підряд — спокуса і пастка. Ризик замінити старі зрозумілі граблі на нові красиві. Краще зібрати екрани, де люди відвалюються: аналітика, звернення в підтримку, записи сесій. Полагодити фідбек, форми, контраст, кнопки. Потім навігацію. Візуальний ефект — у кінці, коли сценарій уже не скрипить.
Якщо приймаєте роботу підрядника, не питайте «ну як вам, красиво?». Попросіть пройти сценарій на вашому телефоні. Попросіть стани: порожній, завантаження, помилка, успіх, невалідне поле, довгий текст, українська і англійська. Макет щасливого шляху — півпродукту. Інша половина — усе, що пішло не за планом.
Дизайн помиляється завжди. Питання, чи ви це бачите раніше за клієнта. Поставте короткий тест на цьому тижні: три людини, один сценарій, ви з закритим ротом і блокнотом. Список знахідок буде неприємний. Це хороший знак. Значить, нарешті дивитесь не в макет, а в те, як ним користуються.
