Неудачная структура сайта

Величина штрафа

Структура сайта оценивается по степени её соответствия содержанию и удобству решения пользовательских задач на сайте.

При этом оценивается именно структура сайта, а не система навигации.

Штраф выбирается из диапазона 0.1–0.5 по усмотрению проверяющего.

Пояснение

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

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

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

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

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

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

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

Пример 1

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

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

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

Более правильная схема может иметь вид:

Пример 2

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

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

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

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

Иерархическая структура

Пример 3

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

Иерархическая структура

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

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

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

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

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

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

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

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

Средства навигации и ориентации в узле линейной структуры

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

Цепочка с альтернативами

Цепочка с альтернативами имитирует интерактивность на сайте:

Цепочка с альтернативой

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

Цепочка с ответвлениями

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

Цепочка с ответвлениями

Цепочка с общим разделом

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

Цепочка с общим разделом

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

Таблица

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

Таблица

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

  Характеристики Тесты Обзоры Магазины
Canon EOS 300D 1,1 1,2 1,3 1,4
Konica Minolta A2 2,1 2,2 2,3 2,4
Nikon D70 3,1 3,2 3,3 3,4
Panasonic DMC-FZ20 4,1 4,2 4,3 4,4
Sony DSC-F828 5,1 5,2 5,3 5,4

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

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

Навигация в ячейке таблицы

Иерархия

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

Иерархия

Ниже представлен пример возможной системы навигации на иерархическом сайте:

Навигация на странице иерархического сайта

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

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

Третья сверху навигационная строка представляет собой меню прямых потомков страницы “раздел 4.1”. Текущая страница “раздел 4.1.2” ссылкой в этом меню не является.

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

Ниже показаны страницы сайта, доступные с текущей “4.1.2”, а также пройденный пользователем путь от начальной страницы сайта.

Страницы сайта, доступные с текущей

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