UI і UX дизайн: у чому різниця і як це впливає на продажі з сайту

UI/UX дизайн простими словами: UX відповідає за те, чи людина доходить до покупки без зусиль, UI за те, як це виглядає і чи зрозуміло, куди натискати. На продажі з сайту впливають обидва, але по-різному: погана UX-логіка ховає кнопку замовлення під третім екраном і додає у форму дванадцять полів, а слабкий UI робить кнопку сірою на сірому фоні, і її не бачать навіть ті, хто дійшов. Нижче розбираємо різницю на прикладах, показуємо, як юзабіліті з'їдає конверсію, і даємо список із 10 пунктів для експрес-аудиту, який власник може пройти сам за годину.

UX і UI: за що відповідає кожен

UX (user experience) означає досвід користувача: шлях від входу на сайт до потрібної дії і те, наскільки цей шлях логічний. UI (user interface) означає інтерфейс: кнопки, поля, кольори, шрифти, відступи, стани при наведенні. UX-дизайнер вирішує, що і в якому порядку показати, UI-дизайнер вирішує, як саме це намалювати. В невеликих командах це одна людина, у великих продуктах дві різні ролі.

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

Як UX-проблеми з'їдають конверсію

Три приклади, які повторюються на кожному другому аудиті.

Форма на 12 полів. Заявка на консультацію просить ім'я, прізвище, по батькові, телефон, email, місто, компанію, посаду, бюджет, зручний час, звідки дізнались і коментар. Половину з цього менеджер і так спитає під час дзвінка. Кожне зайве поле відсіює частину людей, і на мобільному цей ефект сильніший. Робоча форма для першого контакту: ім'я, телефон або месенджер, за потреби одне питання про завдання.

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

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

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

Процес UX-проєктування: дослідження, CJM, прототипи, тести

1. Дослідження. Аналітика (куди заходять, де виходять), записи сесій у Microsoft Clarity або Hotjar, 5-8 інтерв'ю з клієнтами, розмова з менеджерами з продажів про те, що питають найчастіше. Цього вистачає, щоб побачити 80% проблем.
2. CJM. Customer journey map, карта шляху клієнта: етапи від першого пошуку до повторної покупки, з думками, питаннями і бар'єрами на кожному. Показує, чого сайту бракує до і після самої покупки.
3. Структура і сценарії. Карта сторінок і 3-5 ключових сценаріїв: знайти товар, порівняти, замовити, зв'язатись. Кількість кроків у кожному стає вимірюваною.
4. Вайрфрейми і прототип. Чорно-білі схеми екранів без дизайну, зібрані у клікабельний прототип у Figma. На цьому етапі міняти логіку дешево.
5. Юзабіліті-тести. 5 людей із цільової аудиторії виконують завдання на прототипі вголос. За класичним спостереженням Nielsen Norman Group, п'ять учасників виявляють більшість проблем інтерфейсу. Знайдене правиться до того, як з'явиться дизайн.

UI-дизайн: дизайн-система, доступність, контраст

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

Доступність (accessibility) стосується не лише людей з порушеннями зору: контрастний текст читається на сонці з телефона, великі зони кліку рятують у транспорті, підписи до полів допомагають усім. Мінімальний контраст за WCAG для звичайного тексту 4.5:1, для великого 3:1, перевірити можна будь-яким контраст-чекером. Сірий текст на білому фоні, модний останні роки, цю планку часто не проходить.

Візуальна ієрархія: на екрані має бути одна головна дія, і вона має бути найпомітнішою. Дві однакові кнопки «Купити» і «Дізнатись більше» поруч ділять увагу навпіл. Стани елементів (наведення, натискання, неактивний, помилка) промальовуються в дизайн-системі, інакше розробник придумає їх сам.

Експрес-аудит за 10 пунктів

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

1. За 5 секунд на першому екрані зрозуміло, що ви продаєте і кому.
2. Кнопка головної дії видна без прокрутки і повторюється далі по сторінці.
3. Сторінка відкривається до 3 секунд на мобільному інтернеті (перевірити в PageSpeed Insights).
4. У формі першого контакту не більше 3-4 полів, помилки підсвічуються біля поля.
5. Телефон у шапці клікабельний, месенджери відкриваються в один тап.
6. Ціни або хоча б порядок цін видно без реєстрації і дзвінка.
7. У каталозі є пошук, фільтри працюють без перезавантаження і не ламаються на мобільному.
8. Текст читається: контраст достатній, розмір не менше 16px на мобільному, абзаци короткі.
9. Немає елементів, що перекривають контент: спливаючі вікна в перші секунди, чат-віджет поверх кнопки.
10. З будь-якої сторінки зрозуміло, де ви і як повернутись: логотип веде на головну, є хлібні крихти, кнопка «Назад» працює як очікується.

Якщо «ні» набралось три і більше, є сенс у повному аудиті UI/UX дизайну із записами сесій і пріоритезованим списком правок. Окремо про базові правила юзабіліті ми писали у статті про юзабіліті сайту.

Які метрики дивитись власнику

• Конверсія. Частка відвідувачів, які виконали цільову дію: замовлення, заявку, дзвінок. Дивитись окремо для мобільних і десктопу та по джерелах трафіку. Різниця між пристроями в рази майже завжди означає проблеми мобільної версії.
• Глибина перегляду. Скільки сторінок за сеанс. Висока глибина без конверсії часто означає, що люди шукають і не знаходять.
• Відсоток відмов і залучені сеанси. У GA4 замість класичних відмов є engagement rate. Низька залученість на посадкових сторінках із реклами сигналізує, що обіцянка в оголошенні не збігається зі сторінкою.
• Час до дії. Скільки часу минає від входу до кліку по кнопці або відправки форми. Якщо на простому лендінгу це хвилини, шлях занадто довгий.
• Завершення форми. Скільки людей почали заповнювати і скільки відправили. Падіння на конкретному полі видно в записах сесій.
• Кліки в порожнечу. Rage clicks і dead clicks у Clarity: люди натискають на те, що виглядає як кнопка, але нею не є.

Помилки, які повторюються

• Дизайн для власника, а не для клієнта. Головна сторінка розповідає історію компанії, а не відповідає на питання відвідувача.
• Редизайн без даних. Сайт перемальовують, бо «застарів», і переносять старі проблеми в нову обгортку.
• Копіювання конкурента. Його інтерфейс міг бути так само ненавмисним, як і ваш.
• Тестування на собі. Команда знає, де що лежить, і не бачить того, об що спотикається новачок.
• Усе одразу. Десять рівнозначних кнопок і банерів на екрані. Коли важливо все, не важливо нічого.

З чого почати

1. Пройдіть список із 10 пунктів з телефона і запишіть усі «ні».
2. Поставте Microsoft Clarity (безкоштовно) і подивіться 20 записів сесій на ключовій сторінці.
3. Скоротіть форму першого контакту до 3-4 полів і підніміть кнопку дії на перший екран.
4. Перевірте контраст тексту і кнопок, виправте те, що нижче 4.5:1.
5. Порівняйте конверсію мобільних і десктопу за місяць: різниця в рази вказує, з чого починати великі зміни.