Как создать карту сайта: простое руководство
Иногда для достижения новых высот UX-дизайн требует взгляда ребенка, полного любопытства. Создав карту сайта UX, вы сможете быстро взглянуть на свой веб-сайт или приложение с высоты птичьего полета. Давайте рассмотрим, как, когда и почему используются карты сайта UX.
Что это?
Карта сайта UX — это иерархическая диаграмма веб-сайта или приложения, которая показывает, как страницы распределяются по приоритетам, связаны и помечаются. Если поток пользователей похож на детали просмотра улиц, карта сайта похожа на вид с высоты птичьего полета.
Когда используется?
Карты сайта используются на ранних этапах процесса проектирования пользовательского интерфейса, сразу после фазы исследования. Как правило, вы создаете карту сайта после персонализации, пути пользователя и сортировки карточек (Бабич, 2019). Для существующего веб-сайта поработайте над аудитом сайта или инвентаризацией контента, прежде чем создавать новую карту сайта.
Как создать карту сайта UX
[Анатомия]
Карта сайта UX состоит из связанных страниц, каждая из которых имеет ссылочный номер и метку. Справочные номера помогают отслеживать страницы даже при переходе к каркасам, прототипам и итерациям (Mears, 2013). Пишите ярлыки в виде понятных заголовков страниц, оптимизированных для пользователей за счет сортировки карточек.
Начните с домашней страницы и разместите страницы в следующих строках по приоритету (от категорий высокого уровня к конкретным страницам). Вы увидите основные страницы в первом ряду, второстепенные страницы в следующем и т.д.
Другой способ взглянуть на иерархию карты сайта — через структуру URL:
website.com/category/sub-category/specific-page
Хотя это необязательно, вы также можете включить легенду, объясняющую символы и линии, аннотации, поясняющие информацию, и иллюстрированные типы страниц, чтобы показать распределение типов (Mock, 2017).
[Советы для малых, средних и крупных сайтов]
В зависимости от размера и сложности вашего веб-сайта вы можете создать плоскую или глубокую карту сайта.
Для небольшого веб-сайта или приложения (10+ страниц) рассмотрите возможность создания плоской карты сайта с 4 или менее вертикальными уровнями. Плоские карты сайта улучшают обнаруживаемость контента, так как количество уровней, по которым нужно переходить, уменьшается. Самая плоская карта сайта состоит из 1 вертикального уровня, где разные разделы размещаются на одной странице.
Для среднего размера (100+ страниц) вы все равно можете создать плоскую карту сайта, но с более широким рядом дополнительных страниц. Чтобы отобразить эти страницы, рассмотрите возможность использования мегаменю, в котором ссылки сгруппированы по подкатегориям, чтобы улучшить сканирование.
Для больших размеров (более 1000 страниц) рассмотрите возможность создания глубокой карты сайта, в которой будет храниться вся информация, с 5+ вертикальными уровнями. Глубокие карты сайта могут затруднить обнаружение контента, поэтому постарайтесь предоставить альтернативные способы (например, ярлыки меню) для доступа к более глубоким страницам. Страницы категорий или центры навигации также могут помочь в дальнейшей организации объема страниц.
Почему это важно?
Карта сайта UX позволяет вам планировать удобство использования независимо от того, работаете ли вы над новым веб-сайтом или над его редизайном (Marie, 2018). Она предоставляет полный обзор, который затем помогает командам упростить, обрезать ненужные страницы и сохранить то, что важно.
Карта сайта UX также помогает узнать, удобны ли связанные страницы для пользователей и SEO. С помощью карты сайта вы можете стратегически размещать контент там, где пользователи легко его найдут, а также выявлять проблемные области, такие как страницы, скрытые под неинтуитивным ярлыком (Mears, 2013).
Заключение
В целом карта сайта UX дает ориентированные на пользователя решения в области навигации, маркировки и организации. Вот краткий обзор того, что мы узнали:
- Что: карта сайта UX — это иерархическая диаграмма связанных страниц.
- Когда: Создавайте на ранних этапах процесса проектирования UX, после фазы исcледования.
- Как: каждая страница имеет ссылочный номер и метку, а страницы связаны из категорий высокого уровня с конкретными страницами. Рассмотрим плоскую карту сайта для небольших сайтов и глубокую карту сайта для больших.
- Зачем: Карта сайта UX показывает полную картину вашего цифрового продукта, чтобы вы могли принимать лучшие дизайнерские решения.
Теперь, когда мы поднялись по концептуальному дереву карты сайта UX, я надеюсь, что вы достигли новых высот в том, как улучшить дизайн UX своего веб-сайта или приложения.
