Студия Турум-бурум

Дизайн интернет-магазина: особенности адаптивной версии

Дизайн интернет-магазина: особенности адаптивной версии
428

3,5 миллиарда — именно столько мобильных пользователей зарегистрировано на сегодняшний день и их количество стремительно растет. К 2021 году ожидается, что 72,9% всего рынка e-commerce будет генерироваться через m-commerce. Поэтому все чаще дизайн интернет-магазина делают адаптивным и проектируют по принципу mobile-first.

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

Адаптивный дизайн интернет-магазина vs. мобильная версия

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

  • Мобильная версия — это не копия сайта для десктопа, а ее урезанная версия, которая находится на поддомене.
  • Адаптивный дизайн — это основной сайт, с тем же самым контентом, который масштабируется или перестраивается под размеры экрана мобильного устройства без перехода на отдельный адрес (поддомен).

Преимущества адаптива над мобильной версией:

  • Достаточно просто реализовать по сравнению с мобильной версией;
  • Нет необходимости создавать новые URL и редиректы, как в случае с мобильной версией;
  • Способствует SEO продвижению сайта.

Минусы адаптива по сравнению с мобильной версией:

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

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

С чего начать?

Проектирование любого дизайна состоит из следующих этапов:

1. Исследование. Проводится исследование и анализ ниши будущего интернет-магазина и основных конкурентов. На основе полученных данных разрабатывается УТП (уникальное торговое предложение), маркетинговая стратегия и позиционирование интернет-магазина, изучается целевая аудитория (ЦА) и составляется портрет покупателя.

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

3. Создание прототипа с учетом актуальных ecommerce трендов таких, как:

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

Как должен выглядеть продающий адаптивный дизайн интернет-магазина?

Вот рекомендации по оформлению ключевых страниц и элементов интернет-магазина для адаптива сайта.

Главная страница

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

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

Пример оформления главной страницы сайта Dicentra в адаптивном дизайне интернет-магазина
Пример оформления главной страницы сайта Dicentra

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

  • Логотип компании;
  • Строку поиска;
  • Корзину;
  • Кнопку меню с категориями, контактными данными, настройками, личным кабинетом, и информационными страницами (доставка и оплата, отзывы, и т. д.)


Пример оформления меню в адаптивном дизайне интернет-магазине Dicentra
Пример оформления меню в адаптивне сайта интернет-магазина Dicentra

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

Пример прилипающего горизонтального меню в интернет-магазине 966.ua
Пример прилипающего горизонтального меню в интернет-магазине 966.ua

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

Категории товаров

Существует 3 способа, которыми посетитель попадает на страницу с категорией товара:

  • С главной страницы;
  • С выдачи органического поиска в интернете;
  • С рекламы.

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

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

Оформление и функционал категории товаров на сайте ITbox
Оформление и функционал категории товаров на сайте ITbox

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

Пример оформления категории товаров на сайте 966.ua
Пример оформления категории товаров на сайте 966.ua

Если товара нет в наличии, то об этом стоит предупредить и предложить пользователю уведомить его о появлении товара на складе.

Выдача в категории товаров на сайте интернет-магазина детской тематики Pampik
Выдача в категории товаров на сайте интернет-магазина детской тематики Pampik

Карточка товара

Вот основные рекомендации по оформлению страницы товара:

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

2. Добавьте характеристики и описание товара, чтобы пользователь мог убедиться в том, что это именно то, что он ищет.

3. Добавьте социальное доказательство, такое как отзывы реальных покупателей, оценки товара. По статистике, почти 95% покупателей читают онлайн-обзоры перед тем, как совершить покупку.

4. Продумайте иерархию элементов в карточке товара и оставьте только ключевые элементы и важную информацию, чтобы не отвлекать пользователя от товара и совершения покупки. Порядок расположения всех элементов должен отвечать логике клиента и маркетинговой модели AIDA (attention → interest → desire → action).

5. Используйте cross-sale и upsell инструменты такие, как «с этим товаром также покупают», «другие пользователи покупают», «товары этой же серии» и так далее для увеличения среднего чека.

Пример оформления страницы товара в интернет-магазине косметики MonAmie
Пример оформления страницы товара в интернет-магазине косметики MonAmie

Более подробно о том, как оптимизировать дизайн карточки описано в этой статье.

Корзина и чекаут

