Мы часто ведем себя нелогично: скупаем тонны ненужных вещей в черную пятницу, повторяем нелепые тренды и не хотим расставаться со скопившимся на балконе хламом. Причина кроется в нашем мышлении, а точнее — его ошибках.
В психологии такие ошибки называются когнитивными искажениями. Они сопровождают нас всегда, в том числе, когда мы взаимодействуем с интерфейсами. Учет этих искажений — мастхэв для качественного UX. Рассказываем, зачем и как дизайнеру использовать их в продукте.
Что такое когнитивные искажения и почему они важны для UX
Когнитивная психология исследует познавательные процессы нашей психики: мышление, чувства, память, воображение, логику и принятие решений. За счет этих процессов мы получаем знания о мире, реагируем на них и выбираем стратегию поведения.
Информация поступает непрерывно, мозг постоянно ведет аналитическую работу, и ему нужно успевать быстро реагировать, чтобы решать все задачи. Но многие из них требуют долгих логических рассуждений, примеров с фактами и анализа.
Допустим, перед покупкой товара полезно прикинуть, нужен он или нет, если да — то когда и зачем. Чтобы сэкономить время, люди часто прибегают к шаблонам мышления — когнитивным искажениям. Они основаны на стереотипах, прошлом опыте, мнении окружающих и заблуждениях.
Когнитивные искажения ускоряют обработку информации мозгом, но заводят нас в ловушку. Именно из-за них мы сходу кладем в корзину совершенно ненужный товар просто потому, что скидка в 50% звучит заманчиво.
Учитывать когнитивные искажения в интерфейсе или нет — выбор дизайнера. Также как и остаться на сайте магазина или уйти — выбор пользователя. Однако если дизайнер понимает принцип работы когнитивных ловушек, то может создавать продукт, подходящий под потребности пользователей. Его дизайн будет комфортен, логичен и не вызовет психологических барьеров.
Как использовать когнитивные искажения в дизайне
Исследования психологов подтверждают существование 100+ когнитивных искажений, каждое можно в той или иной степени перенести на интерфейсы и разработку. Мы собрали те, которые чаще всего встречаются в UX и могут быть эффективно использованы дизайнерами и проектировщиками пользовательского опыта.
Отклонение в сторону статус-кво
Люди хотят, чтобы вещи всегда оставались приблизительно такими же, то есть сохраняли статус-кво.
Как использовать в интерфейсах
Если вам нужно сделать редизайн, убедитесь, что между прежним и новым интерфейсами сохраняется преемственность. Цветовая схема, подача контента и структура страниц должны быть близки к тому, что привычно для пользователя. Если у бренда уже выстроена экосистема продуктов, новые должны гармонично в нее вписываться.
В интерфейсе нового сайта Почта Банка мы сохранили стандартные цвета — красный и синий — но добавили градиенты и объемные иллюстрации
Эффект якоря
Привычка принимать решение на основе одного фрагмента информации или аспекта события — якоря. Обычно эффект подразумевает сравнение чисел. Например, ваш банк объявил, что целый месяц будет выдавать кредит под 18% вместо 25%. Может показаться заманчивым, ведь вы запомнили прежнюю цифру и сравниваете новое предложение именно с ней.
Как использовать в интерфейсах
Чтобы использовать эффект якоря в UX, вынесите основные идеи и ключевые цифры продукта на главный баннер страницы. Пользователи увидят его в первую очередь и впоследствии будут изучать контент через призму первой полученной информации.
На первом экране банковского сайта можно крупно указать выгодные процентные ставки, суммы кредитов и удобные способы оформления
Эффект первого впечатления
Впечатление о человеке при первой встрече влияет на дальнейшую оценку деятельности и личности этого человека.
Как использовать в интерфейсах
Пользователи оценивают перспективность продукта примерно за 10 секунд, поэтому постарайтесь максимально отразить look ‘n feel продукта, профит и пользу для юзера. Например, флагманские продукты и услуги можно оформить в слайдер в стиле stories.
Из-за ограниченности по времени пользователь не всегда успевает рассмотреть продукты в слайдере, а только «цепляется» взглядом. Это стимулирует его открывать поинты и изучать продукт подробнее
Эффект изоляции
В ряду похожих объектов легче запоминается тот, который выделяется среди других.
Как использовать в интерфейсах
Выделите контент, на который пользователь должен обратить внимание, через иллюстрации, иконки, яркий визуал, цветовое кодирование и акценты. Делайте их контрастными по сравнению с остальными.
Эффект превосходства картинки
Нам легче запомнить картинку, чем текст или слова.
Как использовать в интерфейсах
Продумайте визуальную коммуникацию уже на этапе проектирования. Выделите ключевую информацию, которую пользователь должен запомнить, и отразите эти месседжи с помощью иллюстраций, анимаций, интерактивов. Например, для визуализации географии компании НСЗК мы сделали карту, где в зависимости от направления работы и партнера цветом выделены доступные регионы.
Пользователю не нужно вчитываться в текст, чтобы узнать регионы хранения или перевалки зерна. Они автоматически выделяются при переключении от одного партнера к другому
Эффект невозвратных затрат
Мешает нам бросать начатое из-за потраченных ресурсов.
Как использовать в интерфейсах
Конечно, даже этот эффект не заставит человека до конца заполнить форму из 50 полей на одной странице, а просто вызовет раздражение. Чтобы он сыграл вам на руку, делайте последовательные формы и сценарии, где цель каждого этапа или поля понятна, помещайте их на разные страницы и разбивайте на шаги.
В форме кредитной заявки Почта Банка пользователь сразу видит количество этапов и уже на первом понимает, что от него ждут дальше. Такая прозрачность усиливает влияние эффекта
Эффект знакомства с объектом
Нам нравятся люди, только потому что мы с ними уже знакомы. И чем чаще мы видим этих людей, тем больше симпатии они вызывают.
Как использовать в интерфейсах
Опирайтесь на знакомые для пользователя UX/UI паттерны: расположение контента в F и Z иерархии, хлебные крошки и блочную структуру. Многие продукты перерабатывают известные знаки или иллюстрации, с которыми косвенно связана их работа.
В дизайне продуктов годнауки.рф прослеживается отсылка к изображению атома — символа науки
Эффект самореференции
Люди склонны запоминать информацию различным образом в зависимости от того, насколько она затрагивает человека лично.
Как использовать в интерфейсах
Внедряйте персонализацию в UX: индивидуальные рекомендации, адаптация опыта под предпочтения, предложения по контенту по интересам. На возникновение эффекта самореференции также влияет использование визуала и примеров, которые опираются на жизненный опыт. Элементы персонализации можно добавить почти в любой форме.
При оформлении билетов в «Москвариум» пользователь может посмотреть, как будет просматриваться сцена с места, на котором он будет сидеть
Эффект присоединения к большинству
Популярность убеждений увеличивается по мере того, как их принимают все больше людей.
Как использовать в интерфейсах
Если мы видим, что продукт или услуга пользуются популярностью, то наше доверие возрастет. На сайте это можно отразить с помощью отзывов на товары, рейтингов, плашек вроде «Вместе с этим товаром пользователи выбирают…». При этом считаются даже негативные отзывы.
Блок отзывов от пользователей в интернет-магазине haieronline.ru
Эффект «сложно-легко»
Прогноз относительного того, просто или сложно будет решать задачу, часто неверен. В трудных задачах люди склонны переоценивать свои силы, а в легких — недооценивать.
Как использовать в интерфейсах
Стремитесь к простоте и минимализму — оптимизируйте названия кнопок и объемы контента. Еще в UI важна анимация, которая снижает нагрузку на мозг за счет упрощения процесса распознавания. Например, с ее помощью можно выстроить сторителлинг. Последовательное и логичное появление блоков упрощает восприятие информации и грамотно управляет вниманием пользователя. Пример — по ссылке.
Подводим итоги
Для того чтобы интерфейсы были логичными и комфортными, дизайнеру нужно учитывать когнитивные особенности пользователей. Понимать, как работает наше внимание, память, восприятие и мышление.
Мы часто мыслим иррационально и действуем по шаблону, поддаваясь когнитивным искажениям. Если они учтены в интерфейсе, то обработка информации о продукте проходит быстрее и взаимодействовать с ним нам проще.
Психология дает понимание, как управлять вниманием пользователя, делать продукт запоминающимся, логичным и приятным с эмоциональной точки зрения. Так мы можем охватить максимальное количество когнитивных процессов.
И создать качественный user-centered дизайн.