MVP. Как выводить на рынок товары и услуги, которые нравятся покупателям - Дэн Олсен Страница 39

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

Интерактивный дизайн приложения TurboTax

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

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

Основное взаимодействие приложения и пользователя заключается в демонстрации вопросов и получении ответов в интерфейсе пошагового прохождения. Переход к следующему вопросу осуществляется нажатием кнопки «Далее». Пошаговый процесс продолжается до тех пор, пока не будет собран весь объем информации, необходимый для заполнения налоговой декларации. Благодаря тщательно продуманному интерактивному дизайну TurboTax облегчает пользователям выполнение этой сложной задачи. Работа в режиме «Легкий шаг» также позволяет опытным пользователям перепрыгивать с одного этапа заполнения на другой, внося необходимую информацию по своему усмотрению.

«Легкий шаг» является основным режимом работы продукта, установленным по умолчанию. Еще один режим работы приложения, который называется «Формы», предоставляет доступ к реальным налоговым формам и рабочим листам, поля которых предзаполнены в соответствии с ответами, которые были даны пользователем в режиме «Легкий шаг». При этом каждое из внесенных числовых значений может быть отредактировано. Таким образом, пользователи TurboTax могут по своему желанию составить декларацию, пройдя через процедуру вопросов-ответов, без перехода в режим ручного заполнения налоговых форм либо заполняя необходимые поля самостоятельно. При этом приложение позволяет пользователю легко переключаться между режимами. Многие в итоге даже не видят заполняемые формы; режимом непосредственного заполнения пользуются, как правило, только те, кто имеет необходимый для этого опыт. Благодаря использованию двух различных режимов работы интерактивный дизайн TurboTax позволяет с помощью одного и того же продукта эффективно удовлетворять потребности как начинающих, так и опытных пользователей.

Блок-схемы

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

На Рисунке 8.3 показан пример блок-схемы, разработанной талантливым UX-дизайнером Кристин Лью (источник: http://christineliu.info) для мобильного приложения CarMax. Это приложение помогает пользователю выбрать понравившийся автомобиль, а затем связаться с дилерским центром CarMax. Приложение использует данные, содержащиеся в профиле пользователя на Facebook, чтобы предложить автомобили, которые могут ему понравиться. Пользователи могут просматривать предлагаемые варианты автомобилей, включая их подробные характеристики, пока не найдут тот, что им понравится. На этом этапе они могут связаться с дилером CarMax по электронной почте, через онлайн-чат или по телефону, чтобы запланировать свой визит в дилерский центр. Блок-схема начинается с этапов загрузки и запуска приложения, а затем показывает пути, по которым пользователь может перемещаться между различными экранами вплоть до получения конечного результата. Обратите внимание, что блок-схема описывает верхний уровень пользовательского опыта, не вдаваясь в детали дизайна отдельных экранов (такие как расположение элементов или визуальный дизайн).

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

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

Рисунок 8.3. Пример блок-схемы

Вайрфреймы

Обычно вы создаете вайрфреймы (мы рассматривали этот инструмент в главе 7) уже после того, как получили четкое представление о предполагаемых пользовательских потоках для вашего продукта. Вайрфреймы являются важной реперной точкой в процессе создания бережливого продукта. К этому моменту вы уже потратили значительное количество времени на выявление целевых клиентов, их потребностей, формирование ценностного предложения, функционала, проектирование информационной архитектуры и пользовательских потоков. Теперь вы наконец переходите к той части разработки, которая определяет, что именно будут видеть пользователи при использовании продукта или, иными словами, что будет отображаться на каждой странице или экране.

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