Описание пользовательских сценариев

Писателям в жанре научной фантастики, фэнтези или триллера приходится следить за большим количеством сюжетных линий. Написание книги — и тем более серии книг — с параллельными или связанными между собой сюжетными линиями требует всеобъемлющей самоорганизации. Вы представляете, как Джорджу Мартину, Джону Толкину или Джоан Роулинг удавалось следить за всеми персонажами и ответвлениями повествования?

Что ж, у вас есть возможность узнать, что происходило в голове у Джоан Роулинг, когда она работала над «Гарри Поттером и Орденом Феникса». В 2010 году в интернете появилась составленная ею от руки таблица сюжетных линий. В столбцы внесены номера глав, временные рамки событий, ключевые моменты фабулы, второстепенные сюжетные линии и названия глав (рис. 4.1).

Рис. 4.1. Автор «Гарри Поттера» Джоан Роулинг использует написанную от руки матрицу, чтобы структурировать сюжеты своих романов

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

В итоговой версии книги многие элементы претерпели изменения. Так, в таблице профессора Амбридж зовут Эльвира, а не Долорес, а Орден Феникса и Отряд Дамблдора впоследствии обменялись названиями.

Даже если вы не читали книги про Гарри Поттера (стойте, вы не читали их, но читаете эту книгу? Советую как можно скорее решить эту проблему), вывод очевиден.

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

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

Схемы играют важную роль, поскольку клиенты не выполнят поставленную перед ними задачу с помощью одного экрана. Любой ваш продукт — от регистрации до съемки фото или просто кнопки «ОК» — будет оцениваться в зависимости от того, как экраны… да-да, следуют друг за другом.

Удобная и логичная последовательность действий пользователя — неотъемлемая черта превосходного продукта. Едва ли подобного можно добиться с помощью одного экрана. В большинстве случаев схематизация работы продукта позволит определить наилучшие подходы для каждого этапа. Например:

• Требуется ли на этом этапе экран или можно ограничиться всплывающим окном?

• Нужна ли на этом этапе другая форма для заполнения или можно воспользоваться уже имеющимися данными с предыдущего экрана?

• Если речь идет о потенциально «опасном» сценарии для пользователя, требуется ли для данного действия двойное подтверждение?

Как правило, на этой стадии разработки составление схем необходимо, поскольку оно позволяет выявить следующие детали:

• Где начинается взаимодействие: внутри самого продукта или после перехода с внешней страницы?

• Каковы ожидания пользователей? Ваши клиенты взаимодействуют с интерфейсом впервые? Они проявляют любопытство или ведут себя осторожно? Или ваши пользователи достаточно опытные и хотят выполнить задачу как можно быстрее?

• Какие решения принимают пользователи на каждом из экранов — и что за ними следует?

• Какую информацию вы должны предоставить пользователям?

• Какие данные должны ввести пользователи?

• Что произойдет, когда пользователи совершат правильные / неправильные действия? Что отображается на экране? Куда вы перенаправляете пользователей?

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

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

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

Например, сервис Snapchat известен тем, что первым экраном, который видит пользователь, служит камера. Каждый раз, когда кто-то запускает Snapchat, приложение открывает камеру. Все остальное — на втором плане: просмотр чужих фотографий, работа с настройками, добавление друзей. Все, что поощряет в первую очередь создание контента. Кроме того, формируются новые ожидания клиента, связанные с обменом фотографиями (рис. 4.2)[84].

Рис 4.2. Демонстрация возможностей Snapchat для бизнеса

Как составить подобную схему? Как наиболее доступно изложить свои мысли в формате, понятном всей команде?

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

На начальном этапе разработки Траутман отбрасывает визуальную составляющую и создает все схемы в текстовом редакторе TextEdit. Принцип его работы базируется на том, чтобы вместо анализа внешнего вида программы сосредоточить все внимание на содержании и задачах каждого экрана. Текстовое наполнение является важной частью дизайна, и такой подход позволяет Траутману одновременно создавать большую часть интерфейса.

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

