Пейджинг

Постраничная навигация (пейджинг) — способ представления большого количества однородной информации, когда контент разбивается на страницы.

Когда использовать

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

Описание работы

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

Вид пейджинга по умолчанию:

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

Если страниц 7 и меньше, то показываются ссылки сразу на все 7 страниц:

Если больше 7 страниц, показывается ссылка на последнюю страницу после многоточия:

Слева и справа от текущей присутствуют ссылки на 2 соседние страницы. Чтобы пользователь мог перемещаться через одну. Плюс ссылки на первую и последние страницы.

Исключения — пятые страницы с начала и с конца. В таком случае показываются ссылки на все страницы. Иначе за многоточием придется скрывать 1 страницу:

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

В интерфейсах Контура в таком случае рекомендуется «замораживать» постраничную навигацию: появление новых записей никак не влияет на пейджинг, до тех пор пока пользователь не обновит страницу, или не кликнет по специальной кнопке:

Все состояния

При переходе между первые тремя страницами, ссылка «Дальше» остается неподвижной. Это позволяет прокручивать страницу колесиком мыши, и кликать «Дальше» повторно не прицеливаясь.

Работа с клавиатурой

При переходе к пейджингу клавишей Tab первая страница получает фокус — появляется синяя рамка.

Переключение фокуса между страницами производится клавишами со стрелками .

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

Между страницами можно переключаться по сочетанию клавиш Ctrl  и Ctrl  в Windows, и ⌥   и ⌥   на Mac. Если позволяет место, желательно размещать об этом подсказку.

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

Дизайн

Для ссылки «Дальше» используется символ из шрифта Kontur Iconic размером 18 px.

Маркер текущей страницы — черный круг #000 с прозрачностью 9 %.

Маркер наведения — черный круг #000 с прозрачностью 5 %.

Область клика больше самой цифры и совпадает по размерам с маркером наведения:

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