Как стать автором
Обновить
73.42
Click.ru
Рекламная экосистема

Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России

Время на прочтение 11 мин
Количество просмотров 10K
Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России

Мы проанализировали мобильные версии ТОП-20 интернет-магазинов России по 44 факторам. Получили адскую таблицу из единиц и нулей, чуть не растворились к ней, но собрались с силами и описали, как и чем «достают» покупателя в топовом сегменте мобильного e-Commerce.



Для анализа мобильной адаптации мы взяли ТОП-20 интернет-магазинов из рейтинга DataInsight. Это трендсеттеры, на которых ориентируются другие игроки.


Параметры для оценки — из большого аналогичного исследования западного ритейла.


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России

Мы взяли не все параметры, но выделили 44 значимых фактора. Они объединены в девять групп:




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


Технологии


Спойлер. Интернет-магазины отказываются от мобильных версий в пользу «резиновых» сайтов, но скорость загрузки пока еще хромает.


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Адаптивность vs мобильная версия


14/6


Адаптивный сайт выигрывает перед мобильной версией (на отдельном поддомене вида m.site.ru). Его не нужно дополнительно администрировать, отсутствует проблема дублирования контента, используется один и тот же исходный код, что снижает расходы.


Не зря 70% топовых интернет-магазинов России работают именно на базе адаптивных сайтов. Мобильная версия — это что-то из прошлого.


«Оранжевая» зона PageSpeed Insights: все печально


2/20


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


Только 1 сайт из 20 проходит в «зеленую» зону при проверке в сервисе Google PageSpeed Insights. Но даже достижение «оранжевой» зоны пока затруднено — здесь тоже только 1 сайт. Остальные 18 сайтов набирают менее 50 баллов и попадают в «красную» зону.


Таким образом, если вы поработаете над ускорением сайта, то как минимум по одному фактору получите преимущество перед топовыми конкурентами в вашей нише. В свете перехода Гугла на Mobile-first индексацию это особенно актуально.


Основные элементы шаблона


Спойлер. Есть явные тренды: меню «гамбургер», кликабельный номер телефона, поле поиска по сайту в хедере и заметная иконка корзины. Здесь лучше не креативить, а идти в ногу с лидерами рынка.


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


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Фиксированное меню


11/9


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


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


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


Кликабельный номер телефона


15/5


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


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Но, как видите, не все магазины придерживаются этого очевидного принципа.


Меню «гамбургер»


19/1


Тренд по-прежнему в пользу гамбургеров, но здесь стоит исходить из ЦА сайта. Для более консервативной аудитории используйте привычное текстовое меню — гамбургер может остаться без внимания.


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Поиск магазинов


16/4


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


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


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


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


Контекст для интернет-магазинов на профессиональном уровне и без агентства — в системе PromoPult. Автоматический подбор слов, автоматическая генерация объявлений, «умное» управление ставками. Готовые отраслевые решения. Статистика в реальном времени.


Заметная корзина


17/3


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


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Фиксированное промо внизу экрана


4/16


Закрепите в нижней части экрана информацию о специальных предложениях либо особенный СТА, как это сделал «Утконос».


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Автоматическая ротация слайдов в главном баннере


7/13


Все больше магазинов отказываются от авторотации изображений в верхнем баннере. Среди 20 сайтов такой баннер пока еще есть у 7. Но 13 не используют это решение. В целом, похоже, с баннерами в мобильной версии пора распрощаться.


Поле поиска в хедере: must have


20/0


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


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Слева — поиском заняли целую строку на небольшом экране. Справа — динамическое решение


Виджет онлайн-консультанта


3/17


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


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Протестируйте виджет на своей аудитории. Установите онлайн-консультант (если не хотите платить, в модуле повышения конверсии PromoPult есть бесплатный консультант GetSale), кастомизируйте его под ваш корпоративный стиль и посмотрите, сколько обращений/продаж будет за месяц. А там уже принимайте решение — оставить его или убрать.


Фильтры в каталоге


Спойлер. Фильтры в каталоге — это must have. Желательно — с одновременным выбором нескольких параметров. Не забываем и о фильтре по цене.


Удобные опции — фиксация фильтра при скроллинге (главное, чтобы он не занимал много места) и указание цвета товара в фильтре не текстом, а цветной картинкой.


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Фильтры


19/1


Фильтры упрощают навигацию. Активное использование фильтров остается явным трендом.


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Фильтр, зафиксированный при прокрутке


3/17


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


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


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


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


19/1


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


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Выбор цвета


4/16


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


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Но отечественные магазины используют преимущественно текст.


Фильтр по цене


17/3


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


Элементы страницы каталога


Спойлер. Среди явных трендов — возможность добавления в корзину товара из каталога, отображение оценок товаров и скидок. А вот пролистывание изображений товаров в каталоге, просмотр их вариантов и автоподгрузка товаров вместо пагинации — пока еще в новинку.


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Автоподгрузка товаров вместо пагинации


3/17


Тапать по стрелочке «следующая страница» не так удобно, как просто листать вниз. Но вывод товаров не по 10-20-50 на страницу, а «бесконечной» лентой, которая подгружается по мере скролла, — пока еще экзотика.


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


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Просмотр нескольких изображений товара в каталоге


1/19


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


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Отметка «Новинка»


10/10


Для магазинов с высоким показателем возврата покупателей отметка «Новинка» — это способ привлечь внимание посетителей к товарам, которые они еще не видели.


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Если же обновление ассортимента для постоянной ЦА — не ваша ключевая задача, обратите внимание на другие качества продукта и не тратьте место на значок «new!».


