Психология и нейробиология великолепного UX

Аудио перевод статьи
0:00
0:00
Аудио перевод статьи
0:00
0:00
·

Резюме: Каким образом данные из области психологии и нейробиологии способствуют развитию UX.

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

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

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

Используем нейробиологию.

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

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

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

Психология: Быстрое мышление, медленное мышление

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

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

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

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

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

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

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

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

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

Система 2: медленная, эффективная, логическая, вычислительная, сознательная.

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

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

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

Психология в дизайне

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

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

Несколько нейробиологических техник недавно сделали скачок в исследовании UХ технологий, помогая исследователям пролить свет на элементы, которые стимулируют "быстрое мышление".

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

Электроэнцефалограмма (ЭЭГ) — это метод, который обнаруживает электрическую активность в мозге.

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

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

Совет № 1: Сделайте идентификацию легкой

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

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

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

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

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

Загруженный сайт против простого сайта. Компания Google оптимизировала свой сайт, чтобы привлечь внимание пользователей к своему логотипу и стимулировать взаимодействие с поисковой системой. В 2017 году на их долю приходилось 80,5% от общего трафика веб-поиска по сравнению с 65,5% в 2016 году.

Совет #2: Сообщите, что будет дальше.

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

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

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

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

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

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

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

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

Усмирите свой текст

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

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

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

Работа с цветом и контрастом

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

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

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

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

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

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

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

Совет № 4: Чутье нутром

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

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

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

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

Заключение

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

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

Источник:
toptal.com
·
comments powered by HyperComments