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

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

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

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

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

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

На сайтах бесконечного проката пользователи часто просматривают сотни и сотни товаров. Никогда не используйте кнопки пейджинга или "приема". Однако это относится только к первым 50-150 продуктам.

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

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

С помощью сайта с кнопкой "Загрузить больше" пользователи изучили больше продуктов, чем при использовании пейджинга.

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

Какой метод загрузки следует использовать? Испытания показали, что ни один из вариантов не является идеальным. Для различных рамок следует применять один из трех методов

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

Примечания. Эта информация относится только к коммерческим ресурсам.

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

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

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

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

Поле сцепления. Используйте кнопку 'Загрузить детали' в сочетании с задержкой загрузки. По умолчанию берутся первые 20 продуктов. Если пользователь переходит к 10-му товару, Crutchfield загружает еще 20; после 40-го товара пользователю предлагается кнопка 'moredolow'.

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

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

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

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

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

По умолчанию в результаты поиска должны загружаться только 25 — 75 товаров. Она не должна быть бесконечной. Для результатов поиска подходит кнопка листания или "больше загрузок". Многие продукты не поощряют быструю прокрутку, поэтому пользователи больше внимания уделяют изучению первого ряда результатов. На самом деле, из-за небольшого количества результатов, задержка загрузки не является обязательным условием (но может быть использована повторно при применении к навигации по категориям).

После применения кнопки "Загрузить еще" пользователи делают естественный перерыв, поскольку релевантность результатов снижается. Однако у них все еще есть возможность сравнить первый ряд результатов со вторым (в отличие от пейджинга).

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

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

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

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

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

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

[Кнопка Load More Results обеспечивает многие преимущества бесконечной прокрутки, сохраняя при этом доступ к нижнему колонтитулу.

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

Меньше реального пространства.

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

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

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

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

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

События JavaScript.

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

Поэтому на мобильных устройствах рекомендуется загружать только 15-30 элементов до появления кнопки Load More. Затем можно загрузить оставшиеся сорта.

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

Использование аккордеонов, фильтров и AJAX для динамической загрузки контента часто не соответствует ожиданиям пользователей относительно того, как должны работать кнопки&.#171;Назад»?. Метод "Получить больше" требует тщательного рассмотрения поведения кнопки "Назад". Важно, чтобы кнопка "Назад" в браузере возвращала пользователя в ту же точку каталога продукции.

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

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

Skechers.

Skechers.

Исторический API HTML5 обеспечивает соответствие ожиданиям пользователей. В частности, функцияhistory.pushState() позволяет изменять URL без перезагрузки страницы. Это соответствует поведению кнопки "Назад" браузера, которое ожидает пользователь. Браузер запоминает положение прокрутки пользователя. Однако для подтверждения этого пользователь должен нажать кнопку Load More. Когда пользователь возвращается, загружаются элементы по умолчанию.

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

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

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

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

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

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

Кнопка "Еще" работает лучше всего, когда тема кнопки "Назад" в браузере обрабатывается должным образом. Например, вы можете использоватьhistory.pushState(). А в идеале — когда приложение адаптируется к контексту пользователя. В частности, были определены следующие три варианта адаптации рамок

[Объединение кнопки "Больше загрузок" с кнопкой "Ожидающие загрузки" для перемещения между категориями. [Установите ограничение для кнопки Больше на 50-100 элементов Для результатов поиска используйте кнопку Больше, но установите ограничение на 25 — 75 результатов. Пороговое значение для каждого списка результатов поиска должно динамически корректироваться в зависимости от падения рейтинга релевантности. На мобильных устройствах используйте кнопку Получить больше. Однако ограничьте количество элементов до 15-30, чтобы избежать проблем с прокруткой и размером экрана. Кроме того, благодаря способу запуска событий JavaScript и низким пороговым значениям, можно загружать все элементы сразу, не используя отложенную загрузку.