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

Posted on by riasevastopol

Эксперты по 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) постов


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

riasevastopol

More Posts