9 ошибок в дизайне сайта, из-за которых пользователи уходят к конкурентам

Не зря говорится: «Встречают по одежке». Если первое впечатление о человеке создает его внешний вид, то о бизнесе (бренде, компании) – веб-дизайн. Это лицо компании, которое должно привлекать аудиторию и быть проводником к полезному действию. Единого шаблона для него, так как у всех разные понятия об удобстве, красоте и стиле. Поэтому задача веб-дизайнера сделать сайт с удобной навигацией, быстрым в загрузке, адаптивным, передающим ценности, миссию и стиль компании. Для этого ui/ux-дизайнер учитывает ЦА, товары и услуги, сильные и слабые стороны бренда.

Собрали примеры частых ошибок в дизайне коммерческих страниц.

Запутанная навигация

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

• бургер-меню – чаще встречается в мобильной версии, чтобы сэкономить место. Подходит для вертикального меню.
• мегаменю – большая панель со всеми категориями и подкатегориями. Встречается на сайтах интернет-магазинов.

Ошибки навигации:

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

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

• нет «хлебных крошек» С их помощью пользователь поймет, на какой он странице.
• нет логотипа Именно в шапке сайта мы интуитивно ожидаем увидеть логотип. И не просто картинку, а кликабельную ссылку, которая вернет на главную страницу.

«Спотыкающиеся» блоки

Для первого впечатления о бренде достаточно пары секунд. Человек не успеет вчитаться в каждое слово и разглядеть картинки, но составит мнение о странице в целом. Поэтому важна логика в блоках и правильное отделение их друг от друга. Сайт не будет выглядеть опрятно и логично, если:

• элементы расставлены не по сетке,
• нет разделения на смысловые блоки,
• разные отступы между элементами.

Разные отступы и слишком много пустого пространства

Цветовой хаос

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

Что отталкивает пользователя:

• слишком яркие цвета,
• нет сочетания с фирменным стилем,
• много акцентных оттенков.

Отсутствие адаптива

Адаптивы для лендинга, корпоративного сайта и интернет-магазина отличаются, так как заточены под разные задачи. Лендинг дает всю информацию о товаре и контактах, сайт собирает клиентов через призывы, магазин – через каталог товаров и оплату. Тяжелые картинки, gif и видео тормозят загрузку. Пользователь не станет ждать и закроет сайт. Сделать просмотр удобным, сохранив всю пользу, способен грамотный UX/UI-дизайнер. А его менее ответственный коллега просто пустит страницу узкой длинной лентой и отдаст проект. О проблеме заказчик узнает только когда трафик упадет до нуля.

Частые ошибки:

• горизонтальная прокрутка не к месту,
• слишком маленькие кликабельные элементы,
• долгая загрузка,
• нечитаемые тексты,
• нет способа возврата на главную страницу (лого или ссылка «Главная»).

Сложные формы обратной связи

Цените время пользователя, откажитесь от длинных форм. По данным исследования HubSpot, наибольшую конверсию (50%) приносят формы с 3-4 полями, тогда как 6-7 полей снижают ее до 20%. Пользователи могут потерять интерес и покинуть сайт, если форма сложная. Например, с капчей, где нужно долго думать над решением.

Основные ошибки:

• у форм много полей;
• сложная капча;
• неверно настроенная или не работающая форма.

Лишние элементы

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

Проблемы текста

Больше не значит лучше. Никто не станет разбираться с простынями текста. Следуйте правилу: один абзац — одна законченная мысль. И не забывайте о типографике: даже текст лучшего копирайтера не будет эффективным, если опубликовать его одним блоком или слишком мелким шрифтом.

Вот другие ошибки:

• не выделены УТП, преимущества, услуги,
• грамматические, стилистические, смысловые ошибки и опечатки,
• неверное выравнивание,
• внутри текста разные отступы, шрифты и стили,
• текст накладывается на важную часть изображения,
• слишком длинные или непонятные заголовки.

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

Неподходящие изображения

Картинки должны быть в высоком качестве, выполненные в едином стиле, подтверждать и демонстрировать написанное.

Не используйте на сайте:

• изображения низкого качества,
• разные соотношения размеров,
• картинки, не соответствующие тематике и цели.

Призыв к действию не работает

CTA – главный триггер для целевого действия: позвонить, оставить заявку, купить. Он должен помогать пользователю, но не навязывать.

Основные ошибки:

• незаметен или вовсе отсутствует на странице,
• цвет сливается с фоном или соседними элементами;
• нет текста или неясен призыв.

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

Чтобы сайт нравился пользователям и помогал бизнесу, не стоит экономить на веб-дизайне. Команда Web Строителя занимается разработкой сайтов более 10 лет, и за это время мы научились делать не просто красивые, но еще и удобные сайты. Отдельно помогаем в разработке фирменного стиля, который будет сочетаться с продуктом и отражать ценности компании.

Подготовил Тимур Юнусов