Разбиение сайта на страницы: как это сделать правильно
(Опубликовано в Design Showcase, 16 ноября 2007 г.)
Структура и иерархия помогают упорядочить сайт, упростить работу с ним и улучшить восприятие. Чем более продумано размещение статей на вашем сайте, тем проще людям понять ваши идеи, и тем больше вероятность того, что вы достигнете своей цели. В Интернете вы можете добиться этого разными способами.
В документах заголовки и списки часто используются для представления информации в виде структурированных информационных блоков. Альтернативой такому способу логического структурирования является разбиение сайта на страницы – механизм, который предоставляет пользователям дополнительные возможности навигации для просмотра отдельных разделов одной публикации. Разделы публикации нумеруются, на них ставятся различные типы ссылок – например, оглавление с указанием порядка страниц, а также подсказки и ссылки, позволяющие перейти к следующему или вернуться к предыдущему разделу.
Поисковые системы также отображают информацию пользователям в виде упорядоченного списка страниц, и в онлайновых изданиях статьи большого объема также разбиваются на страницы. Также в некоторых ситуациях разбиение на страницы может оказаться полезным для блогов. Дополнительные средства навигации могут упростить доступ к определенным страницам сайтов – например, облегчить пользователям просмотр архивов на сайте.
В большинстве случаев разбиение на страницы оказывается гораздо более эффективным способом навигации, чем традиционный способ с использованием кнопок или ссылок, позволяющих перемещаться только на следующую или на предыдущую страницу, поскольку позволяет посетителям быстро перейти к интересующим их разделам на сайте. Разумеется, это не обязательная, но тем не менее очень полезная возможность.
В этой статье мы рассмотрим несколько примеров удачного разбиения сайта на страницы и покажем, как и где его следует применять.
7 основных принципов использования нумерации страниц на сайте
- Отведите достаточно места для каждого из номеров страниц, чтобы пользователям было удобно открывать страницы при помощи мыши.
- Не используйте подчеркнутый шрифт для номеров страниц.
- Всегда выделяйте текущую страницу из всех остальных страниц.
- Оставляйте достаточно свободного пространства между ссылками на разные страницы.
- Разместите на странице ссылки, позволяющие перейти к следующей и вернуться к предыдущей странице.
- Используйте ссылки, позволяющие перейти на первую и последнюю страницу публикации (там, где это нужно).
- Размещайте ссылки на первую и последнюю страницы на сайте
Полезные ссылки
- Статья Фарука Эйтса (Faruk Ates) о разбиении статьи на страницы, Pagination 101
- Таблицы стилей, распространяемые бесплатно: Несколько примеров разбиения сайта на страницы.
- Если вы ведете ваш блог при помощи Wordpress, вы можете использовать плагин WP-PageNavi для динамической генерации страниц. Эта система легко устанавливается, и для ее эксплуатации требуется лишь немного изменить исходный код оформления страниц.
Ошибка №1: Элементы навигации плохо различимы на общем фоне
Поскольку разбиение на страницы предназначено для улучшения навигации, необходимо ясно обозначить для пользователей, какую страницу они просматривают в настоящий момент, какие страницы они уже посетили, и куда еще они могут перейти. Эти три вещи позволяют пользователю понять, как работает система и как организована навигация на сайте.
Однако важнее всего ясно всего обозначить возможности навигации. Например, на сайте Hugg.com такая возможность отсутствует. Цвет ссылок не выделяется на фоне страницы. Ссылки, на которые наведен указатель мыши, никак не выделяются:
Цвет ссылок на сайте Hugg.com не выделяется на фоне страницы. Ссылки, на которые наведен указатель мыши, никак не выделяются.
Ошибка №2: Разбиение на страницы не является интуитивно понятным для пользователя
Если вы стоите перед выбором, какой вариант дизайна постраничного разбиения содержимого сайта предпочесть – сложный (но броский, хорошо выглядящий внешне) или простой, предоставляющий все необходимые пользователю возможности, всегда выбирайте простое решение. Если пользователи не понимают, как пользоваться средствами навигации на вашем сайте, они не смогут ими воспользоваться и, следовательно, такой сайт просто не достигнет своей цели.
Один из наиболее ярких примеров подобной ошибки – сайт Helium.com. Посмотрите на следующую иллюстрацию, где он изображен: что обозначают стрелки? Это страница, которую вы уже посетили – или та, на которой вы сейчас находитесь? И почему у ссылки на страницу 2 белый фон? Почему стрелки окрашены в разные цвета? Все это мешает пользователю ориентироваться на сайте.
Дизайн на сайте Helium.com,затрудняющий восприятие пользователя
Вариант дизайна, не являющиеся интуитивно понятными для пользователя, возникают тогда, когда информация плохо структурирована, иерархическая структура не выстроена или плохо организована, а дизайн сайта не продуман. Например, решение, где используются "пропуски" страниц, чересчур сложное и не интуитивно понятно пользователю.
Уже знакомый нам сайт: Helium.com
Когда ссылки на отдельные страницы размещаются слишком близко друг к другу, пользователям трудно выбирать нужную страницу. В качестве примера использован сайт Make-Believe.org. Дизайн не является интуитивно понятным пользователю..
Нестандартные решения могут быть удобными для пользователя
Чем чаще используется тот или иной элемент дизайна, тем труднее дизайнерам использовать какой-нибудь новый подход, не превращая при этом дизайн в сплошную загадку для пользователей. Соответственно, на сайтах, где используется разбиение содержимого статей на страницы, используются стандартные шаблоны – революционные подходы применяются довольно редко.
Тем не менее, и новые варианты решений могут быть удобными для пользователей. Так, на сайте Dirty.ru используется модель ползунка, позволяющая перемещаться между страницами: при помощи ползунка пользователи могут быстрее перейти к последним страницам сайта.
Ползунок на сайте Dirty.ru
Erweiterungen.de, официальная версия немецкоязычного сайта, публикующего расширения Firefox, предоставляет посетителям сайта возможность перейти на другие страницы, щелкнув кнопку "…".
После того как посетитель сайта щелкнет кнопку "…", ему станут доступны дополнительные возможности навигации. Erweiterungen.de.
Таблица стилей
Хотя на большинстве сайтов используется "стандартное" разбиение на страницы – ссылки с номерами страниц, расположенные в порядке возрастания, дизайнеры все же не отказываются от экспериментов с цветом, формой, фоном и формой.
Нумерация страниц на сайте не должна служить "приманкой для глаз" и привлекать внимание пользователей. Как элемент навигации, она должна помогать пользователю эффективно работать с сайтом. Поэтому визуализация оказывается здесь весьма полезной. В большинстве вариантов дизайна используются синий и голубой цвета.
Простая нумерация
Использование различных цветов и форм
Очень часто дизайнеры используют цвет для указания открытой посетителем страницы и выделения ее среди остальных страниц. Кроме того, номера страниц имеют определенную форму – прямоугольник, круг или кнопку. На номере открытой страницы, в отличие от остальных, как правило, нет ссылки.
Ввод номера страницы вручную
Иногда пользователи могут ввести номер страницы, которую нужно просмотреть, вручную. Такой прием применяется для тех вариантов разбиения на страницы, где действия пользователей ограничены – например, они не могут сразу перейти на последнюю страницу сайта.
Нестандартные решения