Информационная архитектура сайта и приложения: структура, навигация, карточная сортировка

Распространённое заблуждение — считать ИА схемой разделов, которую рисуют в Miro за вечер. Схема лишь итог, а основная работа — сверить язык организации с языком посетителей. На сайте колледжа раздел может называться «Учебная часть», потому что так устроено управление, а абитуриент ищет «Как поступить» и «Сколько стоит обучение». Пока структура повторяет оргструктуру, никакой дизайн экрана её не спасёт.

Из чего состоит информационная архитектура

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

Опорой для всех четырёх служат таксономия и метаданные. Таксономия — согласованный словарь категорий: что считается «верхней одеждой», а что «куртками», и куда попадает жилет. Метаданные — признаки страницы или товара (размер, цвет, район, дата), из которых собираются фильтры. Если цвет в карточках записан то «синий», то «navy», фильтр покажет лишь часть ассортимента.

Кому навык нужен и когда хватит другого подхода

Дизайнеру интерфейсов ИА нужна до того, как он начнёт рисовать экраны, иначе макеты навигации придётся переделывать. Менеджер продукта опирается на неё, решая, станет ли новая функция отдельной вкладкой или пунктом внутри существующей. Редактор сайта и контент-менеджер магазина решают задачи ИА каждый день: куда положить новый материал и как назвать категорию.

Для лендинга или приложения из трёх экранов отдельные исследования структуры обычно избыточны. Вопрос «почему люди бросают оформление заказа» — про сценарий, для него лучше подойдут юзабилити-тест и аналитика воронки. ИА отвечает на другой вопрос: «где это лежит и как это называется».

Учебный пример: сайт колледжа

Ситуация условная. У колледжа сайт на 140 страниц, меню собрано по подразделениям: «Учебная часть», «Отдел кадров», «Приёмная комиссия», «Документы». Приёмная комиссия каждый день отвечает на звонки о сроках подачи документов на заочное отделение, хотя эти сведения на сайте есть.

Сначала страницы выписывают в таблицу с назначением и датой обновления — сразу видны дубли и мёртвые страницы. Затем готовят карточки и проводят открытую сортировку с абитуриентами, родителями и студентами. Выясняется, что люди объединяют сроки приёма, стоимость и перечень документов в группу «Поступление», а слово «Учебная часть» не использует никто.

По результатам строят черновое дерево: «Поступление», «Обучение», «Студентам», «О колледже», «Контакты». Его проверяют tree testing с заданием «Узнайте, до какого числа можно подать документы на заочную форму». Если большинство идёт в «Обучение», проблема в метке или расположении, и её исправляют до вёрстки, пока это почти ничего не стоит.

Карточная сортировка: открытая, закрытая, гибридная

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

Самая частая ошибка — подсказывать ответ словами на карточках. Если на трёх карточках стоит слово «расписание», их сложат вместе по совпадению слов, а не по смыслу. Лучше формулировать задачами: «Когда пересдача по математике», «Где посмотреть замены на завтра». Сотрудников колледжа в участники не зовут: они разложат карточки по отделам.

Результаты смотрят в матрице сходства, где видно, как часто две карточки попадали в одну группу, и на дендрограмме — дереве кластеров. Отчёты подсказывают, а не решают: если, допустим, 40 % участников положили «Стоимость обучения» в «Поступление», а 35 % — в «Документы», карточку стоит показать в обоих разделах через перекрёстную ссылку.

Tree testing: структура без дизайна

Tree testing проверяет только иерархию и названия, без иконок и поиска. В справке Optimal Workshop, где метод реализован в сервисе Treejack, метрики разведены чётко (статья поддержки, обновлена 19.07.2024): успех — доля участников, выбравших правильный пункт, а прямота (directness) — доля тех, кто дошёл до выбранного пункта, ни разу не вернувшись назад по дереву. Из расчёта времени исключают тех, кто потратил на задачу больше 100 секунд.

Разница между успехом и прямотой — главное в отчёте. Высокий успех при низкой прямоте значит, что люди в итоге находят ответ, но сначала заходят не туда: вводит в заблуждение метка верхнего уровня. Такие задачи разбирают по путям участников.

Глубина или ширина меню

Кевин Ларсон и Мэри Червински из Microsoft Research сравнивали веб-структуры разной глубины и ширины (CHI’98, с. 25–32, DOI 10.1145/274644.274649). По аннотации на странице публикации рост глубины ухудшал поиск информации, но и самая широкая и плоская структура проиграла среднему варианту.

