Сторибординг

Что это такое

Сториборд рисует последовательность шагов пользователя как короткий комикс: ряд панелей, и в каждой подпись о том, что человек делает и о чём думает. Рисуют его до того, как появится интерфейс, а предмет сториборда — человек, а не экран.

Почему это важно

Схема потока показывает прямоугольники и стрелки, однако по ней не понять, разумен ли третий шаг, где человек стоит или что происходит, когда звонит телефон. Сториборд делает последовательность достаточно конкретной, чтобы группа с ней поспорила, и это самый дешёвый момент обнаружить, что шаг, о котором все согласились, не подходит к ситуации; он же самый быстрый способ показать не-дизайнеру, руководителю или клиенту, что изменение значит для чьего-то дня.

Ключевые идеи

Рисуйте человека, а не экран

Оставляйте человека в каждой панели. Интерфейс может быть прямоугольником в его руке, а интересное — где он находится, что держит и что его отвлекает.

Панель 1  Кладовщик в конце прохода, терминал в двух проходах.
Панель 2  Смотрит в планшет. Руки заняты двумя коробками.
Панель 3  Телефон в кармане, перчатки надеты — печатать не может.
Панель 4  Снова идёт к терминалу. 40 секунд потеряно.

Проблема видна в панели 3 без единого слова объяснения.

Одна панель на шаг, в порядке пользователя

Панели идут по времени человека, а не системы. Если человек повторяет шаг, нарисуйте его дважды: повторение и есть находка.

Подпись о том, что меняется, а не о том, что нарисовано

Каждая подпись называет цель пользователя или препятствие в этот момент. Не пересказывайте рисунок («мужчина стоит на складе»).

Шесть-восемь панелей — полезная длина

Меньше — и последовательность расплывчата; больше — и группа перестаёт читать. Разделите на два сториборда, а не удлиняйте один.

Рисуйте вместе с группой

Сторибординг лучше работает как активность, а не как артефакт: дайте каждому ручку и четыре панели, затем сравните. Разногласия о картинке означают разногласия о потоке, и именно такой спор стоит затевать рано.

Практика

Нарисуйте сториборд одной сломанной рутины

Выберите задачу, которую вы видели в исполнении другого. Нарисуйте шесть панелей того, что происходит на самом деле, с подписями словами пользователя, включая перерыв или обходной путь, который показывает проблему.

Готово, когда: человек, никогда не видевший продукт, может указать на панель, где задача идёт не так.

Нарисуйте сториборд предложенного изменения

Нарисуйте те же шесть панелей снова, уже с вашим изменением, оставив человека и обстановку одинаковыми, чтобы разница была только в проектном решении.

Готово, когда: до и после различаются ровно в тех шагах, которые вы намеревались изменить, и больше нигде.

Частые ошибки

Сторибордить интерфейс вместо человека — доска превращается в поток экранов низкой точности, и контекст исчезает; исправить: нарисуйте, где человек стоит и что держит.
Подписи-ярлыки вместо описаний — «Экран 2» ничего не говорит о цели пользователя; исправить: напишите, что человек пытается сделать или что его остановило.
Двадцать панелей — группа перестаёт читать, а детали прячут проблему; исправить: сократите до шести-восьми, разделите, если нужно больше.
Отполированный рисунок — вложенный в рисунок труд отбивает желание переделывать; исправить: держитесь палочных человечков и прямоугольников, нарисованных за один присест.
Нарисовать одному и показать — группа принимает это за готовое решение и спорит о рисунке; исправить: раздайте ручки и рисуйте вместе.

Что читать дальше

Скетчинг (03-design-ux/04-sketching) — привычка рисовать, на которой это строится; рисовать быстро и выбрасывать.
Картирование пути пользователя (03-design-ux/22-journey-mapping) — та же линия времени в большем масштабе, с эмоциями и точками контакта.
Фасилитация и проектирование воркшопов (03-design-ux/03-facilitation-workshop-design) — как вести сторибординг как групповую активность.
Прототипирование (03-design-ux/40-prototyping) — что строить, когда сториборд зафиксировал последовательность.