03. Разработка структуры сайта

На этой странице:

• Важность выбора структуры
• Классификация структур
  • Линейная схема
  • Таблица
  • Иерархия
• Рекомендации разработчику
  • Постоянные элементы сайта
  • Заголовок страницы и окна
  • Главное меню
  • Навигация
  • Авторская подпись
  • Внешние ссылки
  • Главная страница
  • Текст на сайте

Структура сайта (его архитектура) должна помогать решать задачи, ради которых сайт создан.

Важность выбора структуры

Если пользователь испытывает трудности в работе с сайтом, связанные с:

• общим представлением об устройстве сайта,
• поиском и потреблением услуг, предлагаемых сайтом,

то структуру сайта следует признать неудачной.

Структура сайта определяется разбиением общего содержимого на отдельные страницы и объединением их в смысловые разделы.

Кроме того, структура сайта неразрывно связана с системой навигации.

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

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

Пример 1

Структура фрагмента школьного сайта, представленная ниже, явно неудачна:

• Учителя
  • Расписание уроков
• Ученики
  • Расписание факультативов

Страница “Расписание уроков” здесь является потомком страницы “Учителя”, хотя в этой странице заинтересованы и ученики.

Страница “Расписание факультативов” в схеме является потомком страницы “Ученики”, хотя она полезна и учителям.

Логичнее построить схему в таком виде:

• Учителя
• Ученики
• Расписание
  • Основные уроки
  • Факультативы

Пример 2

Для сайта, содержащего набор равнозначных страниц, линейная схема будет явно неудачной:

Добраться до страницы “Песни” пользователи смогут, только пройдя через страницы “Стихи”, “Рассказы” и “Рисунки”.

Для такого сайта больше подойдет иерархическая схема, в которой с главной страницы можно напрямую попасть на любую другую:

Пример 3

Если для оформления заказа на товар (подписки на список рассылки или получения другой услуги) пользователю необходимо последовательно поработать на четырёх страницах, то иерархическая схема для организации этих страниц не подходит:

Более правильной будет линейная структура, задающая последовательность движения:

Классификация структур

Большие сайты, как правило, имеют довольно сложную архитектуру, но можно выделить три базовых схемы, используемые в виде основополагающего каркаса:

• линейная схема;
• таблица;
• иерархия.

Линейная схема

Строгая линейная организация сайта программирует перемещение пользователя по цепочке страниц (вперёд и назад):

Для удобства ориентации и навигации полезно на такие страницы выводить ссылки на соседние страницы и номер текущей страницы в общей линейной последовательности:

Основная линейная структура может дополняться множеством модификаций:

• цепочка с альтернативами — имитирует интерактивность на сайте. Это может быть сайт-вопросник, который на странице с номером 2 предлагает выбрать либо страницу 2.1 (например, если пользователь — женщина), либо страницу 2.2 (если пользователь — мужчина). Затем движение продолжается по основной цепочке;

  

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

  

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

  

Таблица

Организация страниц сайта в виде таблицы хорошо подходит для перемещения по совокупностям родственных элементов в двух направлениях (по строкам и столбцам).

В качестве примера можно привести совокупность страниц, предлагающих информацию по цифровым фотокамерам:

Пользователь легко ориентируется в табличной структуре. Если он находится, например, на странице с характеристиками камеры Nikon D70 (страница “3,1”), то сдвиг “вверх” приводит его на страницу с характеристиками “соседней” камеры Konica Minolta A2, а сдвиг “вправо” — на страницу с описанием тестирования текущей камеры.

Ориентации пользователя должна помогать правильно разработанные навигационные средства на каждой странице. Пример приведённый ниже демонстрирует точное соответствие навигационных средств страницы табличной структуре сайта:

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

Иерархия

Это самая распространённая структура, на которой основано большинство сайтов Интернета.

Если все страницы сайта являются потомками главной, то в качестве навигационной системы подойдёт простое горизонтальное или вертикальное меню, в которое включают все страницы, в том числе и главную.

Когда позиций меню не слишком много (от 5 до 9), их удобно располагать по горизонтали. Меню повторяется на концах страниц, чтобы дать пользователю возможность выбрать следующий пункт, не прокручивая вверх текущую страницу. Пример сайта с горизонтальным меню:

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

Довольно часто меню сайта оформляется в виде набора вкладок, привычных пользователю программного обеспечения. Ссылка “вверх” необходима на конце страницы:

Если сайт имеет более глубокий уровень иерархии, то одновременно используют три типа меню.

• Меню сайта. В него включают прямые потомки главной страницы и саму главную страницу. Как правило, это меню горизонтальное, под заголовком сайта и на концах страниц.
• Меню предка текущей страницы. В него включают страницы, являющиеся сёстрами по отношению к текущей. Как правило, это меню вертикальное, его располагают на вертикальной полосе.
• Меню «хлебные крошки». Это меню показывает путь от главной страницы к текущей по иерархическому дереву сайта. Обычно это меню располагают ниже меню сайта и повторяют на концах страниц.

Пример сайта с двухуровневой навигацией:

Весьма привлекательно выглядит двухуровневое меню на вкладках. Меню второго уровня выводится на активной вкладке:

