Единообразие в дизайне: что это такое и как работает

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

Вы узнаете, что такое единообразие, почему оно играет важную роль, какие типы единообразия существуют и как достичь его в приложении или на сайте.

Дизайн сайта университета

Айдентика и UX-дизайн для финтех-сервиса Crezco

Что такое единообразие

Одно из определений термина "единообразие", которое дает Кембриджский словарь английского языка, — это качество всегда вести себя или действовать одинаково, или всегда происходить одним и тем же образом, иначе говоря "быть одинаковым". И это, пожалуй, самое простое объяснение.

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

Учитывая тот факт, что сегодня люди перегружены информацией, они предпочитают выбирать продукты, которые легко понять и с которыми легко взаимодействовать. Более того, единообразие — надежная основа гармоничного внешнего облика и работы любого продукта. А гармония — всегда желанная часть нашего опыта. Единообразие делает интерфейсы предсказуемыми и доступными для обучения, а бренды благодаря ему производят целостное впечатление на аудиторию.

Это одна из 10 фундаментальных эвристик юзабилити, базовых принципов дизайна взаимодействия, определенных Якобом Нильсеном еще в 1994 году. Пользователи не должны задаваться вопросом, означают ли разные слова, ситуации или действия одно и то же.

Почему единообразие играет в дизайне важную роль?

Последовательный подход к проектированию пользовательского опыта дает следующие преимущества:

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

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

Единообразный веб-дизайн и брендинг для BlockStock

Типы единообразия

С точки зрения факторов воздействия, единообразие может быть визуальным и функциональным.

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

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

Веб-дизайн для Mayple

Дизайн приложения и сайта для онлайн-школы танцев

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

Интернет-магазин очков

С точки зрения связей и масштаба, согласованность может быть внутренней и внешней.

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

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

Как сделать дизайн единообразным и согласованным?

Перед вами чек-лист из 7 пунктов, которым необходимо следовать, если вы хотите создать единообразный дизайн.

1. Внедряйте узнаваемые шаблоны

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

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

Аналогичным образом, выбор зеленого цвета для кнопки принятия входящего вызова, и красного для кнопки отклонения вызова снижает когнитивную нагрузку. Поскольку люди привыкли к такому шаблону, им не нужно будет думать о том, какую кнопку нажать.

Приложение для саморазвития

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

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

Или представим, что вы долгое время размещали кнопку "плюс" в нижней части экрана, и пользователи привыкли находить ее там, но затем вы перенесли ее наверх и спрятали внутри гамбургер-меню.

Или, допустим, вы делаете номер телефона кликабельным и интерактивным на одних страницах, а на других — нет, хотя он везде выглядит одинаково. 

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

Конечно, это не означает, что вы должны придерживаться только известных шаблонов. В дизайне всегда есть место для творческих и нестандартных решений; просто учитывайте, насколько они связаны с тем, что целевая аудитория уже знает и использует. И если эта связь слабая, подумайте, как поддержать людей и не раздражать их своей креативностью. 

Более того, стремитесь к тому, чтобы интерактивные паттерны были логичными и похожими — даже если они будут нестандартными, но одинаковыми на всех экранах, процесс привыкания окажется быстрым и легким.

2. Будьте осторожны, когда экспериментируете с UI-компонентами

Думаю, вы уже поняли, что любые эксперименты с элементами интерфейса должны быть продуманы дважды. Это особенно верно для базовых элементов, которые встречаются в тысячах приложений и веб-сайтов. Люди знают их настолько хорошо, что в большинстве случаев взаимодействуют с ними на автомате.

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

Или, большинство посетителей сайта будут искать ссылку на страницу "Свяжитесь с нами" или форму в хедере, а контактные данные — в футере. Имея это в виду, вы можете сократить путь к конверсии и довольным клиентам. 

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

3. Помните о типографике и цветах

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

Дизайн сайта Komuso

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

Помните пример с кнопками принятия и отклонения вызова? Если вы хотите испортить этот опыт, просто поменяйте цвета местами и сделайте кнопку принятия вызова красной, например, оправдывая это тем, что красный цвет очень заметен. 

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

Дизайн сайта клиники

4. Выстраивайте систему с помощью визуальных образов

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

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

5. Структурируйте контент должным образом

Помните классическую картинку, объясняющую визуализацию данных на примере Lego Blocks?

Работать с любыми данными проще, когда они структурированы. Даже художественные книги представляют собой упорядоченную систему глав, так как же интерфейсы могут обойтись без этого? Структурированный контент позволяет пользователям сосредоточиться на информации, не отвлекаясь на ее предварительное упорядочивания и понимание связей. И это должно быть сделано не на отдельных страницах, а для сайта или приложения в целом, чтобы в любой точке взаимодействия все выглядело просто и последовательно.

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

Дизайн журнала Physica

6. Придерживайтесь единого фирменного стиля вне зависимости от канала коммуникации

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

7. Работайте над эффективными UX-текстами

Как мы уже упоминали в статье о создании хороших текстов для интерфейсов, в их основе лежит 4 фундаментальных принципа. UX-тексты должны быть:

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

UX-тексты определяют, как интерфейс общается с пользователем, тон и голос бренда, и это еще один фактор, требующий единообразного подхода. Как и в коммуникации с людьми, пользователи ожидают от цифровых продуктов дружелюбного и предсказуемого поведения. Даже непоследовательное использование регистра (где-то только первое слово с заглавной буквы, а где-то — каждое) в приложении может вызвать некий дискомфорт.

Спасибо за внимание!