Home > Blog > Нумерация страниц: лучшие практики и примеры

Нумерация страниц: лучшие практики и примеры

Опубликовано: 16/11/07

Хорошую статью прочел сегодня на Smashing Magazine.

Пейджеры, разумеется не обязательный атрибут для пользователей, но очень полезная и приятная штука.
Посмотрим на существующие лучшие практики в дизайне пейджеров и рассмотрим некоторые примеры.

Принципы проектирования пейджеров (7 пунктов в соответствии с Faruk Ates)

Предоставлять большие пространства для клика. Одной из самых больших проблем пейджеров являются малые кликабельные области для каждой страницы — как парвило они не больше, чем сам номер. Быстро по такой области не кликнешь, нужно делать четкие движения — и это неудобно для пользователя. По большому счету хорошей практикой является кликабельная область в 2 ширины номера и 1.5 высоты (разумеется, соответствующим образом визуально оформленная)

Не использовать подчеркивания (понятно, что пейджер и так кликабельный)

Выделять текущую станицу;

Между номерами страниц должно быть достаточно «воздуха», чтобы пользователь случайно не кликнул на соседнем номере;

Предоставлять ссылки на предыдущую и следующую страницы. При этом четко отделять их от номеровстраниц;

Предоставлять ссылки на последнюю и первую страницы где это необходимо (например, в случае если страниц очень много и они не умещаются в размер пейджера);

Ссылки на первую и последнюю страницы являются крайними в пейджере («первая», «предыдущая», «следующая», «последняя» — прямая аналогия с кнопками на тех же аудиосистемах)

С пунктом 2 я не соглашусь: зависит от типа пейджера, от контекста и т. п. Рискну предположить, что от подчеркиваний предлагается отказаться для уменьшения визуального шума на пейджере — но it depends.

Типовые ошибки

Навигация скрыта или трудноразличима.

В приведенном примере цвет пейджера слабо отличается от фона, и нет изменения по hover’у

Навигация черезчур сложна и неинтуитивна.

Пример сложной и непонятной навигации с helium. com