Иллюзии восприятия в дизайне
Не верь своим глазам!
Сибирикс

Не верь своим глазам!

Иллюзии восприятия в дизайне

Иллюзии восприятия в дизайне

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

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

Почему так происходит?

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

Процесс, при котором мы сосредоточены на достижении определенной цели, называется избирательным вниманием. Чтобы аккумулировать все ресурсы нашего восприятия для решения определенной задачи, мозг как бы исключает незначительные элементы из области нашего восприятия. Чтобы упростить получение нужной информации, мозг действует по определенным паттернам:
  • Если мы видим знакомые элементы, то изначально обращаемся к ним, так как уже знаем, как вести себя с ними;
  • При этом внимание также привлекают наиболее яркие визуальные и звуковые стимулы;
  • Если мы выполнили какое-то знакомое нам действие, то ждем, что оно принесет известный результат.
Таким образом, наш мозг выстраивает наиболее простую схему, по которой можно получить желаемое.

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

Иллюзия внимания

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

Как это использовать?

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

А если уж вы непременно хотите воплотить в дизайне креативные идеи, обращайте дополнительное внимание пользователя на нетипичные объекты — например, с помощью анимации или подсветки.
На этом сайте расположение корзины не очень удачно. Мало того, что она не обозначена визуально, так еще и находится в непривычном месте

Иллюзия уверенности

Зачастую большего успеха добиваются те, кто по-настоящему уверен в себе, а не те, кто всю жизнь получал «пятерки» в школе. Уверенность — это колоссальный инструмент для достижения целей. Каким бы хорошим специалистом вы ни были, если вы будете неуверенно подавать себя, то вам не будут доверять. То же самое относится и к компаниям. Создание положительного имиджа и работа над лояльностью к бренду — одна из основных позиций успешного маркетинга компании.

Как это использовать?

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

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

Иллюзия знания

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

Как это использовать?

Каким бы красивым ни был сайт, если пользователь не может найти на нем кнопку «Заказать», то раздражается и думает: «Неужели я настолько глуп, что не могу просто сделать заказ?» Естественно, это расстраивает пользователя и заставляет его покинуть сайт. И наоборот, если логика сайта будет проста и понятна, пользователь испытает положительные эмоции от того, насколько легко он продвигается к своей цели.

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

Иллюзия причины

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

Как это использовать?

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

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

Зрительные иллюзии

Наше визуальное восприятие тоже имеет свои особенности, и для их изучения в психологии есть целый раздел — гештальт-психология. Подробно рассматривать ее не будем — ограничимся самыми популярными принципами, которые можно использовать в дизайне.
  • Объекты, расположенные рядом, воспринимаются как одно целое. Следуя этому принципу, можно показать связь нескольких объектов, отличающихся визуально — например, кнопки и призыва к действию, текста и картинки, группы изображений, относящихся к одному пункту.
  • Визуально объединенные элементы воспринимаются как группа. При этом такая группа считывается в первую очередь. Если вы хотите придать важность какому-либо блоку на сайте, выделите его с помощью рамки или подложки.
  • Объекты, расположенные на одной линии, считываются как родственные. Например, если на сайте необходимо разместить 2 верхних меню, можно просто расположить их на двух разных линиях, а для большего эффекта окрасить в разные цвета. Так мозг будет воспринимать эти меню как две разные группы объектов.
  • Зрительное восприятие избирательно. Пользователи считывают только визуально важные объекты, поэтому стоит избегать визуальной перегруженности сайта и обилия декоративных деталей.
  • Если объект выглядит неполным или незаконченным, мозг будет стремиться «дорисовать» его. Эта иллюзия восприятия часто используется при создании мобайл-дизайна, так как площадь экрана ограничена. Например, так можно показать возможность горизонтальной прокрутки — расположить в ряд несколько изображений, а от последнего показать только часть.
На сайте Орматека у акционных баннеров и категорий каталога видна только часть. Так пользователь догадывается, что можно пролистать экран влево и увидеть больше контента

Как иллюзии восприятия упрощают создание дизайна

Зная паттерны восприятия информации, можно избежать серьезных ошибок при проектировании сайта и создать такой дизайн, при взаимодействии с которым пользователи не будут испытывать проблем. Достаточно придерживаться простых правил:
  • Используйте знакомые пользователю обозначения и сценарии для привычных элементов. Не всегда суперкреативно = удобно.
  • Не обманывайте ожидания — после нажатия кнопки должно происходить то, что на ней обозначено.
  • Если интерфейс не понятен с первого взгляда, а упростить его невозможно, используйте подсказки.
  • Пользуйтесь принципами визуального восприятия для структурирования информации и упрощения взаимодействия с интерфейсом.
В целом, знание об особенностях нашего внимания позволяет понять, почему лаконичные, простые интерфейсы пользуются гораздо большим спросом, чем высоконагруженные. Поэтому креативные и суперуникальные идеи лучше оставить для конкурсов веб-сайтов, а пользователям предоставить более удобное решение.