Дизайн и продажи: как визуальное оформление помогает в e-commerce

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

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

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

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

Сложный и непонятный дизайн не дает мгновенного понимания, куда попал пользователь.

Чистый, понятный и аккуратный дизайн производит замечательное впечатление и дает понимание, чем занимается данная компания.

«Удобство» – чрезвычайно важный аспект, который должен быть тщательно продуман. Нет смысла запускать веб-сайт, если пользователь не может совершить на нем элементарные взаимодействия. Например, оставить контакты, перейти в раздел или найти строку поиска. Поэтому создавая дизайн, следует помнить о том, что он должен быть не только красивым, но и простым для восприятия и использования.

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

Неадаптивный ресурс – это убийца продаж. Без mobile версии на небольших экранах смартфонов страница отображается некорректно, с содержимым крайне затруднительно взаимодействовать и уж тем более что-либо покупать.

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

Например, компании Apple хорошо известно об этом.   

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

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

Десктопная и мобильная версия.                                                                       

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

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

Правила продающего веб-дизайна

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

Навигация

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

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

• Продумайте структуру как всего сайта, так и отдельных страниц. Когда весь контент будет перед глазами в виде понятной схемы, гораздо проще определить ключевые разделы меню.
• Не перегружайте меню лишними элементами и старайтесь сгруппировать страницы, если это возможно. Например, страницы с сертификатами, портфолио, условиями сотрудничества можно безболезненно объединить в раздел «О компании».
• Учитывайте тематику бизнеса и задачи сайта. Ведь если компания планирует привлекать новых партнеров через ресурс, соответствующий раздел должен быть на видном месте.
• Названия разделов должны быть понятными и короткими. И это как раз тот случай, когда излишний креатив и фантазия могут только навредить.  
• При достаточно объемной структуре меню текстовые названия разделов неплохо сопроводить тематическими иконками. Это поможет пользователю сканировать информацию быстрее и удобнее. Например:

И еще момент. Прорабатывая навигацию, поставьте себя на место пользователя. Спросите себя:

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

Визуальные элементы

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

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

Легкость восприятия контента 

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

Вот хороший пример длинны строки и количества воздуха:

Юзабилити

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

• Размещайте ключевые элементы и информацию в левой части экрана. Большинство пользователей сканируют контент на сайтах так же, как и при чтении книг – слева направо и сверху вниз. Следуя данному правилу, вы повышаете шансы на то, что потенциальный покупатель не пропустит важную информацию.
• Сократите количество бесполезных переходов по страницам, которые ведут к целевому действию (форма заявки/обратный звонок/предложение скачать что-либо). Между пользователем и продажей должно быть не более 3-4 шагов.
• Прячьте второстепенную информацию за всплывающими плашками или скрытым текстом, чтобы не нагромождать дизайн лишними деталями.
• Ссылки на сайте должны быть кликабельными, а кнопки вести к правильным формам. Не поленитесь потратить час-два на то, чтобы пройтись по сайту и убедиться, что все работает корректно.
• Добавьте всплывающее окно с благодарностью, которое должно появляться после заполнения формы заявки пользователем.

Ориентируйтесь в первую очередь на ваших клиентов, их «боли» и желания, ведь только так можно повысить конверсию.

Справедливости ради стоит сказать, что веб-дизайн – это не панацея. Он не спасет плохой продукт и не решит внутренние проблемы компании.

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