Привет, Хабр! Я Оксана Артемьева, UX/UI дизайнер. Недавно наткнулась в литературе на термин «эффект обманутого ожидания» — средство усиления выразительности текста, основанное на нарушении предположений, ожиданий и предчувствий читателя. Это то, что усиливает текст, делает его лучше, хотя сам термин звучит максимально негативно.
Я начала копать дальше и выяснила, что с эффектом обманутого ожидания мы регулярно сталкиваемся в психологической плоскости. Например, рассчитываем на что-то одно, а потом видим реальность, и вот — наши ожидания не оправдались. Так случается, когда трейлер фильма или сериала обещает захватывающий сюжет и яркие сцены, а сам фильм оказывается скучным или неинтересным. Вы покупаете новый гаджет или одежду, основываясь на ярких рекламных материалах и отзывах, но получаете продукт низкого качества, это вызывает разочарование. И это уже что-то негативное. А как насчет термина «эффект обманутого ожидания» в дизайне?
Негативный эффект обманутого ожидания в UX/UI дизайне
Как эффект обманутого дизайна представлен в дизайне? Я решила рассмотреть эффект с позитивной и негативной сторон для практических целей — чтобы понять, как избегать отрицательного воздействия и умножать положительное. Дизайн — эта та сфера, в которой психологические эффекты могут стать или троянским конём, или мощным инструментом, способствующим улучшению пользовательского опыта.
Предлагаю начать с негативной стороны эффекта и рассмотреть ситуации, в которых у пользователя появляется раздражение от невозможности достичь своей цели и возникают вопросы «А что дальше?», «Как получить ожидаемый результат?».
Для пояснения своей мысли приведу несколько примеров.
1) Перегруз информацией
Когда я захожу на какой-то сайт или в приложение, то в 99% случае делаю это для достижения какой-то определенной цели — купить товар, изучить статью, послушать музыку. Я ожидаю, что с легкостью достигну свою цель, но иногда сталкиваюсь с исключениями в виде избыточной информации. Из-за этого мне тяжело найти то, ради чего я вообще пришла.
С подобным столкнулась в приложении для отслеживания питания Yazio. Онбординг — это процесс знакомства пользователей с приложением. Это те несколько экранов, которые вы видите при первом заходе в приложение после его установки. У Yazio очень приятный визуал, но чтобы его оценить нужно пройти 59 экранов. На моей памяти, это самое большое количество кругов ада во время онбординга. Я не преувеличиваю.
Как правило, даже 5 экранов начинают порядком надоедать, потому что люди весьма нетерпеливы. Что уж говорить про 59 экранов (да, я их все посчитала). Предлагаю посмотреть несколько скринов, на которых сверху видно прогресс. Все начинается с вполне логичного вопроса «Какова ваша главная цель?».
Следующие 2-3 вопроса тоже вполне обычные, но после них внезапно появляется экран с подтверждением, где, чтобы пройти дальше, нужно не просто нажать на кнопку, а удерживать и ждать. Напомню, что это уже 4-й вопрос, а мне хочется поскорее начать пользоваться приложением.
Итак, вот уже 42-й вопрос, и мы начинаем обсуждать мои выходные. Я понимаю, что это сделано с целью как можно подробнее составить план, но почему бы не сделать это отдельной опцией, которой человек может воспользоваться при необходимости, а не в принудительном порядке.
Ура! Мы добрались до последнего вопроса под номером 59
Или нет? После этого огромного пути у меня появляется еще пул вопросов.
В итоге я ответила на 65 вопросов, чтобы просто добраться до приложения. Но, будем честны, далеко не каждый будет этим заниматься. Так отваливаются пользователи. Зачем я буду тратить свое время на огромное количество вопросов, если нет гарантий, что мне понравится приложение? Скорее всего, я скачаю его аналог и, изучив его несколько минут, пойму, подходит ли он мне.
Решение: сократить количество экранов при онбординге до 3–5 штук. Если необходимо сохранить функцию составления персонального плана, то сделать это отдельной фичей, которой пользователь может воспользоваться при желании, а не в принудительном порядке.
2) Непонятен функционал
А как насчет случаев, когда наоборот не хватает каких‑то подсказок или кнопок? Как раз в эти моменты возникают вопросы «А что дальше?» и «Как мне достичь своей цели?».
При входе на сайт компьютерной игры Perfect World появляется поп‑ап с предложением подписаться на соцсети. Казалось бы, что в этом такого? Обычная практика — призывать подписаться на рассылку или социальные сети. Однако здесь нет опции просто изучить сайт. Нельзя закрыть поп‑ап — нет соответствующего крестика. Нажатие вне зоны поп‑апа тоже его не закрывает. Пользователь находится «в ловушке» и вынужден либо нажать кнопку «Играть» и скачать файл с игрой, либо нажать на соцсеть. Ни то, ни другое пользователю может быть не интересно. Забавно, что при возвращении на сайт после перехода в соцсеть и скачивания игры или повторном заходе на сайт ситуация повторяется. Изучить информацию, представленную на сайте, пользователь не сможет в любом случае.
Решение: добавить крестик для закрывания поп-апа, добавить возможность закрыть поп-ап при нажатии на свободную зону. Как вариант — добавить кнопку «Назад» или «Отменить», то есть сделать функцию закрытия поп‑апа.
3) Ошибки в иерархии
Правильно выстроенная иерархия помогает быстрее считывать информацию. Не зря повсеместно используется следующая схема: для заголовка выбирают самый большой размер шрифта и нередко выделяют его жирным; подзаголовок, как правило, меньше по размеру; основной текст самый маленький в иерархии. Благодаря этому мы можем делить информацию на блоки, даже не вчитываясь в контекст.
К сожалению, не везде есть хорошо выстроенная иерархия. В качестве примера возьмем сайт компании, которая занимается тюнингом выхлопных систем автомобилей.
На первом скрине видно, что заголовки блоков приведены к единому стилю и выглядят как стандартные заголовки. Претензий нет.
А теперь давайте посмотрим на скрин блока «Контакты» и разберем, что здесь не так. Сначала в глаза бросается заголовок, в котором зачем-то сделан закос под кнопку. При нажатии на него ничего не происходит. То есть это дизайн ради дизайна, который в данном случае путает пользователя, так как выбивается из общего стиля заголовков.
Нарушена иерархия внутри самого блока. Если мы говорим про выделение цветом, то очевидно здесь пытаются привлечь внимание к кнопке WhatsApp, но почему-то она расположена не около телефона. Было бы хорошо увидеть способы связи: позвонить по телефону и написать на WhatsApp. Сейчас номер телефона сильно больше по размеру, чем другой основной текст внутри блока, то есть внимание пытаются одновременно привлечь к двум сущностям. Из‑за большого списка именно адреса перетягивают на себя всё внимание пользователя. В итоге пользователь цепляется взглядом за все и ни за что сразу, разрываясь между разными блоками с информацией.
Решение: привести заголовок «Контакты» к единому стилю. Разместить способы связи с одной стороны, а список адресов — с другой. Привести текст внутри блока к одному размеру и выделить что-то одно при необходимости, например, кнопку WhatsApp.
Позитивный эффект обманутого ожидания в UX/UI дизайне
Рассмотрим позитивную сторону эффекта. Здесь можно провести аналогию с литературой, где эффект обманутого ожидания используется для усиления выразительности текста. В нашем случае это будет усиление вовлеченности пользователя.
Наверняка, вы заходили на сайты, где все достаточно однотипно и скучно. Если необходимо найти какую-то информацию на сайте, вы будете искать только ее, не обращая внимания на остальной контент на подобном сайте. Но что, если внезапно появится какая-то микроанимация или резко сменится фон? Это 100% зацепит вас, и, сами того не замечая, вы пробежитесь глазами по контенту, рядом с которым находится это усиление.
Вот отличный пример того, что может зацепить. Пользователь не ожидает, что среди текста и фотографий появится анимация по скроллу, поэтому он на ней задержится и с большей вероятностью изучит информацию.
Пример взят с сайта vitaminergy.ru
На втором примере у нас есть анимация на всем сайте и, казалось бы, это не должно цеплять, потому что уже становится слишком много всего, и в какой-то момент перестает привлекать, но здесь достаточно мало текста и тип анимации сильно различается. Посетитель сайта в каждом блоке видит что-то визуально новое, поэтому ему хочется задержаться.
Пример взят с сайта SoScale | Because content is what matters
Еще один способ привлечь внимание пользователя — дать возможность взаимодействия с сайтом. Например, переключать что-то и выдавать новую информацию.
Пример взят с сайта Caldera - The Internet of Chains
К чему мы пришли?
Используем эффект обманутого ожидания с точки зрения пользователя. Чтобы избежать негативную сторону эффекта обманутого ожидания, нужно поставить себя на место пользователя. Думать как клиент, который первый раз видит какую-то фичу или целый сервис/приложение. Не усложняйте жизнь своим пользователям. Это человеко-ориентированный подход в дизайне, который весьма подробно раскрывает Дон Норман в книге «Дизайн привычных вещей». Советую к прочтению!
Используем неожиданные элементы в меру. Злоупотребление эффектом может сыграть с вами плохую шутку: если будет очень много цепляющих элементов, то их вообще не останется, как бы парадоксально это не звучало. Пользователь не может быть всё время вовлеченным. Используйте подобные уловки только для наиболее важного контента. Не дайте пользователю привыкнуть к неожиданностям.
Не забиваем на подсказки. Если все же внедряете что-то абсолютно новое или редко используемое в свой продукт, то лучше добавьте подсказки для пользователей. Это позволит быстрее изучить функционал и сохранить множество нервных клеток.
Не игнорируем консистентность. Если вы во всем приложении/сервисе/сайте используете синюю кнопку для действия «Вперед» в активном состоянии, то не надо неожиданно ее делать оранжевой, если сохраняется тот же функционал и состояние. Пользователь привыкает к определенным паттернам внутри вашего продукта. Не надо пугать его неоправданными неожиданностями.
Ценим обратную связь. Пожалуй, один из важнейших пунктов. Если из 100 человек ЦА, которые пользовались вашим продуктом, 90 сказали, что они не могут найти нужную кнопку, то стоит проработать этот момент. В конце концов, продукт делается для людей, так что не стоит игнорировать их фидбек.
