Даниэль Канеман, когнитивные искажения, кризис и UX-UI

в 21:58, , рубрики: book, prototype, psichology, ux design, дизайн, дизайн интерфейсов, статья

Привет! Меня зовут Мария, я ux/ui дизайнер и по совместительству организатор Книжного Клуба Product offline. Книжный Клуб Product offline — это небольшое закрытое комьюнити в Санкт‑Петербурге, которое объединяет под своим крылом всех причастных к созданию айтишных продуктов людей, которые в чтении находят инсайты и стремятся обсуждать их с единомышленниками и применяют полученные знания в работе и коммуникации с пользователями/командой/продуктом/бизнесом.

Для меня, как для горящего и восторженного новичка, стала открытием книга, которую мы читаем на данный момент: Даниэль Канеман »Thinking slow and fast». Эта книга перевернула для меня работу подсознания и помогла увидеть, как можно работать с пользовательским опытом в ux/ui дизайне через призму когнитивных искажений.

И вот, я загорелась идеей написать пост для Хабра.

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

Располагайтесь поудобнее, запаситесь чаем/кофе, печеньем и приятного прочтения!

Начну с представления действующих лиц этой книги. Канеман предлагает нам познакомиться с Системой 1 и Системой 2 (далее С1 и С2)

  • Система 1: быстрая, интуитивная, эмоциональная. Она работает автоматически и быстро, не требует усилий.

  • Система 2: медленная, аналитическая, требующая усилий. Она активируется, когда нужно решить более сложную задачу.

Эти названия Даниэль Канеман даёт нам специально, чтобы абстрагировать нас от предвзятого отношения к словам «бессознательное» и «сознательное». Автор утверждает, что люди чаще пользуются С1, потому что она меньше тратит энергии, однако, это может приводить к когнитивным искажениям, из‑за которых люди чаще всего совершают ошибки, а чтобы избежать ошибок, нужно задействовать С2, хоть она и тратит максимум нашей энергии (восполнять энергию автор «разрешает» нам сладеньким, но мы то с вами знаем, что углеводы мозг берёт практически из любой еды).

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

Дизайн должен учитывать, что пользователи чаще используют С1 (быстрое и привычное решение задач)

  • Упрощайте интерфейсы: меньше шагов, делайте действия интуитивно понятными, чтобы пользователи не задействовали С2, дизайн должен быть минималистичным, чтобы внимание пользователя направлялось на основные задачи.

  • Используйте узнаваемые элементы дизайна (иконки, цвета, кнопки), чтобы снизить когнитивную нагрузку.

  • Создавайте подсказки и ограничения.

  • Группируйте элементы интерфейса логически

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

Автоматизируйте рутинные задачи, чтобы минимизировать когнитивные усилия, например, сделайте автозаполнение форм (e‑mail, адрес), чтобы пользователь не задумывался о правильности ввода.

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

Ассоциативный механизм, иллюзия воспоминаний и нормы, неожиданности, причины

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

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

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

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

Пользователи опираются на свои ожидания и ассоциативное мышление. Чтобы облегчить взаимодействие:

  • Используйте узнаваемые метафоры и паттерны (корзина покупок для e‑commerce; иконка лупы ассоциируется с поиском — использование другого символа для этой функции может сбить пользователя с толку)

  • Предлагайте выбор на основе стереотипов, резонирующих с аудиторией.

  • Создавайте эмоциональные ассоциации через визуальный стиль и контент.

  • Фокусируйтесь на создании ярких пиковых моментов: красивая анимация при выполнении действия (покупка, завершение задания).

  • Заканчивайте пользовательский путь на положительной ноте, например, с благодарственным сообщением.

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

  • Используйте стандартные шаблоны поведения, но удивляйте приятными неожиданностями: персонализированные рекомендации или доброжелательные сообщения при ошибках (ошибка при загрузке может быть представлена как «Упс, что‑то пошло не так!» вместо стандартного «Error 404»).

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

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

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

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

  • Добавляйте эмоциональные акценты в интерфейсе, чтобы выделить ключевые элементы.

  • Демонстрируйте информацию так, чтобы она была легко доступной.

  • Используйте эффект привязки, чтобы направлять выбор пользователя.

  • Не создавайте неоднозначных интерфейсов — делайте кнопки с чёткими надписями (вместо «OK» пишите «Сохранить изменения»).

  • Убедитесь, что ключевая информация видна сразу.

  • Подчеркивайте важные элементы: выделяйте CTA (call to action) с помощью цвета и расположения.

  • Упрощайте восприятие сложной информации (например, графики, визуализации данных).

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

  • Представляйте данные так, чтобы пользователь чувствовал контроль и мотивацию (график прогресса на сайте, показывающий выполнение задач, например, заполнение профиля, мотивирует пользователя)

