Бесконечная прокрутка: когда ее использовать, а когда — избегать

Бесконечная прокрутка — подход к дизайну списков, при котором контент загружается непрерывно по мере того, как пользователь прокручивает страницу вниз. Это устраняет необходимость в пагинации — разбивке контента на несколько страниц.

Nike.com: В отличие от своего конкурента Adidas, Nike использует для отображения своих товаров в каталоге бесконечную прокрутку.

Бесконечная прокрутка появилась в 2006 году, и с тех пор ее популярность резко выросла. Сегодня она преимущественно встречается на сайтах и в приложениях с плоской структурой, где контент постоянно обновляется и одинаково актуален для пользователя — например, в социальных сетях (TikTok, Instagram, Twitter), а также на новостных сайтах или сайтах электронной коммерции (Apple News, Nike.com). Каковы же преимущества и ограничения бесконечной прокрутки?

Со временем появились некоторые вариации классической бесконечной прокрутки (описанной выше). В одном случае от пользователя требуются активные действия — он должен нажать на кнопку “Загрузить еще” или “Посмотреть еще”, чтобы увидеть дополнительный контент, который добавляется в нижней части страницы. Другой вариант предполагает разбивку бесконечной прокрутки на страницы, которые служат ориентирами и позволяют пользователям быстро перемещаться по контенту.

Преимущества классической бесконечной прокрутки

1. Сокращение количества заминок. Пожалуй, самое большое преимущество бесконечной прокрутки по сравнению с нумерацией страниц заключается в том, что она сокращает количество пауз в опыте пользователей. Исследование, опубликованное в журнале Information Systems Journal, показало, что даже незначительные заминки (например, клик по кнопке “Далее” для перехода на другую страницу с дополнительным контентом) могут заставить пользователей интернет-магазина или социальной сети отказаться от выполнения задачи.

Хотя последствия заминок могут варьироваться в зависимости от типа активности пользователя (например, они будут менее значительными, если человек ищет конкретный элемент или фрагмент информации), важно свести их количество к минимуму, поскольку это помогает создать непрерывный опыт и побуждает пользователей оставаться вовлеченными. В частности, речь идет о социальных сетях, развлекательных и новостных сайтах.

2. Снижение затрат на взаимодействие. Если страница загружает новые элементы непрерывно и быстро, и пользователям не нужно нажимать на кнопки и ждать загрузки новой страницы, затраты на взаимодействие снижаются.  Более того, если пользователи хотят вернуться к уже просмотренным элементам, им не нужно нажимать кнопку "Назад" и ждать загрузки предыдущей страницы — они могут просто прокрутить страницу вверх.

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

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

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

• Сложности с повторным поиском контента
• Иллюзия завершенности
• Невозможность добраться до конца страницы
• Проблемы с доступностью
• Увеличение времени загрузки страницы
• Низкая эффективность SEO

1. Сложности с повторным поиском контента

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

Это особенно плохо сказывается на опыте взаимодействия, когда сайты не возвращают пользователей на прежнее место в списке товаров во время пого-стикинга (поведение, при котором посетители очень быстро перемещаются туда-сюда).

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

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

bmwusa.com: Позиция в списке товаров не сохранялась, когда пользователь выбирал товар, а затем возвращался к списку с помощью кнопки "Назад". Вместо этого кнопка "Назад" возвращала пользователя в начало страницы и вынуждала его искать свою прежнюю позицию в списке товаров.

2. Иллюзия завершенности

На страницах, где бесконечная прокрутка используется без кнопки “Загрузить еще”, иногда возникает иллюзия завершенности: пользователь может предположить, что контент закончился, поскольку новая информация загружается в фоновом режиме, за пределами экрана.

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

3. Невозможно получить доступ к футеру

Бесконечная прокрутка (без кнопки “Загрузить еще”) лишает пользователей возможности попасть в футер. Постоянный поток контента не позволяет добраться до полезной информации (например, контактной информации, правил возврата), которую обычно можно найти именно там.

Nike.com: Непрекращающийся поток новых товаров не позволял пользователю получить доступ к футеру.

4. Проблемы с доступностью

Бесконечная прокрутка может создать дополнительные проблемы для пользователей с особыми потребностями. Она существенно усложняет навигацию, если человек использует только клавиатуру: большой объем контента вынуждает людей перемещаться по ссылкам с помощью клавиши “Tab” и им приходится делать это бесконечно, если они хотят дойти до конца страницы.

С другой стороны, пользователи скрин-ридеров могут ознакомиться только с первым "фрагментом" списка, не имея возможности инициировать загрузку нового контента.

Однако в последние годы мы значительно продвинулись в реализации бесконечной прокрутки для пользователей с ограниченными возможностями. Например, один из ARIA-атрибутов role=“feed”, представленный Консорциумом Всемирной паутины (W3C), позволяет программам чтения с экрана прокручивать “бесконечный” контент.  Он также дает возможность тем, кто использует клавиатуру, переходить от бесконечной ленты к первому следующему за ней элементу в фокусе.

