Дизайн интернет-магазина: мобильная версия главной страницы

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

В этой статье

  1. Почему пользователи уходят с главной страницы интернет-магазина в смартфоне
  1. Как улучшить дизайн мобильного интернет-магазина

2.1. Визуально покажите основные категории

2.2. Дайте ссылку на редакционный контент

2.3. Делайте тематические подборки

2.4. Оптимизируйте поиск на сайте

2.5. По каким запросам пользователи ищут товары

3. Почему главная страница — уже не главная

4. Выводы 

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

В юзабилити-тестировании Baymard 70% пользователей прокручивали всю главную страницу вверх и вниз при первом посещении интернет-магазина со смартфона. Так они определяли тип сайта и знакомились с ассортиментом. 

При этом в десктопной версии только 25% пользователей вели себя также. 

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

В 42% случаев пользователи не понимают тип интернет-магазина и разнообразие ассортимента по главной странице. Поэтому уходят с сайта. 

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

Как улучшить дизайн интернет-магазина

Способ №1 — визуально покажите основные категории

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

Неочевидные категории товара тоже на главную 

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

Способ №2 — дайте ссылку на редакционный контент

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

Способ №3 — делайте тематические подборки

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

Способ №4 — оптимизируйте поиск на сайте

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

60% пользователей предпочитают использовать поиск вместо основной навигации.

Иногда покупатель не знает, что ему искать в интернет-магазине. Поэтому он использует неточные и неочевидные формулировки: «лёгкие штаны» вместо «летние мужские джинсы uniqlo». 

По каким запросам ищут товары

Тематический поиск — изучение товаров:

— по временным характеристикам («ночной/дневной крем»); 

— по способу их применения («зарядка для телефона»);

— среди каталога специальных предложений («распродажа духов»);

— для праздников («новогодний подарок»).

Функциональный поиск. Это запросы в духе «омолаживающая маска для лица», «чехол для хранения вещей» и т.д. Хорошая практика — показать доступность такого поиска с помощью плейсхолдера. Это подсказка внутри поля формы.

Поиск по проблеме. Клиент не знает, какой товар из каталога ему нужен, и от отчаяния вбивает в поле «морщины», «прыщи» или вовсе «сквозняк». Будьте людьми — подскажите ему хоть какой-нибудь товар.

Поиск по совместимости товара. Дает возможность искать аксессуар или детали для модели или бренда: «Ноутбук ASUS UM431DA подставка/зарядка».

Поиск по непродуктовым запросам. Иногда пользователи ожидают, что поиск собирает информацию по всему сайту. Адаптируйте поисковую систему внутри интернет-магазина под непродуктовые запросы: «Условия возврата/доставки», «Статус заказа», «Отменить подписку» и т.д. В глазах пользователя вашем интернет-магазину цены не будет, особенно за последний пункт.

Почему главная — больше не главная

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

Допустим, человек хочет купить колонку. Результаты поискового запроса перенесут его сразу в каталог магазина или на страницу продукта.

Минутка капитанства: поработать придется не только с главной, но и с другими страницами интернет-магазина. Но об этом в следующих статьях.

Подытожим

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

На сегодня всё 🙂 Подписывайтесь на нашу рассылку, если было полезно. Также мы принимаем фидбек о контенте на почту pr@themojo.io.

Сорсы в ассортименте

  1. Исследование UX: 7 причин, почему мобильная версия B&H — лучшая, Baymard Institude
  2. Поиск в eCommerce: 8 самых распространенных типов запросов, Baymard Institude
  3. Состояние поиска в eCommerce и навигации по категориям, Baymard Institude
  4. Популярность домашних страниц падает, CMSWire