Пагинация

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

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

Пагинация позволяет нам упорядочивать контент, упрощать навигацию для пользователя. Один из примеров пагинации можно увидеть в поиске Google:

Результаты поиска разделены на несколько страниц. Если на первой не нашлось нужного результата, пользователь может перейти на вторую страницу и т. д. 

Это лишь один из примеров реализации. Про другие расскажем ниже.

Зачем на сайтах используют пагинацию

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

Другая причина, почему на сайтах используется пагинация, — страницы могут загружаться быстрее. Если не использовать пагинацию, а сразу загружать на одной странице условно 100 товаров, то она будет грузиться дольше. Пользователь может не дождаться окончания загрузки и уйти с сайта. Пагинация же делит все товары или контент на равные небольшие части, которые по отдельности загружаются быстрее.

Какой бывает пагинация страниц

Прямая. Нумерация выглядит так: 1‑2‑3‑4. Чтобы показать пользователю, сколько всего страниц в поиске, чаще всего в конце ставят номер последней страницы. По обе стороны от цифр могут располагаться дополнительные кнопки управления «Назад» и «Вперёд». 

С диапазонами. Пагинация использует диапазон: 1–10, 20–50 и так далее. Существует и обратный вариант диапазонов: 80–50, 49–20, 19–1 — встречается редко.

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

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

Кнопки «Показать ещё», «Смотреть ещё» и т. п. В этом варианте при долистывании до конца контента страницы пользователь видит кнопку, например «Показать ещё».  При клике на неё подгружается следующая партия контента.