8 частих помилок у дизайні сайту, які вбивають конверсію та продажі

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

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

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

В основі гарного дизайну лежить маркетингове завдання. “Дизайн – це не про те, як виглядають речі, а про те, як вони працюють”, – визрівав корінь Стів Джобс.

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

За досвідом, усунення однієї дизайнерської помилки призводить до зростання конверсії в середньому на 0,5%. Список недоліків у дизайні сайтів легко довести до сотні та більше. Виправлення помилок, що вбивають конверсію, веде до помітного зростання прибутку.

Обмежимося розбором восьми типових недоліків у дизайні сайтів. Найкраще не допускати цих помилок вже на етапі проектування ресурсу.

1. Візуальна перевантаженість і відволікаючі фактори

У випадку з дизайном менше означає краще, а вільний простір – найкращий друг користувача. Не випадково вільне місце на друкованій смузі та на екрані називають «повітря».

Усуньте відволікаючі фактори та непотрібні елементи зі сторінок, в першу чергу, з головної та ключових посадкових.

Коли замість концентрованої інформації на тему, що шукається, користувач бачить масиви контенту з розкиданими по ньому віджетами, інтерактивними елементами та анімацією, людина, якщо і клацнути на який-небудь Call To Action, то з чистої випадковості, в спробах піти швидше геть. А це навряд чи те, на що ви розраховуєте.

Можливо, місиво контенту на знімок з екрана нижче це така естетика. Але вона не в трендах сучасного вебдизайну.

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

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

Дотримуйтесь ієрархії візуальних елементів у макеті – зображень, заголовків, текстових блоків, кнопок CTA. Дизайнери вдаються до простого прийому: намагаються уявити, як рухатиметься око глядача, яке вперше побачило макет. Важливі повідомлення та CTA не повинні губитися.

2. Проблеми з читабельністю та «скануванням» контенту

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

Веб-друкарка, тобто верстка тексту на екрані комп’ютера і гаджета, успадковує дві традиції. Багатовіковій традиції друкарства, газетної та журнальної верстки. І майже тридцятирічної традиції представлення тексту на екранах персональних пристроїв.

Принципи газетно-журнальних версток продовжують працювати на екранах:

• Застосовуйте на сайті не більше двох-трьох шрифтів (font). Один для заголовків, інший для тексту, третій для службових написів дрібним кеглем, хоч без третього шрифту можна обійтися.
• Використовуйте кілька шрифтів, які поєднуються. В інтернеті можна знайти багато готових пар, наприклад, Roboto Slab та Open Sans, Raleway та Roboto, Lora та Source Sans Pro.
• Якщо заголовок даєте шрифтом із засічками, то в тексті використовуйте шрифт без засічок і навпаки.
• Дотримуйтесь рівноваги між шириною колонки, кеглем (розміром знаків, font size), інтерліньяжем (міжрядковою відстанню), відступами.
• Використовуйте вирівнювання по лівому краю. Центрування тексту – лише для коротких фрагментів тексту.
• Дотримуйтесь контрасту між кольором шрифту та фоном. Найкраще поєднання – темний шрифт на білому тлі.

Комп’ютерна епоха змінила спосіб сприйняття тексту. Як правило, на екрані люди не читають тексту, а сканують його поглядом, зачіпляючись за візуальні акценти.

З огляду на це:

• Розбивайте текст на короткі абзаци. Одна думка – один абзац.
• Розбивайте текст на розділ, використовуйте підзаголовки.
• Використовуйте списки переліку.
• Застосовуйте врізання (плашки) для акцентування важливих фактів, цитат.
• Форматуйте текст. Використовуйте виділення жирним, курсивом. Але не переборщуйте, не робіть текст строкатим.
• Розбивайте лонґріди ілюстраціями, відео.

3. Проблеми з адаптацією під мобільні

У разі необхідності адаптивного дизайну сайтів нікого не потрібно переконувати. Телефон стає, а для багатьох вже став головним джерелом інформації та головним засобом комунікації людей.

Але далеко не завжди адаптивність веб-ресурсів під різні екрани реалізована добре. Помилки відображення сайтів на мобільних пристроях можуть значно знизити конверсію.

Найчастіше трапляються проблеми:

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

Будь-який із перерахованих пунктів може негативно вплинути на конверсію, але часто для власника сайту це зовсім не очевидно.

4. Малоінформативний перший екран

Більшість користувачів не прокручуватиме сторінку вниз, якщо не побачить цінної для себе інформації на першому екрані. Люди не люблять прокручування. Згідно з дослідженнями, 80% користувачів не дивитимуться, що там під катом.

Якщо розташувати важливу інформацію та заклики до дії не на першому екрані, а нижче, швидше за все, ви отримаєте поганий коефіцієнт конверсії.

5. «Втрачені» заклики до дії (CTA)

Будь-який бізнес-сайт є певною метою. Мало хто з відвідувачів вчинить цільову дію, якщо її про це не попросити. Заклики до дії є найважливішими елементами комерційного ресурсу. Якщо CTA невиразні, непомітні, а то й зовсім відсутні, ви багато втрачаєте в плані конверсії.

Коли сторінка займає кілька екранів, корисно повторити CTA кілька разів, зрозуміло, не дратуючи відвідувачів.

6. Погані зображення

Використання шаблонних зображень із фотостоків, зображень низької якості та таких, що мало релевантні текстовому контенту, може принести більше шкоди, ніж користі. Зображення нестандартних форматів та неоптимізовані для швидкого завантаження шкодять юзабіліті та знижують конверсію.

Поділяють підбір зображень для сайту та їх обробку.

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

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

Головне в обробці фото – їхнє полегшення перед розміщенням на веб-сторінці. Сьогодні зменшити вагу зображення можна не лише у Photoshop, але й за допомогою низки онлайн-інструментів, які легко перебувають у Мережі.

7. Навігація, що дезорієнтує

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

8. Сайт виглядає застарілим

Нікому не сподобається сайт, який виглядає так, ніби не оновлювався 5-7 років. Подібний привіт з минулого залишає відчуття, що компанія не встигає за часом і працює по-старому. Або ще гірше, користувачі подумають, що компанія давно закрилася, просто домен і хостинг були оплачені із запасом.

Сказане не означає, що вам потрібно поспішати за трендами та змінювати дизайн сайту щороку. Але слідкувати за актуальністю ресурсу, змінювати або серйозно оновлювати проект кожні 3-4 роки — це практика з гарних розряду, яких варто було б дотримуватися. Інакше найближчі конкуренти швидко виявляться попереду вас.

Підсумки

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

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

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