Найти в Дзене
Каморка Программиста

Пагинация против бесконечной прокрутки, что куда применять

Оглавление

Народ, всем привет. Выбор способа отображения контента на веб-странице — важное решение, влияющее на удобство пользователей, производительность и конверсию. Это становится актуально, когда у вас появляется блог, когда вы делаете магазин с большим количеством товара, ленту новостей, статей, фотографий и прочего. Сегодня веб-дизайнеры и разработчики чаще всего выбирают один из трех основных методов: бесконечную прокрутку, пагинацию и дополнительную загрузку. Каждый из этих методов имеет свои плюсы и свои минусы, и чаще программисты принимают решения по принципу либо «что умею», либо «что будет выглядеть покрасивше».

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

-2

Бесконечная прокрутка (Infinite Scroll)

Для начала давайте определимся, что это все такие такое? Бесконечная прокрутка автоматически загружает новый контент по мере прокрутки страницы пользователем. Такой подход часто используется в социальных сетях, например, в Facebook, Instagram и Twitter, когда нужно подгружать посты, фотки без дополнительных манипуляций и нажатий кнопок. Это решающий момент. Но при этом сама страница становится как бы бесконечной.

Если выделять преимущества, то это определённо:

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

Кстати, Вам может быть это интересно:

Но, конечно, есть и недостатки. Во-первых, самая серьёзная, это проблема с навигацией. Проще говоря, вернуться к ранее просмотренному контенту сложно, особенно если нет закладок или якорных ссылок. Поэтому по такой схеме редко делают набор статей или полезных постов. В основном что-то «клиповое». То, что мало интересует пользователей, но сильно повлияет на заказчика сайта - автоматическая загрузка контента требует большего объема данных, что может снизить производительность или увеличить затраты на содержание. Да и поисковые системы не всегда корректно индексируют контент, загружаемый динамически.

-3

Пагинация (Pagination)

Какой-то непонятное слово, видимо что-то с пингвинами. Но на самом деле, пагинация вам всем хорошо знакома, часто встречается, ведь она разбивает контент на страницы и позволяет пользователям переходить между ними с помощью кнопок (например, «Далее», «Назад», номера страниц). Плюсы у такой системы однозначные. Во-первых, в отличии от предыдущей системы, пользователь может легко вернуться к нужной странице, да и поисковые системы лучше индексируют страницы с пагинацией. Во-вторых, опять же полная противоположность бесконечной прокрутки - пользователь сам решает, когда загружать новую страницу, что снижает нагрузку на сервер.

А вот недостатки связаны больше с SMM, привлечением и удержанием пользователя на странице. Ведь все мы по натуре немного ленивы, а значит, нам может быть неудобно постоянно нажимать на кнопки. Опять же, пагинация не всегда удобна на мобильных устройствах, кнопки пагинации трудно нажимать на сенсорных экранах. И все это ведет к тому, что может снижаться вовлеченность. Если пользователю нужно нажимать кнопку для загрузки новой страницы, он может просто уйти.

-4

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

Дополнительная загрузка (Load More)

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

-5

То есть получается, он как бы «усредняет» все те негативные факторы, о которых мы говорили выше. У пользователей нет необходимости перелистывать страницы, но в то же время контент не загружается автоматически, как при бесконечной прокрутке, что в свою очередь снижет нагрузку на сервер. И в итоге создается некий компромисс между навигацией и вовлеченностью. Пользователь контролирует загрузку нового контента, но при этом процесс не выглядит принудительным.

Но стоит учитывать, что и положительные факторы он тоже усредняет, и вовлеченность будет все равно ниже, чем при бесконечной прогрузке. Особенно если кнопка «Показать больше» малозаметна или неудобно расположена, пользователь может и не воспользоваться ей. Да и сами подумайте, сколько раз вы бы может остановились листать фотки в соцсетях или смотреть видосики, если бы периодически вам приходилось бы нажимать кнопку «показать еще». Поверьте, это несколько останавливает и отвлекает вас от бесконечной «жвачки». И еще стоит сказать, что, как и в случае с бесконечной прокруткой, поисковые системы могут не индексировать загружаемый контент.

-6

Какой вариант выбрать?

Выбор между этими методами зависит от типа контента, целей сайта и предпочтений пользователей. Но если подытожить, можно найти некие триггерные точки:

Бесконечная прокрутка -> Соцсети, новостные ленты, мобильные приложения.

Пагинация -> Интернет-магазины, форумы, блоги, базы данных

Дополнительная загрузка -> Каталоги, галереи, комментарии

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

-7

Хотите знать больше? Читайте нас в нашем Telegram – там еще больше интересного: новинки гаджетов, технологии, AI, фишки программистов, примеры дизайна и маркетинга.