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

Джош Сайден (иллюстрации Демиана Репуччи)

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

Придя в офис через несколько дней, я встретился с Робертом. Он, одновременно гордый и предельно замотанный, все мне показал. Компания наняла большую консалтинговую фирму для помощи в разработке требований к проекту, и фирма проделала впечатляющий объем работы. Все стены в просторном офисе-лофте были завешаны листами тонкой коричневой бумаги, а каждый лист, в свою очередь, покрыт карточками и стикерами. Это были требования в форме пользовательских историй. Тысячи историй. Пока Роберт вел меня вдоль стены с историями, я обратил внимание на то, что истории были организованы согласно функциональным модулям: стена текстового редактора, стена английского языка. Но мне не удавалось представить себе работу системы целиком.

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

Случилось так, что через несколько недель я присутствовал на семинаре, который проводила команда художников-раскадровщиков. Целью семинара было обучение заказчиков формулировать видение их бизнес-идей. Эти художники сидели рядом с заказчиками и, быстро работая, рисовали по их описанию истории и набрасывали идеи в виде раскадровок – мини-комиксов, которые ясно и четко излагали каждую историю. Мне тут же захотелось скомбинировать этот подход с составлением карт историй, поэтому я пригласил присоединиться ко мне художника Демиана Репуччи, чья работа впечатлила меня наиболее сильно.

Через пару недель Демиан и я встретились с Робертом и его командой, а также менеджерами продуктов из разных частей системы. Мы сфокусировались на высокоуровневых процессах – основных вариантах действий пользователя в системе. В течение встречи Демиан рисовал в блокноте, а я выкладывал на стенах конференц-зала пользовательские варианты с помощью карточек и стикеров. После окончания встречи Демиан должен был вернуться к себе в студию, чтобы проиллюстрировать ключевые моменты, а я использовал Omnigraffle, чтобы выполнить окончательные версии карт историй, черновики которых мы набросали на встрече.

Мы с Робертом решили: самое лучшее, что мы можем сделать для команды, – это организованная структура, поэтому выпустили серию постеров, которые можно было напечатать на листах 11?17 дюймов и повесить на стены, что сформировало бы каркас карты историй. После этого команды могли бы пользоваться ими независимо друг от друга, чтобы реорганизовать свои истории. В результате из вида, организованного по модулям, который никак не помогал итеративной разработке, мы получили вид, основанный на логике пользования, который легко было трансформировать в несколько многомодульных релизов.

Проектная студия – эффективный и быстрый способ работы в группе для генерации идей. Этой техникой можно пользоваться по-разному, вот мой простой рецепт.

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

2. Опишите задачу, которую решаете. Рассмотрите уже проделанную работу, чтобы выявить возможности. Просмотрите еще раз персонажей и карты, отражающие то, как пользователи решают проблемы сейчас. Если вы уже начали составлять какие-то карты для решений, просмотрите и их, но будьте осторожны, не говорите слишком много, иначе все неизбежно будут отталкиваться от ваших мыслей и вы не услышите самые лучшие идеи других людей.

3. Можно продемонстрировать примеры для вдохновения. Посмотрите вместе и обсудите удачные похожие продукты. Рассмотрите также продукты, не совсем схожие с вашим, но воплощающие удачные идеи, которые могут натолкнуть на хорошую мысль.

4. Рисуют все! Раздайте всем бумагу, ручки, карандаши, при желании – какие-то шаблоны экранов и установите таймер. В моей практике встречались отрезки времени как 5, так и 60 минут. Лучше всего, по-моему, примерно 15 минут.

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

6. Попросите каждую группу объединить свои лучшие идеи в одно решение и проиллюстрировать его эскизами. Это самая сложная часть. На нее стоит отвести 15–30 минут.

7. Попросите каждую группу представить свои лучшие идеи, сведенные воедино, всей группе. Обсудите их.

8. Поблагодарите всех и объедините все идеи и наброски. Вы, UX-специалист и исследовательская команда должны рассмотреть и задействовать их, чтобы создать финальные, наилучшие эскизы UI. Помните выражение моей подруги Лизы Райшелт: «Дизайн через сотрудничество – не то, что дизайн в комиссии»? У вас будет много отличных, но не согласующихся друг с другом идей, и кому-то придется принять нелегкое решение.