Что работает лучше: бесконечный скролл, пагинация или кнопка загрузки контента?

Эксперты по UX из Baymard Institute, тексты которых мы уже много раз публиковали, сравнительно не так давно подвели итоги собственного очередного изучения, в фокусе которого был озвученный в заголовке данной статьи вопрос. Что даёт лучший эффект с позиций удобства применения, конверсии, величины среднего чека?

Этот отчёт – часть громадного изучения, которое продолжалось пара лет. Объектом этого изучения стали 50+ наибольших вебмагазинов мира. Среди изучаемых качеств их деятельности были, например, решения, применяемые фаворитами ecommerce для загрузки контента на страницы результатов и категорий поиска.

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

В общем и целом, результаты следующие. Пагинация была и остаётся самым популярным методом разбивки контента. Наряду с этим, на протяжении юзабилити-тестирования эксперты Baymard узнали, что лучше пагинации трудится связка кнопки «Продемонстрировать больше [товаров]» и «ленивая загрузка».

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

Отзывы участников тестирования

Что работает лучше: бесконечный скролл, пагинация или кнопка загрузки контента?

Участники тестирования – простые пользователи, которых Baymard пригласил к участию в тестах, – в большинстве собственном неблагосклонно относились к пагинации, считая данный способ разбивки контента медленным. Присутствие на странице заметного количества кнопок, обозначающих доступные для просмотра страницы, довольно часто приводило к тому, что визитёр по большому счету отказывался от более углублённого изучения ассортимента. Кнопка «Продемонстрировать больше [товаров]» и нескончаемый скролл трудились лучше.

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

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

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

Так, в случае если в категории от 50 до 150 товаров, нескончаемый скролл – хорошее ответ. В случае если же товаров больше, визитёр может не уделить время ни одному из них, увлёкшись скроллингом.

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

Кнопка «Продемонстрировать больше [товаров]» не пользуется особенной популярностью: лишь 8% изучаемых вебмагазинов используют это решение. Наряду с этим, в сравнении с пагинацией, такая кнопка создаёт меньшую когнитивную нагрузку – визитёр отвечает на несложный вопрос «да (продемонстрируйте больше товаров)» либо «нет (не нужно показывать)» – и требует одного несложного действия.

Данный факт – необходимость всё-таки сделать что-то – снабжает больший количество внимания, уделяемый отдельным товарам, чем при применении нескончаемого скролла. Так, кнопка «Продемонстрировать больше [товаров]» в разных вариациях и в сочетании с «ленивой» загрузкой претендует на звание лучшего ответа.

Потом рассматриваются три следующих вариации:

  • кнопка «Продемонстрировать больше [товаров]» и «ленивая» загрузка на странице категории;

  • кнопка «Продемонстрировать больше [товаров]» на странице внутренней поисковой выдачи, в совершенстве наполняемой динамически, на базе релевантности запросу;

  • кнопка «Продемонстрировать больше [товаров]» в мобайле, по умолчанию загружается меньше товаров, чем в десктопной версии.

«Продемонстрировать больше [товаров]» и «ленивая» загрузка на странице категории

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

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

Реализация связки кнопки «Продемонстрировать больше [товаров]» и ленивой загрузки в веб-магазине Crutchfield. Сперва загружается 20 товаров, когда визитёр прокручивает страницу до 10-го, подгружается ещё 20 товаров. По окончании 40-го товара выводится кнопка «Продемонстрировать больше».

Недочёт «ленивой» загрузки, равно как и нескончаемого скролла – неизменно возрастающий ползунок, разрешающий не только стремительнее передвигаться по странице, но и дающий представление о её длине. Как «ленивая» загрузка, так и нескончаемый скролл затрудняют доступ визитёра к футеру. В связке с кнопкой «Продемонстрировать больше», данный недочёт нивелируется, фактически, возникновением данной кнопки.

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

Кнопка «Продемонстрировать больше [товаров]» на странице внутренней поисковой выдачи

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

В данной связи, следующие советы смогут дать наилучший результат.

  • Загружайте от 25 до 75 товаров в поисковую выдачу сходу, другое – «ленивой» загрузкой, в тех же пропорциях.

  • Ни при каких обстоятельствах не применяйте нескончаемый скролл для страницы поисковой выдачи.

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

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

Всё, что менее релевантно запросу – под кнопку «Продемонстрировать больше [товара]».

«Продемонстрировать больше [товаров]» в мобайле

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

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

В мобильном интернет-магазине Lowe’s употребляется кнопка «Продемонстрировать больше [товаров]». И футер дешёв, и страница не перезагружается.

Так, лучшее ответ и для мобайла – кнопка «Продемонстрировать больше [товаров]». Наряду с этим, мобайл имеет последовательность неповторимых ограничений.

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

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

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

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

В данной связи, в мобильных предположениях вебмагазинов рекомендуется загружать 15-30 товаров сходу и отказаться от «ленивой» загрузки. Когда визитёр достиг финиша перечня, показывайте ему кнопку «Продемонстрировать больше [товаров]».

Принципиально важно: полноценная помощь кнопки «Назад» посредством history.pushState

При реализации кнопки «Продемонстрировать больше [товара]» направляться шепетильно продумать работу браузерной кнопки «Назад». Более 90% всех вебмагазинов, попавших в изучение Baymard и применяющих кнопку «Продемонстрировать больше», не продумали данный нюанс. Что ожидает пользователь, что пара раз надавил эту кнопку, а позже пробует возвратиться на ход назад, кликнув соответствующую браузерный «Назад»?

Вариант ответа в веб-магазине Skechers: каждое нажатие кнопки Load more ведет к генерации нового URL. Соответственно, при клике по браузерной кнопке «Назад» визитёр попадает на прошлую часть перечня.

Хороший выход – применение функции history.pushState() из арсенала History API HTML5. Эта функция разрешает вызывать необходимый URL при применении кнопки «Продемонстрировать больше [товаров]» и сделать реакцию вебмагазина на нажатие браузерной кнопки «Назад» как раз таковой, какую ожидает взять визитёр.

Итого: согласно точки зрения экспертов Baymard, кнопка «Продемонстрировать больше [товаров]» – самое успешное ответ вывода и разбивки контента на страницы результатов и категорий поисковой выдачи. Но создатель статьи Кристиан Холст, один из основателей Baymard Institute, показывает на тот факт, что отсутствие технических ресурсов, нужных для имплементации данной кнопки есть противопоказанием к внедрению для того чтобы решения. Лучше покинуть классическую пагинацию, чем не хорошо сделать «Продемонстрировать больше» либо нескончаемый скролл.

Случайные статьи:

Постраничная ленивая загрузка (lazy load) постов


Подборка похожих статей:

admin