UX/UI дизайн для создания идеального продукта. Полный и исчерпывающий гид

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

Бумажное прототипирование

Характерные черты

Низкая детализация и низкая интерактивность

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

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

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

Вайрфреймы

Характерные черты

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

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

Вне зависимости от способа производства, принятого в организации, – будь то «водопадный» процесс[57], когда все задачи определены изначально, или гибкий итеративный, когда каждый релиз продукта определяет последующий, – востребованность вайрфреймов стремительно падает.

Вайрфрейм, разработанный для Agrarus.ru, позволил сделать так, чтобы участники распределенной команды работали параллельно, и зафиксировать фронт работ

В продуктовой разработке коротких циклов вроде Scrum вайрфрейм почти всегда можно заменить прототипом на маркерной доске, а элементы интерфейса в виде чертежа при «водопадной» разработке – на объекты из многочисленных открытых библиотек, где доступны элементы интерфейса для популярных инструментов прототипирования типа Figma, например библиотека Google Material Design.

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

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

Онлайн-сервис Figma, сочетающий в себе инструменты дизайна, интерактивного прототипирования и анимации, позволил мне на одном из тренингов за 15 минут сделать интерактивный прототип из библиотек элементов и изображений из Интернета

Кликабельные прототипы

Характерные черты

Низкая-средняя детализация и низкая интерактивность

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

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

Огромное количество продуктов на рынке позволяют создавать кликабельные области (hotspot area) на изображениях экранов и связывать экраны между собой.

Приложение POP позволяет из бумажных прототипов быстро создавать кликабельные прототипы мобильных приложений

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

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

Высокоуровневые прототипы