По данным Statista, в 2019 году, 69,57% пользователей бросили корзину, так и не завершив покупку. Основными причинами, почему пользователи не совершают покупку, являются:

  • Неудобный дизайн корзины;
  • Непонятный чекаут;
  • Проблемы с редактированием заказа (изменение количества продукта, удаление позиций, и т.д.);
  • Отсутствие подробной информации о товаре, способе оплаты, доставке, сроках. 

Говоря о дизайне корзины интернет-магазина, ее можно оформить как pop-up и отдельную страницу. В независимости от того, какой вариант вы выберете, эта страница должна содержать такие ключевые элементы как:

1. Информация о товаре — фото, размер, цвет и артикул товара.

2. Возможность удалить, восстановить товар и добавить продукт в список желаний, при удалении позиции из корзины.

Пример реализации такого функционала в интернет-магазине Pampik
Пример реализации такого функционала в интернет-магазине Pampik

3. Информация про бонусы, акции и возможность применения промокодов. При этом стоит предоставить всю информацию о формировании итоговой суммы заказа (на что действует скидка, какая сумма скидки, сколько бонусов начисляется, и т.д.)

4. Информация о дополнительных расходах, таких как платная доставка, например.

Информирование пользователей о расходах на доставку на сайте 966.ua
Информирование пользователей о расходах на доставку на сайте 966.ua 

5. Блоки cross-sale и upsell для увеличения среднего чека.


Применение кросс-сейл инструментов в магазине ТехноЁж
Применение кросс-сейл инструментов в магазине ТехноЁж

6. Понятные и удобные кнопки такие, как «Оформить заказ», «Вернуться к покупкам» и прочее.

Пример корзины интернет-магазина Pratik, где пользователю предоставлена возможность вернуться к покупкам и есть понятная кнопка перехода в чекаут
Пример корзины интернет-магазина Pratik, где пользователю предоставлена возможность вернуться к покупкам и есть понятная кнопка перехода в чекаут

Более подробно о том, как оптимизировать дизайн корзины можно почитать в этой статье.

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

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

Пример чекаута на сайте 966.ua
Пример чекаута на сайте 966.ua

Пример страницы оформления заказа в интернет-магазине Pampik
Пример страницы оформления заказа в интернет-магазине Pampik

  • Информация о предоставляемых гарантиях, вариантах возврата, и других преимуществ покупки.

Личный кабинет

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

  • История и статус заказов;
  • Информация о личной скидке;
  • Информация о реферальных бонусах;
  • Возможность сохранять товары в «Избранное», «Список желаний»;
  • Персонализация выдачи на основе личных данных, совершенных покупках, просмотренных товаров, и т.д.;
  • Быстрое оформление заказов.

Поиск и фильтры по сайту

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

Правильно настроенный поиск и фильтрация:

  • Улучшают поведенческие характеристики;
  • Повышают видимость сайта в поисковых системах;
  • Сокращают путь пользователя;
  • Могут повысить LTV и увеличить средний чек.

Поиском по сайту пользуются максимально определившиеся пользователи и именно эти посетители конвертируют намного чаще, чем остальные. Тем не менее статистика довольно печальна — 30% поисков по сайту заканчиваются неудачей из-за некорректной работы строки поиска.

Вот случай из нашей практики. Проведя анализ сайта Intertop, мы выяснили, что около 3%, а то есть почти 60000 посетителей сайта в месяц, использовали поиск, но процент отказов был высок из-за неправильной работы поиска.

Пример работы поиска на сайте Intertop до редизайна
Пример работы поиска на сайте Intertop до редизайна

Использовав ESR подход, команда Турум-бурум исправила ошибки, после чего коэффициент транзакций с поиска увеличился на 74,64%.

Пример работы поиска после редизайна
Пример работы поиска после редизайна

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

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

Информационные страницы

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

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

Пример инфо страницы и применение баннера в магазине Pampik
Пример инфо страницы и применение баннера в магазине Pampik

Что надо, чтобы создать продающий дизайн интернет-магазина?

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

  • Изучить рынок и свою целевую аудиторию;
  • Учитывать особенности ЦА при построении маркетинговой стратегии;
  • Учитывать и тестировать удобство использования на разных мобильных устройствах;
  • Добавлять социальное доказательство;
  • Продумать иерархию и структуру страниц в адаптиве;
  • Настроить работу поиска и фильтрации для сокращения пути пользователя;
  • Постоянно анализировать и улучшать интерфейс в зависимости от нужд ваших пользователей.




Оставьте номер и мы перезвоним
Спасибо!
Мы скоро свяжемся с Вами.
Напишите нам
Выберите направление:
    Спасибо!
    Мы скоро свяжемся с Вами.