Чему научитесь
- Понимать, на какие вопросы отвечает схема — и на какие не должна
- Отличать экран от состояниятренажёр
- Называть шаги глаголами человека, а не названиями страництренажёр
- Показывать входы и выходыконструктор
- Рисовать схему в пяти фигурахживая схема
- Держать одну схему на один сценарий, чтобы она не расползалась
- Собирать схему так, чтобы её прочитал разработчикпоиск дыр
1Зачем схема и на какие вопросы она отвечает
Схема — не украшение макетов, а способ договориться о сценарии до разработки.
Пока сценарий живёт у вас в голове, он кажется простым: человек кладёт товар в корзину, оформляет заказ, платит.
Как только вы начинаете рисовать его по шагам, выясняется: в «оформляет заказ» спрятаны пять развилок, два способа туда попасть и три способа оттуда уйти.
Схема нужна, чтобы эти скрытые места появились на бумаге заранее, а не в разработке, когда переделывать дороже.
Четыре вопроса, ради которых её рисуют
- Что человек делает по шагам? Не «какие у нас есть страницы», а именно последовательность действий.
- Откуда он сюда попадает? Вход редко бывает один, и от него зависит, что человек уже успел сделать.
- Чем всё заканчивается? И не только успешно: выходов обычно несколько.
- Где сценарий может пойти не так? Пустая корзина, отклонённая карта, адрес вне зоны доставки.
Чего схема делать не должна
- Не заменяет макеты. На схеме не видно, как выглядит кнопка, — и не надо. Схема отвечает на вопрос «куда человек идёт», макет — «что он видит».
- Не описывает техническую архитектуру. Какие сервисы дёргаются при оплате — это другая схема и другой автор.
- Не вмещает весь продукт. Один сценарий — одна схема. Про это отдельный раздел, потому что такую ошибку легко сделать.
Три слова, которые дальше используются строго в одном значении
| Слово | Что значит здесь | Пример из нашего сценария |
|---|---|---|
| Сценарий | Путь человека от намерения до результата | Оформить заказ: от «хочу купить» до «заказ принят» |
| Шаг | Одно действие человека внутри сценария | Указывает адрес доставки |
| Экран | Место, где человек делает один или несколько шагов | Экран доставки, на котором и адрес, и день |
Обратите внимание на третью строку: шаг и экран — не одно и то же. На одном экране может происходить три шага, а один шаг может занимать два экрана. Схема рисуется по шагам, экраны указываются рядом — так она остаётся верной, даже если завтра вы объедините два экрана в один.
2Экран или состояние
Первый навык и главная причина, по которой схемы разрастаются до нечитаемого размера.
Частая ошибка: вспомнить всё, что человек может увидеть, и каждую картинку положить в отдельный блок. Пустая корзина — блок. Корзина с товаром — блок. Корзина, где товар закончился, — ещё блок. Три блока вместо одного, и так по всему сценарию: вместо семи экранов получается сорок, стрелки идут во все стороны, схему трудно читать.
Между тем это одно место. Человек не переходит «на экран пустой корзины» — он открывает корзину, и она оказывается пустой. Разница простая, вот как её проверить.
Три вопроса, если сомневаетесь
- Человек делает отдельное действие, чтобы сюда попасть? Нажал «К оплате» — это переход на другой экран. Ничего не нажимал, а картинка изменилась, потому что товар закончился, — это состояние.
- Задача человека здесь та же? На пустой и на полной корзине задача одна — разобраться с составом заказа. Значит, экран один.
- У этого есть отдельный адрес, на который можно вернуться? Страница с номером заказа, которую открывают из письма, — да, экран. «Корзина с ошибкой» своего адреса не имеет.
Три «нет» подряд — скорее всего, состояние. Один уверенный «да» — экран.
Четвёртая категория, про которую забывают
Кроме экранов и состояний в сценарии есть то, что делает система, а не человек. Например: резерв товара на складе, отправка письма с чеком, перевод заказа в статус «ждёт оплаты» через двадцать минут.
Экрана у этого нет, но на схеме такие вещи отмечают — иначе разработчик спросит, откуда взялось письмо. Рисуют их пунктирной стрелкой или отдельной пометкой — в разделе про нотацию будет показано как.
| Что видим | Это | Почему |
|---|---|---|
| Корзина с тремя товарами | Экран | Место, куда человек пришёл по кнопке «Корзина» |
| Корзина пустая | Состояние | То же место, просто в нём ничего нет |
| Корзина, где один товар закончился | Состояние | Тот же экран, изменились обстоятельства |
| Экран оплаты | Экран | Человек нажал «К оплате» и перешёл |
| «Банк отклонил карту» | Состояние | Человек остался на оплате, изменился результат попытки |
| Списание денег с карты | Действие системы | Происходит без экрана, но в сценарии есть |
Корзина, в которой ни одного товара.
Состояние экранаЧеловек не нажимал ничего, чтобы сюда попасть, — он открыл корзину, и она оказалась пустой. Задача та же: разобраться с составом заказа. Значит, состояние, и живёт оно чипом внутри блока «Проверяет состав заказа».
Место, куда человек попадает по кнопке «К оплате».
ЭкранОтдельное действие, чтобы туда попасть, и другая задача — выбрать способ оплаты. Это экран.
Банк отклонил карту, человек видит сообщение под формой оплаты.
Состояние экранаЧеловек остался ровно там же, изменился результат попытки. Состояние экрана оплаты — и одно из самых важных: именно такие состояния забывают нарисовать, а потом их легко забывают сделать.
В момент подтверждения заказа товар резервируется на складе.
Действие системыЭкрана у этого нет, человек ничего не делает. Но в сценарии это есть, и на схеме отмечается пунктиром — иначе разработчик спросит, когда именно списывается остаток.
Страница с номером заказа, которую можно открыть по ссылке из письма.
ЭкранСвой адрес, на который можно вернуться через неделю, — верный признак экрана. Плюс задача здесь новая: узнать, когда привезут.
Пока грузятся свободные дни доставки, на месте календаря серые полосы.
Состояние экранаЗагрузка — это состояние экрана, причём обязательное: если его не нарисовать, в продукте на этом месте окажется пустота или дёрганье. Отдельным блоком его выносить не надо.
Через 20 минут неоплаченный заказ сам переходит в статус «отменён».
Действие системыНикакого экрана, никакого действия человека — и при этом необходимая часть сценария: это ответ на вопрос «что осталось в системе после выхода».
Адрес оказался вне зоны доставки, человек видит это на том же экране.
Состояние экранаТот же экран, изменились обстоятельства. Внутри блока «Указывает, куда и когда везти» это чип «адрес вне зоны», а из него — стрелка с подписанным условием, если дальше сценарий идёт иначе.
Человек нажимает «Изменить адрес» и попадает в справочник адресов с поиском.
ЭкранОтдельное действие, чтобы туда попасть, и другая задача — найти адрес. Экран. Вот здесь работает та самая обратная проверка: внутри человек делает не то же самое, что на предыдущем шаге.
Письмо с чеком, которое уходит после успешной оплаты.
Действие системыТипичный забытый элемент: письма нет ни на одном экране, поэтому его не рисуют, а потом выясняется, что его никто не сделал. Пунктирная стрелка от шага «Видит, что заказ принят».
3Шаги называем глаголами человека
Второй навык. Схема из названий страниц выглядит аккуратно, но плохо объясняет действия человека.
Сравните две цепочки. Первая: Корзина → Checkout → Payment → Success. Вторая: Проверяет состав заказа → Указывает, куда и когда везти → Выбирает, чем платить → Видит, что заказ принят. Обе описывают один сценарий, но по первой нельзя сказать, что человек вообще делает, — можно только сказать, какие страницы есть в продукте.
Это не придирка к формулировкам. От названий зависит, что вы заметите. Блок «Payment» выглядит законченным, и вопросов к нему нет. Блок «Выбирает, чем платить» сразу вызывает вопрос: а из чего он выбирает и что будет, если подходящего способа нет? Так в схеме появляется развилка, которой иначе там не было бы.
Проверка в одну секунду
Подставьте перед названием блока слово «Человек» и прочитайте вслух. «Человек корзина» — не работает, значит, это название страницы. «Человек проверяет состав заказа» — работает, значит, это шаг.
| Так писать не надо | Что не так | Как лучше |
|---|---|---|
| Корзина | Название страницы — не видно действия | Проверяет состав заказа |
| Checkout step 2 | Внутреннее имя, чужому непонятно вообще ничего | Указывает, куда и когда везти |
| Валидация адреса | Глагол системы — человек этого не делает | Система проверяет зону доставки (пунктиром) |
| Форма оплаты | Название куска интерфейса, а не шага | Выбирает, чем платить |
| Успех | Не сказано, что человек здесь узнаёт | Видит номер заказа и когда привезут |
| Показ ошибки | Действие интерфейса, причём непонятно какой | Понимает, что карта не прошла |
Откуда берутся плохие названия
- Из структуры сайта. Вы смотрите на меню и переписываете его в блоки. Получается карта страниц, а не сценарий.
- Из задач в трекере. «Реализовать валидацию адреса» — формулировка разработчика, и она про систему.
- Из макетов. Файл называется «Payment_v3», блок называется так же. Через месяц макет переименуют, и схема начнёт врать.
В блоке написано:
Корзина
Название страницы«Человек корзина» не читается. Это название страницы: понятно, где человек, но не понятно, что здесь происходит. Лучше: «Проверяет состав заказа».
В блоке написано:
Проверяет состав заказа
Глагол человека«Человек проверяет состав заказа» — читается. Это шаг. Имя экрана допишите мелко рядом.
В блоке написано:
Валидация адреса по базе зон
Глагол системыЭто делает система, а не человек. На схеме такие вещи идут пунктиром, а шагом остаётся то, что делает человек: «Указывает адрес».
В блоке написано:
Checkout step 2
Название страницыВнутреннее имя из вёрстки или трекера. Чужому человеку оно не говорит ничего, а через полгода и вам может быть непонятно.
В блоке написано:
Выбирает, чем платить
Глагол человекаЧитается с «Человек» и сразу вызывает правильный вопрос: из чего выбирает и что будет, если подходящего способа нет. Хорошие названия помогают достраивать схему.
В блоке написано:
Отправка письма с чеком
Глагол системыЧеловек в этот момент ничего не делает. На схеме нужно, но пунктиром и без претензии на шаг.
В блоке написано:
Личный кабинет
Название страницыНазвание раздела. Внутри личного кабинета человек может делать десяток разных вещей — какую именно, из блока не видно.
В блоке написано:
Понимает, когда привезут заказ
Глагол человекаНе самый очевидный, но правильный вариант: «понимает» и «узнаёт» — тоже действия человека. На последнем шаге сценария они как раз уместнее, чем «нажимает».
В блоке написано:
Показ ошибки оплаты
Глагол системыЭто действие интерфейса. Со стороны человека здесь происходит другое: «понимает, что карта не прошла», — и дальше он выбирает другую карту. Из формулировки со стороны человека сразу видно следующий шаг, из «показа ошибки» — нет.
4Входы и выходы
Третий навык. Часть схемы, которую часто пропускают, и первое, о чём спросит разработчик.
Схема обычно начинается с первого экрана и заканчивается успехом. Между тем сценарий начинается раньше и заканчивается по-разному. Вход — это то, откуда человек попал в сценарий. Выход — то, чем для него всё закончилось, включая случаи, когда он ушёл.
Входов обычно больше одного
В сценарий оформления заказа из урока попадают как минимум тремя способами, и человек приходит в разном состоянии:
| Вход | Куда приводит | Чем этот человек отличается |
|---|---|---|
| Из корзины, кнопка «Оформить» | На первый шаг | Обычный случай: состав заказа он уже видел |
| Из карточки товара, кнопка «Купить сейчас» | Сразу на доставку, минуя корзину | Состав заказа не проверял — товар ровно один |
| Из письма «вы забыли товары в корзине» | На первый шаг | Пришёл через день: цена или наличие могли измениться |
| По ссылке из поддержки | Обычно на доставку | Что-то уже не получилось — он раздражён и торопится |
Зачем это на схеме.
Во-первых, забытый вход всплывает в разработке, и отвечать на него приходится на ходу. Например, вопросом «а если он пришёл из карточки товара, у него корзина пустая или там один товар?».
Во-вторых, из входов видно, какие состояния обязаны быть предусмотрены: человек из письма приходит на изменившиеся цены, значит, состояние «цена изменилась» нужно нарисовать.
Выходов тоже больше одного, и не все успешные
Выход — это не только «заказ оформлен». Полезно разделить на три вида:
- Успех. Человек получил то, за чем пришёл: заказ принят, номер показан.
- Уход в другой сценарий. Понадобилось зарегистрироваться, оплатить в приложении банка, дозаказать товар. Сценарий не провалился — он поставлен на паузу, и важно показать, вернётся человек сюда или нет.
- Обрыв. Закрыл вкладку, передумал, ушёл сравнивать цены. Схему это не портит — наоборот, обрыв нарисованный честно показывает, где сценарий теряет людей.
| Выход | Вид | Что осталось в системе |
|---|---|---|
| Заказ оформлен, номер показан | Успех | Заказ в статусе «собирается», письмо отправлено |
| Ушёл платить в приложение банка | Уход в другой сценарий | Заказ в статусе «ждёт оплаты» 20 минут — и он может вернуться |
| Карта не прошла три раза, закрыл | Обрыв | Заказ «ждёт оплаты», деньги не списаны, корзина цела |
| Адрес вне зоны, ушёл | Обрыв | Ничего, кроме корзины. И это тот случай, где стоит спросить, почему мы не предложили пункт выдачи |
Нажимайте шаги в том порядке, в каком их проходит человек. Начинается всё со входа, заканчивается выходом. Один вариант лишний — он из другого сценария.
- Приходит из корзины по кнопке «Оформить»вход Вход — это не шаг, а граница сценария. С него схема и начинается, иначе человек будто материализовался на первом экране.
- Проверяет состав заказа Экран «Корзина». Состояния: пустая, товар закончился, цена изменилась.
- Указывает адрес доставки Экран «Доставка». Отсюда растёт развилка: адрес в зоне или вне зоны.
- Выбирает день и время Тот же экран «Доставка» — два шага на одном экране, и это нормально. Порядок не случайный: свободные дни зависят от адреса.
- Выбирает, чем платить Экран «Оплата». Состояния: карта отклонена, нужен переход в приложение банка.
- Подтверждает заказ Последнее действие человека. Дальше начинает работать система: резерв товара, списание, письмо — всё пунктиром.
- Видит номер заказа и когда привезутвыход Выход «успех». У него, как и у остальных выходов, надо указать, что осталось в системе: заказ в статусе «собирается», письмо отправлено.
Это лишний вариант: «Регистрируется по номеру телефона». Это другой сценарий: другое намерение («хочу завести аккаунт») и другой результат («аккаунт создан»). На схеме урока он появляется пилюлей «→ схема «Вход и регистрация»» со стрелкой возврата, но внутренности его здесь не рисуются.
Цепочка пока пустая — начните со входа.
5Как это рисуется: пять фигур и живая схема
Четвёртый навык начинается здесь: нотация должна быть такой, чтобы её не надо было объяснять.
Существуют толстые стандарты нотаций со своими правилами для каждой фигуры. Для карты одного сценария они обычно не нужны: пяти фигур хватает для большинства сценариев, а всё, что сложнее, читается хуже. Главное — не количество фигур, а то, что легенда нарисована прямо на схеме.
Одна и та же схема в трёх состояниях
Ниже — сценарий оформления заказа из урока.
Переключайте вкладки:
- то, что обычно получается с первого раза;
- то же самое после правила «экран или состояние»;
- с добавленными входами и выходами.
1 · Как получается сначала
2 · После правила «экран или состояние»
3 · С входами и выходами
Чем рисовать
Инструмент вторичен: Figma (FigJam), Miro, Excalidraw, Whimsical, хоть лист бумаги.
Важны три вещи, одинаковые везде:
- схема помещается на один экран — иначе её не показать на созвоне;
- у неё есть легенда;
- она лежит там, где команда её найдёт — рядом с макетами и в задаче, а не в вашем личном файле.
6Одна схема — один сценарий
Пятый навык. Сюда легко попасть, потому что соблазн нарисовать всё разом очень силён.
Часто начинается одинаково: вы рисуете оформление заказа, вспоминаете, что незарегистрированному человеку надо где-то войти, дорисовываете регистрацию. Потом вспоминаете про отмену заказа — она же рядом. Через час на листе сто блоков, три сценария и клубок стрелок между ними. Такую схему трудно читать и обсуждать: любой вопрос по ней тянет за собой два других.
| Кусок | Это часть оформления заказа? |
|---|---|
| Выбор способа доставки | Да. Без него заказ не оформить, результат тот же |
| Вход или регистрация перед оплатой | Нет. Отдельный сценарий с другим результатом. На схеме урока — пилюля «→ схема «Вход и регистрация»» с возвратом обратно |
| Оплата в приложении банка | Нет. Это вообще чужой продукт. Пилюля выхода и стрелка возврата |
| Добавление товара в корзину | Нет. Другое намерение — «выбираю товар». Это вход в наш сценарий |
| Отмена оформленного заказа | Нет. Начинается после того, как наш сценарий закончился успехом |
| Ввод промокода | Да. Тот же результат, просто ещё один шаг внутри |
Как связывать схемы между собой
- Через пилюли. Там, где человек уходит в другой сценарий, рисуете пилюлю с его названием — и стрелку обратно, если он возвращается. Внутренности другого сценария не рисуете вообще.
- Общие куски — отдельной схемой. Вход и регистрация нужны в пяти сценариях. Рисуете один раз, остальные ссылаются пилюлей.
- Возврат обязательно подписывать. «Вернулся туда, откуда ушёл» и «вернулся в начало» — это разные вещи, и разработчик про них спросит. Лучше ответить заранее.
7Чтобы схему прочитали без вас
Четвёртый навык целиком. Разработчик не будет расшифровывать схему: он додумает недостающее по-своему.
Схема часто попадает к людям, которых не было при её рисовании. Разработчик открывает её в понедельник, вас нет на месте, а задачу делать надо.
Всё, что на схеме не написано, он решит сам — часто разумно, но не так, как вы задумали. Через неделю выяснится, что после неудачной оплаты человек возвращается в корзину, а не остаётся на оплате, и переделывать придётся уже код.
Поэтому полнота схемы измеряется не количеством блоков, а количеством вопросов, которые она не оставляет. Ниже схема с типичными дырами: найдите пять мест, о которых спросит разработчик.
- Откуда человек сюда попадает?Как чинить. Входов минимум три: из корзины, из письма «вы забыли товары», из карточки товара по кнопке «Купить сейчас». Последний приводит сразу на доставку, минуя корзину. Пририсуйте их пунктирными пилюлями сверху.
- Что такое «Checkout 2»?Как чинить. Внутреннее имя ничего не говорит тому, кто его не придумывал. Напишите крупно глагол человека — «Указывает, куда и когда везти», — а мелко имя экрана из макета: «Доставка».
- Что человек нажал, чтобы оказаться дальше?Как чинить. Подпишите стрелку действием: «Оформить». Неподписанная стрелка означает всего лишь «эти два блока как-то связаны» — а связей бывает несколько, и разработчик выберет свою.
- В каком случае человек попадает сюда, а в каком — дальше?Как чинить. Развилка без условия — самое дорогое место схемы. Напишите на каждой стрелке условие словами: «карта отклонена» — вниз, «оплата прошла» — дальше.
- А отсюда куда?Как чинить. Тупиковый блок означает, что после ошибки человек остаётся ни с чем. Покажите возврат — «пробует другую карту» обратно на оплату. И выход на случай, если он уйдёт: заказ висит в статусе «ждёт оплаты» 20 минут, потом отменяется.
Все пять найдены. Заметьте, что ни одна из дыр не про то, чего в продукте нет: сценарий работает, просто схема о нём молчит. Именно в этих молчаливых местах разработчик и принимает решения за вас.
Восемь вещей, из-за отсутствия которых приходят с вопросами
- Легенда на самой схеме. Один угол, пять строк. Без неё каждый читает фигуры по-своему.
- Понятные имена экранов — те же, что в макетах. Если в Figma экран называется «Доставка», на схеме тоже «Доставка», а не «Checkout 2».
- Подпись на каждой стрелке: что человек сделал —
нажал «К оплате», а не просто линия. - Условие на каждой развилке, словами: «адрес в зоне» / «адрес вне зоны». Развилка без условия — самое дорогое место схемы.
- Состояния внутри блока, включая ошибки и загрузку. Иначе их просто не сделают.
- Входы и выходы с ответом на вопрос «что осталось в системе».
- Ссылки на макеты прямо с блоков — чтобы от шага можно было перейти к экрану.
- Дата, автор и версия. Схема устаревает за месяц; без даты непонятно, верить ей или нет.
Где схема живёт
Вложите её туда, где команда и так бывает: ссылкой в задаче, рядом с макетами, в вики продукта. Схема в личном файле, о которой знаете только вы, формально существует, но для команды почти бесполезна. И договоритесь с собой об одном: если сценарий изменился, схему стоит поправить сразу: устаревшая схема хуже отсутствующей, потому что по ней уже принимают решения.
8Задание
Взять один сценарий своего продукта и собрать карту экранов со всеми шагами: вход, действия, выход.
Часть 1 · Выберите сценарий
- Один результат. Регистрация, оформление заказа, настройка уведомлений — что угодно, где понятно, чем всё заканчивается.
- 4–8 шагов. Меньше — может быть нечего рисовать, больше — проверьте, не спрятались ли внутри два сценария.
- Запишите двумя строчками до того, как рисовать: намерение («человек хочет купить товар прямо сейчас») и результат («заказ принят, известен номер и дата доставки»). Эти две строки потом не дадут схеме расползтись: всё, что не ведёт к результату, — другой сценарий.
Часть 2 · Соберите текстом, не рисуя
Рисование раньше времени часто делает схему кривой: вы начинаете двигать блоки вместо того, чтобы думать о шагах. Сначала соберите всё списком по этой заготовке, и только потом переносите в схему.
СЦЕНАРИЙ: ______________________ Автор: ______ Дата: __.__.____ НАМЕРЕНИЕ: человек хочет ______________________________ РЕЗУЛЬТАТ: ____________________________________________ ВХОДЫ (откуда сюда попадают) 1. ____________________ → приводит на шаг №__ 2. ____________________ → приводит на шаг №__ 3. ____________________ → приводит на шаг №__ ШАГИ (глагол человека — экран — состояния) 1. ____________________ | экран ____________ | состояния: ______________ 2. ____________________ | экран ____________ | состояния: ______________ 3. ____________________ | экран ____________ | состояния: ______________ 4. ____________________ | экран ____________ | состояния: ______________ 5. ____________________ | экран ____________ | состояния: ______________ ПЕРЕХОДЫ (что человек сделал между шагами) 1 → 2: ______________ 2 → 3: ______________ 3 → 4: ______________ РАЗВИЛКИ (условие — куда ведёт) — если ____________________ → шаг __ ; если ____________________ → шаг __ ДЕЛАЕТ СИСТЕМА (без экрана) — ______________________________________________ ВЫХОДЫ (чем закончилось — что осталось в системе) 1. успех: ____________________ → осталось: ______________________ 2. пауза: ____________________ → осталось: ______________________ 3. обрыв: ____________________ → осталось: ______________________
Часть 3 · Перенесите в схему
- Блоки — по списку шагов, слева направо. Глагол крупно, имя экрана мелко.
- Состояния — чипами внутрь блоков. Не заводите под них отдельные прямоугольники, даже если хочется.
- Подпишите каждую стрелку действием человека и каждую развилку — условием.
- Пририсуйте входы сверху, выходы снизу, пунктирными пилюлями.
- Добавьте легенду, дату, автора и ссылки на макеты.
Часть 4 · Проверьте вслух
- Прочитайте схему сами вслух, как рассказ: «человек приходит оттуда-то, делает то-то…». Место, где приходится добавлять от себя, — дыра на схеме.
- Дайте коллеге, который не знает продукт, и попросите пересказать. Молчите, пока он говорит.
- Запишите каждый его вопрос — это и есть список правок. Не объясняйте, а чините.
Что сдаём
- Схема на одном экране с легендой, датой и автором.
- Шаги — глаголами человека, имена экранов — как в макетах.
- Состояния — внутри блоков, минимум по одному у каждого экрана, где есть чему пойти не так.
- Все входы и все выходы, у каждого выхода — что осталось в системе.
- Заполненная заготовка из части 2 — по ней потом легко править схему.
Ориентир по времени: 30–40 минут на текст, час на схему, полчаса на проверку с коллегой и правки.
Частые сложности
- «Сценарий оказался огромным». Почти всегда внутри два: проверьте по намерению и результату. Оформление заказа и регистрация — разное, даже когда идут подряд.
- «Я не знаю всех состояний». Нормально. Спросите разработчика — он знает про ошибки больше всех, — и загляните в обращения поддержки: там состояния описаны словами людей.
- «В продукте нет схем и никто не просил». Схема часто окупается на первом обсуждении задачи: вместо «давайте обсудим оформление заказа» есть предмет, на который можно показывать пальцем.
- «Не получается уместить на экран». Уберите состояния в чипы (обычно этого хватает) и вынесите чужие сценарии в пилюли. Если всё равно не влезает — это находка, а не неудача: см. раздел 6.
9Чек-лист и частые ошибки
Схема готова, если
- Каждый блок читается как «Человек делает что-то»
- Имя экрана указано рядом и совпадает с макетом
- Состояния лежат внутри блоков, а не рядом с ними
- У каждой стрелки написано, что человек сделал
- У каждой развилки написано условие
- Показаны все входы, включая неочевидные
- Показаны все выходы: успех, пауза, обрыв
- У каждого выхода сказано, что осталось в системе
- Действия системы отмечены пунктиром
- Есть легенда, дата и автор
- Схема помещается на один экран
- В ней один сценарий, остальные — пилюлями
- Коллега пересказал её вслух без вопросов
Ошибки, из-за которых схему трудно читать
- Каждое состояние — отдельный блок. Корзина занимает четыре прямоугольника, схема разрастается вчетверо, а информации в ней не прибавляется.
- Блоки названы страницами. «Корзина → Checkout → Payment» — карта сайта, а не сценарий: не видно, что человек делает.
- Глаголы системы вместо глаголов человека. «Валидация адреса» — это не шаг человека; такие вещи идут пунктиром.
- Стрелки без подписей. Непонятно, что человек нажал и почему оказался там.
- Развилка без условия. Две стрелки из блока, а когда какая — неизвестно. Разработчик решит сам.
- Нет входов. Схема начинается с первого экрана, будто человек там материализовался.
- Один выход — успешный. Всё, что не «успех», на схеме не существует, поэтому и в продукте не сделано.
- Выход без последствия. Не сказано, что осталось в системе, — отсюда заказы без понятного статуса и деньги без заказа.
- Три сценария в одной схеме. Сто блоков, клубок стрелок, обсуждать трудно.
- Нет легенды. Каждый читатель трактует фигуры по-своему, а спросить некого.
- Нет даты. Через месяц непонятно, актуальна схема или нет, и её перестают открывать.
- Схема красивая, но неверная. Сценарий поменяли, схему не поправили — по ней продолжают принимать решения, и это хуже, чем её отсутствие.
10Три ступени темы
Junior закрыт, когда выполнен критерий задания. Ниже — что относится к следующим ступеням, чтобы вы не пытались сделать это сейчас.
| Уровень | Зона ответственности | Признак, что уровень взят |
|---|---|---|
| Junior — этот урок | Разложить один сценарий на шаги и экраны; отличать экран от состояния; называть шаги глаголами человека; показывать входы и выходы; держать одну схему на один сценарий; рисовать так, чтобы прочитали без вас | Коллега, не знающий продукта, пересказывает сценарий по схеме вслух и не спрашивает «а что здесь происходит» |
| Middle | Собирать структуру продукта целиком, а не отдельный сценарий; описывать все ветки и ошибочные пути, а не счастливый путь; связывать сценарии между собой и находить дубли; договариваться с командой об общей нотации; поддерживать схемы живыми при изменениях | По схемам видно не только как всё работает, когда получается, но и что происходит, когда не получается — и разработка перестаёт приходить с вопросами «а если…» |
| Senior | Отвечать за структуру и навигацию продукта в целом; решать, где новому сценарию место и не плодить параллельные пути к одному результату; читать сложность схемы как сигнал о проблеме в продукте или процессе, а не в рисовании; задавать команде общий язык описания сценариев | Споры о структуре закрываются по схеме, а новый сценарий встраивается в продукт без переделки навигации |
Что почитать дальше
- Веб-дизайн. Элементы опыта взаимодействияПять уровней продукта — от стратегии до внешнего вида. Схема из урока живёт на уровне структуры: он отвечает, как человек попал на экран и куда уйдёт дальше, а раскладка экрана — уже следующий уровень. Перевод первого издания 2002 года, примеры — сайты начала 2000-х; введение и глава 2 открыты на сайте автора.
- User Journeys vs. User FlowsЧем user flow отличается от карты пути пользователя: один продукт, минуты, шаги человека и ответы системы, без эмоций и каналов. Статья 2023 года; flow в ней — «типичный или идеальный» путь, а урок добавляет к нему входы, обрывы и состояния.
- Edit course information workflowНастоящая схема из открытой дизайн-документации британского Минобразования: развилки подписаны «Yes» и «No», а обычные стрелки — нет, и блоки названы экранами, а не действиями человека. Удобно разобрать по чек-листу урока. Пост 2019 года: три абзаца и схема.