На этом уровне качество опыта определяется количеством экранов, которые проходит пользователь, чтобы достичь цели.
Несмотря на то что с рождения первых сайтов многое изменилось – появились мобильные интерфейсы и 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, люди переходят по ссылке, не читая остальной текст
Важно уточнить, что такая закономерность хорошо работает с узнаваемыми графическими объектами. Особенно это относится к пиктограммам. Не все пиктограммы были понятны сразу после введения в обиход и на старте сопровождались поясняющими надписями.
Некоторое время назад пользователи не поняли бы смысл большей части этих пиктограмм. Например, изображение облака для операции «Сохранить в облаке» появилась благодаря развитию соответствующей технологии
При создании интерфейса важно понять, в какой форме лучше всего реализовать элемент, чтобы его интерпретировали легко и быстро, – в форме текста, изображения, видеоролика или интерактивной инфографики.
• Читаемость текста. Читаемость – это совокупность факторов, влияющих на усваивание текста. В числе прочих качество читаемости отражает метрика воспроизведения – какую долю прочтенного текста респондентам удается воспроизвести через определенный период времени. На читаемость влияет множество факторов – контрастность цвета текста и фона, шрифт, ширина колонки, разбиение на параграфы, количество непонятных слов и длина предложений.
Слабый контраст (слева) между фоном и текстом вызывает напряжение. Тональный контраст не воспринимается людьми, страдающими дальтонизмом, и представляет собой слишком сильный раздражитель
Чтобы текст прочитали, у него обязательно должна быть структура: заголовки, подзаголовки, разбивка на абзацы. В частности, это позволяет пользова
телю применять Z- и F-паттерны для более быстрой интерпретации
Плоскость поверхности (Surface Plane)
Если говорить о цифровых продуктах, то на этом слое определяется стиль элементов и иллюстрации, а также их композиция. Он самый важный – от результатов именно этой работы зависит то, какое мнение сложится у потенциального пользователя о продукте – удовлетворит ли он его потребность и сколько ресурсов человек готов затратить в пути. Решение принимается несознательно, на уровне лимбической системы, которая считывает маркеры и быстро делает вывод – стоит ли инвестировать жизненные ресурсы в то, чтобы начать пользоваться продуктом.
Стиль элементов интерфейса и иллюстраций, композиция объектов, типографика, качество фотографий – маркеры, которые подсознательно считывают пользователи, принимая решение о найме продукта
Индустрия разработки цифровых продуктов очень многообразна. Помимо компаний, создающих готовые решения, есть компании, которые специализируются на производстве компонентов, ускоряющих производство. Широко распространились фреймворки – совокупность готовых компонентов и инструментов. Создатели фреймворков очень хорошо понимают, что их клиентам требуется тонкая настройка визуального образа создаваемых продуктов, и предоставляют готовые пакеты стилевых решений.
Как правило, такие пакеты называются «Темы» (Themes) или «Скины» (Skins). Также встречается термин Look&Feel.
Благодаря темам в Bootstrap можно адаптировать цифровой продукт к использованию в темное время суток, применить к элементам интерфейса привычные стили Google или Microsoft либо же фирменные стили компании[40]
Применение тем позволяет:
• улучшить пользовательский опыт, установив определенные темы для определенного уровня освещения, – существует ночная темная тема и дневная светлая;