Принципы гештальта в дизайне интерфейсов, которые знает, пожалуй, каждый UX/UI-дизайнер
Психология довольно сильно влияет на пользовательский опыт. Разобравшись, как люди воспринимают наш дизайн, мы можем создавать более эффективные приложения, которые помогают пользователям достигать целей. В этой статье я покажу наглядно в работе принципы гештальта в дизайне интерфейсов (с примерами!). Надеюсь, это поможет вам понять особенности пользовательского восприятия. Начнем с эффекта Ресторфф:
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook | Instagram, Telegram
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
Эффект Ресторфф
Суть эффекта Ресторфф (также известного как “эффект изоляции”) в том, что из нескольких схожих объектов мы скорее запомним тот, что отличается.
Ничего не напоминает?
Так ведь именно поэтому CTA (призывы к действию) в интерфейсе или на сайте так выделяются на фоне остальных элементов!
Ищете системное погружение в тему? Загляните в блог для дизайнеров.
Мы хотим, чтобы люди отличали CTA от простой функциональной кнопки: они должны понимать, что делает CTA, и во время использования приложения/сайта держать в памяти именно эту кнопку.
“Из нескольких схожих объектов мы скорее запомним тот, что отличается”
Эффект края
Из серии элементов, мы лучше всего запоминаем первый и последний.
Именно поэтому многие приложения сегодня забивают на бургерное меню и размещают навигацию снизу или сверху экрана, а самые важные опции ставят в начало или конец панели. На картинке сверху вы видите примеры популярных приложений под iOS. Опции “Home” и “Profile” не зря расположены по краям — дизайнеры этих приложений намеренно используют эффект края.
Когнитивная нагрузка
Когнитивная нагрузка — это объем ресурсов рабочей памяти, задействованных для решения той или иной задачи.
Можно выделить три вида когнитивной нагрузки:
- Внутренняя когнитивная нагрузка
- Внешняя когнитивная нагрузка
- Уместная когнитивная нагрузка
Мне бы хотелось поговорить о внутренней и уместной нагрузке, потому что они, как мне кажется, наиболее применимы к UX-дизайну.
Внутренняя когнитивная нагрузка
Внутренняя когнитивная нагрузка это сложность, возникающая при освоении новой темы/действия. Тексты и пояснения в интерфейсе как раз помогают пользователям справиться с этим типом нагрузки.
Например, чтобы помочь пользователю освоиться в приложении, мы добавляем на экран пустого состояния короткие, четкие и понятные инструкции.
Уместная когнитивная нагрузка
Уместная когнитивная нагрузка — это усилия, направленные на обработку информации и формирование схем и выявление закономерностей между объектами и данными.
Пользователям проще усваивать новую информацию, если они могут интегрировать ее в уже знакомые шаблоны — именно поэтому мы используем паттерны в дизайне.
“Пользователям проще усваивать новую информацию, если они могут интегрировать ее в уже знакомые шаблоны”
Закон Хика
Закон Хика — один из самых известных принципов дизайна, наряду с законами Гештальта.
Все очень просто и в теории, и на практике. Закон Хика гласит: время принятия решения зависит от количества вариантов. Если предложить пользователю больше вариантов, время принятия решения вырастет логарифмически.
Отличный пример применения закона Хика в UX-дизайне — это списки:
Закон близости
Закон близости (один из законов Гештальта) звучит так: объекты, расположенные поблизости, мы воспринимаем как группу. Проще говоря, мозг связывает близко стоящие объекты между собой, отделяя от тех, что находятся в стороне. Так уж устроен человеческий мозг — мы всегда стремимся организовывать и группировать объекты окружающего мира.
“Объекты, расположенные поблизости, мы воспринимаем как группу”
В примере выше вы видите 72 кружка. Поскольку мы воспринимаем объекты группами, отталкиваясь от расстояний между ними, на рисунке мы видим несколько групп: есть большая группа из 36 кружков слева и 3 группы по 12 кружков справа.
Думаю, этот пример отлично иллюстрирует, почему так важно группировать объекты в интерфейсе. Главное — подходить к этому осознанно: ведь если мы бездумно разместим два несвязанных объекта рядом, мозг автоматически их свяжет.
Если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Нас можно найти в Facebook: Ольга Жолудова и Ринат Шайхутдинов.
Мобильное приложение «Заметки о психике» | Mental Notes
Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.
Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
