Психология в дизайне: эффект Струпа и его применение

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

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

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

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

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

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

Во-вторых, выяснилось, что мозг человека распознает текст быстрее, чем цвет, но медленнее, чем картинку. Это связано с тем, что человек, далекий от мира искусства или дизайна, не всегда точно знает названия многочисленных оттенков, и чтобы дать ответ, ему сначала нужно распознать цвет на картинке, вспомнить его название, и затем назвать его (можете проверить свои знания названий цветов здесь). Напечатанное же слово всегда состоит из одних и тех же букв, и даже самое сложное их сочетание для нашего мозга оказывается проще, чем цвет карточки. К тому же называние цвета карточки — это тройное действие (узнать цвет -> вспомнить его название -> назвать) , тогда как чтение — это всего лишь распознавание букв и символов.

А еще чтение — это механический навык, как езда на велосипеде, и если у вас было достаточно практики в чтении, вы будете распознавать буквы и складывать их в слова автоматически. Если нашему мозгу ничего не мешает воспринимать текстовую информацию, он «проглатывает» слова вместе с их смыслами. Замедление реакции происходит в тот момент, когда возникает когнитивное несоответствие, хорошо показанное на картинке ниже. Попробуйте быстро найти слова «красный», «желтый», «зеленый» в тексте:

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

Оцените, на какой стороне картинки вы нашли муху быстрее:

Кстати, скорость реакции и умение вытеснять отвлекающие элементы можно тренировать! Вот тут и тут можно найти мультимодальный тест, основанный на эффекте Струпа (задизайнено коряво, но результат интересный)

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

Где необходима высокая скорость реакции?

- Рутинные действия, не требующие думать: написание и отправка email, создание аккаунта, быстрые заметки, работа с календарем, автологин и пр. Максимальное сокращение действий со стороны пользователя (автоподсказки, автозаполнение полей и т.п) + максимально простые визуальные элементы (иконки, кнопки) + использование стандартных формулировок и форм = высокая скорость выполнения задания.

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

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

- Спонтанные покупки онлайн и оффлайн: кричащие зазывалки 99% скидок, лимитированное время на принятие решения (ваша скидка сгорит через 15 минут!), легко узнаваемый дизайн бренда, акции и распродажи тригерят тех, кто склонен совершать эмоциональные поступки

Ускорители действия: короткие user flow, простая навигация, небольшое количество шагов и кликов, автокоррекции/автоподсказки/автозаполнение, поясняющие иконки и тексты, картинки, объясняющие происходящее на экране (фото дивана вместо фото Клаудии Шиффер на странице мебельного магазина), понятные цветовые решения, минималистичный дизайн, использование шаблонов для создания сайта и пр.

Где нужно замедлить пользователя?

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

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

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

Недобросовестные компании очень любят внедрять так называемый dark patterns, то есть заведомо усложнять какие-то действия, которые должны быть простыми: подписаться на рассылку легко, а отписаться от нее сложно; подключить тариф легко, а отказаться практически невозможно; подключить автоплатеж легко, а отключить можно только оффлайн, лично, да еще и с паспортом (и такое бывает). Но здесь мы говорим о полезных замедлителях, которые в конечном итоге упрощают пользовательский опыт.

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