Пагинация, «Показать еще» или скроллинг в каталоге товаров

Каталог товаров что работает лучше
Статьи
Автор: Юлия Федотова
«Шеф-редактор блога GetGoodRank, веб-аналитик, блоггер.
Организация каталога товаров крайне важна - это определяет доступность товаров пользователю и удобство просмотра и выбора. Рассматриваем пагинацию, кнопку "Показать еще" и скроллинг.»

Юзабилити в мелочах. Не существует единого паттерна, как оптимизировать юзабилити страниц. Сегодня говорим, как правильно организовать каталог товаров: разбить каталог на страницы (пагинация), кнопка «Показать еще», добавляющая по Х товаров к уже просмотренному списку, либо бесконечная прокрутка товаров (скроллинг).

Компания Баймард Институт (Baymard Institute) провела практическое исследование каждого из методов организации каталога на десктопных и мобильных сайтах.

Пагинация

Разбивка каталога на страницы все еще самый популярный способ выкладки товаров. Именно так предлагают организовывать товары популярные e-commerce движки.

Каталог товаров пагинация

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

Пользователи просматривают меньшее количество товаров в каталогах с постраничной разбивкой, чем с кнопкой «Показать еще» или прокруткой.

анализ сайтаКак выбор влияет на конверсию

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

каталог товаров сравнение

Скроллинг

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

Такой метод демонстрации товаров в каталоге способствует просмотру большего количества позиций, чем пагинация или кнопка «Показать еще».

На сайтах с бесконечной прокруткой товаров пользователи просматривают в 2 раза больше позиций, чем на сайтах с пагинацией.

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

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

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

Наиболее ярким представителем скроллинга в каталоге является Flickr, загружающий бесконечное множество изображений на входе или на любой пользовательский запрос (говорить о скорости загрузки не приходится):

Скроллинг каталог товаров

Кнопка «Показать еще»

Только 8% сайтов используют кнопку «Показать еще» (данные для рынка США). Однако метод наиболее эффективен с точки зрения пользовательского опыта. «Показать еще» не приводит пользователя в замешательство, какую страницу из списка выбрать. Более того, пользователи более внимательно просматривают товары на страницах, на которых требуется дополнительное действие, чтобы увидеть новые позиции.

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

Единый список на странице существенно упрощает навигацию и поиск необходимых товаров.

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

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

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

Каталог товаров в мобильных версиях сайтов

Кнопка «Показать еще» становится оптимальным решением для мобильных версий сайтов.

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

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

Анализ мобильной версии сайта показал, что:

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

анализ сайтаЧто лучше: мобильная версия или мобильное приложение

Кнопка «Назад»

Пагинация предполагает, что, нажимая кнопку «Назад», пользователь попадает на предыдущую страницу. А куда попадет пользователь, если нажмет кнопку«Назад» в каталоге, где товары демонстрируются при помощи скроллинга или кнопки «Показать еще»?

Официальный сайт Skechers изменяет URL страницы каждый раз, когда пользователь нажимает кнопку «Показать еще». Это помогает пользователю сделать точный шаг назад (вернуться на определенное количество товаров назад), нажимая соответствующую кнопку.

Рекомендации по организации каталога товаров

анализ сайтаЧтобы избежать проблем с доступом к футеру, лучше совмещать скроллинг с кнопкой «Показать еще».

анализ сайтаУстановите границу (к примеру, в 50 товаров), до которой позиции будут подгружаться автоматически (скроллинг), а затем реализуйте просмотр дополнительных товаров через кнопку «Показать еще».

анализ сайтаДля мобильных версий сайтов установите кнопку «Показать еще», ограничив загрузку 15-25 позициями.

 

Imagesource: Lena Baklanova

Добавить комментарий

Войти с помощью: 

Статьи по теме

анализ минимальных проблем сайта
Статьи
Подход минимальных улучшений
Британской велокоманде Team Sky не удавалось выиграть Tour De France. В 2010 году менед...
взлом сайта
Статьи
Взлом сайта: методы и профилактика
На страницах нашего блога мы уделяем максимум внимания продвижению сайтов и повышению и...