Не зря говорится: «Встречают по одежке». Если первое впечатление о человеке создает его внешний вид, то о бизнесе (бренде, компании) – веб-дизайн. Это лицо компании, которое должно привлекать аудиторию и быть проводником к полезному действию. Единого шаблона для него, так как у всех разные понятия об удобстве, красоте и стиле. Поэтому задача веб-дизайнера сделать сайт с удобной навигацией, быстрым в загрузке, адаптивным, передающим ценности, миссию и стиль компании. Для этого ui/ux-дизайнер учитывает ЦА, товары и услуги, сильные и слабые стороны бренда.
Собрали примеры частых ошибок в дизайне коммерческих страниц.
Запутанная навигация
Навигация – часть архитектуры сайта, благодаря которой посетитель путешествует по вложенным страницам и ищет нужную информацию. Она должна быть понятной, чтобы пользователь не тратил время на поиск и мог быстро перейти к нужной странице. Стандартной панелью навигации считается горизонтальная, но есть и другие:
- бургер-меню – чаще встречается в мобильной версии, чтобы сэкономить место. Подходит для вертикального меню.
- мегаменю – большая панель со всеми категориями и подкатегориями. Встречается на сайтах интернет-магазинов.
Ошибки навигации:
- не оформлена страница 404. Никто не застрахован от человеческого фактора. Пользователь ошибся в написании адреса страницы, либо разработчики удалили страницу, но забыли удалить ссылку на нее. Попав на 404, посетитель может решить, что сайт не работает, и уйти. Чтобы не разочаровать его, можно наполнить страницу полезным контентом, развлечь видео, объяснить, что вызвало ошибку.
Так выглядит страница 404, с которой пользователь точно уйдет навсегда
Пример, способный увеличить время на сайте
- меню отсутствует или перегружено. Посетитель заходит на незнакомый сайт и сразу ищет меню, чтобы сориентироваться. Оно не должно быть перегружено. Ставить больше пяти-семи пунктов можно только в крайних случаях, о которых знает опытный веб-дизайнер.
Главная страница, где пункты меню просто разбежались по углам
Навигация говорит сама за себя: пункты меню четкие, их не много и не мало
- нет «хлебных крошек». С их помощью пользователь поймет, на какой он странице.
- нет логотипа. Именно в шапке сайта мы интуитивно ожидаем увидеть логотип. И не просто картинку, а кликабельную ссылку, которая вернет на главную страницу.
Думаете, там нет логотипа, а он есть. Просто тоже красный
То чувство, когда понимаешь где ты и куда можешь перейти
«Спотыкающиеся» блоки
Для первого впечатления о бренде достаточно пары секунд. Человек не успеет вчитаться в каждое слово и разглядеть картинки, но составит мнение о странице в целом. Поэтому важна логика в блоках и правильное отделение их друг от друга. Сайт не будет выглядеть опрятно и логично, если:
- элементы расставлены не по сетке,
- нет разделения на смысловые блоки,
- разные отступы между элементами.
Разные отступы и слишком много пустого пространства
Все по сетке, есть отступы и смысловые блоки
Одинаковые расстояния между блоками выглядят аккуратно: блоки отделены, но лишних пустот нет
Цветовой хаос
Акцентировать стоит действительно важные элементы: заголовок, кнопку призыва. На цвета влияет и цель. Например, сайт для продаж или корпоративный должны быть в разной колористике. Слишком высокая или низкая яркость затрудняет чтение.
Что отталкивает пользователя:
- слишком яркие цвета,
- нет сочетания с фирменным стилем,
- много акцентных оттенков.
Весь сайт сплошная анимация и обилие цветов, от которых голова кругом
Гармоничное сочетание элементов страницы с фирменными цветами
Отсутствие адаптива
Адаптивы для лендинга, корпоративного сайта и интернет-магазина отличаются, так как заточены под разные задачи. Лендинг дает всю информацию о товаре и контактах, сайт собирает клиентов через призывы, магазин – через каталог товаров и оплату. Тяжелые картинки, gif и видео тормозят загрузку. Пользователь не станет ждать и закроет сайт. Сделать просмотр удобным, сохранив всю пользу, способен грамотный UX/UI-дизайнер. А его менее ответственный коллега просто пустит страницу узкой длинной лентой и отдаст проект. О проблеме заказчик узнает только когда трафик упадет до нуля.
Частые ошибки:
- горизонтальная прокрутка не к месту,
- слишком маленькие кликабельные элементы,
- долгая загрузка,
- нечитаемые тексты,
- нет способа возврата на главную страницу (лого или ссылка «Главная»).
Пример, чего стоит избегать: зум создает горизонтальный скролл и усложняет чтение (можно потерять строку)
Адаптивный сайт: все элементы читабельны, дизайнер позаботился о ux/ui, расположив элементы для управления большим пальцем
Сложные формы обратной связи
Цените время пользователя, откажитесь от длинных форм. По данным исследования HubSpot, наибольшую конверсию (50%) приносят формы с 3-4 полями, тогда как 6-7 полей снижают ее до 20%. Пользователи могут потерять интерес и покинуть сайт, если форма сложная. Например, с капчей, где нужно долго думать над решением.
Основные ошибки:
- у форм много полей;
- сложная капча;
- неверно настроенная или не работающая форма.
Лишние элементы
Большое количество мерцающих элементов, из-за которых рябит в глазах, натыканные повсюду баннеры и всплывающие окна. Привлекают или раздражают? Пользователь теряет концентрацию, отвлекается и покидает сайт. Количество отказов растет, и поисковики начинают снижать позиции страницы в выдаче.
Активный анимированный сайт способен привлечь внимание разве что подростка
Сайт выглядит стильно и не перегружен анимацией, хотя она и есть
Проблемы текста
Больше не значит лучше. Никто не станет разбираться с простынями текста. Следуйте правилу: один абзац — одна законченная мысль. И не забывайте о типографике: даже текст лучшего копирайтера не будет эффективным, если опубликовать его одним блоком или слишком мелким шрифтом.
Вот другие ошибки:
- не выделены УТП, преимущества, услуги,
- грамматические, стилистические, смысловые ошибки и опечатки,
- неверное выравнивание,
- внутри текста разные отступы, шрифты и стили,
- текст накладывается на важную часть изображения,
- слишком длинные или непонятные заголовки.
По правилу юзабилити пользователю должно хватить трех секунд, чтобы понять назначение сайта. Рекомендуем использовать не более трех шрифтов.
Наполняя текстом колонки, важно помнить: узкие вытягивают текст, и их неудобно читать, а широкие усложняют чтение, так как можно потерять строку.
Тут сразу несколько ошибок: много текста, все выровнено по центру, нет логического разделения, разные шрифты и цвета
Нет полотна текста, единая концепция шрифтов, цветов и отступов
Неподходящие изображения
Картинки должны быть в высоком качестве, выполненные в едином стиле, подтверждать и демонстрировать написанное.
Не используйте на сайте:
- изображения низкого качества,
- разные соотношения размеров,
- картинки, не соответствующие тематике и цели.
Пример, когда зум работает в минус, а не в плюс. Вдобавок низкое качество картинки
Четкие изображения, правильный акцент – и уже по карточкам ясен ассортимент
Призыв к действию не работает
CTA – главный триггер для целевого действия: позвонить, оставить заявку, купить. Он должен помогать пользователю, но не навязывать.
Основные ошибки:
- незаметен или вовсе отсутствует на странице,
- цвет сливается с фоном или соседними элементами;
- нет текста или неясен призыв.
На этой странице есть призыв, заголовок и навигация, но они скрылись под воду
Кнопка содержит ясный призыв, выделяется среди контента, но вписывается в него
Представление о компании формируется у посетителя с первых секунд на сайте, и дизайн тут играет ключевую роль. Все элементы определяют, продолжит он изучать предложение или уйдет к конкурентам.
Чтобы сайт нравился пользователям и помогал бизнесу, не стоит экономить на веб-дизайне. Команда Web Строителя занимается разработкой сайтов более 10 лет, и за это время мы научились делать не просто красивые, но еще и удобные сайты. Отдельно помогаем в разработке фирменного стиля, который будет сочетаться с продуктом и отражать ценности компании.
Подготовил Тимур Юнусов