Просмотр вариантов товара на странице категорий


2/18


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


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Оценки товаров на странице категорий


15/5


Нельзя однозначно сказать, как добавление звездочек и указание количества отзывов под изображением продукта отразится на продажах. Судя по тому, что их использует большое число изученных магазинов, — это работает. Но все же этот параметр имеет смысл тестировать в каждом конкретном случае — не у всех магазинов набирается много отзывов для большой массы товаров.


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Отображение скидок — в категории и на карточке


18/2


На странице категорий цены со скидками должны быть выделены более крупным шрифтом и, возможно, цветом, рядом с зачеркнутой ценой без скидки. А вот формулировку «вы экономите столько-то» лучше оставить для страницы продукта — в целях экономии места.


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Плитка vs список


9/11


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


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Опция «Добавить в корзину»


16/4


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


Сравнение товаров


8/12


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


Элементы страницы товара


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


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Возможность увеличить картинку


16/4


Есть два варианта: увеличение картинки при клике по ней или возможность «растянуть» ее пальцами. Это ожидаемая со стороны пользователей опция, так что большинство сайтов использует эту практику.


Видео на странице продукта


9/11


9 сайтов из 20 сайтов в исследовании размещают видео на товарных страницах. Конечно, для каждого товара снять ролик затратно. Но для наиболее ходовых товаров это стоит сделать.


Кнопки расшаривания в соцсетях


8/12


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


Элементы персонализации


Спойлер. Элементы кросс-селлинга и ап-селлинга, которые предлагают пользователям товары с учетом их предпочтений, повышают продажи. Не использовать их — значит терять доход.


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


«С этим товаром обычно покупают/просматривают…»


13/7


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


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Недавно просмотренные


9/11


Это удобная возможность быстро вернуться на ранее заинтересовавшую страницу. Но эта опция есть только у 45% проанализированных магазинов.


Другие предложения


13/7


Сообщения типа «Вам также понравится…», «Больше от этого бренда…» и т. д. становятся привычными элементом продуктовых страниц не только десктопных, но и мобайл-магазинов.


Добавление товара в корзину


Спойлер. Не стоит перенаправлять пользователя в корзину после добавления товара. А вот предпросмотр корзины во всплывающем окне будет полезен.


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Оставаться на сайте после добавления товара в корзину


20/0


После добавления товара в корзину рекомендуется оставлять пользователя на странице товара, а не перенаправлять в раздел оформления заказа. Так делают лидеры — значит, это оправданно.


Превью корзины при добавлении товара


6/14


Это хороший способ показать, что находится в корзине, без перехода в нее. Но его внедрили только 30% магазинов — так что теперь вы знаете, как их обойти хотя бы по одному фактору.


Всплывающее окно с содержимым корзины


5/15


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


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Элементы корзины


Спойлер. Корзина — это важная конверсионная страница. Здесь нельзя допускать ошибок. Обязательно выводите изображение товара с кратким описанием. Среди полезных опций — указание сроков доставки, напоминание о преимуществах и возможность сохранить корзину. А вот от дублирования кнопки оплаты/заказа можно отказаться.


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Изображение и описание товара


20/0


В корзине должно отображаться фото каждого товара. Обязательно и краткое описание основных характеристик (наименование, размер, цвет и т.д.). Ограниченное пространство экрана не значит, что пользователям неважно, что лежит в их корзине.


Сроки отправки и доставки


5/15


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


Напоминание о преимуществах


2/18


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


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Сохранить корзину


3/17


85% сайтов из выборки отказались от возможности сохранить корзину и вернуться к ней в будущем. Однако не стоит торопиться с выводами и убирать такую опцию. Это удобный вариант для пользователей, которые регулярно покупают похожий набор товаров (например, еду). В остальных же случаях подобная опция позволяет удержать человека, который сейчас не планирует покупать. (Остается вопрос, как идентифицировать покупателя без регистрации и после того, как сгорят куки).


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Кнопка «Оплата/Далее»


2/18


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


Элементы страницы оформления заказа


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


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Покупка без регистрации


14/6


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


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


Аккордеоны (разворачивающиеся разделы)


5/15


Аккордеоны — экономное решение для мобильных сайтов. Оно удобно для заполнения отдельных разделов на странице оформления заказа. Но его используют далеко не все.


Мобильное юзабилити в e-Commerce: анализ ТОП-20 интернет-магазинов России


Динамическая проверка полей


12/8


Проверка корректности введенных данных по мере заполнения полей (а не после кнопки «отправить») экономит пользователям время и нервы — они сразу видят, что заполнено неправильно. На удивление — так делают не все.


Автозаполнение полей


12/8


Автозаполнение (адрес, телефон, email и т. д.) ускоряет оформление покупки и сокращает вероятность ошибок.


Информация о заказе на странице оформления покупки


13/7


Краткое описание заказа на странице оформления полезно, поскольку покупатель видит, какие товары приобретает (и если он о чем-то забыл, ему не нужно возвращаться в корзину и заново начинать оформление).


Юзабилити для мобильных девайсов — не место для креатива


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


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


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


И все будет хорошо.

Теги:
Хабы:
+9
Комментарии 13
Комментарии Комментарии 13

Публикации

Информация

Сайт
click.ru
Дата регистрации
Дата основания
Численность
101–200 человек
Местоположение
Россия
Представитель
Александр Шипин