Основы дизайна

5 самых важных принципов визуального дизайна для UX/UI-дизайнеров от NNGroup

Разберем как именно с помощью принципов дизайна, таких как масштаб, визуальная иерархия, баланс, контраст и гештальт-принципы создать эстетичный, клевый лейаут и прокачать юзабилити пользовательского интерфейса. 🔥👇
Иллюстрация Berin Holy: https://dribbble.com/shots/11064235-Nike

Вы читаете перевод статьи от компании Nielsen Norman Group “5 Principles of Visual Design in UX”. Над переводом работали: Валерия Новожилова, Анастасия Свеженцева.

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

Содержание:

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

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

Зачем нужны принципы визуального дизайна

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

В этой статье мы с вами рассмотрим 5 визуальных принципов дизайна, которые непосредственно влияют на пользовательский опыт:

  1. Масштаб
  2. Визуальная иерархия
  3. Баланс
  4. Контраст
  5. Гештальт-принципы

1. Масштаб

Этот принцип весьма широко используются и он присутствует почти
в каждом хорошем визуальном дизайне.

Определение: принцип масштаба помогает определиться со степенью важности элементов в композиции относительно друг друга.

Другими словами, при правильном использовании этого принципа самые важные элементы в дизайне будут более крупными, чем те, что менее важны. Причина в основе этого принципа очень проста: если объект — крупный, то скорее всего он будет заметен.

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

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

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

Medium для iPhone: Популярные статьи визуально крупнее, чем остальные. Масштаб привлекает внимание пользователей к потенциально более интересной статье.

На этой парковке в Кракове самая важная часть информации — самая крупная по размеру (зона H — там, где вы находитесь в данный момент в здании парковки). (Источник изображения — www.behance.com)

2. Визуальная иерархия

Пользователь легко сориентируется в макете с хорошей визуальной иерархией.

Определение: принцип визуальной иерархии предназначен для направления взгляда пользователя на различные элементы страницы в порядке их важности.

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

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

Совет: чтобы создать четкую визуальную иерархию, можно рассмотреть такие подходы:

  1. Использовать 2-3 размера шрифта, чтобы указать пользователю, какой контент наиболее важен или находится на самом высоком уровне мини-информационной архитектуры страницы. 
  2. Выделять важные элементы яркими цветами, а для второстепенных использовать приглушенные оттенки.
  3. Масштаб также может помочь выстроить визуальную иерархию, поэтому стоит использовать различные масштабы для различных элементов. Общее практическое правило: включайте в дизайн небольшие, средние и большие компоненты.

Мобильное приложение Medium: тут присутствует четкая визуальная иерархия из заголовка, подзаголовка и основного текста. У каждого компонента статьи свой размер шрифта в зависимости от его важности.

Мобильное приложение Uber: у Uber хорошая визуальная иерархия в приложении. Экран разделен пополам: карта и форма ввода (нижняя половина экрана). Это означает, что компоненты одинаково важны для пользователя. Взгляд же сразу бросается на поле «Where to?» из-за его серого фона, а затем спускается вниз к недавним местоположениям, шрифт у которых немного меньше.

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

3. Баланс

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

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

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

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

Баланс может быть:

  1. Симметричный: элементы расположены симметрично относительно центральной воображаемой оси
  2. Асимметричный: элементы расположены асимметрично относительно центральной воображаемой оси
  3. Круговой: элементы исходят из общей центральной точки в круговом направлении

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

Исследуем баланс у Hub: композиция кажется очень стабильной, что особенно уместно для портала, где вы хотите найти любимую работу. Баланс тут симметричный: если провести воображаемую вертикальную ось по центру экрана, то элементы будут распределены равномерно по обе стороны от оси. (Источник изображения: dribbble.com)

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

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

А вот этот редакторский разворот не сбалансирован. Если провести вертикальную ось по центру, то элементы не будут равномерно распределены по обеим от оси сторонам. (Источник изображения: www.behance.net)

4. Принцип контраста

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

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

Другими словами, контраст показывает пользователю заметную разницу (например, в цвете или размере) между двумя объектами (или между двумя объектами), чтобы подчеркнуть, что они разные.

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

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

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

Сок от Greenhouse Juice Co: читаемость текста на бутылке зависит от цвета сока. Для некоторых соков контраст прекрасно выполняет свою роль, и белый текст легко читается. Однако этикетки на бутылках со светлыми соками прочесть практически невозможно. (Источник изображения: www.instagram.com)

5. Гештальт принципы

Гештальт принципы —  это набор принципов, установленных в начале XX века гештальт-психологами. Они отражают то, как люди воспринимают изображения.

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

Другими словами, принципы гештальта отражают нашу склонность воспринимать объекты как единое целое, а не как отдельные элементы.

Есть 8 гештальт принципов:

  1. Сходство
  2. Продолжение
  3. Замкнутость
  4. Близость
  5. Общая область
  6. Фигура/фон
  7. Симметрия
  8. Общее предназначение/поведение

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

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

Применение теории Гештальта часто можно встретить в логотипах. Например, на логотипе NBC не изображен павлин на белом пространстве, однако наш мозг понимает, что он там есть.

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

Налоговая форма США 2017 г.: отсутствие места между полями затрудняет заполнение. Можно легко запутаться в том, куда относится второе поле “Last name”. Использование принципа близости для разграничения полей, относящихся к себе и к супругу, могло бы улучшить UX.

Вывод и рекомендации

Почему мы все-таки должны заботиться о принципах визуального дизайна и понимать их? Помимо просто “сделать красиво”, понимание и использование принципов помогает нам в следующем:

1. Повышаем юзабилити

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

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

В сочетании с продуманным интерактивным дизайном хороший визуальный дизайн увеличит число успешно выполненных задач и повысит вовлеченность пользователей.

2. Вызываем эмоции и восторг

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

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

3. Усиливаем восприятие бренда

Сильная визуальная система вызывает у пользователей доверие и интерес к вашему продукту: такой подход хорошо усилит позиции вашего бренда в глазах пользователей.