Разбираем реальный пример информационной архитектуры: какие разделы были заложены в сайт отеля, как строилось меню и какие блоки планировались на главной странице.
Дерево сайта
Это не универсальный шаблон, а пример реального ТЗ
Перед разработкой сайта отеля была описана не только будущая навигация, но и логика размещения ключевых элементов: меню, контактов, бронирования, акций, отзывов, партнёров и дополнительных разделов.
Ценность такого документа в том, что программист и дизайнер получают не абстрактное пожелание «сделать удобный сайт», а понятную карту будущих страниц и приоритетов. Конкретные визуальные решения из старого ТЗ не нужно копировать буквально – важна сама логика предварительной проработки структуры.
Базовая логика сайта: три уровня
Главное меню, подменю и переходы между разделами. Пользователь должен понимать, где находится нужная информация.
Информация о номерах, услугах, инфраструктуре, правилах проживания, акциях и других объектах интереса.
Шаблон страниц, изображения, акцентные блоки и расположение элементов, которые помогают воспринимать структуру.
Сначала определили главное меню
Для сайта отеля в верхний уровень были вынесены восемь крупных направлений. Уже внутри них строилась детализация на отдельные страницы. Такой подход помогает не смешивать разные пользовательские задачи в одном длинном разделе.
Что находилось внутри основных разделов
Об отеле, заселение, карта, правила проживания, система «Всё включено», акции, программа анимации, отзывы, вакансии, контакты, обращения и документы.
Отдельные страницы под варианты размещения: двухместный номер, студио, трёхместный и четырёхместный.
Система «Всё включено», ресторан и отдельные кафе/бары – каждый объект как самостоятельная страница.
Анимация, экскурсии, детская анимация, игровая комната и детская площадка.
Бесплатные и платные услуги, трансфер, пляж, взрослый и детский бассейны.
Номерной фонд, территория, анимация, рестораны, детская и спортивная площадки, бассейны и пляж.
Контент разделили на две зоны по приоритету
В исходном ТЗ главная страница делилась на видимую при первой загрузке часть и контент ниже по странице. Чем важнее действие для гостя, тем выше оно располагалось.
Меню, контакты, бронирование, акции, отзывы, программа на день и другие первоочередные действия.
Приветственный текст, партнёры, дополнительные ссылки и служебная информация.
10 элементов верхней части главной страницы
Фирменная идентификация в верхней части страницы.
Доступ к основным разделам сайта.
Телефон и краткий адрес со ссылкой на местоположение.
Фотографии отеля, пляжа или территории.
Краткая информация об отеле в заметной зоне.
Одно из ключевых действий для посетителя.
Краткие анонсы с переходом на подробные страницы.
Оперативная информация для гостей.
Быстрый переход к впечатлениям гостей.
Ссылки на внешние площадки бренда.
Что оставили ниже первого экрана
Развёрнутая информация об отеле после ключевых действий верхней части.
Отдельный блок с логотипами или баннерами партнёров.
Текстовые ссылки на разделы и подразделы по иерархическому принципу.
Дерево сайта лучше проектировать до дизайна и разработки
В этом примере сначала была сформирована логика разделов и главной страницы, а уже затем требования переходили в дизайн и разработку. Такой порядок помогает заранее увидеть перегруженные разделы, недостающие страницы и ключевые пользовательские сценарии.
структура – это не перечень пунктов меню. Это связь между задачами пользователя, уровнями контента и действиями, ради которых создаётся сайт.
Нужна структура для нового сайта или переработки старого?
Можно начать с карты разделов и пользовательских сценариев, а уже после этого переходить к прототипу, дизайну и разработке.