Влияние цвета, ассоциаций и инстинктов на восприятие дизайна

Шесть принципов психологии, помогающих дизайнерам понять пользователей.

Отдел дизайна компании Live Typing перевел материал UX Planet о психологических приемах, помогающих дизайнерам удерживать внимание пользователей на контенте.

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

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

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

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

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

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

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

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

Замкнутость. Техника, основанная на тенденции человеческого глаза видеть замкнутые объекты. Работает там, где объект неполный, но пользователь достраивает пропущенные части.

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

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

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

Вы когда-нибудь влюблялись в сайт с первого клика? Или, наоборот, приложение вызывало отвращение лишь при беглом взгляде на него? Если да, то вы уже знаете, что такое висцеральные реакции. Такой тип реакций идёт из части мозга, называемой «подкоркой», которая ответственна за инстинкты и реагирует гораздо быстрее нашего сознания. Висцеральные реакции уходят корнями в нашу ДНК и могут быть легко предсказаны.

Как дизайнеры используют это знание? Они нацеливаются на создание положительных эстетических впечатлений от дизайна. Зная целевую аудиторию и её потребности, легко догадаться, что выглядит для неё привлекательно, а что нет. Так что использование красивых фотографий в высоком разрешении или ярких, красочных изображений на лендингах, сайтах, других веб-продуктах и приложениях — не случайность.

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

Вот список базовых цветов и значений, которые обычно с ними ассоциируются:

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

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

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

Перед прочтением контента с веб-страниц люди бегло просматривают их, чтобы понять, интересны они им или нет. Согласно различным исследованиям, включая публикации Norman Nielsen Group, UXPin и других, есть несколько популярных паттернов просмотра, среди которых F- и Z-паттерны.

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

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

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

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

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

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

#Интерфейсы