Черная пятница в UPROCK!

Когнитивные искажения в UX/UI‑дизайне

Автор статьи:
,

Введение

Если вам кажется, что вы поступаете нелогично: храните вещи, которыми давно не пользуетесь, или продолжаете заниматься невыгодным проектом, потому что уже вложили в него время и деньги, этому есть объяснение. Все дело в нашей голове, точнее, в существовании определенных ошибок в нашем мышлении. В психологии такие «ошибки» называются когнитивными искажениями. Эти искажения влияют на то, как пользователь получает информацию: какие данные он считывает, какие запоминает, какие элементы кажутся более или менее важными для него. Учет когнитивных искажений может помочь UX-дизайнеру создать удобный интерфейс, а также управлять вниманием пользователей.

Что такое когнитивные искажения?

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

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

В 2016 году Бастер Бенсон категоризировал и структурировал когнитивные искажения в «Кодекс когнитивных искажений». По материалам этой работы был подготовлен онлайн инструмент UX CORE (автор Вольф Алексанян), где собраны 105 когнитивных искажений с примерами их использования.

Бастер Бенсон отметил, что возникновение когнитивных искажений решает четыре проблемы:

01
Работа с большим объемом информации.
02
Нехватка смысла и расплывчатость данных.
03
Недостаточно времени для анализа и выполнения задач.
04
Разные приоритеты по информации и воздействие на механизмы памяти.

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

Необходимость быстрого реагирования

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

Эффект невозвратных затрат

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

Выход из приложения во время урока

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

Иллюзия затраченных сил

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

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

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

Эффект IKEA

Пользователи придают большую ценность тем вещам и процессам, в создании которых они активно участвуют. Если пользователь выступает в качестве соавтора продукта, то он чаще будет им пользоваться. Например, музыкальные сервисы Яндекс.Музыка или Apple.Music дают вам возможность создавать собственные плейлисты.

Настройка любимых групп в Яндекс.Музыке

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

Соотношение запоминаемого и забываемого

Влияние механизмов памяти на значимость информации.

Эффект превосходства картинки

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

Текст без визуального дополнения и с ним

Внутренний триггер

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

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

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

Сова Duolingo напоминает о себе и приглашает на пятиминутный урок

Группировка

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

Группировка материалов по тематическим блокам в справочном центре OZON

Сложность понимания

Когда не хватает значимости и смыслов.

Социальное доказательство

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

Добавьте в ваш проект количественные значения (лайки, ответы, репосты, количество подписчиков или друзей и т. д.). Можно внедрить блок отзывов, советов или рекомендаций от пользователей. Используйте фразы «30 вашим друзьям понравилась эта страница», «Товар одобрили 120 покупателей», «650 пользователей скачали наше приложение» и т. д. для увеличения социальной значимости вашего продукта.

Эффект градиента цели

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

Этапы заполнения профиля

Эффект фрейминга

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

$290 может показаться высокой ценой, но это выгодная покупка, если знать, что обычно этот же товар стоит $400

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

Переизбыток информации

Когда много информации и нужно ее фильтровать.

Закон Хика

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

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

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

Эффект Якоря

Та информация, которую пользователь видит в первую очередь (якорь) влияет на его последующее решение. Любые последующие сведения о продукте будут подсознательно сравниваться с первоначальными данными. Часто этот эффект проявляется при сравнении чисел. Например, если ваш банк объявляет о снижении процентной ставки с 25% до 18% на весь месяц, то это может показаться заманчивым, поскольку вы ориентируетесь на предыдущую цифру и сравниваете новое предложение с ней.

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

Якорь — выгодная процентная ставка

Эффект Ресторфф

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

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

Заключение

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