Карта сайта

Когда применять

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

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

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

На основе каких данных строится

Структуру опирают на то, как люди группируют содержимое и как его называют. Это даёт карточная сортировка. Находят ли люди нужное в предложенной структуре, проверяет древовидный тест. Что важно пользователям больше всего, показывает анализ топ-задач. Реальное поведение берут из аналитики и поисковых запросов на текущем сайте.

Исследовательские силы есть не всегда. Тогда начинают с аналитики и обратной связи, а исследование дозаказывают по самым спорным разделам.

Кто участвует

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

Что нужно для старта

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

Как использовать

1. Инвентаризация

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

2. Задачи людей

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

3. Группы и названия

   Проведите открытую карточную сортировку и посмотрите, какие элементы люди считают родственными и как называют группы. Это основа верхнего уровня.

4. Иерархия

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

5. Оформление

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

6. Проверка

   Проверьте структуру древовидным тестом и юзабилити-тестированием, сверьте с аналитикой и поисковыми запросами. В глубокой структуре предусмотрите быстрые ссылки на нижние уровни и хлебные крошки.

7. Обновление

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

Результат

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

Что дальше

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

Типичные ошибки

• Крайности глубины

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

• Глубокая структура без ярлыков

  Если глубину не сопровождают быстрые ссылки и хлебные крошки, люди теряются или уходят. Общие и пересекающиеся категории усугубляют это.

• Нет очевидной стартовой категории

  Тема есть на сайте, но нет раздела, с которого её искать, и до содержимого трудно добраться.

• Перегруженная карта

  Подробности пугают тех, кому нужен обзор. Карта для заказчика остаётся краткой.

• Поиск вместо структуры

  Если навигация плохо спроектирована, поиск прикрывает проблему. Сначала чинят структуру.

• Ставка на страницу-карту

  Посетители почти не заходят на неё. Она дополняет навигацию, но не заменяет её.

Российская специфика

Русскоязычный конспект главы о навигации и картах сайтов из книги Морвиля и Розенфельда есть на Хабре (2018).

Кто использует

Цифровая служба правительства Великобритании собирала предметную структуру GOV.UK по частям, организация за организацией. К концу 2014 года появилось 42 темы и 278 подтем. При проверке в январе 2015 года выяснилось, что масштаб предметных областей стал виден только тогда, когда содержимое уже лежало на сайте. Одни подтемы выросли больше ожидаемого, другие остались малыми, часть тем продублировалась, а часть областей, например здравоохранение и преступность, вообще не вошла. Обратная связь показала проблемы с навигацией. Команда решила убрать дубли и пустые категории, объединить схожие и позже заполнить пробелы.