подписка
Подписаться
Спонсор раздела
Статьи Сайт и приложение
Екатерина Ходюшина
Руководитель отдела web-аналитики, Ingate
03/08/2021

Каким должно быть юзабилити мобильной версии интернет-магазина

Каким должно быть юзабилити мобильной версии интернет-магазина

По данным Omni Solutions, доля мобильного трафика большинства российских ритейлеров достигла 50%, а mobile-продажи составили 30% (за 2020 год). Данная статистика лишь подтверждает необходимость наличия и корректной работы мобильной версии сайтов.

Руководитель отдела web-аналитики компании Ingate Екатерина Ходюшина рассказывает об основных принципах юзабилити мобильной версии интернет-магазина.

Особенность мобильных устройств

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

3

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

Вторая важная особенность – экран телефона/смартфона достаточно маленький (в сравнении с ПК) и поэтому, чтобы сайт заинтересовал пользователя, информация должна быть предоставлена в сжатом и читабельном виде. То есть массивные второстепенные элементы и блоки, которые можно позволить на ПК, на смартфоне лучше скрывать. Яркий пример – объемный текст, который нужен только на информационных сайтах (статейных, новостниках). При этом, если размещать текстовую информацию, шрифт должен быть достаточно крупным, чтобы его можно было прочитать без увеличения.

Основные элементы мобильной версии сайта

1. Шапка

Обязательными элементами в шапке интернет-магазина являются:

  • форма поиска – самый востребованный функционал как на ПК, так и в мобайле, должен быть всегда на видном месте и под рукой;
  • сокращенный, уменьшенный логотип для возврата на главную;
  • меню ("бургер")

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

Примеры шапок интернет-магазинов:

45

Шапку желательно делать закрепленной при скроллинге, ее высота при этом не должна превышать 1/10 высоты экрана при просмотре адаптива вертикально, или 1/7–1/8 при просмотре горизонтально. Визуально – не более 1 сантиметра в высоту. В противном случае шапка занимает слишком много полезной площади страницы, что негативно сказывается на восприятии информации с экрана.

2. Конверсионные формы.

Основные правила конверсионных форм на адаптивной версии:

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

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

67

Примеры удачных форм на смартфонах

3. Меню

"Меню-бургер" – элемент вызова меню сайта для удобной и быстрой навигации. Может быть расположено в шапке справа или слева.

9 8

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

11

12

Пример меню с выпадающими списками

Меню может полностью перекрывать экран, как на примере выше, так и частично:

15

4. Список разделов в "Меню-бургере".

Важно, чтобы вся необходимая информация для пользователя, которую он запрашивает до покупки и смотрит чаще всего, была как можно ближе к верхнему краю, близко к началу списка. К таким разделам относятся:"Доставка и пункты выдачи", "Оплата", "Личный кабинет", "Настройки" (если есть), "Контакты".

5. Основная страница

Анализ главной страницы состоит из 2 пунктов:

  1. На предмет корректного отображения всех блоков (тексты читабельны, верстка не едет, изображения отображаются хорошо).
  2. По карте кликов и скроллинга – какими элементами пользуются активно, а какие наоборот – непопулярны.

Важно: если по важным конверсионным элементам кликают мало, стоит сделать их визуально более заметными и удобными для клика пальцем на телефоне. Если не долистывают, эти элементы стоит поднять выше.

6. Каталоги товаров в интернет-магазине

Оптимально размещать по 2 товара в строке при вертикальной ориентации экрана и 3-4 – при горизонтальной:

17

18

Расстояние между строками должно быть небольшим, чтобы не увеличивать время скроллинга.

Каждая карточка должна содержать:

  • четкое, максимально репрезентативное фото (товар виден хорошо, понятно, что это);
  • внятное название товара;
  • заметнуюцену;
  • опционально кнопки "Купить" и "Купить в 1 клик".

Над каталогом должен быть фильтр и сортировка (минимум по цене и по популярности), если таковые имеются на десктопной версии. Размер фильтров и сортировки – небольшой, например, как здесь:

19

Фильтр может раскрываться в окне или на весь экран:

7. Карточки товаров в интернет-магазинах

 

На карточке обязательно должны присутствовать следующие элементы:

  • меню"хлебные крошки", обозначающие уровень вложенности карточки;
  • фото товара (с просмотром фото движением вправо-влево) с возможностью кликнуть на фото для увеличенного отдельного просмотра;
  • заметная цена и контрастная кнопка покупки в пределах одного движения скролла пальцем;
  • описание, важные характеристики, блоки с краткой информацией про покупку, оплату (ниже кнопки "Купить");
  • точки выхода с карточки: слайдеры с подборками товаров – "Похожие товары" или "С этим товаром покупают".

Пример карточки в магазине одежды:

Screenshot_6

Пример карточки в магазине игрушек:

Screenshot_7

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

8. Страница "Контакты"

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

Карта должна быть адаптирована под размеры мобильных устройств.

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

Прокомментировать
Читайте также
05/08/2021
Как с помощью мобильного приложения улучшить клиентский сервис. Кейс SUNLIGHT
Для решения операционных задач в компании разработали SUNRETAIL – удобное приложение для продавцов. О том, какие процессы оно помогло оптимизировать, с какими трудностями столкнулись и какие планы на будущее, читайте в нашей статье. ... Подробнее
29/07/2021
В Twitter'е теперь можно открыть магазин. Но и покупать, и продавать там пока разрешено не всем, даже из США
Искусственное ограничение круга покупателей объяснимо с технической точки зрения, но все же странно для такой мощной IT-компании. Рассказываем подробно, что они там затевают... Подробнее
Валерий С.
Генеральный директор, Торговля (Продукты, небольшая компания)
23/07/2021
Продается интернет-магазин чая 1
Продается интернет-магазин чая (в настоящее время: моно-бренд). Работает с августа 2017г.
Специализация - продажа цейлонского чая одного бренда. Возможна, при желании, продажа разных брендов чая, кофе, сладостей и др.
Более 1500 зарегистрированных покупателей. 50-80 заказов в месяц.
Доставка по всей России через два агрегатора служб доставки.
Настроены: Онлайн-заказы, Онлайн-оплата.
Сайт оптимизирован, адаптирован под просмотр с компьютера и смартфона, в поиске входит в ТОП-10.
Техническое исполнение - PHPshop.
Возможно управление интернет-магазином удаленно без офиса.
Предоставлю всю необходимую информацию по e-mail: teakom@mail.ru
Обучу работе с сайтом.
Возможна продажа через смену участника ООО с сохранением всех договоров, передачей мебели и оборудования офиса.
Причина продажи-состояние здоровья. Свернуть
Продается интернет-магазин чая (в настоящее время: моно-бренд). Работает с августа 2017г. Специализация - продажа цейлонского чая одного бренда. Возможна, при желании, продажа разных брен Еще...
Форум Открытие бизнеса Сайт и приложение