Доступность, эмоции и риск, стереотипы, причины побеждают статистику

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

  • Карточки и блоки информации: разделяйте текст на небольшие читаемые блоки.

  • Иконки и визуальные элементы: используйте знакомые символы для повышения узнаваемости.

  • Своевременная обратная связь: показывайте ошибки или успехи в реальном времени.

  • В интернет‑магазине отображайте отзывы клиентов рядом с продуктом, усиливая доверие. Покажите «Пользователи любят этот продукт» рядом с популярным товаром.

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

  • Используйте эмоциональные триггеры в дизайне (позитивные цвета, слова, иконки). Например, надпись «Успешно!» после завершения транзакции.

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

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

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

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

И тут мне тоже есть, что вам поведать, вернее нам, с Даниэлем Канеманом.

Сделали небольшую передышку, добавили чай/кофе, обновили печеньки и продолжаем.

Регрессия к среднему, как справляться с интуитивными предсказаниями

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

  • Учитывайте временные изменения, анализируя долгосрочные тренды.

  • Основывайте дизайн на данных и исследованиях.

  • Ожидайте, что поведение пользователей будет со временем стабилизироваться.

  • Подкрепляйте решения данными, в этом вам помогут A/B‑тесты для проверки гипотез и оценивание эффективности решений на основе метрик.

  • Юзабилити‑тесты: наблюдайте за пользователями в реальных условиях.

  • A/B‑тестирование: сравнивайте разные версии интерфейса.

  • Карта кликов (Heatmaps): анализируйте, на какие элементы чаще всего нажимают.

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

Иллюзия понимания, иллюзия значимости, взгляд извне

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

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

  • Дашборды аналитики: регулярно отслеживайте поведение пользователей.

  • Масштабные опросы: узнавайте, что считают важным реальные пользователи.

  • Собирайте отзывы через встроенные опросы и анализируйте паттерны поведения с помощью инструментов аналитики (Google Analytics, Mixpanel и другие).

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

  • Инфо‑панели: показывайте обучающие подсказки или FAQ.

  • Модальные окна: добавьте объяснение сложных функций.

  • Демонстрация сценариев: визуализация пользы (например, видеоролики или пошаговые инструкции).

Интуиция и формулы, интуиция экспертов

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

  • Используйте алгоритмы для персонализации рекомендаций.

  • Проводите юзабилити‑тесты, чтобы проверить мнения экспертов.

  • Персонализация: используйте машинное обучение для подбора рекомендаций (например, «Вам может понравиться»).

  • Результаты поиска: сортируйте товары или категории на основе пользовательских предпочтений.

  • Автозаполнение: сокращение рутинных задач через предугадывание запросов.

  • В поисковой строке предложите популярные варианты запросов, основываясь на предыдущих действиях пользователя.

Оптимизм

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

Не унываем, ведь мы оптимисты ;-)

  • Оптимизм создает неверные ожидания.

  • Не обещайте пользователям больше, чем ваш продукт может дать.

  • Будьте реалистичны в своих сообщениях и функциях.

  • Оптимизм часто искажает оценку рисков.

  • Трезво оценивайте затраты на внедрение новых функций и их влияние на пользователей.

Заключение

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

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

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

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

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

Автор: VinnyGretta

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js