Що працює краще нескінченний скролл, пагінація або кнопка завантаження контенту

Фахівці з UX з Baymard Institute, тексти яких ми вже неодноразово публікували, недавно підвели підсумки свого чергового дослідження, в фокусі якого був озвучений в заголовку цієї статті питання. Що дає кращий ефект з точки зору зручності використання, конверсії, величини середнього чека?

У загальному і цілому, результати наступні. Пагінація була і залишається найпопулярнішим способом розбивки контенту. При цьому, в ході юзабіліті-тестування фахівці Baymard з'ясували, що краще пагінацію працює зв'язка кнопки «Показати більше [товарів]» і «лінива завантаження». Нескінченний скролл, в свою чергу, може не тільки допомагати усунення перешкод на шляху відвідувача, але і мати зворотний ефект, тобто шкодити продають властивостями і юзабіліті інтернет-магазину.

Відгуки учасників тестування

Крім того нескінченний скролл часто не дозволяє відвідувачеві дістатися до футера, а там він очікує знайти корисні посилання, які дозволять йому зв'язатися з магазином, дізнатися більше про доставку та оплату і т. П.

Кнопка «Показати більше [товарів]» не користується особливою популярністю: тільки 8% досліджуваних інтернет-магазинів застосовують це рішення. При цьому, в порівнянні з пагінацією, така кнопка створює меншу когнітивну навантаження - відвідувач відповідає на просте запитання «так (покажіть більше товарів)» або «ні (не треба показувати)» - і вимагає одного простого дії. Цей факт - необхідність все-таки зробити щось - забезпечує більший обсяг уваги, що приділяється окремим товарам, ніж при використанні нескінченного скролла. Таким чином, кнопка «Показати більше [товарів]» в різних варіаціях і в поєднанні з «ледачою» завантаженням претендує на звання кращого рішення.

Далі розглядаються три наступних варіації:

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

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

Отже, оптимальним рішенням розбивки кількості контенту є зв'язка кнопки «Показати більше [товарів]» і «ледачою» завантаження. На перший екран слід довантажувати від 10 до 30 товарів, потім ще від 10 до 30, коли відвідувач прокрутить сторінку до 50-100 товарів, можна виводити кнопку «Показати більше». Лінива завантаження тут - метод оптимізації швидкості виведення товарів і навантаження на сервер.

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

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

Недолік «ледачою» завантаження, так само як і нескінченного скролла - постійно збільшується повзунок, що дозволяє не тільки швидше пересуватися по сторінці, а й дає уявлення про її довжині. Як «лінива» завантаження, так і нескінченний скролл ускладнюють доступ користувача до футера. У зв'язці з кнопкою «Показати більше», цей недолік нівелюється, власне, появою цієї кнопки. Але якщо ви хочете зробити все максимально добре, робіть повзунок спочатку того розміру, який співвідноситься з висотою сторінки. Так ви дасте відвідувачеві вірне уявлення про справжню довжині сторінки.

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

У зв'язку з цим, такі рекомендації можуть дати найкращий результат.

Завантажуйте від 25 до 75 товарів в пошукову видачу відразу, решта - «ледачою» завантаженням, в тих же пропорціях.

Ніколи не використовуйте нескінченний скролл для сторінки пошукової видачі.

На сторінці пошукової видачі пагінація працює, але краще все ж використовувати кнопку «Показати більше». І той, і інший метод хороші тим, що не провокують швидке сканування списку, а дають стимул до його більш уважного вивчення.

А ще кількість виведених в одне завантаження товарів можна визначати динамічно, грунтуючись на їх релевантності запиту. Так, якщо для того чи іншого запиту в асортименті є чотири десятки високорелевантних товарів, а все інше відношення до запиту має мало, ці чотири десятки можна виводити все відразу. Так ви забезпечите їм максимум уваги. Все, що менше релевантно запитом - під кнопку «Показати більше [товару]».

«Показати більше [товарів]» в Мобайлі

Результати дослідження мобільних версій інтернет-магазинів, яке тривало один рік, однозначно вказують на той факт, що пагінація - далеко не найкраще рішення. При малому розмірі екрану, потрапляти в кнопки сторінок важко. Крім того, кожен перехід призводить до завантаження нової сторінки, а це мобільним відвідувачам не особливо подобається.

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

У мобільному інтернет-магазині Lowe's використовується кнопка «Показати більше [товарів]». І футер доступний, і сторінка не перезавантажується.

Таким чином, краще рішення і для мобайла - кнопка «Показати більше [товарів]». При цьому, мобайл має ряд унікальних обмежень.

Менший розмір екрану. Відповідно, на один екран можна вивести два-три товару. Якщо в Мобайлі використовувати установки деськтопной версії і завантажувати відразу, наприклад, 50 товарів, відвідувач може і не дістатися до футера при необхідності.

У зв'язку з цим, в мобільних версіях інтернет-магазинів рекомендується завантажувати 15-30 товарів відразу і відмовитися від «ледачою» завантаження. Як тільки відвідувач досяг кінця списку, показуйте йому кнопку «Показати більше [товарів]».

Важливо: повноцінна підтримка кнопки «Назад» за допомогою history.pushState

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

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

Хороший вихід - використання функції history.pushState () з арсеналу History API HTML5. Ця функція дозволяє викликати потрібний URL при використанні кнопки «Показати більше [товарів]» і, відповідно, зробити реакцію інтернет-магазину на натискання браузерної кнопки «Назад» саме такий, яку очікує отримати відвідувач.

Компанії та сервіси: Skechers

Crayon, разведплатформа для маркетологів, відстежує тисячі сайтів і сторінок різних компаній, що працюють на локальних і глобальних ринках. Особливу увагу фахівці Crayon приділяють посадковим сторінкам, яких в сучасному інтернеті безліч. Проаналізувавши 1000 найбільш успішних Лендінзі останнього часу, вони виділили 5 особливостей, які об'єднують ці посадочні сторінки і, ймовірно, в чималому ступені сприяють їх високу ефективність.