book-open 1 test
UX-дизайн

Принципы гештальта в дизайне интерфейсов, которые знает, пожалуй, каждый UX/UI-дизайнер

Иллюстрация Marcin Mokierów-Czołowski: https://mmczolowsky.com/illustrations-vol-4

Вы читаете перевод статьи "The Psychology Principles Every UI/UX Designer Needs to Know". Над переводом работали:  Ольга Жолудова и Ринат Шайхутдинов.

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

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀

Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook

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

Суть эффекта Ресторфф (также известного как “эффект изоляции”) в том, что из нескольких схожих объектов мы скорее запомним тот, что отличается.

Ничего не напоминает?

Так ведь именно поэтому CTA (призывы к действию) в интерфейсе или на сайте так выделяются на фоне остальных элементов!

Пример эффекта Ресторфф в действии

Мы хотим, чтобы люди отличали CTA от простой функциональной кнопки: они должны понимать, что делает CTA, и во время использования приложения/сайта держать в памяти именно эту кнопку.

“Из нескольких схожих объектов мы скорее запомним тот, что отличается”

Эффект края

Из серии элементов, мы лучше всего запоминаем первый и последний.

Слева направо: X/Twitter, Medium, ProductHunt

Именно поэтому многие приложения сегодня забивают на бургерное меню и размещают навигацию снизу или сверху экрана, а самые важные опции ставят в начало или конец панели. На картинке сверху вы видите примеры популярных приложений под iOS. Опции “Home” и “Profile” не зря расположены по краям — дизайнеры этих приложений намеренно используют эффект края.

Когнитивная нагрузка

Когнитивная нагрузка — это объем ресурсов рабочей памяти, задействованных для решения той или иной задачи.

Можно выделить три вида когнитивной нагрузки:

  1. Внутренняя когнитивная нагрузка
  2. Внешняя когнитивная нагрузка
  3. Уместная когнитивная нагрузка

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

Внутренняя когнитивная нагрузка

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

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

Слева направо: Stayful, Serist, Lucidchart

Уместная когнитивная нагрузка

Уместная когнитивная нагрузка — это усилия, направленные на обработку информации и формирование схем и выявление закономерностей между объектами и данными.

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

“Пользователям проще усваивать новую информацию, если они могут интегрировать ее в уже знакомые шаблоны”

Закон Хика

Закон Хика — один из самых известных принципов дизайна, наряду с законами Гештальта.

Все очень просто и в теории, и на практике. Закон Хика гласит: время принятия решения зависит от количества вариантов. Если предложить пользователю больше вариантов, время принятия решения вырастет логарифмически.

Отличный пример применения закона Хика в UX-дизайне — это списки:

Пример закона Хика в действии

Закон близости

Закон близости (один из законов Гештальта) звучит так: объекты, расположенные поблизости, мы воспринимаем как группу. Проще говоря, мозг связывает близко стоящие объекты между собой, отделяя от тех, что находятся в стороне. Так уж устроен человеческий мозг — мы всегда стремимся организовывать и группировать объекты окружающего мира.

Пример закона близости в действии

“Объекты, расположенные поблизости, мы воспринимаем как группу”

В примере выше вы видите 72 кружка. Поскольку мы воспринимаем объекты группами, отталкиваясь от расстояний между ними, на рисунке мы видим несколько групп: есть большая группа из 36 кружков слева и 3 группы по 12 кружков справа.

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


Если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Нас можно найти в Facebook: Ольга Жолудова и Ринат Шайхутдинов.