1. Введение
Представьте интернет-магазин, в котором есть несколько тысяч товаров, но нет категорий, фильтров и понятного меню. Все товары существуют, фотографии сделаны, цены указаны, кнопки работают — технически сайт исправен. Но пользоваться им практически невозможно.
Похожая проблема возникает не только в интернет-магазинах. В образовательном сервисе студент не может найти свои курсы. В банковском приложении пользователь не понимает, где посмотреть историю операций. На корпоративном сайте потенциальный клиент читает главную страницу, но не может найти цены или понять, как заказать услугу.
Во всех этих случаях проблема может быть не в визуальном дизайне. Она находится глубже — в информационной архитектуре.
Информационная архитектура, или IA — Information Architecture, определяет, как информация и функции продукта организованы, связаны между собой и доступны пользователю.
Поэтому до того, как дизайнер начинает подробно работать над карточками, цветами и визуальными эффектами, ему необходимо ответить на более фундаментальные вопросы:
Что вообще есть в продукте? Как это сгруппировано? Какие страницы существуют? Как они связаны? Как пользователь понимает, где находится? Какими путями он может добраться до нужной информации?
Сегодня мы разберём четыре связанных элемента:
строение сайта → карту сайта → навигацию → навигационные и структурные паттерны.
Главная задача занятия — научиться смотреть на сайт не как на набор красивых экранов, а как на систему информации и пользовательских путей.
2. Что такое информационная архитектура
Информационная архитектура — это организация информации и функций внутри цифрового продукта таким образом, чтобы пользователь мог понять структуру продукта и найти то, что ему нужно.
Можно провести аналогию с обычным супермаркетом.
В магазине тысячи товаров, но они не расположены случайным образом. Сначала пространство разделено на крупные зоны: овощи, напитки, бытовая химия, молочные продукты. Внутри каждой зоны существуют более мелкие категории. Дополнительно используются указатели, таблички и номера рядов.
Если поставить кетчуп среди шампуней, проблема будет не в дизайне упаковки кетчупа. Проблема будет в организации пространства.
С цифровыми продуктами происходит то же самое.
Например, интернет-магазин одежды может иметь следующую структуру:
Главная
→ Женщинам
→ Мужчинам
→ Детям
→ Аксессуары
→ Распродажа
Внутри раздела «Мужчинам»:
Мужчинам
→ Одежда
→ Обувь
→ Аксессуары
А внутри одежды:
Одежда
→ Футболки
→ Рубашки
→ Брюки
→ Куртки
Пользователь постепенно сужает область поиска.
В этом и заключается одна из главных функций IA: превратить большое количество информации в понятную систему.
3. Информационная архитектура — это не просто меню
Одна из типичных ошибок начинающих дизайнеров — считать, что IA означает структуру меню.
Меню — только один из способов показать пользователю архитектуру.
Сама архитектура существует глубже.
Представим образовательную платформу. В ней существуют:
курсы, уроки, преподаватели, домашние задания, тесты, сертификаты, профиль пользователя и подписка.
Сначала дизайнеру необходимо понять отношения между этими сущностями.
Например:
Курс
→ содержит модули
→ модуль содержит уроки
→ урок может содержать домашнее задание
→ курс может иметь преподавателя
→ пользователь проходит курс
→ после прохождения получает сертификат.
Это уже архитектура продукта.
И только потом возникает вопрос: каким образом пользователь будет перемещаться между этими объектами?
То есть полезно разделять два понятия.
Информационная архитектура отвечает на вопрос:
Как устроен продукт?
Навигация отвечает на вопрос:
Как пользователь перемещается по этой структуре?
Это связанные, но разные вещи.
4. Ментальная модель пользователя
При создании IA важно понимать ещё одно понятие — ментальную модель.
Ментальная модель — это представление пользователя о том, как должна работать система.
Когда человек открывает интернет-магазин, он уже имеет определённые ожидания. Он предполагает, что товары будут находиться в каталоге, выбранные товары — в корзине, информация о заказах — в личном кабинете.
Эти ожидания сформированы предыдущим опытом.
Например, если человек хочет узнать стоимость доставки, он скорее будет искать раздел:
«Доставка»
или
«Доставка и оплата».
Если дизайнер назовёт этот раздел «Логистика покупателя», термин может быть формально правильным, но он не соответствует языку пользователя.
Поэтому хорошая информационная архитектура строится не вокруг внутренней структуры компании, а вокруг того, как пользователь воспринимает задачу.
Это особенно хорошо видно на корпоративных сайтах.
Компания внутри себя может иметь отделы:
Commercial Operations
Customer Success
Implementation
Business Development.
Но клиент может мыслить совершенно иначе:
Что вы предлагаете?
Сколько это стоит?
Подходит ли мне?
Какие результаты получили другие клиенты?
Как начать работу?
Хорошая IA должна учитывать именно эти вопросы.
5. Основные элементы информационной архитектуры
У информационной архитектуры можно выделить несколько взаимосвязанных элементов.
Организация
Она определяет, как информация группируется.
Например, интернет-магазин электроники может группировать товары:
по типу устройства;
по бренду;
по назначению;
по цене;
по характеристикам.
Основной вопрос здесь:
какая классификация будет понятнее пользователю?
Иерархия
Иерархия показывает отношения между уровнями.
Например:
Каталог
→ Компьютеры
→ Ноутбуки
→ Игровые ноутбуки
→ Карточка конкретного ноутбука.
Чем глубже находится информация, тем больше переходов может потребоваться пользователю.
Навигация
Навигация предоставляет способы перемещения по структуре.
Это могут быть:
главное меню;
таббар;
sidebar — боковая панель;
breadcrumbs — хлебные крошки;
внутренние ссылки;
фильтры;
поиск;
пагинация;
связанные материалы.
Названия и обозначения
Пользователь должен понимать значение разделов.
«Тарифы» обычно понятнее, чем «Решения».
«Мои заказы» конкретнее, чем «Активность».
Хорошее название помогает пользователю предсказать, что произойдёт после перехода.
Поиск
В больших системах пользователь не всегда хочет путешествовать по иерархии. Иногда он уже знает, что ему нужно.
Тогда поиск становится альтернативным способом доступа к информации.
Особенно важен он в интернет-магазинах, базах знаний, маркетплейсах, библиотеках и сложных SaaS-продуктах.
6. Строение сайта
Теперь рассмотрим сайт как систему.
У большинства сайтов существует несколько уровней.
На верхнем уровне находится главная страница. Она часто играет роль точки входа и помогает понять, что это за продукт или компания.
Дальше располагаются основные разделы.
Например:
Главная
→ Услуги
→ Кейсы
→ О компании
→ Блог
→ Контакты.
Внутри разделов могут существовать вложенные страницы.
Например:
Услуги
→ UX-аудит
→ UX-исследования
→ UI-дизайн
→ Разработка.
Это называется иерархической структурой.
Однако не все сайты работают исключительно как дерево.
Пользователь может открыть кейс непосредственно с главной страницы, перейти из статьи блога на страницу услуги или попасть на конкретную страницу из поисковой системы.
Поэтому реальная структура сайта больше похожа на сеть, чем на строгое дерево.
Именно здесь важно различать архитектуру и User Flow.
Sitemap показывает, какие страницы существуют и как они организованы.
User Flow показывает, какой путь проходит пользователь для выполнения конкретной задачи.
Например:
Главная → Каталог → Категория → Карточка товара → Корзина → Checkout → Успешный заказ.
Это уже пользовательский сценарий.
7. Карта сайта — Sitemap
Для визуализации архитектуры используют sitemap — карту сайта.
Sitemap показывает страницы сайта и отношения между ними.
Например:
Главная
→ Каталог
→ Ноутбуки
→ Смартфоны
→ Планшеты
→ Акции
→ Доставка и оплата
→ О компании
→ Контакты
→ Личный кабинет
→ Профиль
→ Заказы
→ Избранное.
Такая схема позволяет посмотреть на продукт сверху и обнаружить проблемы ещё до создания десятков экранов в Figma.
Например, мы можем заметить, что раздел находится слишком глубоко:
Главная → Помощь → Покупателям → Информация → Сервис → Возврат.
Если возврат товара — частая задача пользователя, такая глубина создаёт ненужные препятствия.
Мы можем поднять страницу выше или дать на неё дополнительные точки входа.
8. Что показывает хорошая карта сайта
Sitemap должна отвечать как минимум на четыре вопроса.
Что существует?
Какие страницы и разделы вообще есть в продукте.
Что главное, а что второстепенное?
Главная, каталог и карточка товара имеют другой уровень значимости, чем политика конфиденциальности.
Что к чему относится?
Например, карточка товара относится к категории, а настройки аккаунта — к профилю.
Какова глубина структуры?
Если важная функция находится на пятом или шестом уровне, стоит проверить, действительно ли такая вложенность оправдана.
При этом нельзя применять механическое правило вроде «любая страница должна быть доступна максимум за три клика».
Количество кликов само по себе мало что говорит о качестве UX.
Пять очевидных шагов иногда проще, чем два непонятных.
Главный вопрос:
понимает ли пользователь на каждом этапе, куда идти дальше?
9. Плоская и глубокая архитектура
Рассмотрим две крайности.
Глубокая структура
Главная
→ Каталог
→ Электроника
→ Компьютеры
→ Ноутбуки
→ Игровые
→ ASUS
→ Товар.
Преимущество такой структуры — точная классификация.
Но пользователь вынужден проходить большое количество уровней.
Плоская структура
На одном уровне находятся:
Ноутбуки
Смартфоны
Планшеты
Телевизоры
Мониторы
Наушники
Колонки
Клавиатуры
Мыши
Принтеры
Фотоаппараты
Игровые приставки
и ещё несколько десятков категорий.
Здесь проблема обратная: переходов мало, но количество вариантов становится слишком большим.
Поэтому задача дизайнера — найти баланс между шириной и глубиной архитектуры.
10. Навигация
Если IA — это устройство здания, то навигация — система дверей, лестниц, лифтов и указателей.
Пользователю необходимо постоянно отвечать на три вопроса:
Где я?
Куда я могу перейти?
Как мне вернуться или изменить направление?
Хорошая навигация помогает получать эти ответы почти автоматически.
Рассмотрим основные виды.
Глобальная навигация
Доступна в большинстве частей сайта.
Например, navbar интернет-магазина:
Каталог | Акции | Доставка | Магазины | Поиск | Избранное | Корзина.
Она предоставляет доступ к основным разделам независимо от текущего местоположения.
Локальная навигация
Работает внутри конкретного раздела.
Например:
Личный кабинет
→ Профиль
→ Заказы
→ Адреса
→ Способы оплаты
→ Настройки.
Контекстная навигация
Возникает внутри контента.
Например, под карточкой смартфона пользователь видит:
«С этим товаром покупают».
Или внутри статьи:
«Читайте также».
Она предлагает следующий переход исходя из текущего контекста.
11. Хлебные крошки
Breadcrumbs, или хлебные крошки, показывают место пользователя внутри иерархии.
Например:
Главная → Каталог → Электроника → Ноутбуки → Игровые ноутбуки.
Они особенно полезны в системах с большой глубиной:
интернет-магазинах;
маркетплейсах;
документации;
базах знаний;
корпоративных порталах.
Breadcrumbs помогают не только вернуться назад, но и понять структуру сайта.
Пользователь видит, что «Игровые ноутбуки» являются частью категории «Ноутбуки», которая входит в «Электронику».
12. Поиск как часть навигации
Поиск иногда воспринимают как отдельную функцию, хотя фактически это один из способов навигации.
Представьте маркетплейс с миллионами товаров.
Пользователь, который ищет конкретную модель наушников, скорее введёт название в строку поиска, чем будет последовательно открывать:
Каталог → Электроника → Аудио → Наушники → Беспроводные.
Поэтому существуют два принципиально разных поведения.
Первое — browsing, то есть просмотр и исследование структуры.
Второе — searching, целенаправленный поиск.
Хорошая архитектура часто поддерживает оба сценария.
13. Фильтры тоже являются частью информационной архитектуры
Допустим, пользователь открыл категорию «Ноутбуки», где находится 4 000 товаров.
Категория найдена, но задача ещё не решена.
Теперь человеку необходимо сократить пространство выбора.
Для этого используются фильтры:
Цена
Бренд
Диагональ
Процессор
Объём памяти
Видеокарта.
Фильтры фактически создают динамическую навигацию внутри массива информации.
Поэтому при проектировании IA интернет-магазина недостаточно нарисовать только категории. Необходимо понимать, какие характеристики важны пользователю при выборе.
14. Навигационные паттерны
Паттерн — это повторяющееся решение типовой интерфейсной задачи.
Паттерны важны потому, что пользователю не приходится каждый раз изучать интерфейс заново.
Например, логотип в левом верхнем углу сайта часто ведёт на главную страницу.
Иконка лупы ассоциируется с поиском.
Корзина находится в верхней части интернет-магазина.
На мобильном приложении основные разделы часто находятся в нижнем tab bar.
Эти решения знакомы пользователям по другим продуктам.
Использование знакомого паттерна уменьшает необходимость обучения.
15. Основные паттерны навигации
Navbar
Горизонтальная панель навигации.
Часто используется на сайтах с относительно небольшим количеством основных разделов.
Например:
Продукт | Решения | Тарифы | Блог | Компания.
Dropdown
Выпадающее меню.
Подходит, когда внутри основного раздела есть несколько вариантов.
Mega menu
Большое раскрывающееся меню с группами ссылок.
Подходит крупным интернет-магазинам и сервисам со сложной структурой.
Например:
Каталог
Компьютеры
— Ноутбуки
— Мониторы
— Комплектующие
Смартфоны
— Apple
— Samsung
— Xiaomi
Аксессуары
— Наушники
— Зарядные устройства
— Чехлы.
Sidebar
Вертикальная боковая навигация.
Часто встречается в SaaS-продуктах, админ-панелях и рабочих системах.
Например:
Dashboard
Projects
Analytics
Customers
Automations
Settings.
Sidebar позволяет постоянно держать основные разделы перед глазами.
Tab bar
Нижняя навигация мобильного приложения.
Например:
Главная | Поиск | Избранное | Профиль.
Она хорошо работает для небольшого количества основных разделов, между которыми пользователь регулярно переключается.
16. Паттерны структуры контента
Паттерны существуют не только у меню.
Hub and Spoke
Есть центральный экран — hub, из которого пользователь переходит в отдельные разделы — spokes.
Например:
Личный кабинет
→ Заказы
→ Адреса
→ Оплата
→ Настройки.
После выполнения задачи пользователь возвращается к центральному разделу.
Dashboard
Главный экран собирает ключевую информацию и предоставляет точки входа в разные функции.
Например, CRM может показывать:
новые сделки;
задачи;
сообщения;
статистику;
быстрые действия.
Master–Detail
Слева или на первом экране находится список объектов, а после выбора открываются подробности конкретного объекта.
Например:
список писем → письмо;
список клиентов → карточка клиента;
список товаров → карточка товара.
Wizard
Пользователь последовательно проходит несколько шагов.
Например:
Выбор тарифа → Данные пользователя → Оплата → Подтверждение.
Такой паттерн полезен, когда сложную задачу лучше разбить на несколько понятных этапов.
17. Как проектируется информационная архитектура
Создание IA не должно начинаться с вопроса:
Какое меню мы нарисуем?
Сначала необходимо понять пользователей и контент.
Упрощённо процесс выглядит следующим образом:
Пользователь → задачи → контент и функции → группировка → иерархия → sitemap → навигация → пользовательские сценарии → прототип.
Рассмотрим пример.
Нужно создать сайт онлайн-школы.
Пользователь приходит с вопросами:
Какие курсы существуют?
Для кого они?
Чему я научусь?
Кто преподаватель?
Сколько стоит обучение?
Можно ли посмотреть программу?
Как записаться?
Из этих вопросов начинают появляться сущности:
Каталог курсов
Карточка курса
Программа
Преподаватели
Отзывы
Стоимость
FAQ
Регистрация.
Только после этого мы строим карту сайта и навигацию.
18. Card Sorting
Один из методов проверки группировки информации называется card sorting — карточная сортировка.
Участнику дают набор карточек:
Доставка
Возврат
Оплата
Гарантия
Избранное
История заказов
Адреса
Способы оплаты.
И просят объединить их в логические группы.
Пользователь может создать:
Заказы
История заказов
Возврат
Оплата
Способы оплаты
Доставка
Адреса
Условия доставки.
Так исследователь получает представление о том, как сами пользователи классифицируют информацию.
Это помогает не проектировать структуру исключительно из головы дизайнера или организационной структуры бизнеса.
19. Tree Testing
После создания иерархии её можно проверить с помощью tree testing — тестирования дерева.
Пользователю показывают структуру без полноценного дизайна и дают задачу.
Например:
Вы купили наушники, но хотите вернуть товар. Где вы будете искать информацию о возврате?
Пользователь начинает двигаться по дереву:
Помощь → Покупателям → Возврат.
Если большинство участников находят нужный раздел быстро, структура, вероятно, соответствует их ожиданиям.
Если люди постоянно открывают:
Заказы → Гарантия → Доставка → Помощь,
значит классификация или названия требуют пересмотра.
20. Практический пример: интернет-магазин
Представим, что нам нужно спроектировать магазин спортивных товаров.
Плохой подход — сразу открыть Figma и рисовать главную страницу.
Сначала определяем основные задачи.
Пользователь может:
найти конкретный товар;
исследовать ассортимент;
сравнить несколько товаров;
посмотреть характеристики;
узнать условия доставки;
купить товар;
посмотреть статус заказа.
Из задач формируется архитектура.
Главная
→ Каталог
→ Бег
→ Фитнес
→ Туризм
→ Велоспорт
→ Акции
→ Бренды
→ Доставка и оплата
→ Помощь
→ Личный кабинет
→ Заказы
→ Избранное
→ Профиль
→ Корзина.
Теперь проверяем основной путь:
Главная → Каталог → Бег → Кроссовки → Карточка товара → Корзина → Checkout → Заказ оформлен.
После этого рассматриваем альтернативные точки входа.
Например, пользователь пришёл из рекламы непосредственно на карточку кроссовок.
Может ли он понять, где оказался?
Может ли посмотреть другие модели?
Есть ли ссылка на категорию?
Может ли найти информацию о доставке?
Может ли перейти в корзину?
Именно такие вопросы превращают sitemap из формальной схемы в рабочий UX-инструмент.
21. Частые ошибки и заблуждения
Ошибка 1. Проектировать структуру по устройству компании
Компания имеет отдел маркетинга, продаж, разработки и поддержки — и создаёт такие же разделы сайта.
Но пользователю внутреннее устройство бизнеса может быть совершенно неинтересно.
Правильнее: строить архитектуру вокруг задач и вопросов пользователя.
Ошибка 2. Слишком много элементов первого уровня
Если главное меню содержит пятнадцать равнозначных пунктов, пользователю приходится анализировать каждый из них.
Правильнее: найти более крупные смысловые группы и выстроить иерархию.
Ошибка 3. Непонятные названия
«Возможности», «Экосистема», «Центр решений», «Пространство» могут звучать эффектно, но пользователь не всегда понимает, что находится внутри.
Правильнее: использовать названия, позволяющие предсказать содержимое раздела.
Ошибка 4. Чрезмерная вложенность
Если пользователь должен пройти множество уровней ради частой задачи, структура создаёт лишнее трение.
Правильнее: важным функциям давать более короткие или альтернативные пути.
Ошибка 5. Дублирование
Одна и та же информация появляется в нескольких разделах без понятной причины.
Например:
Поддержка → Доставка
и одновременно:
Покупателям → Доставка.
Пользователь начинает сомневаться, одинаковая ли информация находится внутри.
Ошибка 6. Сиротские страницы
Orphan page — сиротская страница — страница, которая существует, но практически не связана с основной навигацией.
Попасть на неё можно, например, только через прямую ссылку.
Ошибка 7. Проектировать только идеальный сценарий
Дизайнер строит:
Главная → Каталог → Товар → Корзина → Оплата.
Но реальные пользователи приходят из Google, рекламы, социальных сетей, email-рассылок и закладок.
Поэтому каждая важная страница должна работать и как потенциальная точка входа.
22. Когда привычные паттерны не работают
Стандартные UX-паттерны полезны, но их нельзя применять механически.
Mega menu отлично подходит большому магазину, но бессмысленно для лендинга с четырьмя разделами.
Breadcrumbs полезны при глубокой иерархии, но могут ничего не дать приложению с двумя уровнями.
Sidebar подходит рабочему SaaS-продукту с большим количеством разделов, но может занимать слишком много места в простом мобильном интерфейсе.
Главный принцип:
Паттерн выбирается не потому, что он популярный или выглядит современно, а потому, что решает конкретную навигационную задачу.
23. Как оценивать информационную архитектуру
При анализе готовой структуры полезно задать несколько вопросов:
Понятно ли, какие основные разделы существуют?
Соответствуют ли названия языку пользователя?
Логично ли сгруппирована информация?
Нет ли дублирования?
Нет ли важных страниц, спрятанных слишком глубоко?
Может ли пользователь определить своё текущее положение?
Есть ли понятный путь назад?
Поддерживает ли структура разные сценарии входа?
Можно ли найти информацию несколькими разумными способами?
Есть ли тупиковые страницы?
Соответствует ли архитектура ментальной модели пользователя?
Если на несколько вопросов ответ отрицательный, проблема может находиться именно в IA, а не в визуальном интерфейсе.
24. Работа с инструментами
Для проектирования IA не нужен один специальный инструмент. Обычно используется связка нескольких.
FigJam или Miro удобно использовать для sitemap. Страницы можно представить карточками и соединить линиями, постепенно перестраивая архитектуру.
Figma подключается на следующем этапе, когда архитектуру нужно превратить в wireframes и прототип.
Google Sheets полезен, если страниц очень много. Например, при редизайне крупного сайта можно создать Content Inventory — таблицу существующего контента.
В ней фиксируются:
URL;
название страницы;
тип страницы;
раздел;
назначение;
актуальность;
решение: сохранить, изменить, объединить или удалить.
Google Docs или Notion подходят для документирования правил архитектуры, описания пользовательских сценариев и аргументации решений.
Главное — помнить, что инструмент не создаёт архитектуру автоматически. Он только помогает сделать логику продукта видимой.
25. Главный вывод
Информационная архитектура отвечает не на вопрос:
Как будет выглядеть сайт?
Она отвечает на более фундаментальный вопрос:
Как сайт будет устроен и как пользователь сможет в нём ориентироваться?
Сначала мы определяем информацию, функции и задачи пользователя.
Затем группируем сущности.
После этого строим иерархию и sitemap.
На основе архитектуры проектируем навигацию.
Далее проверяем ключевые User Flow.
И только после этого переводим систему в конкретные интерфейсные экраны.
Поэтому хороший UI начинается не с красивой кнопки.
Он начинается с понимания того, где эта кнопка находится, зачем пользователь сюда пришёл и куда ему необходимо двигаться дальше.