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

2) слой компоновки – определение взаимного расположения элементов на экране;

3) слой структуры – определение того, как связаны разделы системы с точки зрения навигации;

4) слой скоупа – определение того, какие функции включены в проектируемый релиз продукта;

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

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

Впервые такой послойный подход к дизайну цифровых продуктов представил миру Джесс Гарретт в своей книге «Веб-дизайн. Элементы опыта взаимодействия».[29]

Далее подробно разберем каждый слой проектирования и характерные для него инструменты.

Плоскость стратегии (Strategy Plane)

На этом уровне дизайна пользовательского опыта мы отвечаем на вопрос «Зачем?». Зачем создается продукт?

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

Под ресурсами мы понимаем, как правило, деньги, хотя ими могут считаться и составляющие части продукта (например, контент).

Главное, чтобы стоимостный эквивалент возвращаемых ресурсов превосходил стоимостный эквивалент затрат.

Продукт должен быть востребован и держаться на плаву, а еще лучше – развиваться.

По сути, при запуске продукта или очередной итерации мы опираемся на гипотезу о том, что:

Определенный СЕГМЕНТ пользователей в попытке решить свою ПРОБЛЕМУ воспользуется РЕШЕНИЕМ в определенном КАНАЛЕ и будет совершать при этом ПРИБЫЛЬНЫЕ ДЕЙСТВИЯ, которые в перспективе принесут доход, превосходящий РАСХОДЫ на разработку и поддержку.

Эту формулировку можно расширить, добавив:

Мы учитываем, что запустим инициативу в УСЛОВИЯХ ГОТОВНОСТИ БИЗНЕСА[30], что минимизирует ЦЕНУ ЗАДЕРЖКИ.

В такой фразе, которую иногда называют Product Statement[31], могут меняться слагаемые; например, если продукт запускается на состоявшемся рынке, стоит добавить: «…в отличие от КОНКУРЕНТОВ…», а в случае Lean Startup – «…МЕТРИКИ, при достижении которых мы призна́ем инициативу успешной до того, как она выйдет на окупаемость…».

Чтобы создать такой стейтмент, какой примет вся команда, удобно использовать холсты (Canvas), где размечены области с соответствующими названиями; команда открытия[32] выписывает на стикеры разные варианты формулировок и приоритизируют согласно выработанным критериям.

Один из первых и самых популярных холстов авторства Александра Остервальдера[33]

Lean Canvas, которую описал Эш Маурья в книге Running Lean: Iterate from Plan A to a Plan That Works. Доработана для гибкого управления продуктовым портфелем[34]

Agile42[35] на своих тренингах, обучающих более эффективному управлению портфелем идей на разных стадиях зрелости, предлагают перекомпоновать поля, чтобы холст можно было отгибать при проработке идей. Сначала мы отталкиваемся от предположений о пользовательских сегментах и их потребностях, потом расширяем холст, добавляя вероятные решения, а после ряда обсуждений и проверок включаем финансовые характеристики (доходы, расходы и стоимость задержки).

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

Порядок заполнения полей холста имеет значение.

Как уже многократно говорилось, в агрессивной среде цифровых продуктов все меньше работает подход, сконцентрированный на продукте, и все больше – подход, сконцентрированный на пользователе.

Победит тот, кто быстрее выявит новую комплексную потребность пользователя и удовлетворит ее.

Один из самых актуальных вариантов холста – Opportunity Canvas. Создатели, Джефф Паттон и его коллеги, позиционируют его как дериватив (производное) от Business Model Canvas и Lean Canvas, который фокусируется на пользовательских потребностях

Плоскость скоупа (Scope Plane)

Идеальный перевод для слова scope – «объем работ».

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

Ключевое понятие для современной разработки – MVP. Мы с ним уже знакомились в главе 4; это продукт с таким набором функций, который позволит, с одной стороны, удовлетворять потребности пользователя, а с другой, получать в обмен достаточно ресурсов для поддержки и развития продукта.