Психология дизайна и нейробиология потрясающего UX

Послушайте аудиоверсию этой статьи.

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

Человеческий мозг ленив, предвзят и склонен к упрощениям.

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

Познание сложно, и многие факторы влияют на интуитивные реакции или мгновенное впечатление. Когда вы спрашиваете кого-то: «Зачем ты это сделал?» велика вероятность того, что они не смогут ответить или что вы неверно истолковаете их ответ.

Займитесь нейробиологией.

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

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

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

Психология дизайна: быстрое мышление, медленное мышление

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

Я в "правильном" месте? Стоит ли доверять этому сайту?

Исследователь UX YouTube Хавьер Баргас-Авила в исследовании 2012 года определил, что у людей формируются эстетические реакции на веб-страницу в первые 17–50 миллисекунд после просмотра .

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

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

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

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

Система 1: быстрая, автоматическая, частая, эмоциональная, стереотипная, подсознательная.

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

Система 2: медленная, настойчивая, логичная, расчетливая, сознательная, нечастая.

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

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

При быстром принятии решений мозг может чрезмерно полагаться на схемы или ментальные модели — знакомые шаблоны информации и взаимодействия. Когда задействуется мышление Системы 1, Система 2 никогда не вступит в силу. Люди могут не осознавать стенограмму принятия решений своим мозгом, но она сильно влияет на их поведение и восприятие продукта.

Наука психологии в дизайне

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

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

Несколько методов нейронауки недавно сделали скачок в исследованиях UX, помогая исследователям пролить свет на то, что стимулирует «быстрое мышление».

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

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

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

Совет психологии дизайна № 1: сделайте так, чтобы вас было легко идентифицировать

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

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

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

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

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

Совет дизайнерской психологии № 2: указывайте, что будет дальше

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

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

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

Совет дизайнерской психологии № 3: Организуйте для ленивых читателей

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

Мы знаем, что в разных отраслях и типах приложений мозг обычно сканирует информацию в F-шаблоне (или E-шаблоне). Человек смотрит на информацию вверху, читает справа, а затем просматривает страницу вниз в поисках соответствующей информации или значков.

Нарушение F-шаблона — например, размещение важной информации в правом нижнем углу — усложнит поиск.

Приручите свой текст

Согласно исследованию Nielsen Norman из 45 237 просмотров страниц, люди читают только около 20% текста на странице. Хуже того, на сайтах с большим количеством контента люди тратили всего около 4 дополнительных секунд на каждые дополнительные 100 слов текста.

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

• Выделенные ключевые слова
• Значимые подзаголовки
• Маркированные списки
• Одна идея на абзац
• Стиль перевернутой пирамиды — начните с вывода
• Половина количества слов (или меньше) обычного письма

Работа с Color Pop и Contrast

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

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

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

Контрастность и яркость — это только первый шаг. Теория цвета предлагает сбалансировать цвета вашего продукта, используя доминирующий цвет в 60% случаев, второстепенный в 30% и акцентирующий в 10%. Этот распад согласуется с нейронаукой, стоящей за тем, что привлекает внимание. Поскольку акцентный цвет используется меньше всего, он больше всего привлекает внимание.

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

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

Совет дизайнерской психологии № 4: проверка интуиции

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

5-секундные тесты — это мощный инструмент для определения того, понятен ли ваш дизайн мгновенно.

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

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

Дизайнеры как «читатели мыслей»

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

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

Эта статья была написана в сотрудничестве с UX-исследователем Каитрией О'Нил , которая ранее работала в Facebook, а сейчас работает в Airbnb, и сотрудником стэнфордской школы d.school .

• • •

Дальнейшее чтение в блоге Toptal Design:

• UX электронной коммерции — обзор лучших практик (с инфографикой)
• Важность ориентированного на человека дизайна в дизайне продукта
• Лучшие портфолио дизайнеров UX — вдохновляющие тематические исследования и примеры
• Эвристические принципы для мобильных интерфейсов
• Упреждающий дизайн: как создать волшебный пользовательский опыт