WEBMASCON - журнал для веб-мастеров обновление: 2007.09.07

Постраничный просмотр

Interaction Design Patterns (Web)
автор: 2002 Martijn van Welie
перевод: Александр Качанов

Задача

Посетителю надо просмотреть большой список

Условия

Часто посетителям надо просмотреть большой список. Список слишком велик, чтобы уместиться на одной странице. Пункты в списке как правило упорядочены. Число пунктов в списке превышает 10.

Решение

Разбейте список на страницы.

Навигация между страницами списка выводится над и под списком. Выведите ссылки на каждую конкретную страницу, а также ссылки "назад/вперед" для перехода на предыдущую и следующую страницы. В списке на каждой странице выводите от 5 до 10 пунктов за раз. Также выводите общее число пунктов в списке, а в заголовке страницы указывайте что это за список.

Типичная страктура навигации по списку выглядит так: "Количество пунктов", "назад", "1 2 3 4 5 ...", "вперед". Ссылки "назад" и "вперед" выводятся только в том случае, если есть предыдущая и следующая страница в списке.

Почему

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

Еще примеры

Пример с сайта www.google.com:

Используют

* * *

Другие шаблоны

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

(назад к списку)