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

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

Результаты тестов

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

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

Бесконечная прокрутка идеально подходит для быстрого выведения широкого спектра товаров. Но при этом посетители меньше фокусируются на каждом отдельном товаре.

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

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

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

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

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

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

Примечание. Данные данные применимы только к коммерческим ресурсам.

«Загрузить ещё» для категорий

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

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

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

Бесконечная прокрутка, разбивка на страницы или кнопки «Загрузить ещё»? Crutchfield использует кнопку «Загрузить ещё» в сочетании с отложенной загрузкой. Первые 20 товаров загружаются по умолчанию. После того, как посетители перейдут к 10-ому товару, Crutchfield подгружает ещё 20. После 40-го элемента посетителю отображается кнопка «Загрузить ещё».

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

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

«Загрузить ещё» для результатов поиска

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

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

В результаты поиска по умолчанию должны загружаться только 25 — 75 продуктов. При этом нельзя использовать бесконечную прокрутку. Пагинация или кнопка «Загрузить ещё» более уместны для результатов поиска, а так как они не поощряют быстрое сканирование большого числа товаров, посетитель намного больше сосредоточится на изучении первого набора результатов. Фактически, из-за меньшего числа результатов, отложенная загрузка не будет обязательным требованием(но, если она реализована для навигации по категориям, ее можно использовать повторно).

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

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

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

Кнопки «Загрузить ещё» для мобильных устройств

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

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

Бесконечная прокрутка, разбивка на страницы или кнопки «Загрузить ещё»? Кнопка «Загрузить больше результатов» предоставляет несколько преимуществ бесконечной прокрутки при сохранении доступа к футеру.

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

  • Меньше фактического пространства.

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

  • Ограничения прокрутки.

На сенсорном устройстве посетитель может прокручивать страницу только путем перетаскивания пальцем. На ПК посетитель имеет в себя больше функций для скроллинга.

  • Медленная прокрутка.

Из-за меньшего контроля над непрерывной прокруткой списка товаров.

  • События JavaScript.

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

Так что мы рекомендуем на мобильных устройствах загружать только 15-30 товаров, прежде чем показывать кнопку «Загрузить ещё». А после этого загружать весь остальной ассортимент.

Поддержка кнопки «Назад» при помощи history.pushState

Динамическая загрузка содержимого при помощи аккордеонов, фильтров фильтры и AJAX- часто не соответствует ожиданиям посетителей относительного того, как должна работать кнопка «Назад». Способ «Загрузить ещё» требует внимательного рассмотрения действия кнопки «Назад». Важно, чтобы нажимая кнопку браузера «Назад» посетитель возвращался в то же место списка товаров.

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

Бесконечная прокрутка, разбивка на страницы или кнопки «Загрузить ещё»? Skechers перезаписывает URL-адрес каждый раз, когда посетитель нажимает кнопку «Загрузить ещё». Когда посетитель нажимает ее, чтобы вернуться, он попадает в нужное место в списке товаров.
Бесконечная прокрутка, разбивка на страницы или кнопки «Загрузить ещё»? Skechers
Бесконечная прокрутка, разбивка на страницы или кнопки «Загрузить ещё»? Skechers

History API HTML5 может соответствовать ожиданиям посетителей. В частности, функцию history.pushState() может изменять URL-адрес без перезагрузки страницы. Это соответствует поведению браузерной кнопки «Назад», которое ожидает посетитель. Браузер запоминает пользовательскую позицию прокрутки. Но необходимо обеспечить, чтобы при нажатии на кнопку «Загрузить ещё» загружались элементы по умолчанию, когда посетитель возвращается.

Кнопка «Загрузить ещё» не должна быть основным приоритетом

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

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

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

«Загрузить больше» в сравнении с бесконечной прокруткой и разбивкой на страницы

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

Кнопки «Загрузить ещё» работают лучше, когда проблема с браузерной кнопкой «Назад» обрабатывается надлежащим образом. Например, через history.pushState(). И в идеале, когда реализация корректируется в зависимости от контекста посетителя. В частности, были выявлены три следующие контекстных корректировки:

  • Для навигации по категориям используйте комбинацию кнопки «Загрузить ещё» и отложенной загрузки. Установите пороговое значение для кнопки «Загрузить ещё» в 50-100 позиций.
  • Для результатов поиска используйте кнопку «Загрузить ещё», но установите порог в 25 — 75 результатов. Надо динамически корректировать пороговое значение для каждого списка результатов поиска на основе любых снижений в рейтингах релевантности.
  • На мобильном устройстве используйте кнопку «Загрузить ещё». Но установите пороговое значение в 15-30 товаров, чтобы избежать проблем с прокруткой и размером экрана. Кроме этого, из-за метода запуска событий JavaScript и величины нижнего порога, загружайте все товары одновременно, без использования отложенной загрузки.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *