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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Плоскость поверхности (Surface Plane)

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

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

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

Как правило, такие пакеты называются «Темы» (Themes) или «Скины» (Skins). Также встречается термин Look&Feel.

Благодаря темам в Bootstrap можно адаптировать цифровой продукт к использованию в темное время суток, применить к элементам интерфейса привычные стили Google или Microsoft либо же фирменные стили компании[40]

Применение тем позволяет:

• улучшить пользовательский опыт, установив определенные темы для определенного уровня освещения, – существует ночная темная тема и дневная светлая;