Рецензия на книгу «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, важно:

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

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

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

3. Декомпозировать функциональность – воспользоваться методом разбиения по операциям. Та же басня с прямой речью клиента, только теперь концентрируемся не только на добавить. Пользуемся акронимом 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-паттерн часто используется на страницах с минимальным количеством текста и большим количеством визуальных элементов, таких как лендинги или рекламные страницы. Он помогает направить внимание пользователя к ключевым элементам, таким как заголовки, изображения и CTA.

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

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

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

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

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

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

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

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

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