Март 16

Прототипирование для менеджеров: зачем это нужно и какие бывают прототипы

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

Уметь делать прототипы полезно бизнес-аналитикам, маркетологам, продукт-менеджерам, дизайнерам и тем, кто работает в распределённой команде.

Для чего нужно прототипирование

Выявление и написание требований к функционалу, интерфейсу, веб-сайту.
Управление ожиданиями заказчика.
Иллюстрирование user stories или use cases для того, чтобы они стали более понятными (в том числе и для самого аналитика).
Создание собственно дизайна, когда в команде нет дизайнера (редко).
Утверждение основных блоков и расположения с заказчиком.
Передача требований дизайнеру.
Тестирование расположения блоков, кнопок, да и валидация идей.

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

Визуальное представление, понимание, оценка и изучение идей также лежат в основе методологии Design thinking.

Какие бывают прототипы

Так как чаще всего мы работаем с иностранными заказчиками, то и термины будут звучать на английском: wireframe и prototype (low-fidelity prototype, high-fidelity prototype).

Wireframe

Начальный вид прототипирования. Черновой набросок от руки на бумаге. Некоторые приложения, например Balsamiq, специально имитируют стиль небрежного рисунка, чтобы не фокусироваться на внешнем виде. Такие «наброски» лишь обозначают блоки на странице. Что очень удобно и не отвлекает внимания на самом первом этапе обсуждения. Для wireframes лучше не использовать цвет — это будет отвлекать от сути и совещание пройдёт в обсуждении цветов кнопки. Оставьте цвет дизайнерам для создания прототипов высокой детализации.

Что даёт wireframe:

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

Кто делает: менеджеры, бизнес-аналитики, маркетологи, дизайнеры и UX-дизайнеры.

Олег Руденко, Senior Business Analyst в EIS Group:

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

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

Low-fidelity prototype (прототип малой детализации)

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

Прототип малой детализации чаще всего применяется для окончательного утверждения расположения функциональных блоков с заказчиком или другим ответственным лицом (product owner). При создании переходов по кнопкам и ссылкам между страницами используется для пользовательского тестирования. Создать готовый кликабельный прототип такого типа можно в Axure. Отдельно переходы можно сделать в Invision или Marvel.

Если хотите сделать прототип более привлекательным для клиента, но вы не Web- или UI-дизайнер, сделайте равные расстояния между блоками и определите иерархию размеров шрифта (заголовки 1, 2, 3 уровней и основной текст, ссылки).

Кто делает: менеджеры, бизнес-аналитики, маркетологи, дизайнеры и UX-дизайнеры.

Ирина Тищенко, Marketing Ninja of Ministra TV platform в Infomir:

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

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

High-fidelity prototype (прототип высокой детализации)

Этот вид прототипа уже выглядит как готовый продукт с подобранным стилем и pixel perfect элементами. Он тестируется на соответствие требованиям по доступности для людей с разными видами нарушения восприятия цветового диапазона. Утверждается с заказчиком и передаётся в разработку.

Кто делает: только дизайнеры.

Выводы

Любой из представленных видов прототипа можно (и нужно) сделать кликабельным и протестировать на ваших потенциальных пользователях. Для этого есть такие приложения как Balsamiq, Axure, InVision, Marvel и многие другие.

Расскажу об одном продукте, который отправили в продакшн, минуя стадию тестирования. Приложение было предустановлено на устройствах, но люди им не пользовались. Тестирование показало, что большинство респондентов не поняли, что с ним делать. В чём была проблема? Прототипы не были протестированы на реальных людях. Что это значит? Работу пришлось делать дважды, но теперь правильно. Представьте себе рейт минимально необходимой команды из дизайнера, разработчика, тестировщика и менеджера.

Делайте прототипы: экономьте ваше время, деньги проекта и нервы ваших пользователей :)