8 частых ошибок в дизайне сайта, которые убивают конверсию и продажи

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

Такая реакция — крайность, откровенно плохой дизайн встречается редко. Теперь большинство посадочных страниц производит приятное впечатление. Однако приятная на вид страница не значит — эффективная.

В основе хорошего дизайна лежит маркетинговая задача. «Дизайн — это не про то, как выглядят вещи, а про то, как они работают», — зрел в корень Стив Джобс. 

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

По опыту, устранение одной дизайнерской ошибки приводит к росту конверсии, в среднем, на 0,5%. Список недочетов в дизайне сайтов легко довести до сотни и более. Исправление ошибок, которые убивают конверсию, ведет к заметному росту  прибыли.

Ограничимся разбором восьми типичных недостатков в дизайне сайтов. Лучше всего не допускать эти ошибки уже на этапе проектирования ресурса.

1. Визуальная перегруженность и отвлекающие факторы

В случае с дизайном меньше значит лучше, а свободное пространство — лучший друг пользователя. Не случайно свободное место на печатной полосе и на экране называют «воздух».

Устраните отвлекающие факторы и ненужные элементы со страниц, в первую очередь, с главной и ключевых посадочных. 

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

Быть может, месиво контента на скриншоте ниже — это такая эстетика. Но она явно не в трендах современного веб-дизайна.

Избегайте беспорядка, путаницы, нагромождения блоков. У вас есть всего несколько секунд, чтобы объяснить посетителю, где он оказался и что ему здесь предлагают. Страницы должны быть информативными, но не перегруженными.

Разработайте модульную сетку (grid) или ограниченное  количество модульных сеток для сайта. Сверстайте шаблоны страниц по этим сеткам. Это придаст сайту единообразие, облегчит посетителям восприятие контента.

Соблюдайте иерархию визуальных элементов в макете — изображений, заголовков, текстовых блоков, кнопок CTA. Дизайнеры прибегают к простому приему: пытаются представить, как будет двигаться глаз зрителя, который впервые увидел макет. Важные сообщения и CTA не должны теряться.

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

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

Веб-типографика, то есть верстка текста на экране компьютера и гаджета, наследует двум традициям. Многовековой традиции книгопечатания, газетной и журнальной верстки. И почти тридцатилетней традиции представления текста на экранах персональных устройств.

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

• Применяйте на сайте не более двух-трех шрифтов (font). Один для заголовков, другой для текста, третий для служебных надписей мелким кеглем, хотя без третьего шрифта можно обойтись.
• Применяйте пары шрифтов, которые сочетаются. В интернете можно найти много готовых пар, например, Roboto Slab и Open Sans, Raleway и Roboto, Lora и Source Sans Pro.
• Если заголовок даете шрифтом с засечками, то в тексте используйте шрифт без засечек, и наоборот.
• Соблюдайте равновесие между шириной колонки, кеглем (размером знаков, font size), интерлиньяжем (межстрочным расстоянием), отступами
• Используйте выравнивание по левому краю. Центрирование текста — только для коротких фрагментов текста.
• Соблюдайте контраст между цветом шрифта и фоном. Лучшее сочетание — темный шрифт на белом фоне.

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

С учетом этого:

• Разбивайте текст на короткие абзацы. Одна мысль — один абзац.
• Разбивайте текст на главы, используйте подзаголовки.
• Применяйте списки перечисления.
• Применяйте врезки (плашки) для акцентирования важных фактов, цитат.
• Форматируйте текст. Используйте выделения полужирным, курсивом. Но не перебарщивайте, не делайте текст пестрым.
• Разбивайте лонгриды иллюстрациями, видео.

В примере ниже, который взят из мануала конструктора сайтов Tilda, показано, как верстка преображает нечитаемый «кирпич» текста.

3. Проблемы с адаптацией под мобильные

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

Но далеко не всегда адаптивность веб-ресурсов под разные экраны реализована хорошо. Ошибки в отображении сайтов на мобильных устройствах могут ощутимо снизить конверсию.

В большинстве случаев встречаются проблемы:

• Не все элементы страницы адаптированы под размеры экрана телефона. Например, ширина фото задана в пикселях, а не в процентах. В итоге фото не помещается в ширину экрана, появляется горизонтальная прокрутка.
• Элементы дизайна, которые на десктопе смотрелись хорошо, на экране телефона становятся слишком мелкими.
• Дизайн хорошо отображается только на определенных устройствах.
• Сайт быстро работает на десктопах, но медленно на мобильных устройствах.
• Недостаточно оптимизирована архитектура сайта.

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

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

Большая часть пользователей не станет прокручивать страницу вниз, если не увидит ценной для себя информации на первом экране. Люди не любят прокрутку. Согласно исследованиям, 80% пользователей не будут смотреть, что там «под катом».

Если расположить важную информацию и призывы к действию не на первом экране, а ниже, скорее всего, вы получите плохой коэффициент конверсии.

5. «Потерянные» призывы к действию (CTA)

Любой бизнес-сайт служит определенной цели. Мало кто из посетителей совершит целевое действие, если его об этом не попросить. Призывы к действию являются важными элементами коммерческого ресурса. Если CTA невнятые, незаметные, а то и вовсе отсутствуют, вы многое теряете в плане конверсии.

Когда страница занимает несколько экранов, полезно повторить на ней CTA несколько раз, разумеется, не раздражая посетителей.

6. Плохие изображения

Использование шаблонных изображений с фотостоков, изображений низкого качества и таких, которые мало релевантны текстовому контенту, может принести больше вреда, чем пользы. Изображения нестандартных форматов и неоптимизированные для быстрой загрузки вредят юзабилити и снижают конверсию.

Разделяют подбор изображений для сайта и их обработку.

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

Когда обойтись без фото из стока невозможно, вписывайте его в дизайн сайта, делайте «своим».

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

7. Навигация, которая дезориентирует

Простота и удобство навигации на сайте является неотъемлемыми элементами хорошего юзабилити. Если людям сложно разобраться в запутанной и нелогичной навигации, они просто уйдут. Чем легче посетителям сайта найти искомое — товар, услугу, информацию — тем больше посетителей конвертируется в клиентов.

8. Сайт выглядит явно устаревшим 

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

Сказанное не значит, что вам нужно спешить за трендами и менять дизайн сайта каждый год. Но следить за актуальностью ресурса, менять или серьезно обновлять проект каждые 3-4 года — это практика из разряда хороших, которых стоило бы придерживаться. Иначе ближайшие конкуренты быстро окажутся впереди вас.

Итоги

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

Избегайте перечисленных выше ошибок, и вы сможете создать сайт, который не только красив, но и генерирует максимальную отдачу от вложенных в него средств и усилий.

Каждый, кто сталкивался с веб-дизайном, имеет свое мнение, что такое хорошо и что плохо в дизайне сайтов. Расскажите в комментариях о вашем опыте!