Нейроэстетика в дизайне

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

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

В этом лонгриде разберем:

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

Итак, термин «нейроэстетика» появился благодаря британскому нейробиологу Семиру Зеки в 1990-х годах. В своих экспериментах с помощью МРТ ученый в том числе выяснил, что при просмотре картин известных художников и при прослушивании музыки у людей активизируются определенные участки головного мозга. Также был замечен всплеск дофамина, который отвечает за желание и удовольствие.

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

Так, например, ученые из китайского Университета Цинхуа при участии коллег из других университетов провели метаанализ 49 научных работ о том, как мозг воспринимает красоту. Суммарно в этих исследованиях участвовали 982 человека, что в 41 раз больше числа участников экспериментов Семира Зеки. Метаанализ показал, что при восприятии красивых лиц и красивых произведений искусства работают два разных отдела мозга. Многие до сих пор думают, что активизируется один и тот же участок.

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

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

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

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

1. Принцип группировки

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

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

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

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

2. Максимальное смещение

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

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

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

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

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

3. Контраст

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

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

4. Изоляция

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

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

5. Решение проблем восприятия

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

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

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

6. Неприязнь к совпадениям

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

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

7. Порядок

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

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

8. Симметрия

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

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

9. Визуальная метафора

Метафора является символическим наделением одного объекта признаками другого.

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

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

Человек способен оценить продукт за 90 секунд; и всего 50 миллисекунд потребуется, чтобы сделать вывод о вашем интернет-магазине.

Только цвет влияет на 62%–90% суждений о продукте, и на 85% решений о покупке. Мы видим, как бессознательные реакции, происходящие в головном мозге, предопределяют поведение пользователей. Причем задолго до того, как они осознают свое решение. Раньше дизайнерам приходилось действовать интуитивно. Сейчас мы уже кое-что понимаем о восприятии в целом и о том, какую роль в нем играет зрение.

Что нужно знать о восприятии цвета?

В сетчатке человеческого глаза есть своеобразная матрица, которая воспринимает свет. Обработкой поступающего света занимаются светочувствительные сенсорные нейроны: палочки и колбочки. Один тип палочек реагирует на условно серый цвет, и мы формируем черно-белую картинку. Три типа колбочек реагируют на синий, зеленый и красный цвета, и мы видим цветную картинку. Да, на самом деле мы воспринимаем только чистые цвета, но зрение сообщает нам, какое количество синего, красного и зеленого мы видим. Так получаются оттенки.

В контексте дизайна нужно помнить о том, что цвета вызывают ассоциации, это оказывает определенное влияние на наше восприятие. Они также привлекают разное количество внимания, поэтому следует продумывать выбор цвета для элементов макета. Главные советы по этой теме были раскрыты в переводе статьи Нейроэстетика или как наш мозг воспринимает красоту? (автор Мартина Сартор), поэтому снова ссылаемся на нее.

Давайте обратимся к опыту крупных компаний, которые постарались применить знания о нейроэстетике в дизайне своих продуктов и сайтов. Во-первых, для чего это потребовалось?

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

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

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

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

Рассмотрим примеры:

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

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

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

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