Адаптивный дизайн для интернет-магазина

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

Вам это нужно?

Любой интернет-магазин можно переделать под работу на всех мобильных устройствах. Однако прежде чем согласиться на мобильную оптимизацию, оцените действия пользователей смартфонов и планшетов у вас на сайте. Как это сделать? Яндекс.Метрика или Google Analytics покажут вам всю необходимую информацию по этой теме. Объясним на примерах.

Допустим, интернет-магазин торгует радиаторами или стальным прокатом. Доля мобильных пользователей среди всех посетителей этого сайта составляет 5-6%.

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

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

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

Регистрация

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

Так функция регистрации реализована на адаптивном сайте крупного российского продавца одежды Lamoda.ru
Главная страница

В качестве примера хорошей Главной на адаптированном сайте рассмотрим главную страницу адаптивного сайта английского ритейлера одежды asos.com.

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

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

Каталог товаров

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

Так выглядит на lamoda.ru фильтры и каталог товаров. Кликаете на группу товаров и фильтруете по размеру, цвету или бренду вещи.
Карточка товара

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

Карточка товара с адаптивной версии сайта dns-shop.ru. Фотография товара с ценой и техническая информация, расположенная ниже.
Корзина и оформление заказа

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

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

Процесс оформления и заказа товара на адаптивном сайте dns-shop.ru в 4 этапа:
  1. выбор способа и адреса доставки/получения
  2. выбор способа оплаты
  3. процесс оплаты
Главная истина адаптивной верстки

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

Понравилась статья? Поделитесь с друзьями и коллегами!

Комментарии (0)

Добавление комментариев закрыто.

Раз в месяц делимся опытом

Честно, понятно, практично о рекламе и продвижении сайтов

Еще интересного

Оставьте заявку

Или просто

Позвоните
Напишите
Приезжайте
Москва ул. Народного ополчения, д. 34, стр. 1