Карты сайтов
Как составить карту сайта: структура страниц до первого макета
Как составить карту сайта так, чтобы дизайнер, копирайтер и заказчик видели одно и то же? Нарисовать структуру страниц до макетов: от целей и инвентаризации контента до глубины вложенности, навигации и адресов. Разберём по шагам и заодно объясним, чем такая карта отличается от файла sitemap.xml для поисковиков.
На этой странице
- Две разные карты сайта
- Визуальная карта: структура для людей
- Файл sitemap.xml: список адресов для поисковиков
- Зачем рисовать структуру до макетов
- Как составить карту сайта по шагам
- Шаг 1. Цели и аудитории
- Шаг 2. Инвентаризация контента
- Шаг 3. Группировка и карточная сортировка
- Глубина и ширина: сколько уровней нужно
- Навигация и перекрёстные ссылки
- Типы страниц и схема адресов
- Типы страниц
- Схема адресов
- Как собрать карту сайта на доске
- Обсуждение с командой и заказчиком
- Частые ошибки
- Чек-лист готовой карты сайта
- Вопросы и ответы
Две разные карты сайта#
Словами «карта сайта» называют две разные вещи, и их постоянно путают. Прежде чем начинать, стоит понять, какая из них нужна вам.
Визуальная карта: структура для людей#
Визуальная карта сайта — это схема страниц и связей между ними: главная наверху, под ней разделы, ещё ниже — вложенные страницы. Её рисуют на этапе проектирования, до макетов и текстов, чтобы договориться о составе сайта. С ней работают дизайнеры, проектировщики интерфейсов, копирайтеры, SEO-специалисты и заказчик. Эта статья — о ней.
Файл sitemap.xml: список адресов для поисковиков#
sitemap.xml — служебный файл со списком адресов сайта, иногда с датой последнего изменения. Его читают поисковые роботы, чтобы быстрее найти и переобойти страницы; файл обычно указывают в robots.txt и в панелях вебмастера поисковых систем. Его не рисуют руками: на большинстве сайтов файл собирает система управления сайтом или фреймворк из реального списка страниц.
Зачем рисовать структуру до макетов#
Переставить карточку на схеме — минута. Переделать навигацию в готовом дизайне — дни, а после запуска — ещё и потерянные позиции в поиске из-за смены адресов. Карта сайта переносит споры о составе и вложенности на самый дешёвый этап.
- Общая картина. Заказчик видит, что войдёт в сайт, и вспоминает забытое до того, как дизайнер нарисовал меню.
- Оценка объёма. Видно, сколько уникальных страниц, сколько типовых и сколько текстов понадобится.
- Навигация. Главное меню, подвал и хлебные крошки следуют из структуры, а не придумываются по ходу.
- SEO. У каждой важной темы появляется своя страница, и две страницы не борются за один и тот же запрос.
- План работ. Статус у каждой страницы показывает, что готово, что в работе и что ещё не начато.
Как составить карту сайта по шагам#
Цели и аудитории
Зачем сайт и кто на него приходит.
Инвентаризация контента
Что уже есть и что нужно создать.
Группировка
Как разложить страницы по разделам, чтобы их нашли.
Иерархия
Сколько уровней и сколько страниц на каждом.
Навигация и перекрёстные ссылки
Как переходить между ветками дерева.
Типы страниц
Какие шаблоны страниц понадобятся дизайнеру и разработчику.
Схема адресов
Как будут выглядеть URL разделов и страниц.
Обсуждение с командой
Проверка карты на сценариях и согласование.
Первые три шага разберём ниже, иерархии, навигации, типам страниц и адресам посвящены отдельные разделы.
Шаг 1. Цели и аудитории#
Запишите, чего сайт должен добиться: продажи, заявки, регистрации, ответы на вопросы клиентов. Затем — кто приходит и с какими задачами. Покупатель ищет товар и условия доставки, партнёр — контакты и условия сотрудничества, соискатель — вакансии. Каждой важной задаче должен соответствовать короткий путь от главной.
Если вы уже рисовали путь клиента, используйте его: этапы и вопросы из карты пути клиента подсказывают, какие страницы нужны на каждом шаге.
Шаг 2. Инвентаризация контента#
Для редизайна выпишите все существующие страницы: из меню, из файла sitemap.xml, из выгрузки системы управления сайтом. Для нового сайта — всё, что должно быть: разделы, документы, формы, справочные материалы. Отметьте, что оставить, что объединить, что удалить и чего не хватает.
Удобно сразу перенести список на доску: одна карточка — одна страница или один тип страниц. Пока без связей, просто россыпью. Так легче следующий шаг.
Шаг 3. Группировка и карточная сортировка#
Разложите карточки по смысловым группам — будущим разделам. Главная ошибка здесь — группировать так, как устроена компания изнутри (по отделам), а не так, как думает посетитель (по задачам).
Проверить себя помогает карточная сортировка — известный метод исследования. Участникам дают карточки с названиями страниц и просят разложить их по группам. В открытой сортировке группы участники придумывают сами — это помогает понять, как люди называют разделы. В закрытой группы заданы заранее — так проверяют уже готовую структуру. Даже несколько участников из целевой аудитории часто показывают, что раздел, очевидный для команды, посетителям непонятен.
Глубина и ширина: сколько уровней нужно#
Любую структуру можно сделать глубокой (мало разделов, много уровней вложенности) или широкой (много разделов, мало уровней). Слишком глубокая прячет страницы: чтобы добраться до нужной, приходится угадывать правильный путь на каждом уровне. Слишком широкая перегружает меню: из двадцати пунктов выбрать трудно.
Так хуже
Так лучше
Практичный ориентир для большинства сайтов — два-три уровня под главной для основных страниц. Всё, что глубже, проверьте: может быть, это фильтр, вкладка на странице или тег, а не отдельный уровень дерева.
Типы страниц и схема адресов#
Когда дерево готово, посмотрите на него глазами дизайнера и разработчика: сколько разных страниц нужно нарисовать и запрограммировать, и как будут выглядеть их адреса.
Типы страниц#
На сайте из ста страниц обычно всего несколько типов. Их полезно отметить на карте цветом или иконкой: так видно, сколько макетов понадобится.
Схема адресов#
Адрес страницы удобно выводить из её места в дереве: раздел — первая часть пути, страница — вторая. Тогда адрес понятен человеку, а при переходе к файлу sitemap.xml и к хлебным крошкам ничего не придётся придумывать заново.
Как собрать карту сайта на доске#
Рисовать карту можно где угодно, но удобнее там, где её одновременно видят все участники и могут оставить замечания. Вот как это выглядит в NodePanel.
Откройте шаблон
Создайте доску из шаблона карты сайта: главная, разделы и вложенные страницы уже стоят деревом.
Перенесите инвентаризацию
Одна карточка — одна страница. Иконка подсказывает тип страницы, статус — готовность: не начато, в работе, готово.
Выстройте дерево
Соедините страницы ступенчатыми линиями. Когда карточек станет много, автораскладка расставит их ровными уровнями.
Выделите разделы
Крупные разделы удобно обвести группой и подписать — так видно границы веток.
Позовите команду
Пригласите дизайнера, копирайтера и заказчика: правки видны сразу, вопросы оставляют комментариями у карточек, а заказчику без аккаунта можно отправить ссылку только на просмотр.
Как команды используют такую карту в проектах, — на странице карта сайта онлайн. Попробовать доску можно в песочнице на главной, без регистрации. Готовую карту можно выгрузить в PNG, SVG или PDF и приложить к техническому заданию.
Обсуждение с командой и заказчиком#
Карта сайта не готова, пока её не проверили на реальных задачах. Лучший способ — пройти по ней вслух несколько сценариев: «я хочу узнать стоимость доставки», «я хочу вернуть товар», «я ищу вакансию». Если путь не находится за пару секунд или ведёт в неожиданный раздел — структуру нужно поправить.
- Заказчик проверяет, что ничего не забыто, и подтверждает названия разделов.
- Дизайнер считает типы страниц и продумывает меню.
- Копирайтер видит объём текстов и связи между страницами.
- SEO-специалист сверяет страницы с запросами и отмечает адреса.
- Разработчик оценивает шаблоны, фильтры и перенаправления.
Если сайт — часть продукта, полезно положить рядом карту пользовательских историй: она показывает, какие задачи пользователя решают страницы и в каком порядке их делать. А для мозгового штурма о разделах подойдёт интеллект-карта.
Частые ошибки#
- Структура по оргструктуре. Разделы повторяют отделы компании, а посетитель не знает, какой отдел отвечает за его вопрос.
- Каждое уточнение — новый уровень. Бренд, цвет и цена превращаются в этажи дерева вместо фильтров.
- Разделы-сироты. Страница есть в списке, но к ней не ведёт ни меню, ни перекрёстная ссылка.
- Двойники. Две страницы отвечают на один и тот же вопрос и конкурируют в поиске.
- Карта без статусов. Неясно, что уже готово, и карта перестаёт быть планом работ.
- Путаница с sitemap.xml. Команда рисует визуальную карту, думая, что этого достаточно для поисковиков, или наоборот.
Чек-лист готовой карты сайта#
- записаны цели сайта и основные аудитории;
- у каждой важной задачи посетителя есть короткий путь от главной;
- разделы названы словами посетителя, а не внутренними терминами;
- основные страницы — не глубже двух-трёх уровней под главной;
- уточнения вроде бренда и цены — фильтры, а не уровни;
- перекрёстные ссылки нарисованы и отличаются от вложенности;
- отмечены типы страниц и их статусы;
- продумана схема адресов, при редизайне — список перенаправлений;
- карту прошли вслух по сценариям заказчик и команда.
Вопросы и ответы#
Чем визуальная карта сайта отличается от sitemap.xml?
Визуальная карта — схема структуры для проектирования, её рисуют люди для людей до запуска. Файл sitemap.xml — список адресов для поисковых роботов, его обычно собирает система управления сайтом автоматически.
Сколько уровней вложенности должно быть на сайте?
Строгой нормы нет. Для большинства сайтов основные страницы удобно держать в двух-трёх уровнях под главной, а глубокие ветки проверять: часто это фильтр или вкладка, а не отдельный уровень.
Кто должен составлять карту сайта?
Обычно проектировщик интерфейсов или дизайнер вместе с заказчиком. Полезно сразу подключить копирайтера, SEO-специалиста и разработчика: каждый заметит своё.
Нужна ли карта сайта для небольшого сайта?
Да, даже для десяти страниц. Схема на одном экране занимает полчаса, но избавляет от спора о забытом разделе после того, как дизайн уже готов.
Можно ли показать карту сайта заказчику без регистрации?
Да. В NodePanel у доски можно включить публичную ссылку только для просмотра, а ещё выгрузить карту в PNG, SVG или PDF и отправить файлом.