Дизайн, який продає: чому все починається не з красивої картинки, а з логіки екранів

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

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

Що взагалі означає «дизайн продає»

Продає не картинка. Продає послідовність, у якій знімаються заперечення. Людина заходить із питанням «чи ви мені підходите» і йде або з відповіддю, або без неї.

Практичний критерій простий: якщо після перегляду сторінки відвідувач не може своїми словами сказати, що ви робите, кому це потрібно і що робити далі – дизайн не працює, якою б гарною не була анімація.

Логіка першого екрана

На перший екран припадає найбільша частка відмов. У розпорядженні приблизно п’ять секунд, і за них треба закрити три питання:

• Куди я потрапив. Що це за компанія і чим вона займається, без метафор і слоганів.
• Чи це для мене. Ознака аудиторії: галузь, масштаб, тип завдання.
• Що робити далі. Одна очевидна дія, а не п’ять рівнозначних кнопок.

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

Порядок блоків, який працює

Порядок не випадковий. Він повторює послідовність питань у голові людини, яка обирає підрядника.

Блоки можна міняти місцями під конкретний бізнес, але жоден не можна викинути безкарно. Найчастіше викидають ціну й процес – і саме вони найсильніше впливають на конверсію в B2B.

Один екран – одна дія

Коли на екрані три однаково яскраві кнопки, людина не обирає жодну. Це не про лінь, а про те, що вибір вимагає зусиль, а зусилля витрачати не хочеться.

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

Чому «красиво» іноді заважає

Кілька прийомів, які виглядають ефектно в портфоліо і псують результат на реальному сайті:

• Тонкий світлий шрифт на фото. Виглядає дорого, не читається на сонці й на дешевому екрані.
• Анімація появи кожного блока. При швидкому скролі людина бачить порожні місця замість контенту.
• Кнопка без заливки. Часто не сприймається як кнопка взагалі.
• Нестандартні іконки замість підписів. Здогадатися, що означає значок, вдається не всім.
• Повноекранне відео на першому екрані. Забирає секунди завантаження на етапі, де вони найдорожчі.

Жоден із цих прийомів не поганий сам собою. Погано, коли їх обирають заради вигляду, не перевіривши, як вони поводяться з реальним контентом і на реальних пристроях.

Що перевірити до того, як малювати

Ці питання економлять тижні переробок:

• Який найдовший заголовок може бути в цьому блоці? А найкоротший?
• Що показувати, якщо кейсів поки два, а сітка розрахована на шість?
• Як блок виглядає без картинки, якщо її не завантажили?
• Що бачить людина, коли форма відправлена, і що – коли сталася помилка?
• Як цей екран виглядає на телефоні шириною 360 пікселів?

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

Не за відчуттями, а за трьома перевірками:

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

Красива картинка – це наслідок, а не мета. Спочатку логіка екранів і послідовність відповідей на питання клієнта, потім типографіка, колір і деталі. У такому порядку сайт і виглядає добре, і приносить заявки. У зворотному – зазвичай тільки перше.