Слои UX, Business Model Canvas и CJM – что такое и зачем надобно

Рецензия на книгу «UX/UI дизайн для создания идеального продукта», часть вторая

Привет! Обещала опубликовать вторую часть рецензии через неделю, а получилось…через полтора месяца. Если вы не понимаете, о какой рецензии речь, вам сюда. В первой части я рассказала о SUS, MVP, концепциях Personas и JTBD, разнице между MVT и A/B-тестированием, об API, как о факторе, формирующем UX, и многом другом.

Сегодня поговорим о слоях UX. Мы углубимся в Business Model Canvas и его деривативы, затронем Dual-track agile, а еще поймем, что такое CJM. Плюс, конечно, по касательной затронем Z/F-паттерны и диаграмму Гутенберга.

Глава пятая: Слои UX

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

Откуда вообще взялась модель, описывающая слои UX?

Её придумал и впервые описал в своей книге «Веб-дизайн. Элементы опыта взаимодействия» (2001 г.) Джесси Гарретт, американский программист и разработчик пользовательских интерфейсов.

Модель позволяет дизайнерам (и не только!) последовательно переходить от абстрактных концепций к конкретным решениям, обеспечивая целостный и продуманный пользовательский опыт; модель помогает учитывать все аспекты взаимодействия пользователя с продуктом.

Слой первый – стратегия

Автор книги начинает с абстрактного, т.е. со стратегии. Так скажем, это тот старт, на котором решаются наиважнейшие вопросы, такие как:

• Зачем создается продукт?

• Какова цель?

• Для кого создается продукт? Кто является ЦА?

• Какие проблемы/задачи этой ЦА решает продукт?

• Почему продукт будут выбирать? В чем его особенность, уникальность для ЦА?

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

Product Statement – с английского «утверждение о продукте», определяет, почему существует продукт, какие проблемы он решает, кому он нужен и чем он отличается от конкурентов. Product Statement существует для того, чтобы команды по продукту понимали, над чем они работают и почему это важно.

Чтобы придумать стейтмент, можно воспользоваться преинтереснейшими холстами в совершенно разных вариациях. Например, можно обратиться к самому популярному холсту авторства Александра Остервальдера и Ива Пенье, описавших Business Model Canvas в книге «Построение бизнес-моделей» (книга переведена на русский язык и продается, ссылка внутри). 

Business Model Canvas – это своего рода стратегический инструмент управления, который позволяет описать и проанализировать всю систему взаимосвязанных бизнес-процессов. Шаблон бизнес-модели превосходит традиционный бизнес-план, занимающий несколько страниц, поскольку он намного проще и компактнее. Сами взгляните ↓

В отличие от Business Model Canvas и Lean Canvas, Opportunity Canvas используется в тех случаях, когда продукт уже создан. Opportunity Canvas фокусируется на новых направлениях роста. Этот холст помогает командам расставлять приоритеты в отношении потенциальных возможностей продукта на основе их соответствия бизнес-целям, потребностям клиентов и тенденциям рынка.

И еще термин, относящийся к данной главе.

Discovery team – термин, используемый в модели производства цифровых продуктов под названием Dual Track Development (двухканальное производство)

О Business Model Canvas в книге Ярослава Шуваева сказано не так много, ровно как и о Lean Canvas и Opportunity Canvas. Минус ли это? Не такой уж существенный, поскольку UX/UI дизайн – это отдельная область, да и книга тогда бы вышла похожей на талмуд. Так или иначе, полезно было узнать о холстах, которые используют для того, чтобы создать не только стейтмент, но и самую настоящую бизнес-модель.

Слой второй – возможности

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

• Быстрая приоритизация. Здесь особенно актуальна экспертная оценка от избранных сотрудников, когда каждый оценивает несколько критериев, таких как важность для пользователей и бизнеса, легкость разработки и так далее. Исходя из оценок, делается заключение, какие функции наиболее выгодно (во всех смыслах) реализовать в MVP.