5. Увеличение времени загрузки страницы

Сайты с бесконечной прокруткой часто загружаются дольше из-за бесконечного потока нового контента. Если сайт пытается отслеживать местоположение пользователей на странице во время пого-стикинга (см. выше), большой объем контента приходится загружать всякий раз, когда человек возвращается к списку.

Низкая скорость, как правило, является проблемой для пользователей мобильных устройств (из-за нестабильности подключения), а также для всех, кто имеет медленное интернет-соединение или лимитированный трафик.

Некоторые компании, например, Facebook, пытаются преодолеть эти проблемы с загрузкой страниц, выпуская "облегченные" версии своих продуктов (например, Facebook lite и Instagram lite), которые требуют меньше данных для работы. Хотя это отличный подход, позволяющий сделать продукты доступными для более широкого круга пользователей, небольшие компании вряд ли могут позволить себе разработку дополнительных lite-версий своих приложений.

6. Низкая эффективность SEO

И последнее, но не менее важное: бесконечная прокрутка может негативно влиять на SEO-показатели вашего сайта. Это связано с тем, что сканеры поисковых систем не всегда могут получить доступ ко всему контенту, который скрыт за пределами первого экрана вашей страницы, а скорость загрузки (важный фактор SEO) может быть снижена из-за бесконечной прокрутки.

Компромиссное решение: бесконечная прокрутка с кнопкой "Загрузить еще”

Чтобы нивелировать некоторые недостатки бесконечной прокрутки, не возвращаясь к традиционной нумерации страниц, многие сайты и приложения используют одну из ее разновидностей — бесконечную прокрутку с кнопкой “Загрузить еще”. В последнее время такие кнопки стали пользоваться популярностью, особенно в мобильных сайтах и приложениях. Этот подход применяется не только на сайтах электронной коммерции, но и на страницах результатов поиска Google.

‍Кнопка “Загрузить еще” решает и уменьшает некоторые проблемы юзабилити, создаваемые классической бесконечной прокруткой, а именно:

• Доступ к футеру. Кнопка “Загрузить еще” останавливает непрерывный поток нового контента и тем самым позволяет пользователям быстро перейти в футер сайта.

• Иллюзия завершенности. Кнопка “Загрузить еще”, расположенная на видном месте в нижней части страницы явно указывает на то, что пользователя ждет дополнительный контент, который он еще не видел.

• Медленный интернет и лимитированный трафик. Кнопки “Загрузить еще” позволяют загружать меньше контента заранее, что помогает пользователям, которые не могут похвастаться быстрым интернетом, или имеют лимитированные тарифные планы. Такой подход особенно удобен, когда люди контролируют объем загружаемого каждый раз контента.

Одним из недостатков кнопок “Загрузить еще” по сравнению с классической бесконечной прокруткой является рост затрат на взаимодействие — пользователям приходится нажимать кнопку, чтобы загрузить больше контента. Даже такая небольшая заминка может привести к тому, что они будут потреблять меньше контента и откажутся от выполнения стоящих перед ними задач.

Новая альтернатива: бесконечная прокрутка с встроенной пагинацией

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

Google.com: В мобильной версии страницы “Покупки” используется бесконечная прокрутка с встроенной пагинацией. Номера страниц выступают в качестве ориентиров, которые могут упростить повторный поиск и навигацию.

Такой подход способен минимизировать некоторые проблемы юзабилити, возникающие при классической бесконечной прокрутке:

• Повторный поиск контента. Номера страниц — ценные подсказки, которые помогают ориентироваться в интерфейсе и легче находить контент, поскольку пользователи могут запомнить, на какой странице находится тот или иной элемент.

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

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

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

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

Из-за проблем с юзабилити, которые может вызвать бесконечная прокрутка, мы не рекомендуем использовать ее, когда ваши пользователи хотят:

• Найти на странице что-то конкретное (например, статью или товар)
• Сравнить опции в длинном списке (например, выбрать между несколькими товарами, которые могут быть очень далеко друг от друга)
• Изучить только несколько элементов в верхней части списка (например, выбрать лучшие результаты поиска).

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

Не существует решения (бесконечная прокрутка, нумерация страниц, кнопка “Загрузить еще” или встроенная пагинация), которое бы идеально подходило для каждого сайта. Все всегда зависит от его особенностей и целей, которые хотят достичь ваши пользователи. Чтобы оценить, какое решение будет лучшим для вас, проанализируйте преимущества и ограничения каждого из четырех вариантов. Вы должны задать себе следующие вопросы:

• Кто ваши пользователи?
• Какие цели они преследуют, когда посещают ваш сайт?
• С каких устройств пользователи в основном заходят на ваш сайт?
• Существуют ли другие ограничивающие факторы (например, большая доля пользователей с плохим интернетом или пользователей с ограниченными возможностями)?

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