Информационная архитектура в UX: структура до навигации

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

Начните с содержимого и задач пользователей. Определите основные типы материалов, сгруппируйте связанные элементы, согласуйте названия и проверьте пути к важным разделам. Затем перенесите структуру в UX-дизайн и прототип, чтобы увидеть, помогает ли реальный интерфейс находить и использовать нужное.

Архитектура, навигация и карта сайта — разные вещи

Карта сайта показывает страницы и их иерархические связи. Навигация предлагает пути через интерфейс: меню, хлебные крошки, связанные ссылки, поиск и фильтры. Информационная архитектура включает также определения содержимого и словарь, благодаря которым эти пути согласованы.

В объяснении различий между IA и навигацией от NN/g к архитектуре относятся инвентаризация материалов, группировка, таксономия и описательные метаданные. Это различие важно, когда небольшая на вид проблема меню на самом деле связана с содержимым. Перенос пункта не поможет, если на нескольких страницах находятся разные версии одного ответа.

Например, на учебной платформе в меню могут быть «Курсы», «Темы» и «Учебные маршруты». Прежде чем рисовать ссылки, команда должна определить смысл каждого элемента. Учебный маршрут — это курс, упорядоченная подборка курсов или рекламная страница? От ответа зависят связи, метаданные и ожидания пользователя.

Определите материалы и задачи, которые они поддерживают

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

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

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

Опишите связи до построения большой иерархии

Определим курс как упорядоченный набор уроков. Урок имеет одну поддерживаемую запись содержимого и известное место в последовательности. Тема описывает предметную область и может объединять несколько курсов. Учебный маршрут рекомендует порядок курсов, не копируя их уроки.

В примере курс «Основы исследований» содержит урок «Нейтральные вопросы». Курс относится к теме «Исследование пользователей» и входит в маршрут «Основы UX». Эти связи отвечают на разные вопросы: «Что дальше?», «Что ещё есть по этой теме?» и «С чего начать?».

Не пытайтесь выразить все отношения одной древовидной иерархией. Курс может относиться к нескольким темам и при этом иметь одну поддерживаемую страницу. Маршрут может ссылаться на неё, а не создавать копию с немного другим названием. Так обновления остаются согласованными, а переходы — предсказуемыми.

Запишите правила явно. Можно ли использовать урок в другом курсе? Если да, где показывать прогресс и порядок прохождения? Может ли курс входить в несколько маршрутов? Что произойдёт при его закрытии? Это архитектурные решения с последствиями для интерфейса, а не технические мелочи, которые стоит отложить до завершения меню.

Выберите названия, которые различают содержимое

Определите небольшой согласованный словарь для важных полей. На этой платформе он может включать тему, уровень подготовки и тип материала. Для каждого значения согласуйте название и смысл. Если «Начальный», «Вводный» и «Основы» обозначают один уровень, выберите основной термин интерфейса, а остальные при необходимости сохраните как синонимы для поиска.

Не смешивайте понятия. «Короткий» описывает длительность, а не сложность. «Популярный» связан с поведением аудитории или продвижением, а не с темой. Если объединить их в одном списке категорий, сравнивать варианты и понимать действие фильтра будет труднее.

Проверяйте названия на реальных материалах и языке пользователей. Профессиональный термин «Research operations» может быть корректным, но непонятным человеку, который ищет первый урок об интервью. Название должно раскрывать содержимое, а не просто отражать отдел, отвечающий за него.

Если пользователи и редакторы по-разному группируют материалы, карточная сортировка поможет изучить эти связи. Она даёт данные для решения, но не создаёт готовую архитектуру автоматически и не выбирает лучшее название за команду.

Дайте материалу основное место и полезные дополнительные пути

Первая версия структуры может включать каталог курсов, страницы тем и учебные маршруты. Каталог помогает сравнивать варианты; страница темы — изучать предметную область; маршрут — двигаться в рекомендуемом порядке. Все эти пути могут вести на одну страницу курса.

Страница курса «Основы исследований» должна объяснять, чему научится человек, какая подготовка нужна, как устроена последовательность уроков и как начать или продолжить. Страница темы помогает выбрать среди связанных курсов. Страница маршрута объясняет порядок их прохождения. Одинаковое вступление во всех трёх местах скрыло бы различие их ролей.

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

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

Покажите модель и интерфейс в Pixso

На холсте Pixso Whiteboard нарисуйте по одному примеру каждого типа материала. Подпишите связи: курс «содержит» уроки, тема «объединяет» курсы, маршрут «задаёт порядок» курсов. Глаголы не дают одной линии незаметно обозначать разные отношения.

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

В карточке курса используйте реальное название, уровень и результат обучения вместо текста-заполнителя. На экране урока покажите принадлежность курсу и следующий урок. Проверка на содержимом реального объёма часто обнаруживает отсутствующее поле или неоднозначную связь ещё до визуальной полировки.

Проверьте поиск и полезность конечной страницы

Составляйте задания через потребность, не повторяя название нужного пункта. Например: «Вы готовитесь к первому интервью с клиентом и хотите сформулировать вопросы так, чтобы не подсказывать ответ. Где вы будете искать помощь?». Проверяйте и выбранный путь, и страницу, которую человек считает ответом.

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

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

Поддерживайте архитектуру при росте содержимого

Назначьте ответственных за типы материалов и словари. Для нового курса должны быть понятны предмет, уровень, правила предварительной подготовки и связи с существующими материалами. Если редактор может разместить его только в «Прочем», проверьте, не отсутствует ли важное различие в содержимом или модели.

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

Результат — структура, помогающая выбирать, понимать и продолжать обучение. Проектировать меню становится проще, потому что команда уже согласовала состав продукта и связи между его частями.