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

Благодаря таким инструментам как 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 (объект – захватчик внимания).

Лицо – более сильный аттрактор, чем все остальные объекты на экране

• Визуальная иерархия объектов и их взаимная контрастность (цвет, размер, движение, форма).