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


О книге
ошибках в случае неудачи и привносить новые идеи по своим направлениям.

Постоянный анализ результатов внедрения – обязательная часть производственного процесса.

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

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

Прототипы

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

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

Схема классификации прототипов. Прототипы, применяемые в цифровом производстве, условно разложены по двум осям – по степени абстрактности и по степени интерактивности

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

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

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

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

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

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

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

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

Вайрфреймы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание высокоуровневых – часто их называют еще Hi-Fi (High Fidelity) – прототипов позволяет проверить поведение пользователей и унифицировать видение в команде. Однако это очень дорогой артефакт с длительным периодом производства. Как правило, при его разработке задействуется большое количество ресурсов команды, иногда сопоставимое с разработкой прототипируемой функциональности, а из-за временны́х затрат на производство и согласование неминуемо увеличиваются сроки поставки.

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

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

Чтобы определиться со стратегией нового приложения и провести пользовательское исследование совместно со студией Лебедева, мы создали прототип, практически не отличимый по поведению от реального продукта

Как мы уже знаем из раздела «Плоскость скоупа» (см. главу 5), иногда получается так, что изначально нарисованный UX-дизайнером экран изобилует мелкими деталями, которые уходят в процессе декомпозиции типа User Story Mapping (см. там же), и в результате появляется минималистичный, но быстрый с точки зрения реализации вариант. Многие из идей, нарисованных дизайнером, могут вообще никогда не увидеть свет.

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

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

Перейти на страницу: