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

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

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

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

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

юзабилити мобильной версии интернет-магазина

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

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

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

1. Шапка

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

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

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

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

юзабилити мобильной версии интернет-магазинаюзабилити мобильной версии интернет-магазина

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

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

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

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

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

юзабилити мобильной версии интернет-магазинаюзабилити мобильной версии интернет-магазина

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

3. Меню

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

юзабилити мобильной версии интернет-магазина юзабилити мобильной версии интернет-магазина

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

юзабилити мобильной версии интернет-магазина

юзабилити мобильной версии интернет-магазина

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

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

юзабилити мобильной версии интернет-магазина

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

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

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

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

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

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

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

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

юзабилити мобильной версии интернет-магазина

юзабилити мобильной версии интернет-магазина

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

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

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

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

юзабилити мобильной версии интернет-магазина

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

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

 

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

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

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

юзабилити мобильной версии интернет-магазина

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

юзабилити мобильной версии интернет-магазина

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

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

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

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

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

Прокомментировать
Читайте также
05/08/2021
Как с помощью мобильного приложения улучшить клиентский сервис. Кейс SUNLIGHT
Для решения операционных задач в компании разработали SUNRETAIL – удобное приложение для продавцов. О том, какие процессы оно помогло оптимизировать, с какими трудностями столкнулись и какие планы на будущее, читайте в нашей статье. ... Подробнее
18/05/2021
Какой должна быть карточка товара в интернет-магазине
Карточка товара должна отвечать на все вопросы покупателя, быть привлекательной и понятной. В статье рассмотрим, какую информацию необходимо поместить в карточку продукта и каким образом ее подать... Подробнее
Ольга Коноплева - руководитель отдела трафика Kokoc.com (KokocGroup)
15/12/2020
Мобильная версия и адаптивная верстка: что лучше?
Что выбрать интернет-магазину: адаптивный дизайн или мобильную версию? ... Подробнее
05/10/2020
Какие сайты самые популярные? Где узнают о новых товарах и брендах? Обзор мировых интернет-трендов
DataReportal при поддержке We Are Social and Hootsuite представила обзор мировых трендов в Интернете на фоне пандемии коронавируса... Подробнее
27/02/2018
Google назвал самые удобные мобильные сайты
Аналитики оценили онлайн-площадки российских ритейлеров по удобству регистрации и скорости загрузки... Подробнее