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

Бесконечная прокрутка, постраничная навигация или кнопка «Загрузить еще»? Результаты юзабилити-исследования в сфере интернет торговли.

 

 

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

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

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

 

 

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

 

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

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

 

 

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

 

 

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

 

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

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

 

 

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

 

 

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

 

 

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

 

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

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

 

 

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

 

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

 

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

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

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

 

 

Продолжение следует...

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

 

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

Comments

comments

Text_2Бывают ли хорошие сайты по низкой цене
Text_2Создание сайта от планирования до запуска. Что скрывается за удобным сайтом?
Text_2Веб студия или фрилансер. Выбираем где заказать сайт.
Text_2Заказать лендинг Составляющие идеальной лендинг пейдж.