8 мая 2018

Разбор задачки: как я использую Storyboards в дизайне

Ольга Шаврина
Бывает у вас такое – читаешь обо всяких методологиях, подходах и бест практиках: user journey, jobs to be done, персоны и др. Все они кажутся жутко полезными, но почему-то у тебя не приживаются. И думаешь «Я какой-то неправильный дизайнер, не использую методологию Х, надо пойти еще поучиться :( ».

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

Из этого следует, что разные методы подходят разным людям. Так что не надо чувствовать вину, что вы чего-то не используете и думать, что поэтому недостаточно профессиональны… пфф.

Скажем, у меня не прижился подход jobs to be done, хотя штука очень крутая. Зато сториборды рисую все время и очень ими дорожу.
Что мне нравится в Storyboards
Самое важное в сториборде – он легко воспринимается хоть кем. Не зря формат комиксов так хорошо прижился у детей (и не только :)). Сториборд можно показать программистам, чтобы объяснить, как должна работать фича, можно обсуждать с заказчиком, начальством и кем угодно другим – все поймут.

Второй плюс – в нем участвует пользователь как персонаж. Он сталкивается с трудностями, решает проблемы и приходит к хэппи энду (да-да, как в вашем любимом сериале). Это заставляет проникнуться к нему эмпатией, а она – критична в работе дизайнера.
Неплохо о сторибордах написал Ник Бабич (англ).
Итак, разберем задачку
Исходные данные: есть сайт, на котором публикуются шутки. Они подтягиваются из нескольких разных источников и попадают в админку, где админы их помечают тегами и оценивают по шкале от 1 до 10. Админка уже готова и работает, выглядит так:
Админка, где можно оценивать и тегировать шутки
Чтобы сделать труд админов не таким монотонным, решили добавить геймификацию. Каждый из админов (сейчас их пять, теоретически может стать больше/меньше, но не намного) может запустить одну из игр: «Лучшая шутка», «Умная шутка», «Архи-нытье» или «Грязная шутка».

Суть игры – каждому админу дается по 25 шуток, он их оценивает и тегирует, потом выбирает из них одну шутку, которая на его взгляд лучше всего соответствует названию игры. Когда все закончили, каждый получает шутки противников для оценки от 1 до 10 – насколько они соответствуют игре. Шутка, набравшая высший суммарный балл побеждает.
Основные моменты и  требования
Начинаю с того, что кратко выписываю важные моменты. Буду их просматривать позже, чтобы ничего не упустить.
Выписываю важные моменты, которые надо не забыть.
В голове уже начинает формироваться сценарий взаимодействия пользователя с системой, и очень вовремя, потому, что дальше – рисую сториборд. Пользуюсь блокнотом и карандашом, потому, что это быстрее. Кому-то больше нравится рисовать в электронном виде – дело вкуса.
Сториборд, нарисованный на коленке
Именно тут приходят в голову интересные идеи и находятся инсайты:
1
Придумала вставить емоджи для индикации игры. Вместо того, чтобы писать «Умная шутка» – использую очкастый смайл. Во-первых, это короче, а во-вторых, игра же, ну, должно быть весело (второй слева блок).
2
Выявила альтернативные ветки. Например, если кто-то из пользователей не хочет играть – инициатор игры должен иметь возможность игру «убить» (правый верхний блок); возможны разные исходы игры (правый нижний угол); пользователь может ждать других игроков в процессе (нижний ряд, второй блок).
3
Поняла, что нужна кнопка для подтверждения выбора шутки, потому, что пользователь может сомневаться, думать, тыкать в разные шутки (левый нижний блок).
4
Прикинула, в каком эмоциональном состоянии будет пользователь на разных этапах. Соответственно, как это надо поддержать или, наоборот, сгладить интерфейсом. Игрок в шкодливом настроении, когда инициирует игру; немного раздосадован, когда вынужден ее убить; нетерпелив, пока ждет остальных игроков; рад при выигрыше и не должен сильно расстроиться, если проиграл.
Сверяем с требованиями которые выписали выше
Упс, пропустила кусок, причем, самый важный. А вы заметили? Только честно ;) Профукала часть, где пользователь оценивает шутки, выбранные другими игроками. Ничего страшного, дорисовываем, сверяем с требованиями еще раз. Теперь все четко.
На свете очень мало проблем, которые нельзя решить с помощью скотча © не помню из какого фильма
Прототип
А вот теперь можно браться за прототип. Как минимум первые наброски интерфейса я всегда делаю на бумаге.
Следующий шаг – бумажный прототип
Дальше – по обстоятельствам. Либо собираю интерактивный прототип в Бальзамике / Акшуре и др., либо делаю конечный дизайн. Потом – тестирование на живых пользователях, правки и т.д. и т.п., но это уже другая история.
Конечный дизайн, первая итерация
Что если я не умею рисовать?
А я не умею танцевать джигу. Круто, что ни то, ни другое не требуются для создания сториборда, правда?

Вот такие штуки может нарисовать любой выпускник детского сада:
А для нестыдного сториборда больше ничего не нужно.
Итого
Сториборд – не панацея, кому-то зайдет, кому-то – нет. Если написанное выше не отзывается в вашем сердце – можете об этом забыть. Если отзывается – попробуйте порисовать сториборды сами, это проще, чем кажется и может сильно помочь проекту. А я буду рада, что добавила в вашу серьезную работу немного фана :)
Нажимая на кнопку, вы даете согласие на обработку своих персональных данных и соглашаетесь с политикой конфиденциальности