Продающий дизайн интернет магазина

В этой статье мы разберем, на каких принципах должен строиться дизайн интернет-магазина и как создавать коммерчески успешные проекты. Конкуренция в e-commerce постоянно растет. Сайты, маркетплейсы, витрины в социальных сетях — продавцы используют все площадки и каналы продвижения. Одна из главных задач при запуске интернет-магазина — выделяться на фоне других. Это можно сделать с помощью продуктовой линейки, маркетинга и дизайна.

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

Принципы дизайна интернет-магазина

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

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

№1. Запросы и привычки целевой аудитории — база для дизайна

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

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

Понятнее становится только в разделе каталога, но не все пользователи дойдут до этой страницы. https://www.jimmynelson.com/

Цель — минимизировать усилия человека при поиске товара в каталоге и оформлении заказа, сделав все функции интуитивно понятными. Для этого нужно:

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

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

№2. Первый этап подготовки — воронка продаж

Цель интернет-магазина — заказы, поэтому дизайн сайта должен стимулировать конверсии. Перед созданием макетов нужно проработать маркетинговую стратегию:

• Какие каналы планируется использовать для привлечения клиентов?
• На какие типы покупок вы ориентируетесь: импульсивные на небольшие суммы или требующие времени на принятия решения?
• В каких ситуациях люди будут заказывать товары: на ходу с телефона, с компьютера на работе или в спокойной обстановке дома?

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

№3. Разработка дизайна по сценариям, а не экранам

Кейс Taras Migulko на Dribbble — https://dribbble.com/shots/19395431-Wine-e-commerce-mobile-app

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

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

№4. Эффективность интернет-магазина определяется на этапе проработки структуры и прототипирования

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

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

Пример детализированного wireframe на Dribbble — https://dribbble.com/shots/17356080-Wirekit-E-commerce

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

№5. В интернет-магазине продает юзабилити

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

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

Проработка элементов интернет-магазина

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

1. Шапка сайта с логотипом и навигационными элементами, например, меню, вход в личный кабинет, корзина. Некоторые компании добавляют сюда поиск, избранное, контакты.

https://www.kokuyocamlin.com/camel/kids

https://www.kokuyocamlin.com/camel/kids

https://www.kokuyocamlin.com/camel/kids

https://www.kokuyocamlin.com/camel/kids

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

Правила оформления каталога

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

Как правильно проработать каталог:

1. Продумайте категоризацию так, чтобы даже новые посетители могли быстро ориентироваться в товарах. Не все используют строку поиска, поскольку хотят посмотреть разные предложения в одной тематике. Задача здесь — помочь им найти нужную группу.

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

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

https://dopegood.com/shop

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

• Описание.
  
• Фотографии продукции.
  
• Характеристики.
  
• Цена.
  
• Кнопка добавления в корзину.

https://dopegood.com/product/616c5439e14d614f48c54004

https://goldapple.ru/11879-9400300009-bb-creme

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

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

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

https://goldapple.ru/checkout

https://thinkseneca.com/

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

Опираясь на правила и примеры из статьи, вы сможете:

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