Веб-сайт — это «обложка» вашего бизнеса, то, благодаря чему у клиента складывается первое впечатление. Рассмотрим типичные ошибки оформления страницы, которые отталкивают посетителей и тормозят конверсию.
1. Отсутствие акцентных смысловых точек
Графические элементы сайта должны помочь пользователю быстро сориентироваться. Интуитивно понятный дизайн и выделенные смысловые блоки позволят посетителю задержаться на нем подольше. В противном случае, каким бы ни был ценным контент, а продукция — уникальной, усилия будут потрачены впустую.
Приведем пример качественно сделанной страницы, которая проста для понимания, обладает выверенной структурой. Акценты здесь — иллюстрации, социальное доказательство в виде крупного сообщества пользователей продукта, призыв к действию. Выделить ключевые точки привлечения внимания позволяет органичное сочетание контрастов.
Ошибку с отсутствием акцентов иногда повторяют при создании лендингов, когда отдельные тематические блоки сливаются визуально друг с другом. Если графически разделить их, пользователю намного проще будет понять, как добраться до нужной информации. Этого можно достичь с помощью увеличения отступов, выделения цветом и так далее. Ниже — удачный пример.
2. Злоупотребление моушн-дизайном
Динамичная анимация может стать достоинством сайта, а может испортить о нем впечатление. Здесь следует соблюдать золотую середину и не перенасытить страницу количеством gif-картинок и другими видеоэлементами. Избыток анимированных объектов отвлекает пользователя от цели визита.
Слишком активное использование моушн-дизайна и gif-анимации не решает бизнес-задачи, так как они выполняют декоративную функцию, не побуждая к продажам. Кроме того, сайт должен быть удобным для пользователей, которые заходят с любого устройства и при любом качестве связи. А большое количество движущихся элементов тормозит работу страницы.
Такую ошибку часто допускают начинающие дизайнеры, которым хочется проявить креативность и сделать визуал красочным. Важно помнить, что любое творчество в контексте бизнес-задач должно быть уместным. Следует проанализировать предложения конкурентов и выявить, что у них работает, а что — нет.
3. Неудачное цветовое оформление
Основным профессиональным качеством дизайнера является насмотренность, поэтому развивать чувство прекрасного и следить за трендами графического дизайна необходимо постоянно. Знание колористики и понимание психологии цвета — важные компетенции.
Ниже — хороший пример сочетания, при котором призыв к действию выделен достаточно четко, при этом гамма выглядит единообразной в блоке, в котором размещены работы студии.
Пользователей раздражает кричащее сочетание цветов, яркие элементы навигации на нейтральном фоне, а также большое количество оттенков на одной картинке. В таком случае посетитель не понимает, на что обращать внимание, как строится смысловая иерархия страницы. Не забывайте, что в первую очередь цвет — эффективный инструмент, подчеркивающий важное.
Кроме того, обращайте внимание, чтобы акценты были расставлены грамотно. Так, не следует выделять заголовок слишком узким цветовым блоком. Заголовок и так заметен благодаря размеру шрифта и так далее. Лучше применить один цвет для всего смыслового фрагмента, обособляя его от других.
4. Устаревший дизайн
Проводить ребрендинг и обновлять структуру и оформление необходимо хотя бы для внимания поисковых систем. Если у посетителя возникает ощущение, что сайтом давно не занимались (даже если это не соответствует реальности), он не заинтересуется и самим товаром. Чем активнее обновляется контент сайта, тем выше потребительская лояльность. Клиентам важно знать, что бренд развивается, идет в ногу со временем.
Это касается и других пунктов — современные карточки товаров, активная лента новостей, свежие публикации в блоге компании, актуальные акции. Ваша аудитория может не следить за новыми тенденциями в дизайне, но интуитивно почувствует заботу, если вы сделаете качественный веб-продукт.
5. Сокрытие важной информации
Иногда дизайнеры увлекаются оформлением и забывают о том, что сайт должен в первую очередь решать бизнес-задачи, а именно — предоставлять информацию о продукции и побуждать к ее приобретению. Для этого необходима четкая навигация и простота доступа к контенту. Так до недавнего времени выглядела главная страница сайта культового винтажного шампанского Дом Периньон.
Видим, что акценты расставлены на личности Ленни Кравица, который является лицом марки. При этом до блока о самой продукции необходимо было еще добраться, как и до формы с подтверждением возраста и местом проживания. Это затрудняет путь к информации и в большинстве случаев останавливает потребителя. Особенно если продукция не так премиальна и уникальна, как Дом Периньон.
Есть и другие ошибки, которые скрывают нужное от потенциального клиента:
• не расставленные в крупном текстовом блоке смысловые акценты;
• слишком большим количеством информации на главной странице;
• отсутствие кнопок действия, элементов навигации.
6. Нецелесообразное расположение карточек товара
Разместить акционные или популярные товары на главной странице — частое и понятное решение, которое сразу же подталкивает пользователя перейти в каталог. Но иногда дизайнеры перегружают страницу карточками товаров, что сбивает с толку. Цель — продемонстрировать клиенту разнообразие продукции, но результат обратный: слишком большой выбор отпугивает.
Обращайте внимание, чтобы у пользователя не разбегались глаза от количества товаров. Группируйте их по категориям и работайте над доступной, простой и грамотной навигацией, которая повышает конверсию. Ориентируйтесь на крупные и успешные маркетплейсы, которые демонстрируют пример грамотной организации пространства главной страницы. Например, гигант рынка — ozon.ru.
7. Неправильный размер отступов
Единое расстояние между смысловыми блоками страницы — важное условие для восприятия информации. В веб-дизайне не бывает мелочей, поэтому соблюдайте равноудаленность тематических блоков друг от друга. В противном случае складывается впечатление, что они имеют разную значимость. Кроме того, страницы выглядят неряшливо.
Следующая ошибка связана с незнанием основ композиции. На странице должно быть достаточно свободного пространства. Не делайте слишком маленькие отступы. Нужное количество «воздуха» повышает комфорт пользователя, он проводит на сайте больше времени. Если блоки слишком близко друг к другу, то создается впечатление, что все это — один большой текст.
Для начинающих специалистов разработаны профессиональные инструменты, которые основаны на принципе золотого сечения. Это позволяет грамотно и визуально привлекательно расставить блоки на нужном расстоянии друг от друга так, чтобы их значимость была интуитивно понятна.
8. Стилевой диссонанс
Стремитесь к стилевому единообразию на всех уровнях оформления сайта — типографика, цветовая гамма, иллюстрации. В противном случае возникают вопросы к значимости различных элементов, а страница в целом выглядит неаккуратно, что подрывает доверие потребителей.
Например, на картинке ниже — удачный пример сочетания элементов фирменного стиля компании. Белый и зеленый цвета акцентируют основные этапы конверсии, свободное пространство позволяет выделять ключевой посыл и позиционирование бренда.
Графика на сайте — такой же элемент брендирования, как и логотип, мерч, упаковка и многое другое. Необходимо выстраивать эффективную коммуникацию с клиентом через создание нужных эмоциональных связей, правильную тональность, повышение симпатии к бренду. Не стоит ассоциироваться у клиентов с безвкусным и «дешевым» оформлением.
9. Ошибки в построении навигации
Частая ошибка — перегруженность меню. Дизайн становится слишком массивным, ценность предложения для аудитории падает. В меню должно быть просто ориентироваться, не нужно с самого начала предлагать избыток информации, в которой придется разбираться. В текущих реалиях у посетителя сайта нет такого количества времени.
Другая ошибка — неочевидная логика расположения блоков. Если пункты меню расставлены хаотично, то покупатель просто не дойдет до каталога. Также иногда допускают путаницу с кнопками призыва к действию и их текстом. Последнее может быть связано с тем, что у дизайнера и маркетолога нет понимания, какую цель преследует сайт — продать, собрать данные, подписать на рассылку и так далее.
Используйте модель AIDA для понимания логики передвижения ЦА по сайту. Исходя из этого должна быть выстроена структура страницы. Располагайте блоки так, чтобы поэтапно подвести к решению о покупке. Выделяйте кнопки призыва к действию. Размещайте в меню только важную информацию, чтобы экономить время аудитории сайта.
10. Неудачный подбор фотографий
Качественные, подходящие по стилю и тематике фотографии — неотъемлемый элемент хорошего сайта, который будет продавать. В первую очередь обращайте внимание, чтобы текст был читаем на фоне иллюстрации. В этом поможет грамотное сочетание нужного шрифта и изображения, наложение на картинку фильтра и другие инструменты.
Не закрывайте текстом важные детали. На примере видно, что информацию становится тяжелее прочесть, а саму картинку невозможно комфортно рассмотреть. Если вы ставите и фотографию, и текст, каждый элемент должен иметь значение и восприниматься пользователем.
Еще одна ошибка — публикация некачественных фотографий или снимков со стока, которые не подвергаются никакой обработке. Покупатель непроизвольно задумывается о том, что бизнес не может позволить себе профессиональную фотосессию продукции, а значит, ему доверять не стоит. Или же товаров не существует в принципе, раз все картинки скачаны из интернета.
Если вы все же используете стоковые изображения — не поленитесь обработать их, добавить элементы брендированного стиля, вписать картинку в общий дизайн сайта. Это сохраняет стилевое единообразие, само предложение становится более ценным, а бренд запоминается аудитории. Фотография может стать мощным маркетинговым инструментом, который сам по себе, воздействуя на органы чувств, побуждает к покупке. Как на примере ниже.
11. Низкая читаемость текста
Если текста на странице слишком много или он неправильно «упакован», его не дочитают, даже если трудился прекрасный копирайтер. Это касается оформления как статей, так и других страниц сайта. Не бойтесь избавляться от лишней информации, оставляйте только ценное и нужное для потребителя — смотрите его глазами на дизайн.
Избыточное количество текста в колонках перегружает дизайн, стремитесь к лаконичности и емкости. Также избегайте длинного сплошного текста, он читается очень сложно. Разбавляйте цитатами, фактами, врезками и другими элементами, ставьте подзаголовки.
При этом помните о важности свободного пространства между составляющими: делайте большие и одинаковые отступы. Между подписью и иллюстрацией, подзаголовком и абзацем, ключевой фразой и основным текстом и другими элементами должно быть достаточное расстояние.
Можно привести сотни примеров красивых и стильных сайтов, но при этом десятки из них действительно продают. Поэтому при разработке нужны аналитические способности и умение взглянуть на результат критически со стороны клиента. В таком случае дизайн станет мощным инструментом повышения прибыли.