Пейджинг Paging

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

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

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

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

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

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

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

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

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

Такое же правило и для пейджинга без последней страницы. При переходе «Дальше» всегда сохраняется две страницы вперед и назад от текущей:

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

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

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

Не показывайте общее количество страниц в следующих случаях:

1. Его сложно и «дорого» считать.
2. Оно не нужно пользователю, например, в результатах поиска. Лучше показывать количество результатов.

В таком случае, показывайте ссылки на первые 5 страниц и многоточие:

При перемещении по страницам, слева и справа от выбранной страница должно быть не менее двух ссылок на соседние страницы:

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

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

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

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

Об этом подсказывает подпись под выбранной страницей.

По умолчанию такое управление доступно только когда пейджинг в фокусе, но компонент можно переключить в режим когда такое управление будет доступно всегда.

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

Для ссылки «Дальше» используется иконка из набора интерфейсных иконок

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

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

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

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