UXPUB 🇺🇦 Спільнота дизайнерів

Cover image for Нескінченна прокрутка: Коли використовувати, а коли уникати?
shelest
shelest

Опубліковано

Нескінченна прокрутка: Коли використовувати, а коли уникати?

#ux

База: Нескінченна прокрутка мінімізує витрати на взаємодію та підвищує залученість користувачів, але вона підходить не для кожного сайту. Для деяких випадків кращим рішенням буде пагінація або кнопка "Завантажити більше".

Вступ

Нескінченна прокрутка — це патерн дизайну екранів зі списком. Основою якого є безперервне завантажєння вмісту, коли користувач прокручує сторінку вниз. Це усуває необхідність пагінації — розбиття контенту на кілька окремих сторінок.

Image description

Adidas.com: На своїх сторінках зі списком товарів Adidas використовує пагінацію.
Nike.com: У порівнянні зі своїм конкурентом Adidas, Nike використовує нескінченну прокрутку для відображення своїх продуктів.

.
З моменту свого винаходу в 2006 році нескінченна прокрутка пережила стрімке зростання популярності. Сьогодні вона здебільшого використовується на веб-сайтах та додатках з плоскою структурою, де контент постійно оновлюється і є однаково актуальним для користувача — наприклад, на сайтах соціальних мереж (TikTok, Instagram, Twitter) чи сайтах новин або електронної комерції (Apple News, Nike.com).


🤤 Підписка на shelest в Telegram →


Переваги класичної нескінченної прокрутки

  1. Зменшення кількості зупинок. Можливо, найбільшою перевагою нескінченної прокрутки над пагінацією є те, що вона зменшує кількість зупинок для користувача. Дослідження, опубліковане в Journal of Information Systems, показало, що навіть короткі паузи (наприклад, натискання кнопки "Далі" для переходу на іншу сторінку для отримання додаткового контенту) можуть спонукати користувачів змінити своє рішення. Хоча вплив таких переривань може відрізнятися залежно від типу активності користувача (наприклад, він може бути менш впливовим, якщо користувачі шукають конкретний товар або інформацію). Мінімізація переривань важлива для соціальних медіа, розважальних та новинних сайтів, оскільки це допомагає створити безперебійний процес відтворення контенту та не дозволяє користувачам втратити зацікавленість.

  2. Зниження вартості взаємодії. Якщо сторінка завантажує нові елементи безперервно і швидко, без необхідності натискання кнопки і очікування завантаження, то вартість взаємодії зменшується. Крім того, якщо користувачі хочуть повернутися до елементів, які вони вже бачили, їм не потрібно натискати кнопку "Назад" і чекати, поки завантажиться попередня сторінка — вони можуть просто прокрутити сторінку вгору.

  3. Добре підходить для мобільних пристроїв. Зростання популярності нескінченної прокрутки було пов'язано зі стрімким розповсюдженням мобільних пристроїв. Оскільки в них дисплеї невеликих розмірів, то користувачі за замовчуванням готові провести пальцем по екрану, щоб побачити додатковий вміст.

Проблеми юзабіліті, викликані нескінченною прокруткою

Незважаючи на переваги, про які йшлося вище, нескінченна прокрутка має ряд недоліків, які можуть погіршити досвід користувача:

Труднощі з пошуком контенту

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

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

BMWusa.com: Позиція в списку товарів не зберігається. Кнопка "Назад" переносить користувача на початок сторінки і ставить перед громіздким завданням — знайти свою стару позицію в списку продуктів.

Ілюзія завершеності

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

Відсутність доступу до футера

Нескінченна прокрутка (без кнопки "Завантажити більше") може унеможливити доступ до футера веб-сайту. Постійний потік контенту заважає користувачам дістатися до корисної інформації, яка зазвичай розміщується в нижньому колонтитулі (наприклад, контактна інформація, правила повернення і тд).

Nike.com: Постійний потік нових товарів не дозволяв користувачеві отримати доступ до футера.

Проблеми для користувачів з обмеженими можливостями

Для користувачів, які використовують лише клавіатуру, нескінченна прокрутка ускладнює навігацію в Інтернеті через величезну кількість контенту, який можна розмістити на одній сторінці, оскільки таким користувачам доводиться "гортати" контент посилання за посиланням і, отже, стикатися з трудомістким процесом, якщо вони хочуть перейти до кінця списку. З іншого боку, користувачі програм, які озвучують все, що відображено на екрані (screen-reader) бачитимуть лише перший "шматок" списку, не маючи можливості ініціювати завантаження нового контенту.

Однак в останні роки спостерігаються позитивні зрушення в підтримці нескінченної прокрутки для користувачів з потребами. Наприклад, "стрічка" ARIA, запроваджена Консорціумом Всесвітньої павутини (W3C), дозволяє програмам (screen-reader) скролити сторінки з нескінченною прокруткою. Також дозволяє користувачам клавіатури переміщатися повз нескінченну прокрукту до першого сфокусованого елементу, що слідує за списком.

Збільшення навантаження на сторінку

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