Дробить меню ради правила «не больше семи пунктов» поэтому незачем: каждый лишний уровень вложенности обходится дорого. Но и широкое меню работает, только если пункты разбиты на понятные группы, а каждая метка подсказывает, что за ней лежит, — авторы называют это «запахом информации» (scent).

Поиск, фильтры и метрики находимости

Журнал поиска по сайту — дешёвый источник данных для ИА: в нём видно, какими словами люди называют разделы. Запросы с нулевым результатом подсказывают пропущенные синонимы («ипотека» вместо «жилищное кредитование») и недостающие категории.

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

С чего начать и в каком порядке осваивать

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

1. Проведите инвентаризацию знакомого сайта, например школы или управляющей компании: выпишите страницы в таблицу с назначением и датой обновления.
2. Прочитайте базовую книгу по ИА и разберитесь в системах организации, меток, навигации и поиска.
3. Проведите открытую сортировку на бумажных карточках или на доске в FigJam с пятью-семью людьми из целевой аудитории.
4. Постройте дерево на два-три уровня и сформулируйте шесть-восемь задач для tree testing без слов из меток.
5. Проверьте дерево в сервисе вроде Optimal Workshop, UXtweak или Maze (условия бесплатных тарифов и оплаты из России уточните заранее) либо вручную, записывая путь участника.
6. Исправьте метки и повторите проверку, сравнив успех и прямоту по тем же задачам.

Упражнения и ошибки новичков

Сравните меню двух интернет-магазинов одной категории: где одинаковые товары лежат в разных разделах? Перепишите метки чужого меню и проверьте оба варианта tree testing на одних задачах.

Типичные ошибки повторяются: внутренний жаргон («Портал самообслуживания» вместо «Личный кабинет»), один объект в разных местах без перекрёстных ссылок, задания для tree testing со словом из метки, дающие ложно высокий успех, раздел «Прочее», куда со временем уходит треть сайта.

Чему учат на курсах

Чаще всего ИА преподают модулем внутри программы по UX/UI-дизайну, поэтому важно смотреть, сколько места ей отведено и есть ли практика с участниками.

На курсе «Дизайнер интерфейсов и пользовательского опыта» от КИДПО информационная архитектура стоит отдельной темой программы переподготовки рядом с Figma и проектированием интерфейсов. Обучение дистанционное, без расписания; часы по темам и состав модуля в описании не раскрыты, поэтому содержание части про ИА нужно уточнить у школы.

Длинная программа переподготовки даёт диплом и охват от фирменного стиля до вёрстки, но мало говорит о работе с пользователями. Короткий курс ближе к ремеслу, зато ИА там занимает одно-два занятия.

У АПОК на курсе «UX/UI-дизайнер» информационной архитектуре отведён отдельный модуль на 32 часа из 400. Формат — текстовые уроки, промежуточные тесты и аттестационная работа; проверки структуры на пользователях в описании нет, и содержание модуля тоже стоит уточнить у школы.

Если программа не включает работу с участниками, восполните пробел сами: проведите одну открытую сортировку и один tree test на учебном проекте и покажите в портфолио метрики до и после правок.

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

Как навык влияет на доход

Отдельной зарплатной статистики по информационной архитектуре найти не удалось: в вакансиях навык входит в требования к UX/UI- или продуктовому дизайнеру, реже к контент-стратегу. Для общего фона: по исследованию «Хабр Карьеры» за первое полугодие 2026 года (45 226 зарплат из калькулятора сервиса) зарплаты дизайнеров выросли на 3 %; медианы по уровням в текстовой части отчёта не приведены.

Влияние на доход идёт через задачи. Умея провести сортировку и tree testing, дизайнер может вести редизайн каталога или портала, а не только рисовать экраны. Фрилансеру навык даёт отдельную услугу — аудит навигации с исследованием, но открытых сопоставимых данных о ценах на неё нет.

Как выбрать обучение

Проверьте три вещи: есть ли в модуле по ИА практика с участниками, проверяет ли кто-то вашу структуру и останется ли после обучения кейс с исследованием. Если школа не раскрывает содержание модуля, задайте эти вопросы до оплаты.

Сопоставить школы поможет общий рейтинг онлайн-школ с обучением UX/UI-дизайну: он охватывает всё направление, а не одну информационную архитектуру, поэтому программу выбранного курса всё равно придётся прочитать.