• Качественная приоритизация. Здесь речь идет о построении аналитических графиков, которые предметно не только показывают, насколько важна та или иная функция, но и дают понять, какие будут издержки в том случае, если функция будет реализована не вовремя (например, на разработку лишних функций в MVP уйдет масса времени, хотя их можно было бы раскатывать по мере развития продукта. Или, например, если какая-то классная, даже одна из основных функций, будет отсутствовать, бизнес потеряет клиентов и, следовательно, опустошит карманы у себя самого).

Прежде, чем оценивать объем MVP, важно:

1. Выпарить лишнее. Ясно, что все в MVP не впихнешь, на это не хватит никаких ресурсов. Однако есть те функции, которые можно раскатывать постепенно, ничего при этом не теряя.

2. Декомпозировать функциональность – воспользоваться методом картирования пользовательских историй (User Story Mapping). Как лично я поняла, используя метод, в итоге получается матрица, предметно объясняющая, в чем польза от той или иной функции для клиента и бизнеса, к примеру.

Как правило, даже после выделения MVP, оставшиеся функции могут оказаться многосоставными, то есть они раскладываются на более мелкие. <…>. Пользовательская история – способ описания функциональности в форме прямой речи с позиции пользователя. <…> Например: «Я как пользователь приложения такси могу привязать платежную карту, чтобы каждый раз не вводить реквизиты заново при платеже».

3. Декомпозировать функциональность – воспользоваться методом разбиения по операциям. Та же басня с прямой речью клиента, только теперь концентрируемся не только на добавить. Пользуемся акронимом CRUD. Зачем нам он? Потому что, используя его, мы можем разделить работу с теми же привязанными картами.

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

На получение достойного пользовательского опыта влияет:

• Понятная и удобная навигация. Структура сайта/приложения должна быть интуитивно понятна всем. Люди привыкли, они имеют паттерны поведения – условно говоря, все знают, что на сайте обязательно должен быть раздел «Контакты», в котором можно найти информацию о тех, с кем можно связаться в случае возникновения каких-либо вопросов или проблем. В случае, если раздел «Контакты» запрятан вглубь, пользователь а) теряется, недоумевая, куда подевался привычный раздел б) ищет его, теряя при этом свою энергию и приобретая негативный опыт взаимодействия с интерфейсом. Самые важные функции должны быть максимально доступны.

• Понятное и удобное взаимодействие с функциями. После того, как пользователь совершил какое-то действие в том или ином разделе, он ожидает получить результат. Чем быстрее он его достигнет, тем лучше. И чем проще ему будет, тем прекраснее. Лишнего не должно быть.

  Дизайнер именно на этом слое пользуется рядом инструментов, таких как карточная сортировка (рассказывала в предыдущей статье), а также построение карт клиентского следования, то бишь CJM (Customer Journey Map).

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

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

Слой четвертый – компановка

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

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

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

• Наличие аттрактора, т.е. чего-то, что цепляет взгляд.

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

• Привычность расположения тех или иных объектов.

• Наличие паттернов считывания объектов ↓

Есть множество паттернов, наиболее известные из них – Z, F, Pinball (о последнем не упомянуто в книге, но мне захотелось о нем рассказать). А еще не забудем упомянуть о диаграмме Гутенберга.

В чем отличие Z-паттерна от диаграммы Гутенберга?

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

Z-паттерн часто используется на страницах с минимальным количеством текста и большим количеством визуальных элементов, таких как лендинги или рекламные страницы. Он помогает направить внимание пользователя к ключевым элементам, таким как заголовки, изображения и CTA.

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

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

• Читаемость текста. Здесь не о понятности текста, а о том, что на черном фоне черные буквы видны не будут.

Слой пятый – поверхность

Финальный слой – это оформление, визуальная составляющая во всех смыслах.

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

Первостепенная задача в том, чтобы продукт был полезен, это факт, но и о внешней привлекательности нельзя забывать, ведь обертка играет одну из главных ролей, когда дело касается принятия решения, использовать приложение дальше или найти конкурента с более симпатичным интерфейсом и тем же набором функций. Должна быть индивидуальность у продукта, ровно как и у бренда, иначе едва ли получится что-то успешное, все же понимают? Так или иначе, в рамках этого слоя имеет смысл упомянуть о фреймворках, т.е. совокупности готовых компонентов и инструментов, а также о готовых пакетах стилевых решений, т.е. о скинах (Skins) и темах (Themes).

---

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