Лабораторная работа №2: Информационная архитектура
Курс: Веб-дизайн и проектирование интерфейсов
Модуль: UX Prototyping (Проектирование логики)
Трудоемкость: 4 академических часа
Оценка: Максимум 8 баллов
Тип задания: Индивидуальный сквозной проект (Этап 2)
1. Цель работы
Разработать логическую структуру будущего сайта (Скелет) и спроектировать пути перемещения пользователя (Кровеносная система).
Инженерная задача
Исключить логические тупики и определить полный список страниц, которые необходимо отрисовать на следующих этапах.
2. Теоретическая справка
Перед тем как строить дом, архитектор делает чертежи. В веб-дизайне этими чертежами являются Sitemap и User Flow.
- Иерархическая древовидная структура.
- Показывает вложенность страниц (Глубину).
- Аналогия: Файловая система (Папки и файлы).
3. Задание (Алгоритм выполнения)
Рекомендуемая среда выполнения: FigJam (внутри Figma) или отдельная страница в вашем рабочем файле.
Шаг 1: Создание Sitemap (Структура)
Определите, из каких страниц состоит ваш сайт.
- Главная страница (Home).
- Основные разделы (Level 1): Каталог, О компании, Блог, Контакты, Личный кабинет.
- Подразумеваемые страницы (Level 2+):
- Если есть Каталог -> должна быть Карточка товара.
- Если есть Корзина -> должна быть Страница оформления заказа (Checkout).
- Если есть Вход -> должна быть Регистрация и Восстановление пароля.
- Не забудьте: Страница «404», Политика конфиденциальности, Pop-up «Спасибо за заказ».
Результат шага: Древовидная схема, где блоки — это страницы, а линии — иерархическая связь.
Шаг 2: Проектирование User Flow (Логика)
Выберите один ключевой сценарий (Key Scenario) для вашего проекта.
- E-commerce: Поиск товара -> Фильтр -> Корзина -> Оплата.
- Booking: Выбор даты -> Выбор номера -> Бронь.
Используйте стандартные обозначения (UML):
- Овал / Скругленный прямоугольник: Начало и конец сценария (Вход / Выход).
- Прямоугольник: Экран (Страница), который видит пользователь.
- Ромб: Условие / Решение (Пользователь залогинен? Да/Нет).
- Стрелки: Направление движения.
Шаг 3: Инвентаризация контента (Content Inventory)
Для каждой ключевой страницы из Sitemap кратко перечислите, какой контент там обязан быть. Это подготовка к Wireframing.
- Пример для Карточки товара: Фото (галерея), Название, Цена, Артикул, Выбор размера (дропдаун), Кнопка «Купить», Описание (текст), Похожие товары.
4. Требования к инструментарию (Figma / FigJam)
Мы не рисуем интерфейс, мы рисуем схемы.
- Используйте инструмент Shapes (квадраты, ромбы).
- Используйте Connectors (X) — «умные» стрелки, которые прилипают к объектам. При перемещении объекта стрелка не рвется.
- Используйте цвета для кодирования:
- Синий: Экраны.
- Зеленый: Успешное действие.
- Красный: Ошибка / Тупик.
- Желтый: Действие системы (Загрузка, Валидация).
5. Definition of Done (Критерии приемки)
Для получения 8 баллов необходимо:
- Sitemap: Представлена полная структура сайта (минимум 3 уровня вложенности для основного раздела). Учтены служебные страницы (404, Success Page).
- User Flow: Детально проработан один ключевой сценарий (от точки входа до финальной цели).
- Логика ветвления: В User Flow показано хотя бы одно условие (например, «Товар есть в наличии?» или «Ошибка ввода данных»).
- Читаемость: Схемы аккуратные, связи не пересекаются хаотично (нет «эффекта спагетти»).
6. Типичные ошибки (Anti-patterns)
Чего стоит избегать
- Sitemap вместо User Flow: Студент рисует карту сайта и называет это сценарием. Различие: Карта показывает, где что лежит. Сценарий показывает, как мы идем.
- Dead Ends (Тупики): Экран, с которого некуда уйти (нет кнопки «Назад», нет меню, нет кнопки действия).
- Бесконечные циклы: Сценарий, в котором пользователь ходит по кругу и не может достичь цели.
- Игнорирование «негативных сценариев»: Спроектирован только идеальный путь, но не показано, что будет при ошибке.
7. Практический совет
Думай как программист
Представьте, что каждый прямоугольник в вашем User Flow — это отдельный View или Component в коде, а стрелка — это Routing. Если вы не нарисуете стрелку возврата из «Корзины» в «Каталог», вы забудете запрограммировать кнопку «Продолжить покупки».
8. Домашнее задание (Подготовка к Лаб №3)
К следующему занятию (Wireframing) вы должны знать, что именно будет на каждой странице.
- Найдите тексты для вашего проекта (названия товаров, описания, статьи). Скопируйте их в текстовый файл или черновик Figma. Lorem Ipsum запрещен.
- Скачайте или подберите иконки (рекомендую плагин Phosphor Icons или Material Design Icons).