Пейджинг Paging

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Горячие клавиши

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

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

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

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

Дизайн

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

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

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

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

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