UX/UI дизайн, який продає: 9 правил для сайту послуг

Гарний сайт і сайт, що продає, — не завжди одне й те саме. Різниця в тому, чи проведе дизайн людину від першого екрана до кнопки «Залишити заявку». Нижче — дев'ять правил UX/UI дизайну, які ми застосовуємо на кожному проєкті, і які легко перевірити на вашому сайті просто зараз.

1. Перший екран відповідає на три питання

Що це, для кого і що робити далі. Якщо людина за п'ять секунд не зрозуміла, куди потрапила, — вона вже не читає решту. Заголовок має говорити мовою вигоди, а не описувати компанію: не «Ми на ринку з 2008 року», а «Юридичний захист, якому довіряють».

2. Одна головна дія на екран

Дві однаково яскраві кнопки поруч — це відсутність вибору, а не свобода. Головна дія має бути одна й візуально сильніша: контрастний колір, більший розмір. Другорядна — поруч, але тихіше (наш стиль: червона кнопка + прозора з обведенням).

3. Мобільний макет малюємо першим

Більшість відвідувачів приходить із телефона. Якщо дизайн народжується на десктопі, мобільна версія завжди виходить «стиснутою». Ми починаємо з екрана 390 пікселів: там видно, що справді важливо, а що — прикраса.

4. Розміри дотику — не менші за 44 пікселі

Кнопки, пункти меню, поля форми мають бути завбільшки з подушечку пальця. Це не естетика, а фізика: дрібні елементи дають промахи, промахи — роздратування, роздратування — закриту вкладку.

5. Контраст і читабельність

Сірий текст на світло-сірому фоні виглядає «стильно» рівно до моменту, коли його треба прочитати при денному світлі. Тримайте контраст тексту до фону не нижче за співвідношення 4,5:1, основний кегль — від 16 пікселів, довжину рядка — 50–75 символів.

6. Ієрархія замість рівномірності

Коли все однаково важливе — не важливе нічого. Робочий прийом: у кожному блоці має бути один головний елемент (заголовок), один підтримувальний (опис) і одна дія. Розмір, колір і повітря навколо показують, що читати першим.

7. Форма — найкоротша з можливих

Кожне поле у формі зменшує кількість заявок. Залиште те, без чого менеджер не може передзвонити: ім'я, контакт, суть задачі. Бюджет і терміни зручніше давати варіантами-чипами, а не текстом. Обов'язково покажіть, що буде після натискання кнопки — «Відповімо протягом години».

8. Стани — це частина дизайну

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

9. Швидкість — теж дизайн

Найкрасивіший макет програє, якщо він вантажиться чотири секунди. Важкі шрифти, відео на першому екрані, гігантські картинки — усе це дизайнерські рішення з технічними наслідками. Ми тримаємо 90+ у PageSpeed на мобільному і рахуємо це частиною роботи дизайнера, а не тільки розробника.

Як ми працюємо над дизайном

1. Бриф і референси. Дивимось на конкурентів і на те, що подобається вам — та розуміємо, чому.
2. Структура. Список екранів і блоків: що за чим іде і навіщо.
3. Прототип. Сіра схема без кольору — на ній видно логіку, а не смаки.
4. UI-макети. Десктоп і мобільний, усі стани, типографіка, іконки.
5. Передача в розробку. Дизайн-система: кольори, відступи, компоненти — щоб сайт було легко розвивати.

Окремо про UX/UI ми пишемо на сторінці послуг, а подивитись результат можна в портфоліо: MOON — інтерфейс кіберспортивного хабу з турнірними сітками, «Тижневик» — веб-застосунок з drag & drop і темною темою.

Питання й відповіді