Веб-дизайн

Архитектура и навигация веб-сайта: ключевые принципы и стратегии

Архитектура и навигация веб-сайта: ключевые принципы и стратегии

Эффективность веб-проекта существенно определяется грамотностью организации его архитектуры. Это влияет не только на удобство ориентирования посетителей, но также облегчает процесс обновления ресурса новыми материалами и подразделениями. Важно отметить, что система навигации формально независима от фактической внутренней структуры портала, хотя влияние последней на первую бывает весьма ощутимым. Например, предположим следующую картину: посетитель одного из сайтов намерен перейти в рубрику про создание сценариев (скриптов), вероятнее всего, он введёт в строку браузера следующий путь:

http://www.example.com/scripts/

И весьма вероятно, что информация окажется именно там, где нужно. Однако представим ситуацию: вдруг потребуется узнать подробности о продукте Domino Go Webserver Pro от фирмы Lotus Development. Вряд ли кому-то сразу придет на ум вводить такой конкретный адрес:

http://www.lotus.com/home.nsf/tabs/lotusgopro/

Безусловно, подбор адреса (URI) страницы сайта, где ты оказался впервые, — занятие сложное и бессмысленное. Но важно позаботиться о разумной организации структуры, чтобы человек, который ранее посещал твой ресурс, впоследствии смог быстро найти нужную страницу.

Основные структуры

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

Прямая структура

Такая организация носит название звездообразной. Ее суть заключается в следующем построении: есть главный файл (обычно главная страница сайта), который содержит прямые ссылки ко всем остальным документам данного ресурса. Такой тип архитектуры характерен для личных веб-страниц и небольших корпоративных ресурсов типа визиток. Очевидно, что подобная схема подходит для сайтов, ограниченных объемом до 5–9 страниц.

Линейная структура

Альтернативное наименование данной схемы — линейная организация. Такая схема подразумевает набор последовательно соединенных страниц, каждая из которых имеет переходы исключительно вперед либо назад. Подобный подход встречается редко и чаще всего применяется в простых демонстрациях или определённых образовательных материалах. Применение такой структуры оправдано, если понимание материала зависит от ознакомления с предшествующими частями, а доступ к информации вне контекста предыдущего содержания нежелателен. Например, рассмотрим пошаговое изложение научного доказательства формулы или вывода уравнения. Представим ситуацию, когда читатель впервые видит предложение вроде: «Напомним итоговый вывод предыдущей стадии…» — сможет ли он вообще разобраться, о чём речь? Аналогично, какова реакция потенциального покупателя продукта, оказавшегося непосредственно на странице с утверждением типа: «Именно эти свойства привели к двукратному увеличению цены относительно аналогов…». Захочет ли он добровольно выяснить причину повышения стоимости?

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

Древовидная структура

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

Комбинированная структура

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

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

Навигация по узлу

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

Домашняя страница

Главная страница сайта является ключевым элементом навигационной структуры. Это та самая стартовая страница, которая открывается автоматически при вводе основного (корневого) доменного имени сервера.

Иногда в роли стартовой выступает особый вид домашней веб-страницы — так называемая «сплэш-страница». Обычно она лишена какого-либо содержимого и текста, предоставляя лишь графическое оформление. Изначально такие страницы были распространены в эпоху, когда сервера не умели автоматически преобразовывать кодировку текста, позволяя пользователям самим выбирать нужную кодировку. Сегодня такой тип страниц встречается редко и чаще всего служит площадкой для демонстрации рекламы.

Домашние веб-страницы делятся на два типа — информационно-насыщенные и представительные.

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

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

Неважно, какой дизайн имеет домашняя страница — она обязательно должна соответствовать следующим принципам организации:

  • Ключевая информация должна располагаться сразу на первом экране — если её объем велик, допустимо ограничиться лишь названием темы.
  • Элементы навигации важно сделать яркими и простыми для понимания, учитывая, что новые пользователи вашего сайта ещё незнакомы с вашим фирменным стилем оформления.
  • Навигационные элементы желательно размещать компактно на одном экране, исключение составляют разве что масштабные сайты-гиганты.
  • На главной странице обязательно должно чётко прослеживаться назначение портала или содержаться нечто привлекательное для пользователей.
  • Избегайте создания страниц исключительно на основе графики: практически всегда появляется потребность дополнить их новым текстом (например, новостями или сообщениями).
  • Не перегружайте главную графику — посетители будут терпеливо ожидать загрузки только тогда, когда уже понимают ценность ресурса, а новички пока вообще не знают, где оказались. Сейчас оптимальный вес домашней страницы — около 40 Кб. Если всё же она выходит тяжёлой, постарайтесь уменьшить объём изображений, разделить содержимое на блоки, организовать постепенную загрузку частей страницы.
  • Размещение необычных компонентов типа java-апплетов, звукового сопровождения и прочего на главной также нежелательно. Если они действительно нужны, лучше предупреждать пользователей заранее через специальную стартовую заставочную страницу.

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

Правила организации системы навигации

Навигация подразделяется на два типа — локальная и общая. Пользователь должен легко перемещаться между основными разделами веб-ресурса благодаря глобальной навигации, а внутри конкретного раздела или группы страниц ориентироваться с помощью локальной системы навигационных элементов.

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

Также рекомендуется визуально разграничивать локальную навигационную систему от глобальной. Тем не менее важно добиться ощущения целостности обеих систем.

Не стоит создавать точную копию кнопки браузера «Назад», разве что в исключительных ситуациях. Тем более недопустимо давать этому элементу аналогичное название — ведь неизвестно, какой путь прошел пользователь до вашего ресурса. Все элементы интерфейса навигации обязаны иметь ясные и однозначные наименования либо символы. Нельзя строить догадки относительно того, как именно человек попал на вашу страницу (исключение составляют страницы, отображаемые после отправки заполненных форм). Что кажется очевидным автору сайта, совершенно необязательно будет таким же прозрачным для пользователей. Избегайте использования логотипа компании в роли ссылки на главную страницу. Несмотря на распространенность такого подхода, это неверная практика. Лучше создать отдельный значок вроде домика, специальную кнопку или придумать оригинальную альтернативу.

Что делать, когда количество разделов значительное? Какие элементы включить в глобальную систему навигации? В данном случае целесообразно рассмотреть три различных метода организации структуры:

  • Добавьте в глобальную навигацию ссылки на страницы и документы, представляющие наибольший интерес для пользователей сайта (например, ссылку на форму заказа).
  • Разместите здесь также ссылки на наиболее востребованные посетителями разделы ресурса. Самые посещаемые страницы можно выявить лишь спустя время после изучения статистики посещений. Изначально вы можете самостоятельно предположить, какие разделы будут пользоваться спросом.
  • Сочетайте оба предложенных метода оптимальным образом.

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

To top