Здесь определяется взаимное расположение элементов интерфейса и их контрастность относительно друг друга.

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

Качество опыта взаимодействия на этом уровне определяется количеством времени, которое пользователь тратит на решение задачи на одном экране.

Ниже приведены основные факторы, влияющие на него.

• Точка старта траектории фокуса, аттрактор или eyecatcher (объект – захватчик внимания).

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

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

Кнопка «Войти» визуально доминирует; вторая по важности – кнопка «Регистрация», затем – «Восстановление пароля». Взаимная контрастность объектов позволяет управлять траекторией фокуса и облегчать жизнь пользователю

• Привычность или предсказуемость расположения объекта.

Логотип, расположенный слева, запомнили на 89 % больше пользователей, чем расположенный справа

• Паттерн считывания объектов. Со временем у людей вырабатываются поведенческие стереотипы (паттерны), касающиеся того, в каком порядке считываются элементы интерфейса на экране. Наиболее известные – это Z-паттерн и F-паттерн.

– Z-паттерн связан с тем, в какой последовательности воспринимаются символы при чтении. В европейской культуре текст читают слева направо и сверху вниз.

Начиная путь с объекта типа eyecatcher, пользователь скользит по экрану взглядом в соответствии с шаблоном считывания элементов. Чаще всего это Z-паттерн

– F-паттерн связан с пропусканием элементов при чтении. Часто можно заметить экспериментально, что после второго абзаца люди перепрыгивают часть текста. Форма, образованная такой траекторией взгляда, напоминает букву F.

F-паттерн получается, когда пользователи, чтобы ускориться при чтении, обращают внимание на текст после разрыва между блоками и на маркеры списка, притом пропуская целые параграфы

• Когнитивная нагрузка при интерпретации смысла объекта. На слое компоновки UX-дизайнер работает над тем, чтобы снизить когнитивную нагрузку на пользователя при интерпретации инструкции. Принято считать, что изображения более энергоэффективны для принятия решений, чем текст.

Пользователи предпочитают решать проблему при помощи изображения. Увидев в выдаче по запросу «Как приготовить пиццу» фотографию пиццы и кнопку Play, люди переходят по ссылке, не читая остальной текст

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

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

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

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

Слабый контраст (слева) между фоном и текстом вызывает напряжение. Тональный контраст не воспринимается людьми, страдающими дальтонизмом, и представляет собой слишком сильный раздражитель

Чтобы текст прочитали, у него обязательно должна быть структура: заголовки, подзаголовки, разбивка на абзацы. В частности, это позволяет пользова

телю применять Z- и F-паттерны для более быстрой интерпретации