Рассмотрим пример возможной системы навигации с использованием меню трёх уровней:

Верхняя строка представляет собой меню из прямых потомков корня (сам корень, страница “начало”, также включён в это меню). Предок текущей страницы — страница “раздел 4” в этом меню выделен.

Вторая сверху навигационная строка представляет собой меню прямых потомков страницы “раздел 4”. Прямой предок текущей страницы — “раздел 4.3” в этом меню выделен. Меню этого раздела располагается на вертикальной на полосе у левого края окна.

Последняя навигационная строка показывает путь от корня дерева к текущей странице (меню “хлебные крошки”). Имя текущей страницы “раздел 4.3.2” в этом меню ссылкой не является.

Последняя навигационная модель оформлена как система с вкладками, дополненная вертикальным меню и “хлебными крошками”.

Рекомендации разработчику

Рекомендации по конструированию сайта изложены в приложении “Рецепт удобного сайта“.

Рецепт удобного сайта

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

Постоянные элементы сайта

Каждая страница сайта должна иметь постоянные элементы, которые крепко держат своё место на экране при листании страниц:

• Логотип
• Заголовок сайта
• Главное меню

На внутренних страницах логотип должен быть ссылкой на главную страницу.

Погрешность	Описание
Отсутствие единого стиля оформления страниц
Отсутствие логотипа
Логотип не является ссылкой на Главную на вторых страницах
Отсутствие заголовка сайта
Разрушение единого информационного элемента при изменении размера окна браузера
Постоянные элементы страниц плохо держат свое место на экране при переходах со страницы на страницу

Заголовок страницы и окна

Заголовок страницы должен располагаться ниже заголовка сайта или ниже горизонтального меню, если оно имеется под заголовком сайта.

Заголовок окна должен буквально повторять заголовок страницы.

Погрешность	Описание
Отсутствие заголовка страниц
Название окна не совпадает с заголовком страницы

Главное меню

Число, названия пунктов, их порядок в главном меню не должны меняться при листании страниц.

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

Названия пунктов меню должны быть очень короткими.

Недопустимо растягивать один пункт на несколько строк.

Главное меню рекомендуется повторять на концах страниц.

Навигация

• Главное меню сайта (корень и список прямых потомков). В этом меню предок текущей страницы (это ссылка) должен быть как-то дополнительно выделен.
• В меню текущей страницы записывают страницы-сёстры, т. е. страницы, имеющие общего прямого предка с текущей страницей. В этом меню запись на текущую страницу обязательно присутствует, но не является ссылкой.
• Для сайта с глубокой иерархией очень полезно меню “хлебные крошки”. Эта запись-меню, показывает путь к текущей странице от главной страницы по иерархической схеме сайта.

Погрешность	Описание
Отсутствие навигационных элементов или неудобная навигация
Работает ссылка на текущую страницу

Авторская подпись

На каждой странице должна быть авторская подпись с адресом электронной почты, прописанным в явном виде. Эта запись может располагаться в начале странице или в её конце.

Погрешность	Описание
На страницах отсутствует информация об авторах с электронным почтовым адресом

Внешние ссылки

На сайте должны быть внешние ссылки.

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

Внешние ссылки должны быть прокомментированы.

Погрешность	Описание
Отсутствует раздел Ссылки
Электронные почтовые адреса и внешние ссылки не прописаны на страницах в явном виде
Неработающие ссылки

Главная страница

Не помещайте на главную страницу рекламные лозунги, приветственные спичи и другой шум из разряда «общей болтологии».

Вместо этого сформулируйте идею сайта, разместите анонсы материалов.

Погрешность	Описание
Неудачная Главная страница

Текст на сайте

Текст разбивайте на небольшие абзацы.

Абзацы лучше отделять друг от друга пустыми строками (элемент P).

Не центрируйте строки большого текста.

На сложном фоне размещайте текст внутри однотонных областей.

Не фиксируйте размер шрифта.

Не записывайте основной текст увеличенным размером шрифта и, тем более, жирным или курсивным начертанием.

Старайтесь использовать шрифт по умолчанию.

Структурируйте текст, используя иерархию заголовков (элементы Hn) и абзацное деление (элемент P).

Конструируйте текст по принципу перевёрнутой пирамиды — сначала вывод, затем подробности.

Погрешность	Описание
Стиль оформления
Многочисленные выделения одного и того же информационного элемента
Слишком большие массивы выделений
Выделение стилем, типичным для ссылок
Более двух разных шрифтов (гарнитур)
Фиксированный размер шрифта, который нельзя изменить в браузере
Очень большие абзацы
Отсутствие выравнивания
Качество изложения
Рекламный стиль изложения
Слишком длинные ссылки, многословные невыразительные (несамоочевидные) разделы меню
Неудачные заголовки (сайта, страниц, разделов)
Многословные описания, которые можно сократить без потерь для содержания
Погрешности стиля изложения
Заимствованный текстовый материал без ссылок на автора
Антигуманность содержания
Ненормативная лексика
Призывы к насилию
Оскорбление чести и достоинства (страны, человека)
Пропаганда нездорового образа жизни
Пропаганда учений, наносящих вред психике человека