Слои 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 является гибкость и адаптируемость — холст можно и нужно обновлять и пересматривать по мере развития бизнеса. Он универсален, поскольку подходит для любого бизнеса вообще, и, безусловно, играет не последнюю роль в построении того самого стейтмента.
Что я там говорила о вариациях? В 2010 году Эш Маурья создал свой холст и назвал его Lean Canvas (описал в книге «Running Lean: Iterate from Plan A to a Plan That Works», там же описал Running Lean и Lean Startup). Он объяснял необходимость создать Lean Canvas тем, что Business Model Canvas не в полной мере сфокусирован на главной причине провала стартапов — недостаточном понимании проблем целевой аудитории.
В отличие от Business Model Canvas и Lean Canvas, Opportunity Canvas используется в тех случаях, когда продукт уже создан. Opportunity Canvas фокусируется на новых направлениях роста. Этот холст помогает командам расставлять приоритеты в отношении потенциальных возможностей продукта на основе их соответствия бизнес-целям, потребностям клиентов и тенденциям рынка.
В статье на MyMap пишется:»Opportunity Canvas помогает продуктовым командам систематически оценивать новые функции для существующих продуктов, облегчая сфокусированные обсуждения и выявляя скрытые предположения, чтобы предотвратить растраты ресурсов».
И еще термин, относящийся к данной главе.
Discovery team — термин, используемый в модели производства цифровых продуктов под названием Dual Track Development (двухканальное производство)
Речь идет о Dual-track agile, таком типе разработки, при котором кросс-функциональная продуктовая команда разбивает свою ежедневную работу на два направления: исследование и поставка. Направление разработки направлено на быструю генерацию проверенных идей продуктов для бэклога, а направление поставки — на воплощение этих и прочих идей в реальность.
О Business Model Canvas в книге Ярослава Шуваева сказано не так много, ровно как и о Lean Canvas и Opportunity Canvas. Минус ли это? Не такой уж существенный, поскольку UX/UI дизайн — это отдельная область, да и книга тогда бы вышла похожей на талмуд. Так или иначе, полезно было узнать о холстах, которые используют для того, чтобы создать не только стейтмент, но и самую настоящую бизнес-модель.
Слой второй — возможности
На этом уровне определяется, что будет в MVP (напоминаю, MVP — Minimum Viable Product, т.е. минимально жизнеспособный продукт).
Но MVP — это не просто минимально жизнеспособный продукт. Это тот продукт, помним обязательно, который не только удовлетворяет потребности пользователя, но также способствует получению ресурсов для поддержки и развития продукта.
Не буду останавливаться на термине. Автор книги представляет нам два варианта приоритизации функций, которые должны войти в MVP, — быструю и качественную.
Быстрая приоритизация. Здесь особенно актуальна экспертная оценка от избранных сотрудников, когда каждый оценивает несколько критериев, таких как важность для пользователей и бизнеса, легкость разработки и так далее. Исходя из оценок, делается заключение, какие функции наиболее выгодно (во всех смыслах) реализовать в MVP.
Качественная приоритизация. Здесь речь идет о построении аналитических графиков, которые предметно не только показывают, насколько важна та или иная функция, но и дают понять, какие будут издержки в том случае, если функция будет реализована не вовремя (например, на разработку лишних функций в MVP уйдет масса времени, хотя их можно было бы раскатывать по мере развития продукта. Или, например, если какая-то классная, даже одна из основных функций, будет отсутствовать, бизнес потеряет клиентов и, следовательно, опустошит карманы у себя самого).
Прежде, чем оценивать объем MVP, важно:
Выпарить лишнее. Ясно, что все в MVP не впихнешь, на это не хватит никаких ресурсов. Однако есть те функции, которые можно раскатывать постепенно, ничего при этом не теряя.
Декомпозировать функциональность — воспользоваться методом картирования пользовательских историй (User Story Mapping). Как лично я поняла, используя метод, в итоге получается матрица, предметно объясняющая, в чем польза от той или иной функции для клиента и бизнеса, к примеру.
Как правило, даже после выделения MVP, оставшиеся функции могут оказаться многосоставными, то есть они раскладываются на более мелкие. <...>. Пользовательская история — способ описания функциональности в форме прямой речи с позиции пользователя. <...> Например: «Я как пользователь приложения такси могу привязать платежную карту, чтобы каждый раз не вводить реквизиты заново при платеже».
Декомпозировать функциональность — воспользоваться методом разбиения по операциям. Та же басня с прямой речью клиента, только теперь концентрируемся не только на добавить. Пользуемся акронимом CRUD. Зачем нам он? Потому что, используя его, мы можем разделить работу с теми же привязанными картами.
А у нас получается CRUD + S, где S — это Select.
Таким образом, кроме привязки карты есть несколько других операций, которые может проделать пользователь приложения. Например, удалить карту. Но — »Такая история может увидеть свет с учетом риска, что в те 1–2 недели, пока готовится следующий релиз, у пользователя возникнет потребность удалить привязанную карту». В MVP все операции не обязательно должны быть включены, какие-то могут быть избыточными. Тогда, как я уже говорила, хорошим вариантом кажется раскатывать их друг за другом, принимая во внимание все риски.
После всех манипуляций по идее должен получится тот MVP, который сработает.
Слой третий — структура
На этом уровне качество опыта определяется количеством экранов, которые проходит пользователь, чтобы достичь цели.
На получение достойного пользовательского опыта влияет:
Понятная и удобная навигация. Структура сайта/приложения должна быть интуитивно понятна всем. Люди привыкли, они имеют паттерны поведения — условно говоря, все знают, что на сайте обязательно должен быть раздел «Контакты», в котором можно найти информацию о тех, с кем можно связаться в случае возникновения каких-либо вопросов или проблем. В случае, если раздел «Контакты» запрятан вглубь, пользователь а) теряется, недоумевая, куда подевался привычный раздел б) ищет его, теряя при этом свою энергию и приобретая негативный опыт взаимодействия с интерфейсом. Самые важные функции должны быть максимально доступны.
Понятное и удобное взаимодействие с функциями. После того, как пользователь совершил какое-то действие в том или ином разделе, он ожидает получить результат. Чем быстрее он его достигнет, тем лучше. И чем проще ему будет, тем прекраснее. Лишнего не должно быть.
Дизайнер именно на этом слое пользуется рядом инструментов, таких как карточная сортировка (рассказывала в предыдущей статье), а также построение карт клиентского следования, то бишь CJM (Customer Journey Map).
Вы можете найти массу примеров простых и сложных CJM. Все они главным образом нацелены на то, чтобы понимать логику ЦА — зачем ей понадобится ваше приложение или сайт, каковы будут её шаги внутри и так далее. CJM — это классный, незаменимый инструмент для развтия бизнеса. Благодаря ему можно без особого труда собирать и обрабатывать информацию о клиентах, используя различные метрики. Плюсом является визуализация полученных данных в простом, а иногда даже в ультракреактивном виде.
После получения четкого понимания структуры, необходимо зафиксировать результат. В этом помогают Screen Flow. Как я понимаю, отличие Screen Flow от User Flow, т.е пользовательского пути, в том, что первый — лишь схематичное изображение элементов интерфейса, тогда как User Flow — уже не о схематичности, а точности.
В общем вывод такой: сначала обретаем понимание, какой должна быть структура, затем принимаемся за визуализацию.
Слой четвертый — компановка
Многие считают, что на этом слое UX-дизайнер выполняет основные свои задачи, но фактически его работа тут сводится к применению небольшого количества принципов, основанных на психологии и физиологии зрительного восприятия человека.
По сути на этом слое точно такая же задача, как и всегда: сделать пользовательский путь приятным. И, конечно, качество в данном случае определяется количеством времени, проведенным пользователем на том или ином экране в попытке решить свою задачу.
Существует несколько факторов, влияющих на быстроту понимания пользователем того, что он видит перед глазами:
Наличие аттрактора, т.е. чего-то, что цепляет взгляд.
Правильная иерархия объектов и их взаимная контрастность. Правильное расположение элементов на странице, использование заголовков и подзаголовков, выделение ключевых частей текста помогает пользователям быстро находить нужную информацию.
Привычность расположения тех или иных объектов.
Наличие паттернов считывания объектов ↓
Есть множество паттернов, наиболее известные из них — Z, F, Pinball (о последнем не упомянуто в книге, но мне захотелось о нем рассказать). А еще не забудем упомянуть о диаграмме Гутенберга.
Взгляд пользователя движется по странице в форме буквы Z. Начинается с верхнего левого угла, затем перемещается по горизонтали вправо, потом диагонально вниз влево и снова по горизонтали вправо.
Pinball-паттерн характерен для страниц со множеством картинок и яркими акцентами. Внимание пользователя прыгает, как шар в бильярде.
Диаграмма Гутенберга похожа на Z-паттерн, что мы обсуждали выше, но одновременно с тем от него отличается
О диаграмме Гутенберга не буду размусоливать.
Диаграмма Гутенберга описывает движение глаз пользователя по странице в форме буквы Z, но с акцентом на четыре основные зоны: верхний левый угол (начало), верхний правый угол, нижний левый угол и нижний правый угол (конец).
В чем отличие Z-паттерна от диаграммы Гутенберга?
Z-паттерн и диаграмма Гутенберга — это два различных подхода к анализу движения глаз пользователей при просмотре веб-страниц, и они применяются в разных контекстах.
Z-паттерн часто используется на страницах с минимальным количеством текста и большим количеством визуальных элементов, таких как лендинги или рекламные страницы. Он помогает направить внимание пользователя к ключевым элементам, таким как заголовки, изображения и CTA.
Диаграмма Гутенберга чаще используется для страниц с большим количеством текста, таких как статьи или блоги. Она помогает разместить ключевую информацию в зонах, где взгляд пользователя задерживается дольше всего.
Наличие вспомогательных элементов для правильной и более понятной интерпретации смысла объекта. Сюда — качественные картинки и иконки, которые улучшают визуальное восприятие контента.
Читаемость текста. Здесь не о понятности текста, а о том, что на черном фоне черные буквы видны не будут.
Слой пятый — поверхность
Финальный слой — это оформление, визуальная составляющая во всех смыслах.
Стиль элементов интерфейса и иллюстраций, композиция объектов, типографика, качество фотографий — маркеры, которые подсознательно считывают пользователи, принимая решение о найме продукта.
Первостепенная задача в том, чтобы продукт был полезен, это факт, но и о внешней привлекательности нельзя забывать, ведь обертка играет одну из главных ролей, когда дело касается принятия решения, использовать приложение дальше или найти конкурента с более симпатичным интерфейсом и тем же набором функций. Должна быть индивидуальность у продукта, ровно как и у бренда, иначе едва ли получится что-то успешное, все же понимают? Так или иначе, в рамках этого слоя имеет смысл упомянуть о фреймворках, т.е. совокупности готовых компонентов и инструментов, а также о готовых пакетах стилевых решений, т.е. о скинах (Skins) и темах (Themes).
Применение тем позволяет не только улучшить пользовательский опыт (кому-то нравится темная тема, а кому-то — светлая; возможность переключения между темами — это важно и приятно для пользователя), но также учесть интересы людей с ограниченными возможностями — к примеру, имеются темы, предназначенные для людей с дальтонизмом.
На этом у меня все. На чтение профессиональной литературы и написание текстов уходит много времени, поэтому было принято решение в данном конкретном случае рецензию разделить на три части, поскольку каждая из них самостоятельна. Между прочим, пусть это и рецензия на книгу, я добавляю массу стороннего, чтобы материал не был исключительно пересказом и только лишь мнением. В последней части расскажу о двух заключительных главах книги, а также сделаю некоторые выводы.
