Правила юзабилити

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

Почитать позже

В этой статье мы разберем, на каких принципах должен строиться дизайн интернет-магазина и как создавать коммерчески успешные проекты. Конкуренция в 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. В интернет-магазине продает юзабилити

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

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

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

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

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


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

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



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

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



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

4. Футер: он может быть объемным — включать в себя всю карту сайта, или коротким, с иконками соцсетей и контактной информацией.



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

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

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

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

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

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

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

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


    https://dopegood.com/shop

Карточка товара, которая конвертирует

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

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

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

 https://phyll.com/products/greenfest

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

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


Корзина: как не потерять клиента

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

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


    https://goldapple.ru/checkout


    https://thinkseneca.com/

Резюме

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

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

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



Узнайте, как увеличить конверсию на 41%!

Всего 3 шага и 5 минут вашего времени на пути к росту.

Выберите
ваш сайт
Укажите сайт и получите 7 точек роста.
Рассчитайте
стоимость
Контролируйте стоимость и состав услуги. Авторизуйтесь и выбирайте только то, что нужно вам.
Получите результат
и сопровождение
После оплаты и выполнения задания продолжайте получать регулярные советы и рост конверсий.
Читать также

Готовы узнать, что думают пользователи?

Тогда переходите на новый уровень и улучшайте ваш
продукт вместе с нами

Узнать