Нескінченний скрол або кнопка «Завантажити ще»
Крістіан Полотно вибрав, який шаблон представлення списку товарів працює краще: «нескінченний скрол», посторінкова навігація або кнопка «Завантажити ще».
Baymard Institute досліджує інтерфейси інтернет-магазинів та публікує результати своїх спостережень.
Співзасновник інституту Крістіан Полотно порівняв шаблони представлення списку товарів:
- Автоматичне підвантаження («нескінченний скрол»);
- Посторінкова навігація («пагінація»);
- Кнопка "Завантажити ще".
Посторінкова навігація — рішення за замовчуванням на багатьох платформах електронної комерції, тому найчастіше зустрічається. «Безкінечний скрол» іноді буває незручний: у результатах пошуку і на мобільних. А ось «Завантажити ще» у поєднанні з «лінивим» підвантаженням товарів створює приємний досвід використання.
Результати спостережень
За кількістю сторінок користувачі прикидають загальну кількість товарів. Вони рідко переходять на конкретні сторінки, зазвичай, на наступну або попередню.
Увага на смугу прокручування: деякі респонденти прокручують список, не фокусуючись на конкретних товарах.
З 50 топових американських інтернет-магазинів лише 8% використали кнопку «Завантажити ще».
При цьому вона сподобалася респондентам: не треба думати, яку сторінку перейти. Потрібно просто відповісти на запитання "Хочете побачити більше результатів?" Користувачі переглядають більше товарів, ніж при посторінковій навігації, і роблять це більш уважно, ніж при «нескінченному скролі».
"Завантажити ще" і "нескінченний скрол" збільшують список товарів на сторінці, а не змінюють його склад. Користувачам легше порівняти товари, що знаходяться наодній сторінці, простіше вибрати, який товар розглянути докладніше.
Який шаблон використати?
Показуйте від 10 до 30 товарів при первинному завантаженні, підвантажуйте ще по 10–30 товарів, доки їх не стане 50–100. Після цього покажіть кнопку "Завантажити ще". При натисканні на неї покажіть 10–30 товарів тощо. "Лінива" підвантаження знижує навантаження на сервер і скорочує час відгуку.
Конкретні числа залежать від контексту та галузі. Найменше товарів варто показувати в галузі споживчої електроніки, де важливі характеристики. Більше товарів – якщо це одяг, меблі та декор.
Проблема "Завантажити ще" та "нескінченного скрола" - постійне збільшення довжини сторінки. Якщо користувач прокрутить сторінку вниз, на мить, доки не завантажаться товари, він побачить підвал. У випадку з «Завантажити ще» ця реакція повториться лише кілька разів.
Рішення: встановити таку висоту сторінки, щоб вона відповідала кількості товарів, які будуть показані до появи кнопки «Завантажити ще». Навіть якщо самі товари ще не підвантажилися, за допомогою смуги прокручування користувач отримає доступ до підвалу та прикине довжину списку.
У результатах пошуку
Результати пошуку впорядковуються за релевантністю. За замовчуванням завантажуйте 25–75 товарів і ніколи не використовуйте нескінченний скрол, щоб користувач сфокусувався на першій пачці найрелевантніших товарів. «Лінива» підвантаження тут не обов'язкова.
Змінюйте кількість товарів, що завантажуються в залежності від показника релевантності. Якщо він різко знижується після перших 28 товарів, показуйте менше. І навпаки.
У мобільних
У посторінкову навігацію складно прицілитися: дрібні посилання і стоять близько один до одного. І користувачіне люблять, коли сторінка перезавантажується.
З «нескінченним скролом» респонденти переглядають удвічі більше товарів, порівняно з посторінковою навігацією. Але проблема підвалу, що втікає, актуальна, адже в ньому можуть бути важливі посилання на кшталт переходу на десктопну версію сайту.
Найкраще – велика кнопка «Завантажити ще». Але не забудьте про особливості мобільних:
Завантажуйте 15–30 товарів та показуйте кнопку «Завантажити ще». Без «ледачого» підвантаження.
Кнопка «Назад»
На сторінках, що динамічно змінюються, кнопка «Назад» може працювати не так, як очікує користувач.
Якщо користувач перейшов на сторінку товару, то кнопка «Назад» повинна повернути його в те саме місце, з якого він прийшов.
90% вивчених інститутом сайтів, на яких використовується кнопка "Завантажити ще", роблять це неправильно.
history.pushState() з History API в HTML5 дозволяє змінити URL-сторінки без її перезавантаження, і тоді кнопка «Назад» буде працювати так, як очікує користувач.
Спосіб завантаження товарів важливий, він впливає на процес вивчення товарів, але це лише вишенька на торті UX-покращень. Спочатку займіться поліпшеннями у великому поверненні на інвестиції. Якщо у вас немає технічних ресурсів для нормальної підтримки кнопки "Назад", замість кнопки "Завантажити ще" використовуйте навігацію.
Дослідження показало, що кнопка «Завантажити ще» працює краще за посторінкову навігацію та «нескінченне скроло». Користувачі переглядають більше товарів, але не втрачають концентрацію та отримують доступ до підвалу.
При реалізації цього підходу не забувайте про контекст:
">