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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

‍