Дэн Олсен – MVP. Как выводить на рынок товары и услуги, которые нравятся покупателям (страница 25)

После создания продукта вы, опять же, сможете протестировать его на пользователях – преимущество этого момента заключается в том, что точность результатов такого тестирования составляет все 100 %. Возможно, вы при этом узнаете то, чего не смогли заметить на этапе тестирования артефактов дизайна. Например, во время разработки вы могли получить отзывы о макете веб-страницы, о том, насколько доходчиво изложена информация и привлекателен визуальный дизайн. Однако вы не заметили бы до момента реализации продукта, что веб-страница загружается очень медленно или того, что она не работает должным образом в определенном браузере. Тестирование готового продукта в реальных условиях не обязательно должно быть сопряжено с негативными последствиями; однако, если вы откладываете его до того момента, когда продукт будет запущен в эксплуатацию, вы точно очень сильно рискуете. Причем, этот риск ничем не оправдан и должен быть снижен путем демонстрации результатов проектирования еще на ранних стадиях процесса разработки продукта. Это позволит гарантировать, что клиенты в итоге оценят его должным образом.

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

Рисунок 7.3. Проектные артефакты, распределенные по степени их точности и интерактивности

Обратите внимание на Рисунок 7.4, который иллюстрирует различия между низкой и высокой точностью артефактов проекта. Оба представленных на рисунке результата проектирования относятся к одному и тому же приложению для iOS (источник: https://itunes.apple.com/us/app/pointedlysimple-score-keeper/id933257819). Это приложение, созданное талантливым UX-дизайнером Беном Норрисом, позволяет упростить процесс подсчета очков во время различных настольных игр (например, в Scrabble), заменяя использование для этой цели ручки и бумаги. В левой части рисунка показан вайрфрейм низкой точности. Он не использует каких-либо цветов (сделан в оттенках серого) и показывает только расположение элементов экрана без детализации визуального оформления. Высокоточный макет в правой части рисунка выглядит гораздо более похожим на реальный продукт (несмотря на то что его цветное изображение в печатной версии этой книги также представлено в оттенках серого). Элементам пользовательского интерфейса здесь уже придан близкий к реальному дизайн, использующий определенные цвета, шрифты и графику.

Рисунок 7.4. Вайрфрейм низкой точности в сравнении с высокоточным макетом

Эскизы

В левом нижнем углу Рисунка 7.3 вы можете видеть проектные артефакты, обозначенные как «Эскизы», которые характеризуются наименьшей точностью и наименьшей интерактивностью. Создание эскиза – отличный способ начать визуализировать идеи, особенно если вам нужно обсудить их с товарищами по команде и другими внутренними заинтересованными сторонами. Эскиз на доске или бумаге позволяет вносить в проект быстрые правки. Я активный сторонник использования доски для рисования, особенно на ранней стадии проектирования. На самом деле, данный метод вполне может являться идеальным инструментом бережливого производства, поскольку позволяет участникам команды осуществлять быстрые итерации своих идей. Однако, какими бы полезными ни были эскизы для внутреннего использования, слишком низкая точность не позволяет использовать их для получения обратной связи от пользователей (именно по этой причине они отсутствуют в представленной на Рисунке 7.2 матрице MVP-тестов).

Вайрфреймы

Следующим по степени точности артефактом проектирования является вайрфрейм, который с низкой или средней точностью дает представление о компонентах продукта и об их местоположении. Вайрфреймы – это не «совпадающие до пикселя» отображения; скорее, они показывают относительные размеры и расположение элементов. Обычно они не содержат каких-либо деталей визуального оформления, таких как цвета, картинки и шрифты. При их создании чаще используют оттенки серого и заполнители вместо реальных изображений, чтобы не отвлекать рецензентов элементами визуального дизайна. В некоторых случаях могут также использоваться заполнители вместо реального текста – например, «lorem ipsum»[14], – хотя это становится все менее распространенной практикой. Я рекомендую с самого начала использовать реальные текстовые элементы – даже если по содержанию это будет всего лишь черновик, – чтобы заранее выявить потенциальные проблемы с версткой.

Вайрфреймы могут быть нарисованы вручную, но обычно они представляют собой цифровые артефакты, созданные с помощью программных продуктов, предназначенных для проектирования либо специальных приложений для создания вайрфреймов. Чаще всего для создания графического дизайна используют такие приложения как Illustrator и Sketch. Приложения OmniGraffle и Visio представляют собой инструменты более общего назначения. Некоторые специалисты, не являющиеся профессиональными дизайнерами, создают вайрфреймы в PowerPoint или Keynote. Я рекомендую использовать более эффективные инструменты, специально разработанные для создания вайрфреймов, такие как Balsamiq, Axure и UXPin – для веб-продуктов.

Поскольку продукты для мобильных устройств – будь то нативные или интернет-приложения – как правило, имеют элементы пользовательского интерфейса, отличные от тех, которые используются для традиционных веб-приложений, появились специализированные инструменты для создания мобильных вайрфреймов. Дизайнерам, создающим вайрфреймы для мобильных приложений, я рекомендую такие инструменты, как Flinto и Marvel. Тем, кто не занимается дизайном, для создания мобильных вайрфреймов подойдут простые в использовании приложения POP и Dapp.

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

Вот некоторые признаки, указывающие на то, что вам, вероятно, следует изучить современные инструменты для создания вайрфреймов:

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

• Создаваемые вами вайрфреймы не реагируют на «клики» и нажатия клавиш.

• Ваши вайрфреймы трудно «расшаривать» для использования другими людьми.

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

• Создание вайрфреймов занимает больше времени, чем вам хотелось бы.

• Вы вообще не создаете вайрфреймы.

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

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

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

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