Низька швидкість завантаження, як правило, є проблемою для мобільних користувачів (через нестабільне з'єднання) або для будь-якого іншого юзера в зоні з низькою пропускною здатністю мережі та на обмежених планах передачі даних.

Погана ефективність SEO

І останнє, але не менш важливе: нескінченна прокрутка може негативно вплинути на ефективність SEO вашого сайту. Це пов'язано з тим, що пошукові роботи не завжди можуть отримати доступ до всього контенту, який прихований під першим розділом вашої сторінки, а швидкість сторінки (важливий фактор SEO) може сповільнюватися через нескінченну прокрутку.

Компроміс: нескінченна прокрутка з кнопкою "Завантажити більше"

Щоб уникнути деяких недоліків нескінченної прокрутки без повернення до традиційної пагінації, багато сайтів і додатків реалізують її варіацію — нескінченну прокрутку за допомогою кнопки "Завантажити більше". Цей підхід останнім часом набув популярності, особливо на мобільних сайтах і в додатках.

Image description

Asos.com: Кнопка "Завантажити більше" дає користувачам можливість завантажувати додатковий вміст сторінки. Такий підхід вигідний для користувачів в зонах з низькою пропускною здатністю мережі та надає легкий доступ до футера. Індикатор того, скільки товарів вже було переглянуто, а також їхня загальна кількість допомагає лешге орієнтуватися на сторінці та є чудовим прикладом того, як потрібно покращувати досвід користувача.

.
Додавання кнопки "Завантажити більше" зменшує деякі проблеми юзабіліті, що виникають через класичну нескінченну прокрутку. Основні проблеми, які вирішуються:

  • Доступ до футера. Кнопка "Завантажити більше" зупиняє постійний потік нового контенту і тим самим дозволяє користувачам отримати доступ до нижнього колонтитулу веб-сайту.
  • Ілюзія завершеності. Кнопка "Завантажити більше", розміщена на видному місці внизу сторінки, є чітким свідченням того, що є ще більше контенту, і що користувач ще не побачив весь вміст сторінки.
  • Обмеження мережі. Кнопка "Завантажити більше" допомагає користувачам з низькою пропускною здатністю мережі або обмеженими планами передачі даних, контролювати кількість контенту, який завантажується.

Одним з недоліків такого підходу порівняно з класичною нескінченною прокруткою є те, що збільшується вартість взаємодії — користувачам доводиться натискати кнопку "Завантажити більше", щоб отримати додатковий контент. Часто навіть невелике переривання для натискання кнопки може змусити юзера втратити зацікавленість.

Нова альтернатива: Нескінченна прокрутка з інтегрованою пагінацією

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

Google.com: На мобільній сторінці покупок використовується нескінченна прокрутка з інтегрованою пагінацією. Номери сторінок виступають в якості орієнтирів, які можуть покращити юзабіліті.

.
Такий підхід має потенціал для зменшення деяких проблем юзабіліті, зокрема, пов'язаних з класичною нескінченною прокруткою:

  • Повернення до переглянутого контенту. Індикатори сторінки є цінними орієнтирами для користувача, які допомогають легше знаходити інформацію, оскільки дозволяють запам'ятати, на якій сторінці знаходився той чи інший елемент контенту.
  • Вдосконалена навігація. Користувачі можуть використовувати інтегровану пагінацію для переходу між сторінками і тим самим ефективно пропускати нерелевантний контент.

Хоча інтегрована пагінація може вирішити деякі проблеми юзабіліті, спричинені нескінченною прокруткою, вона не може вирішити їх всі. Зокрема, це відсутність доступу до футера та "вага" сторінки.

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

Чи підходить нескінченна прокрутка для вашого проекту?

Через проблеми з юзабіліті, які може викликати нескінченна прокрутка, не рекомендується використовувати її, коли користувачам потрібно:

  • Знайти щось конкретне (наприклад, шукати конкретну статтю або товар)
  • Порівняти елементи в довгому списку (наприклад, вибрати між кількома продуктами, які можуть бути дуже далеко один від одного в списку)
  • Переглянути лише кілька елементів у верхній частині списку (наприклад, вибрати найпопулярніші результати пошуку)

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

Не існує рішення (нескінченна прокрутка, пагінація, кнопка "Завантажити більше" або інтегрована пагінація), яке було б найкращим та ідеально підходило для кожного. Це завжди залежить від конкретних цілей, яких повинні досягти ваші користувачі. Щоб оцінити, яке рішення є найкращим для вашого сайту, пам'ятайте переваги та обмеження кожного з чотирьох варіантів.

Запитання, які допоможуть прийняти правильне рішення:

  • Хто ваші користувачі?
  • Які цілі переслідують ваші користувачі, коли відвідують ваш сайт?
  • Які пристрої користувачі переважно використовують для доступу до вашого веб-сайту?
  • Чи існують інші обмежувальні фактори (наприклад, велика група користувачів з низькою пропускною здатністю мережі або багато користувачів з обмеженими можливостями)?

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

Текст Tim Neusesser


👉 Більшe в Telegram →

Топ коментарі (1)

Згорнути/розгорнути
 
anako profile image
Anastasiia Koval

Дуже влучна стаття, дякую

Курси дизайну UX, UI

Вивчай UX, UI, дослідження, райтинг чи продуктовий бік дизайну, щоб створювати круті інтерфейси
Дізнатись більше