Пейджинг Paging

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

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

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

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

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

Неправильно

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

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

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

Исключения — пятые страницы с начала и с конца.

Неправильно

Правильно

Если в этом случае страниц всего 8, показывайте все страницы, иначе за многоточием придётся скрывать 1 страницу:

Неправильно

Правильно

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

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

Неправильно

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

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

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

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

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

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

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

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

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

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

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

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

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

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