Добрый день. Я занимаюсь web-разработкой и почти всем, что с этим связано.

8 правил хорошей пагинации

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

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

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

В создании качественной пагинации нет ничего сверхсложного, достаточно лишь следовать перечисленным ниже советам.

1 Оптимальный размер страницы

Не делайте страницу слишком короткой. Сайт или приложение — это не печатная книга. Размер страницы печатной книги ограничен размером книги и листа, а размер страницы сайта ограничен лишь вычислительной мощностью устройства и терпением пользователя. Приемлемым вариантом является отображение 20-80 записей на страницу, но это лишь приблизительное число, а реальное число зависит от категории сайта. На некоторых сайтах это число равно 10, а где-то и 100, ведь главное в этом деле — обеспечить удобство использования. 

2 Размер ссылок

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

3 Указание текущего положения

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

4 Ограничьте количество страниц и пространство вокруг элементов

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

5 Ссылки на предыдущую и следующую страницы

Ссылки на предыдущую и следующую страницы очень полезны для пользователей. Нужно визуально отделить эти ссылки от остальных. Дополнительно (или вместо текста ссылки) ссылка может содержать иконку стрелки.

6 Ссылки на первую и последнюю страницы

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

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

Тем не менее, решение простое — обозначить первую и последнюю страницу цифрами, как и остальные ссылки.

7 Проверьте мобильную версию

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

8 Навигация с помощью клавиатуры

Дайте пользователям возможность использовать для навигации клавиатуру. Клавиша «Вправо» — следующая страница, клавиша «Влево» — предыдущая страница. Главное — предупредить пользователя о данной возможности. Для предупреждения хватит текста под пагинацией: «Используйте клавиши ← влево и вправо → для навигации по страницам».

Также хорошей практикой считается дать возможность пользователю переходить по ссылкам, используя клавишу «Tab». Когда ссылка выделена, нажатие на клавишу «Enter» должно инициировать переход на соответствующую страницу.

Номера страниц или «Далее/Назад»?

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

Вывод

Хорошая пагинация улучшает читабельность и уменьшает сложность.

Комментарии