Гештальт-принципы в дизайне интерфейсов
Как научиться мастерски управлять восприятием через визуальную коммуникацию
Знаете, бывает смотришь на облако и видишь в нем какое-то животное или фигуру? А вы когда-нибудь задумывались, почему, при взгляде на кудрявые сгустки водяного пара, у нас возникают такие ассоциации? Все потому, что так работает мозг!
Наш мозг постоянно пытается осмыслить окружающий мир, анализируя наш предыдущий опыт и накопленные визуальные шаблоны и достраивая связи. Каким-то таинственным способом, наш мозг различает формы, группирует информацию и заполняет пробелы, формируя полную картину.
Если вы поймете, как работает человеческий мозг, это поможет вам углубить свой опыт в дизайне, и вы постепенно научитесь управлять восприятием через визуальные связи.
Вы сможете определять, какие элементы сработают максимально эффективно в той или иной ситуации — и пользоваться этим для управления вниманием и поведением пользователей.
Навык управления вниманием бывает просто необходим при проектировании пользовательских интерфейсов: интерфейсов, которые концентрируются на решении конкретной проблемы или достижении какой-либо цели.
“Хороший дизайнер понимает, насколько важную роль в визуальном восприятии играет психология. Что происходит, когда взгляд зрителя падает на вашу дизайнерскую работу? Как отреагирует его мозг на сообщение, которое вы пытаетесь передать?”
Лаура Буше, стратег по бренд-контенту в Autodesk
Теперь, я думаю, понятно, что визуальный дизайн и психология — тесно связаны между собой и могут влиять друг на друга. Гештальт-принципы помогают нам понять и контролировать эти связи.
Что такое Гештальт?
Гештальт (нем. форма, структура) — это группа принципов визуального восприятия, разработанных в 1920 годах немецкими психологами. Гештальт-принципы строятся на теории о том, что “организованное целое воспринимается как нечто большее, чем просто сумма его частей”.
Целое — это не просто сумма составляющих его частей
Курт Коффка
Гештальт-принципы пытаются описать, как люди воспринимают визуальные элементы в тех или иных условиях. Принципы строятся на четырех ключевых идеях:
Появление
Людям свойственно распознавать сначала общую форму объекта, а только потом обращать внимание на детали. Наш мозг быстрее узнает простой, четко очерченный объект, чем тот, в котором много деталей.
Материализация
Мы способны распознать объект, даже если какие-то его части отсутствуют. Наш мозг сопоставляет то, что мы видим, с шаблонами, которые хранятся в нашей памяти и заполняет пробелы.
Мультистабильность
Люди могут по-разному воспринимать и интерпретировать неоднозначные объекты. Мозг будет перескакивать между возможными вариантами значения объекта. В результате один из вариантов возьмет верх, и станет сложнее видеть остальные.
Неизменность
Люди могут распознавать простые объекты независимо от их положения в пространстве, размера и стиля. Наш мозг может воспринимать объекты в разной перспективе — независимо от того, что они по-разному выглядят.
А теперь давайте рассмотрим Гештальт-принципы, которые помогают нам в проектировании современных интерфейсов.
Близость
Элементы, расположенные близко друг к другу, воспринимаются более связанными, чем те, что находятся на некотором расстоянии. Таким образом, мы чаще воспринимаем отдельные элементы группой, а не по-отдельности.
Как применить принцип Близости в UI дизайне?
Мы можем использовать принцип близости в UI дизайне, чтобы сгруппировать взаимосвязанную информацию, организовать контент или упорядочить лейаут. Если правильно воспользоваться принципом близости, это положительно скажется на визуальной коммуникации и пользовательском опыте.
Принцип близости гласит, что взаимосвязанные объекты должны располагаться близко друг к другу, а несвязанные — на расстоянии. В данном случае очень важную роль играет белое пространство: оно создает контраст, который направляет взгляд пользователя в нужном направлении. Белое пространство здорово усиливает визуальную иерархию и помогает задавать направление внимания. В результате такой лейаут проще читать и сканировать — а это помогает пользователям быстрее достигать своих целей и глубже погружаться в содержимое интерфейса.
В интерфейсе принцип близости можно применить практически везде: от навигации, карточек, галерей и баннеров до списков, основного текста и нумерации страниц.
Общая область
Это принцип напоминает принцип близости: элементы, расположенные в пределах одной области, воспринимаются как группа.
Как применить принцип Общей области в UI дизайне?
Принцип Общей области особенно полезен в дизайне интерфейсов: он помогает сгруппировать информацию и организовать контент, но также позволяет отделить одну контентную группу от другой или создать точку фокусировки. Общая область усиливает иерархию, повышает сканируемость контента и помогает выделить нужную информацию.
Принцип Общей области помогает объединить несколько различных элементов, которые находятся в составе большей группы элементов. Для такой группировки можно использовать линии, цвета, формы и тени. По этому же принципу можно вывести некоторые элементы на первый план, подчеркивая их значимость.
Хороший пример использования принципа Общей области в интерфейсе — это карточки: четко ограниченные прямоугольные области, в которых размещается взаимосвязанная информация. Еще хороший пример — баннеры и таблицы.
Схожесть
Элементы с похожими визуальными характеристиками кажутся нам более связанными, чем те, которые выглядят по-разному.
Как применить принцип Схожести в UI дизайне?
Нам свойственно воспринимать похожие элементы как группу или паттерн. Кроме того, мы предполагаем, что у таких элементов одинаковое назначение. Принцип схожести помогает организовывать и классифицировать объекты в пределах группы и связывать их между собой по значению или функции.
Есть несколько способов сделать элементы схожими: по цвету, размеру, форме, текстуре или ориентации. Н��которые из этих способов более эффективны: например, цвет является более определяющим фактором, чем размер — а размер важнее, чем форма. В рамках группы схожих объектов можно легко выделить какой-то один, если сделать его непохожим на остальные. Это называется “Аномалией” — и эту фишку можно использовать, чтобы создать контраст или увеличить визуальный вес. Это поможет привлечь внимание пользователя к определенному элементу (точке фокусировки) — при этом не нарушая сканируемость, понятность и плавность интерфейса.
Можно использовать принцип Схожести в навигации, ссылках, кнопках, заголовках, призывах к действию и т.д.
Замкнутость
Мы часто воспринимаем группу элементов как один узнаваемый объект или фигуру. Принцип Замкнутости также работает, когда объект неполный, или какие-то части не соединены между собой.
Как применить принцип Замкнутости в UI дизайне?
Принцип Замкнутости гласит: когда в мозгу накапливается необходимое количество информации, он сразу перескакивает к выводам — сам заполняет пробелы и создает общий образ объекта. Таким образом, мы можем передать ту же информацию, используя меньшее количество элементов — при этом интерфейс станет менее сложным и более увлекательным. Замкнутость позволяет снизить визуальный шум и эффективно передать сообщение или концепцию — даже в рамках ограниченного пространства.
Принцип Замкнутости можно использовать в иконографике: простота помогает нам понятно и эффективно передавать смыслы.
Симметрия
Симметричные элементы (даже если они находятся на расстоянии) обычно воспринимаются как взаимосвязанные и создают ощущение целостности и порядка.
Как применить принцип Симметрии в UI дизайне?
Симметричные элементы выглядят просто, гармонично и приятно. В попытке осмыслить окружающий мир, мы всегда стремимся к симметрии, стабильности и порядку. Поэтому симметрия — это полезный инструмент, когда нужно быстро и эффективно передать информацию. Симметрия создает ощущение комфорта и позволяет сосредоточиться на том, что действительно важно.
Симметричные композиции вызывают чувство удовлетворения, но иногда кажутся слишком скучными и статичными. Визуальная симметрия, как правило, выглядит более динамично и интересно. Если добавить в симметричный дизайн один асимметричный элемент, он будет привлекать внимание пользователей; это можно использовать, к примеру, при оформлении призыва к действию. Симметрия — в сочетании с отдельными асимметричными элементами — очень важна в любом дизайне.
Симметрию хорошо использовать при оформлении портфолио, галерей, продуктовых каталогов, описаний продукта, навигации, баннеров и других страниц, насыщенных контентом.
Продолжение
Элементы, выстроенные по прямой или плавно изогнутой линии, кажутся нам более взаимосвязанными, чем те, что расположены случайно или по ломаной линии.
Как применить принцип Продолжения в UI дизайне?
Элементы, расположенные по линии, воспринимаются как сгруппированные. Чем плавнее линия, тем проще элементы складываются в единую фигуру: наш мозг любит идти по пути наименьшего сопротивления.
Принцип Продолжения помогает нам передать направление и движение в композиции. Пример работы этого принципа — выравнивание элементов: оно помогает нам плавно направить взгляд зрителя по странице и сделать контент более разборчивым. Также Продолжение помогает усилить группировку отдельных объектов, навести порядок в интерфейсе и направить внимание пользователей на нужные разделы. Когда эффект Продолжения прерывается — это сигнал для пользователя, что один логический блок закончился и пора обратить внимание на следующий.
Линейное выравнивание рядов и колонок — это хороший пример использования принципа Продолжения. Так можно выравнивать меню и подменю, списки, карточки продуктов, карусели, каталоги товаров и услуг.
Общая судьба
Элементы, движущиеся в одном направлении, мы воспринимаем более взаимосвязанными, чем те, что движутся в разных направлениях или стоят на месте.
Как применить принцип Общей судьбы в UI дизайне?
Неважно, как далеко друг от друга располагаются объекты и насколько они разные — если они вместе движутся или изменяются, мы воспринимаем их как взаимосвязанные. Этот эффект работает даже когда нет явного движения, а есть только намек на движение: например, визуально показано направление.
Когда элементы синхронизированы: движутся одновременно, в одном направлении и с одинаковой скоростью, принцип Общей судьбы работает сильнее. Он помогает нам сгруппировать элементы и связать действия с результатами. Нарушение синхронного движения сразу привлекает внимание пользователя и направляет его на определенный элемент или функцию. А еще таким образом можно связывать разные состояния и группы объектов.
Можно использовать принцип Общей судьбы для оформления выпадающих меню, аккордеонов, всплывающих подсказок, слайдеров с продуктами, страниц с эффектом параллакса и элементов, которые управляются смахиванием.
Заключение
Дизайн пользовательских интерфейсов — это не только красивые пиксели и блестящая графика. В интерфейсе главное — эффективная коммуникация, результат и удобство. Гештальт-принципы всегда помогают нам достичь этих целей — и одновременно создать приятный опыт взаимодействия для пользователей и принести успех бизнесу.
Статью подготовила: Nancy Pong