Как дизайнеры превратили блок-схему в информационную архитектуру
Про «Информационную архитектуру» (ИА) рассказывают на онлайн-курсах, в экспертных наставничествах, поэтому в 90% кейсов дизайнеров встречается этот UX-артефакт. Выглядит он вот так ⬇️
Красиво. Только это не ИА, а карта переходов между экранами, но обо всем по порядку.
Карта переоходов
Что это такое
Блок-схема, которая отображает общую структуру будущего сервиса.
Когда и для чего
Карта переходов нужна, когда проект находится в препродакшене или на начальной стадии реализации. Она помогает определить примерный скоуп работ и трудозатраты на его выполнение.
Есть проблема
Дизайнеры упускают промежуточные экраны и их состояния, которые влияют на путь пользователя и время, затрачиваемое на дизайн, разработку. Это проблема, потому что на обобщенной карте переходов они строят весь проект.
Справедливо возразить, что дальше дизайнеры делают User flows, которые уточняют карту переходов
Что это и для чего
User flow — схема, которая показывает путь пользователей через приложение. Она позволяет увидеть ошибки в логике и исправить их, чтобы пользователь получил бесшовный опыт взаимодействия с интерфейсом.
Снова проблемы
Дизайнеры переносят «обобщенность» и в User flow. Они берут блоки из карты переходов и добавляют в них пару промежуточных состояний. При этом, описываемый путь требует не только бОльших действий, но и выполнения условий, учитывания ролей пользователей системы.
Что же тогда можно назвать ИА?
Информационная архитектура — это артефакт работы дизайнера и/или аналитика, который совмещает в себе карту переходов и подробный user flow с учетом бизнес-условий, ограничений системы, состояний экранов, взаимодействия пользователей разных ролей.
Наглядно разберем разницу между картой переходов и ИА на примере авторизации. В левом углу ринга более менее подробный флоу регистрации/авторизации, который я нашел на behance. Выгялит он так ⬇️
В правом углу флоу авторизации из одной из моих информационных архитектур
Первое. ИА всегда должна иметь легенду
ИА создается не только для дизайнеров, но и для разработчиков, проджектов и других стейкхолдеров. Легенда избавит от необходимости объяснять несколько раз одно и то же разным людям.
Лучше всего использовать стандартные элементы блок-схем.
Начало/завершение флоу
Обозначает начало или конец пользовательского пути, например, запуск приложения или выход из аккаунта
Экранная форма
Обозначает конкретный экран в приложении, например, экран входа в систему, просмотр профиля или каталога.
Действие необходимое для перехода между экранами
Нажатие на кнопку «play», выбор сортировки, добавление товара в коризну и т. д.
Системный процесс
Процесс, запуск которого инициирует пользователь, но в котором он никак не учавствует.
Например, при переходе к списку привязанных карт, мобильное приложение запросит список карт с бекенда. Пользователь во время выполнения процесса видит индикатор загрузки, но никак в нем не участвует.
Разветвление без условия
Показывает, что пользователь может сам выбрать, по какому пути дальше пойти (по пути самурая, конечно).
Разветвление с условием
Показывает, что дальнейший путь пользователя зависит от выполнения или не выполнения какого-либо условия
Ввод/вывод данных
Заполнение поля «Email», указание количества товара в корзине, Ввод сообщения в чате поддержки
Частный случай вывода данных — Сообщения для пользователя
Можно создать репозиторий сообщений — это место, где хранятся и поддерживаются тексты сообщений. Каждому сообщению присваивается тип и номер, чтобы в ИА писать, номер а не все сообщение целиком.
Например, СО#001 — сообщение ошибки, #001.
Начало цикла
Например, пользователь вводит логин и пароль до тех пор, пока они не совпадут с теми, что есть в базе зарегистрированных аккаунтов. Только после этого, его авторизует в приложении.
Стерлочка
Показывают направление и последовательность движения пользователя между экранами
Адресный переход
Используется, когда ИА становится большой и нужно из одной ее части попасть в другую, при этом не рисуя стрелку через всю ИА.
Блок с указанием действие для перехода ставится перед исходящей стрелкой, потому что через входящую стрелку можно попасть на один и тот же экран с помощью разных действий.
💡В фигме можно сделать перелинковку блоков, чтобы быстро перемещаться по ИА
Переход между страницами
ИА может стать совсем большой, в таком случае ее разбивают на страницы. Каждая страница — раздел приложения. Чтобы связать несколько разделов между собой, используется специальный 5-ти угольник.
Мы поняли, что ИА это про подробности пути пользователя, чтобы эти подробности узнать нужно:
- Посмотреть на готовое. Скачиваете похожее приложение и проходите путь пользователя от точки входа до получения результата, либо идете на площадки по типу «Бенчмарки», appshots или mobbin и там смотрите, как этот путь проходят пользователи.
- Уточнять требования у заказчика. Даже приложение-клон имеет свои нюансы: ограничения по городам работы, невозможность предоставить информацию о текущем положение курьера и подобные мелочи. Заказчик хочет получить крутой продукт и будет отвечать на ваши вопросы.
- Уточнять у разработчиков. Они могут подсказать нюансы, например, в банковском приложении может истечь действие refresh токена и нужен алерт, который объяснит, почему пользователю нужно повторно авторизоваться.
Расмотрим детально на примере восстановления доступа
- Смотрим, как реализована авторизация и восстановление доступа у Альфы, Сбера, Тиньки и других банков. Подмечаем, с каких экранов мы попадаем на востановление доступа, какие есть способы востановления, какой сложности надо придумать пароль.
- Изучаем данные от клиента, чтобы учесть особенности его действующего бизнеса: данные, которые есть о пользователе на момент регистрации. Условия безопасноти, из-за которых требуется запрашивать дополнительные данные или сокращать время неактивной сессии — действия refresh-токена.
- Если есть возможность, то идем к разработчикам и закрываем дыры, которые возникли в процессе составления ИА. Например, можно уточнить, какой длины будет присылаться код восстановления на почту или номер телефона, чтобы на макете сделать нужное количество полей ввода.
На экран формы восстановления можно попасть либо со страницы ввода кода безопасности, либо с общей формы авторизации.
Чтобы восстановить пароль пользователю нужно заново пройти «регистрацию» в приложении. Для начала запрашиваем номер карты, определяем номер телефона, который привязан к счету и на него отправляем СМС с кодом подтверждения.
Если код введен успешно, то пользователь переходить на экран ввода нового пароля, а после успешного подтверждения пароля попадает на экран общей авторизации, где ему нужно авторизоваться по логину и новому паролю.
Обратите внимание на то, как используются циклы. Цикл появляется тогда, когда переход на следующий шаг флоу невозможен, без выполенния предыдущего. На нашем примере: не введешь код, не перейдешь к форме смене пароля.
Вывод
На этапе препродакшена, такая детализация избыточна, но тогда называйте это не ИА, а картой переходов. А на этапе продакшена — необходимость.
Дизайнеры любят красивые слова
Ведь они помогают поддерживать уровень своей эскпертности среди коллектива, а также аргументировать свое решение заказчику. Я тоже люблю так делать, но надо знать грань — одно дело красиво представить визуальную концепцию через метафоры, другое — объяснить, что за аналитическую штуку вы сделали и для чего.
Выбор за вами, либо красиво загнать в уши заказчику или сказать понятную правду: сделали карту переходов между экранами.