Самое приоритетное действие – создание элемента списка. Вполне представим релиз продукта, в котором пользователи получают одну лишь возможность добавлять карту.
Пример результата декомпозиции по шаблону CRUD+S
Да, это не полноценное управление списком, но такой подход позволяет быстрее довести ценность до пользователей. Притом никто не мешает при необходимости вносить остальные операции в последующие релизы.
Вероятно, что у самой операции добавления карты окажется множество особенностей реализации, способных оттянуть поставку ценности. Например, возможность сфотографировать платежную карту для ввода реквизитов стоит отложить на более поздние релизы.
Пример декомпозиции: «Я как пользователь приложения такси могу привязать платежную карту, чтобы каждый раз не вводить реквизиты заново при платеже». Карта пользовательских историй похожа на рыбный скелет, и потому минимально жизнеспособный релиз (Release 1) называют «позвоночная история»
Чтобы выявить такие менее значимые особенности реализации, воспользуемся инструментом картирования пользовательских историй:
Пример декомпозиции: «Я как пользователь приложения такси могу привязать платежную карту, чтобы каждый раз не вводить реквизиты заново при платеже». После декомпозиции в первый релиз пойдет только функция добавления карты, без удобств. Такая история может увидеть свет с учетом риска, что в те 1–2 недели, пока готовится следующий релиз, у пользователя возникнет потребность удалить привязанную карту
Благодаря таким инструментам как User Story Mapping и шаблонам декомпозиции, удается значительно сократить время выхода продукта на рынок. Причем функция попадает в релиз в упрощенном исполнении. Это может не полностью соответствовать ожиданиям искушенных пользователей, но позволит быстрее принести пользу и вернуть инвестиции от внедрения.
Плоскость структуры (Structure Plane)
На этом уровне качество опыта определяется количеством экранов, которые проходит пользователь, чтобы достичь цели.
Несмотря на то что с рождения первых сайтов многое изменилось – появились мобильные интерфейсы и SPA[39], – суть не меняется: чем меньше действий совершает пользователь для получения результата, тем лучше.
На это влияют:
• качество навигации при доступе к функциям, то есть меню:
– названия разделов и назначение пиктограмм ясны;
– структура разделов предсказуема;
– есть альтернативные способы фильтрации;
– расстояние в шагах (кликах, тапах, прокрутке) до функций небольшое;
• качество путешествия внутри функции:
– расстояние в шагах до достижения результата небольшое;
– когнитивная нагрузка минимальна.
Отсюда становится понятно, что дизайнер на этом слое в основном пользуется инструментами для работы с информационной архитектурой, такими как карточная сортировка и построение карт клиентского следования (Customer Journey Map, CJM), описанные в главе 4, раздел «Фактор 4», и главе 6 соответственно.
Далее приведен приблизительный план действий для проектирования информационной архитектуры.
План проектирования информационной архитектуры
Шаг 1. Приоритизация функций
Функции, определенные в плоскости скоупа, необходимо приоритизировать, чтобы доступ к самым востребованным можно было получить за наименьшее количество шагов.
Шаг 2. Разработка навигации
Если функций много и они не умещаются на одном экране, надо ввести дополнительные экраны. Если экранов очень много, получится структура с многоуровневой вложенностью разделов. Чтобы пользователь мог перемещаться между разделами, надо добавить в систему навигационные элементы. Для проектирования навигации следует использовать инструменты карточной сортировки и анализа CJM.
Сайт государственных услуг Великобритании для многих стал ориентиром в организации подхода к таксономии. В частности, чтобы определить структуру разделов, команда gov.uk разработала специальный метод карточной сортировки
Шаг 3. Разработка навигации внутри каталогов
Функциональные элементы могут содержать свою внутреннюю навигацию – например, каталог товаров в интернет-магазине. В этом случае для проектирования также используются инструменты карточной сортировки и анализа CJM. Основной упор в анализе делается на критерии, по которым пользователи выбирают разделы каталогов. Например, для каталога одежды базовый критерий – пол (разделение на мужскую и женскую одежду).
Шаг 4. Построение карты шагов в процессе использования функции
В процессе использования или, как еще говорят, утилизации функции продукта пользователи совершают определенную последовательность шагов. Чтобы снизить нагрузку на пользователя, создатели продукта обычно прибегают к построению CJM.
Путешествие пользователя к пополнению баланса мобильного телефона значительно улучшилось благодаря построению CJM
Сначала анализируется, из каких шагов состоит путь клиента сейчас (as is CJM). Для этого надо проследить либо текущий (до редизайна) путь внутри продукта, либо, если создается новая функция, тот путь, которым пользователь удовлетворял свою потребность в продуктах конкурентов или офлайн. На основании такого анализа строится идеальный клиентский путь (to be CJM).
Шаг 5. Построение потока экранов
После объединения различных клиентских маршрутов сформируется древовидная структура разделов. Чтобы зафиксировать результаты, можно воспользоваться диаграммой потока экранов (Screen Flow).
Диаграмма потока экранов – представление древовидной структуры, где в каждом узле находится экран со схематичным изображением элементов интерфейса
Плоскость компоновки (Skeleton Plane)
Здесь определяется взаимное расположение элементов интерфейса и их контрастность относительно друг друга.
Многие считают, что на этом слое UX-дизайнер выполняет основные свои задачи, но фактически его работа тут сводится к применению небольшого количества принципов, основанных на психологии и физиологии зрительного восприятия человека.
Качество опыта взаимодействия на этом уровне определяется количеством времени, которое пользователь тратит на решение задачи на одном экране.
Ниже приведены основные факторы, влияющие на него.
• Точка старта траектории фокуса, аттрактор или eyecatcher (объект – захватчик внимания).
Лицо – более сильный аттрактор, чем все остальные объекты на экране
• Визуальная иерархия объектов и их взаимная контрастность (цвет, размер, движение, форма).
Кнопка «Войти» визуально доминирует; вторая по важности – кнопка «Регистрация», затем – «Восстановление пароля». Взаимная контрастность объектов позволяет управлять траекторией фокуса и облегчать жизнь пользователю
• Привычность или предсказуемость расположения объекта.
Логотип, расположенный слева, запомнили на 89 % больше пользователей, чем расположенный справа
• Паттерн считывания объектов. Со временем у людей вырабатываются поведенческие стереотипы (паттерны), касающиеся того, в каком порядке считываются элементы интерфейса на экране. Наиболее известные – это Z-паттерн и F-паттерн.
– Z-паттерн связан с тем, в какой последовательности воспринимаются символы при чтении. В европейской культуре текст читают слева направо и сверху вниз.
Начиная путь с объекта типа eyecatcher, пользователь скользит по экрану взглядом в соответствии с шаблоном считывания элементов. Чаще всего это Z-паттерн
– F-паттерн связан с пропусканием элементов при чтении. Часто можно заметить экспериментально, что после второго абзаца люди перепрыгивают часть текста. Форма, образованная такой траекторией взгляда, напоминает букву F.
F-паттерн получается, когда пользователи, чтобы ускориться при чтении, обращают внимание на текст после разрыва между блоками и на маркеры списка, притом пропуская целые параграфы
• Когнитивная нагрузка при интерпретации смысла объекта. На слое компоновки UX-дизайнер работает над тем, чтобы снизить когнитивную нагрузку на пользователя при интерпретации инструкции. Принято считать, что изображения более энергоэффективны для принятия решений, чем текст.
Пользователи предпочитают решать проблему при помощи изображения. Увидев в выдаче по запросу «Как приготовить пиццу» фотографию пиццы и кнопку Play, люди переходят по ссылке, не читая остальной текст
Важно уточнить, что такая закономерность хорошо работает с узнаваемыми графическими объектами. Особенно это относится к пиктограммам. Не все пиктограммы были понятны сразу после введения в обиход и на старте сопровождались поясняющими надписями.
Некоторое время назад пользователи не поняли бы смысл большей части этих пиктограмм.