Урок 3 из 8 · 20 мин · обновлено

Структура продукта и пользовательские пути

Как решить, какие экраны нужны и как они связаны: информационная архитектура, карта экранов, пользовательский путь (user flow), навигация и правило «меньше шагов к главному действию».

Информационная архитектура

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

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

Карта экранов

Карта экранов (sitemap) — схема всех экранов и связей между ними. Для «Зерна»:

  • Меню → карточка напитка → корзина → оплата → статус заказа;
  • Заказы → история заказов → повтор заказа;
  • Профиль → способы оплаты, любимая кофейня, уведомления.

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

Пользовательский путь

User flow — путь пользователя к одной цели, шаг за шагом. Например, «заказать капучино навынос»:

  1. Открыть приложение → экран меню.
  2. Выбрать «Капучино» → карточка напитка: размер, молоко, добавки.
  3. «В корзину» → корзина: время, когда забрать.
  4. «Оплатить» → оплата картой.
  5. Экран статуса: «Готовим, будет через 7 минут».

В user flow обязательно отмечают развилки и ошибки:

  • напиток закончился → предложить похожий;
  • оплата не прошла → объяснить почему и предложить снова;
  • кофейня закрыта → показать время открытия, а не пустой экран.

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

Меньше шагов к главному

Хорошая структура делает частые действия быстрыми. Интервью показали: большинство гостей каждое утро берут одно и то же. Значит, на главном экране нужна кнопка «Повторить заказ»: путь из пяти шагов превращается в два.

Правила навигации в мобильных приложениях:

  • нижняя панель — 3–5 главных разделов. Больше не помещается удобно для пальца;
  • кнопка «Назад» и заголовок экрана всегда показывают, где человек находится;
  • редкие функции — настройки, юридические документы — уходят глубже, в профиль.

Попробуйте сами. Нарисуйте в FigJam или на бумаге user flow «повторить вчерашний заказ, но поменять молоко на овсяное». Отметьте хотя бы одну ошибку или развилку.

Пример
  1. Главный экран → блок «Повторить заказ: капучино 0,3 л».
  2. Нажать «Изменить» → карточка напитка с выбранными вчера параметрами.
  3. Выбрать «Овсяное молоко» (+40 ₽) → «В корзину».
  4. Корзина → время «Через 10 минут» → «Оплатить».
  5. Статус заказа.

Развилка: овсяное молоко закончилось. Вариант с ним в карточке недоступен и подписан «Закончилось», а рядом предложено миндальное. Человек видит это сразу, а не после оплаты.

Мини-тест: проверьте себя

Закрепите урок: несколько вопросов, разбор ответов — в конце.

  1. Чем user flow отличается от карты экранов?

  2. Сколько разделов обычно помещают в нижнюю навигацию мобильного приложения?

  3. Пользователи кофейни чаще всего заказывают тот же напиток, что вчера. Какое решение сократит путь?

  4. Зачем в user flow отмечают ошибки и развилки, например «нет нужного напитка»?