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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На сегодняшний день кликабельные вайрфреймы, по сути, полностью вытеснили статичные формы. Тест статичного вайрфрейма требовал, чтобы пользователь в определенном месте говорил вам: «Я бы нажал вот на эту кнопку», – после чего вы показывали ему следующий статичный вайрфрейм. Интерактивные вайрфреймы создают для пользователя более захватывающий опыт, позволяя самостоятельно изучать ваш продукт и ориентироваться в нем. Кроме того, поскольку интерактивные вайрфреймы обычно тестируются на том же типе устройства, на котором будет использоваться готовый продукт (например, на компьютере, планшете или телефоне), пользовательский опыт оказывается еще более реалистичным.

Макеты

Как показано на Рисунке 7.3, следующим по степени точности артефактом проектирования являются макеты, которые гораздо больше похожи на конечный продукт, чем вайрфреймы. Макеты передают такие детали визуального дизайна, как цвета, шрифты и изображения. В некоторых случаях они должны «совпадать до пикселя» с конечным продуктом, однако необходимость в такой степени достоверности присутствует далеко не всегда. Макеты обычно создают с помощью приложений для графического дизайна, таких как Illustrator, Photoshop или Sketch.

Как и в случае с вайрфреймами, макеты могут быть статичными или интерактивными. С помощью приложений для графического дизайна обычно получают статичные файлы формата jpg, gif или png, которые по своей сути не является интерактивными. Чтобы создать набор интерактивных макетов, эти изображения объединяются с помощью другого приложения, которое позволяет создавать «горячие точки», при нажатии на которые происходит переход от одного макета к другому.

С этой задачей хорошо справляется веб-приложение InVision. Этот инструмент позволяет загружать изображения и связывать их воедино с помощью создания кликабельных горячих точек. Еще одним похожим по функционалу инструментом является приложение Balsamiq. При тестировании макетов также применяется сценарий «счастливый путь», когда пользователю доступны лишь некоторые элементы навигационного управления, не позволяющие отклониться от намеченного разработчиками маршрута. Как видите, интерактивные макеты и вайрфреймы похожи в том, что и те и другие позволяют осуществлять переходы между страницами, однако в случае с макетами то, что видит при этом пользователь, существенно больше похоже на конечный продукт. Именно потому, что интерактивные макеты выглядят максимально правдоподобно, они могут обеспечить очень ценную обратную связь со стороны пользователей. Некоторые команды, умеющие создавать качественные интерактивные макеты, начинают тестирование проектных артефактов на пользователях именно с этого уровня. Во многих случаях перед разработкой