Как использовать принципы гештальта в UI-дизайне

Вы когда-нибудь, глядя на небо, замечали облако необычной формы, чем-то напоминающее животное или некий предмет? А задумывались ли вы, почему или каким образом подобные ассоциации возникают лишь от взгляда на эти пушистые газовые сгустки? Это все из-за особенностей работы вашего мозга!

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

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

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

— Лора Буше, брендовый контент-стратег в Autodesk

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

Что такое гештальт?

Гештальт (от нем. форма, силуэт) — это совокупность принципов визуального восприятия, разработанная немецкими психологами в 1920е годы. Эти принципы построены на теории о том, что «целое воспринимается больше суммы составляющих его частей».

«Целое — это некая реальность, отличная от суммы своих частей»

— Курт Коффка

Принципы гештальта пытаются описать то, как люди воспринимают визуальные элементы в разных условиях. Эти принципы основаны на четырех ключевых идеях:

Возникновение

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

Материализация

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

Мультистабильность

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

Постоянство

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

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

Близость

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

Как применять принцип близости в UI-дизайне?

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

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

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

Общая область

Как и описано в принципе близости, элементы, расположенные в одной области, воспринимаются как связанные.

Как применять принцип общей области в UI-дизайне?

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

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

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

Сходство

Элементы со схожими визуальными характеристиками воспринимаются как более взаимосвязанные по сравнению с теми, у которых схожих характеристик нет.

Как применять принцип сходства в UI-дизайне?

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

Существуют различные способы сделать так, чтобы элементы воспринимались как одинаковые, а следовательно, взаимосвязанные. К ним относится сходство цвета, размера, формы, текстуры, величины и расположения, причем некоторые из них имеют более яркую коммуникативную направленность по сравнению с другими (напр., цвет > размер > форма). Если между объектами наблюдается сходство, на какой-то из них можно сделать акцент и выделить среди остальных — это называется «аномалией». Ее можно использовать для создания контраста или придания объекту визуального веса, она поможет привлечь внимание пользователя к определенной части контента (координационный центр), а также повысить просматриваемость, доступность и подачу в целом.

Принцип сходства можно использовать при создании навигаций, ссылок, кнопок, заголовков, кнопок CTA и т.д.

Завершение

Группа элементов часто воспринимается целиком, как одна легко узнаваемая фигура или образ. «Завершение» проявляется, когда объект не целостный или его части не соединяются друг с другом.

Как применять принцип завершения в UI-дизайне?

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

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

Симметрия

Как правило, симметричные элементы воспринимаются так, словно они составляют одно целое, вне зависимости от расстояния между ними. Это дает нам ощущение единства и порядка.

Как применять принцип симметрии в UI-дизайне?

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

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

Этот принцип хорошо подходит для использования в портфолио, галереях, показе продукции, составлении списков, навигации, баннерах и на любых страницах, переполненных контентом.

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

Элементы, выстроенные в прямую линию или мягкую кривую воспринимаются более взаимосвязанными по сравнению с теми, которые располагаются хаотично или выстроены в ломаную линию.

Как применять принцип непрерывности в UI-дизайне?

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

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

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

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

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

Как применять принцип общего направления в UI-дизайне?

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

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

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

Заключение

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