Содержание


1. Указатели страниц
2. Скроллинг страниц
3. Вспомогательные функции
4. Примеры правильной навигации
5. Ошибки в примерах

1. Указатели страниц

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

2. Активная страница должна быть выделена цветом, а в идеале - еще и фоном и не должна быть ссылкой, тем не менее как и в пункте 1 не лишним будет дополнить ее атрибутом title с тектом типа "текущая страница"

3. Список указателей на страницу не должен быть больше 15 пунктов, в идеале - не больше 10. Остальные пункты нужно будет как-то скрыть, но придется продумать удобный способ для доступа к скрытым страницам.

Пример простейшей постраничной навигации


2. Скроллинг страниц

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

1. Простой - быстрый переход на +n / -n страниц, где n - число отображаемых в списке страниц. Например если вы показываете ближайшие 10 страниц, а пользователь сейчас на пятой, то нажав на ссылку быстрого перехода ему будет предложен новый список с 10 по 20 страницу. Важно заметить, что при нажатии на ссылку быстрого перехода страница не должна перегружаться, для этого используйте JavaScript.

Быстрый доступ к скрытым страницам

2. Сложный - под списком страниц находится скролл, похожий по своей функции на скролл в Windows. С его помощью можно удобно перемещаться по списку в 200 и более страниц.


Скролл для быстрого перемещения

3. Вспомогательные функции

Согласно массе исследований в данной области было обнаружено, что множество пользователей любят перемещаться по сайту не кликая на указатели, а кликая на ссылки типа "Вперед" и "Назад". Используйте их, пользователи будут довольны.

К вспомогательным функциям также относятся ссылки типа "В начало" и "В конец" для быстрого перемещения на первую и последнюю страницу. Ими пользуются реже, поэтому логичнее было бы сделать их чуть менее заметными.


4. Примеры правильной навигации

Данный пример был взят из моего макета для блога "Dreamscrene"


Пример постраничной навигации

Второй пример со скроллом для быстрой навигации по большому колличеству страниц


Пример постраничной навигации со скроллом

5. Ошибки в примерах

Сайт fishki.net. Рядовому пользователю прийдется прокликать 500 раз чтобы попасть на 500 страницу, если он не знает, что можно страницы менять в хвосте ссылки ?page=500
Навигация на fishki.net

Сайт yaplakal.com . Тут вообще всего одна ссылка - "Более ранние новости" которую среди обилия графического мусора и рекламы не так просто найти.
Навигация на yaplakal.com



Если Вы веб-дизайнер или веб-программист, советуем Вам почитать блог про разработку-PHP MYSQL, Javascript HTML CSS, расположенный по адресу lamp-dev.ru. Здесь Вы сможете узнать много новой информации про Linux, Perl и Python.