Это удобный способ работать в команде и сравнивать результаты составленных коллегами сценариев.

Мы использовали [пустые текстовые HTML-файлы] для работы с остальными членами команды, чтобы удостовериться, что мы хотим видеть этот контент на наших страницах. Как только мы добились правильного содержания, нам не составило труда превратить текст в HTML-прототип, при этом нам не пришлось его стилизовать. Затем мы провели проверку: переходили по ссылкам, чтобы убедиться в правильности и логичности последовательности действий и структурированности информации, и только после этого увеличили точность данных.

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

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

Сценарии призваны дать ответы на несколько вопросов:

• Какая последовательность действий позволяет клиентам решить свои задачи?

• Как они решат эти задачи?

• Что произойдет после?

• Есть ли потенциальные затруднения?

Как происходит взаимодействие? Рисунки? Диаграммы? Интеллект-карты?

Возможно, метод Траутмана вам не подходит из-за минималистичности или недостаточной визуализации.

Кейтлин Фридсон, работая менеджером продуктов для мобильных устройств в компании Care.com, использовала карты сценариев при обсуждении новых продуктов с продуктовыми дизайнерами и разработчиками (рис. 4.3).

Рис. 4.3. Карта сценариев, которую использовала Кейтлин Фридсон, работая над продуктом для Care.com

«Важно, чтобы информация быстро доходила до разработчиков, — говорит Фридсон. — Кроме того, необходимо как можно более тщательно проанализировать особенности продукта, этапы работы над ним, чтобы не выпустить полуфабрикат. Это позволяет избежать множество ошибок».

Кейтлин Фридсон не позволяет сиюминутному страху, что пользователи могут не принять продукт, стать препятствием для проработки всех нюансов новой фичи.

Разработчики учитывают, что будут действовать в границах определенного итерационного цикла. Например, в Care мы создавали сценарий платежей между физлицами. Мы знали, в какую систему мы интегрируемся и еще о 4–6 кейсах использования, над которыми нам предстоит работать. Мы дали нашим специалистам время на изучение и даже кодирование данных сценариев: интеграцию с API, тестирование и так далее. Помимо прочего, это позволило нам найти ответы на возможные вопросы, не прописанные в спецификации продукта.

Иными словами, Фридсон использует сценарии, чтобы разработчики мыслили более конкретно:

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

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

Диогенес Брито, продуктовый дизайнер компании LinkedIn, использует этап проектирования сценариев прежде всего для себя, чтобы ничего не упустить:

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

Я изучаю все возможности, и в результате в моем блокноте проступают очертания информационной архитектуры. Это комплексная категоризация. Что будет, если мы представим эти данные в той или иной категории?

В работе над своими проектами я предпочитаю использовать метод Джоан Роулинг: набросать на листе бумаги текст и соединить его стрелками. Как и в случае с Брито, я делаю это прежде всего для себя. Это отличный способ организовать свои мысли и рассмотреть все возможные варианты развития событий. Вот, например, схема, которую я нарисовал, разрабатывая один из мобильных продуктов (рис. 4.4).

Рис. 4.4. Схема, которую я набросал, работая над одним из мобильных продуктов

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

Обратите внимание: в верхней части схемы я хотел отметить три преимущества, но на тот момент еще не определился с выбором, поэтому не стал останавливаться на них подробно.

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

Например, что, если вы выберете Instagram? А если Facebook? А если вы еще не зарегистрированы в Instagram или произойдет ошибка авторизации (рис. 4.5)?

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

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

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

Иногда, если это необходимо, мы составляем еще более точную схему, подобную схеме Кейтлин Фридсон, представленной на рис. 4.3. Как правило, мы это делаем для того, чтобы распространить схему среди сотрудников компании.

Итак, мы рассмотрели картину в целом, но как насчет отдельных экранов?