Наверх Отправить почту Выбор цветовой гаммы

Результаты юзабилити-исследования в сфере интернет-торговли, часть 1

Результаты юзабилити-исследования в сфере интернет-торговли, часть 1

Бесконечная прокрутка, постраничная навигация или кнопка "Загрузить ещё" – каким должно быть юзабилити вашего сайта? В этой статье приводятся результаты масштабного исследования в области интернет-маркетинга и даются рекомендации относительно того, на что должно опираться создание web-дизайна интернет-магазина.

Результаты юзабилити-исследования в сфере интернет-маркетинга

В Baymard Institute провели несколько масштабных юзабилити-тестов для более чем 50 ведущих интернет-магазинов. В том числе были протестированы три наиболее популярных шаблона выгрузки товаров для компьютера и мобильного телефона: пагинация, бесконечная прокрутка и кнопка "Загрузить ещё".

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

Создание web-дизайна интернет-магазина

Пагинация

Обычно создание web-дизайна интернет-магазина строится на таком способе выгрузки товаров, как пагинация, так как она подходит практически для любой электронной платформы. Однако наши исследования показали, что наилучшим решением является применение кнопки «Загрузить ещё» в сочетании с «ленивой загрузкой» (lazy-loading). Мы выяснили, что бесконечная прокрутка бывает неудобна, например, при просмотре результатов поиска или просмотре с мобильного телефона. Однако окончательный выбор шаблона всё-таки зависит от контекста страницы.

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

Создание web дизайна интернет магазина пример

 Пример использования пагинации на странице товара

Многие респонденты получали представление об общем количестве товаров в списке на основании количества отображённых в пагинации страниц, как на сайте Macy’s. Несмотря на то, что пагинация удобна для перехода на определённую страницу с результатами, в ходе исследования ею пользовались очень немногие респонденты. Вместо этого они почти всегда использовали кнопки «Предыдущая» и «Следующая».

Бесконечная прокрутка

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

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

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

Создание web дизайна интернет магазина пример бесконечной прокрутки

Пример использования бесконечной прокрутки на странице товара 

Обратите внимание на длину полосы прокрутки. На сайтах с бесконечной прокруткой респонденты часто просматривали сто или более товаров, чего они практически никогда не делали на сайтах с постраничной навигацией и лишь изредка делали на сайтах с кнопкой «Загрузить ещё». Но если первые 50-150 товаров респонденты действительно изучали, то последующие товары они просто бегло прокручивали, становясь, таким образом, заложниками бесконечной прокрутки.

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

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

Кнопка "Загрузить ещё"

Лишь немногие из протестированных сайтов использовали кнопку «Загрузить ещё», хотя респонденты восприняли её очень хорошо. Проводя сравнительный анализ 50 сайтов электронной торговли, мы обнаружили, что только 8% используют этот подход. Дизайн кнопки обычно достаточно простой, он не заставляет пользователя решать, на какую страницу ему уйти, а просто спрашивает: "Хотите посмотреть ещё результаты»?

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

Создание web дизайна интернет магазина. Пример использования кнопки

Пример использования кнопки "Загрузить ещё" 

На сайтах с кнопкой «Загрузить ещё», например на American Eagle Outfitters, пользователи просматривали на 80% больше товаров, чем на сайтах с постраничной навигацией, но делали это не так бегло (на 25% медленнее), как при бесконечной прокрутке. Более того, изучать товары было проще благодаря тому, что пользователи могли добавлять товары к текущему списку.

Создание web дизайна интернет магазина пример

Urban Outfitters

Одним из преимуществ применения кнопки «Загрузить ещё» и бесконечной прокрутки является то, что список товаров увеличивается, а не заменяется другим. Кнопка «Загрузить ещё» упрощает сравнение товаров в общем списке. Объединённый список помогает пользователю быстрее найти определённые товары, и, соответственно, увеличивает эффективность работы с каталогом.

Какой же способ выгрузки товаров помогает сделать создание web-дизайна интернет-магазина более эффективным? Выяснилось, что в идеале следует выбрать различные вариации применения кнопки «Загрузить ещё». Исследования показали, что универсального метода не существует, поэтому мы выделили три оптимальных варианта использования кнопки «Загрузить ещё» в зависимости от контекста применения:

1. Для категорий товаров используйте кнопку «Загрузить ещё» и «ленивую загрузку».
2. Для результатов поиска используйте кнопку «Загрузить ещё» совместно с динамической настройкой количества выводимых по релевантности результатов.
3. На мобильных устройствах используйте кнопку «Загрузить ещё», но по умолчанию выгружайте меньшее количество товаров.

Примечание: Это результаты тестирования интернет-магазинов. Они могут не подойти другим сайтам.

Продолжение следует...
Понравилась наша статья, поделитесь с друзьями!

Удачи в бизнесе, ваш mindrepublic.ru

Поделиться с друзьями

Похожие статьи

Напишите нам
Мы свяжемся с Вами очень оперативно