Строим интерфейсы на основе принципов зрительного восприятия

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

Гештальт-теория описывает то, как люди воспринимают визуальные объекты, и это восприятие сводится к 3 основным идеям:

1. Мозг распознает целое быстрее, чем его составляющие. То есть, увидев сложную форму, состоящую из многочисленных частей, первоначально мы воспринимаем только эту форму – и только потом начинаем рассматривать составляющие. При этом, если эта форма не закончена, мозг сам «дорисовывает» недостающие части.

2. Если объект изображен неоднозначно, и визуально воспринять его можно несколькими способами, то мозг будет переключаться между этими восприятиями, пока не выберет одну доминирующую интерпретацию. Этот принцип использовался при создании знаменитых «обратимых фигур», которые массово публиковались в юмористических журналах XVIII-XIX века.

3. Простые объекты воспринимаются безошибочно, вне зависимости от того, в каком положении и масштабе изображены. То есть, простую форму мы всегда узнаем, вне зависимости от искажения.

Эти идеи лежат в основе принципов гештальтизма, и далее мы подробно рассмотрим каждый принцип.

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

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

Простота

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

В UX-дизайне это может использоваться так – если вы хотите отрисовать уникальные элементы интерфейса, придайте им знакомую для пользователей форму, а «внутри» этой формы используйте креатив на максимум (только не слишком увлекайтесь). Например, вы можете составить ее из отдельных элементов, линий и даже других форм. Этот прием позволит пользователям быстро распознавать знакомые элементы, при этом у них появится интерес рассмотреть их поближе – а значит, больше времени провести на вашем сайте.

Близость

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

Принцип близости можно использовать и для облегчения восприятия при большом количестве информации. Например, если в форме для заполнения слишком много полей, пользователю сложно охватить их взглядом целиком (помним про правило 7 ± 2). Но если объединить поля для ввода в группы по 4-5 штук, то они будут восприниматься проще.

Этот же принцип можно использовать с рубрикой «Вопрос-ответ» или большими текстовыми объемами.

При этом нужно избегать и нежелательной группировки. Например, если расположить в одном углу интерфейса блога кнопки «Назад», «Вперед», «Добавить», «Сохранить» и «Удалить», то пользователь может запутаться. В этом случае лучше выделить в одну группу кнопки навигации, а во вторую – кнопки редактирования.

Общие области

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

Сходство

Мы воспринимаем схожие по цвету, форме, размеру и другим признакам объекты как принадлежащие к одной группе – даже если они находятся не рядом друг с другом. Пример из жизни – одежда в шкафу. Когда мы подбираем себе образ, то автоматически «считываем» из шкафа сначала имеющиеся в наличии рубашки, затем – брюки, затем – пиджаки.

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

Этот принцип может служить и противоположной цели – чтобы выделить какой-либо элемент из группы похожих. Такой прием хорошо работает на больших массивах текста – когда наиболее важные моменты выделяются другим цветом.

Общее направление

Элементы, которые движутся (визуально или буквально) в одном направлении, воспринимаются как более связанные, чем те, которые не движутся. При этом они могут быть удалены друг от друга или различны по форме, цветам и т.д. Если движение синхронизировано по скорости и направлению, то этот эффект усиливается.

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

Завершение

Если объект является неполным или незаконченным, но в нем можно узнать знакомую фигуру, мозг самостоятельно «дорисовывает» недостающие детали.

Этот эффект работает, потому что наш мозг, в принципе, стремится к тому, чтобы все было просто и понятно. Увидев знакомые очертания, он автоматически распознает фигуру и определяет ее как нечто уже известное.

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

Один из сегодняшних трендов веб-дизайна связан с принципом непрерывности – особенно часто он используется в мобильных интерфейсах.

Симметрия

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

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

Фигура + фон

Наш мозг способен отделять фигуру от основного фона, даже если они находятся в 2D-пространстве. Это, опять же, восходит к свойству нашего восприятия безошибочно определять знакомые простые формы. Мы понимаем, какой план находится к нам ближе, а какой дальше – то есть, какой является более важным.

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

Непрерывность

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

Как мы видим, гештальт-теория играет большую роль в проектировании интерфейсов, ведь она отлично описывает то, как строится зрительное восприятие. Зная основные гештальт-принципы, можно легко создавать интуитивно понятные интерфейсы и решать задачи по оптимальному расположению элементов. А высший пилотаж – использовать принципы, обратные теории визуального восприятия (например, асимметрию) для привлечения внимания к особо важным деталям.