Принципы гештальта в UX. Часть 2
Разбираем ещё шесть законов из психологии, которые помогают делать дизайн сайтов и приложений. Грамотно и для людей.
![](https://248006.selcdn.ru/main/iblock/c47/c47cb2b9acd6c1e014b9b453ea04b50a/05cde578a7e0d9b2b18742021a24ef59.png)
![](https://248006.selcdn.ru/main/iblock/c47/c47cb2b9acd6c1e014b9b453ea04b50a/05cde578a7e0d9b2b18742021a24ef59.png)
Изображение: Erik Musin / Timofei Popandopulo / Aleksey Zadorozhny / Famiiily Studio / Behance
В первой части рассмотрели на реальных примерах из digital, что связывает психологию и экраны и как работают принцип близости, симметрии, фигуры и фона, подобия, замыкания, непрерывности.
Теперь обратимся к ещё нескольким важным законам восприятия, которые помогают нам распознавать и структурировать визуальную информацию на сайтах и в приложениях.
Принцип простоты
Люди воспринимают сложные формы как объединения простых. Наш мозг стремится «разложить» неоднозначные изображения как сумму понятных.
Человеческий мозг быстро распознаёт знакомое. Знакомое — значит, предсказуемое и безопасное.
![](/upload/setka_images/06150328052024_accf102caaa970ce65d217b9ae9a8e9a57caa67c.jpg)
Изображение: Ildar Garifullin / Behance
Как работает в UX/UI: простые формы в графике помогают сделать дизайн понятным.
- Принцип простоты важно соблюдать в тех интерфейсах, которые людям важно воспринимать и понимать быстро. Например, в банковских приложениях или в формах заявок о ДТП.
Сложные, неделимые формы в графике будут скорее уместны в постерах и арте, которые можно рассматривать долго. - Если сложный для восприятия элемент нужен в дизайне, его можно поместить на подложку из простой формы — так мозгу обрабатывать такую графику будет легче.
![](/upload/setka_images/06150528052024_7e362904b7d857173ea1dbafb405ab1977cbbb2a.gif)
Скриншот: сайт Theo.be / Skillbox Media
Что будет, если нарушить принцип простоты: из-за обилия графики, которую человеческому мозгу сложно интерпретировать как комбинацию простых геометрических элементов, повышается когнитивная нагрузка, снижается концентрация внимания. Интерфейс может отпугнуть пользователя, показаться ему проблемным.
Но полностью избегать сложных форм и делать строгий минимализм не нужно. В небольшом количестве «непростое» развлекает наш мозг и делает визуальный продукт занятным, а потому — привлекательным.
![](/upload/setka_images/06150528052024_6896a8696b8038f4fc8989ab005e4fccc3b90047.jpg)
Скриншот: Wink / Skillbox Media
Принцип фокусной точки
Взгляд всегда цепляется за элемент, который выделяется среди группы других, схожих.
Нечто выразительное удерживает наше внимание: мозг воспринимает такой объект как сигнальный, даже подозрительный и тратит ресурсы на то, чтобы изучить его.
![](/upload/setka_images/06150428052024_c7c2d6650fe8dd3125b1541cb39af56649bd56fa.jpg)
Изображение: W A N T / Behance
Как работает в UX/UI: фокусные точки нужны для акцентов. Они помогают обратить взгляд пользователя на важные сообщения и кнопки или отвлечь его внимание от зон, которые маркетологи хотели бы «скрыть».
![](/upload/setka_images/06150528052024_0ed1686442ac630326a48ddcef43684fa02b904b.jpg)
Скриншот: сайт Miso Tone / Skillbox Media
Что будет, если нарушить принцип фокусной точки: пользователям сложно взаимодействовать с интерфейсом, в котором много ярких, броских элементов.
- Наш мозг не может быстро распознать визуальную иерархию на экране с множеством фокусных точек. Это значит, что информацию он будет получать неструктурированным потоком и быстро утомится.
- Впрочем, кричащий, «шумный» дизайн может быть хорошим решением для конкретной задачи. Например, в портфолио артси-веб-дизайнера уместна ироничная отсылка к сайтам раннего интернета.
![](/upload/setka_images/06150428052024_b30ff17d14b759c017197570526ff51b33cc83c5.jpg)
Скриншот: сайт «ФЭСКО» / Skillbox Media
Принцип параллелизма
Параллельные элементы мы воспринимаем как связанные.
Параллельное кажется нам движущимся синхронно в одном направлении, а значит, согласованным.
![](/upload/setka_images/06150428052024_fc9956ee2f4201e204a5532c68850c6715ed24e0.jpg)
Скриншот: сайт Konture Studio / Skillbox Media
Как работает в UX/UI: параллельное расположение структурирует информацию и визуально группирует элементы. Как следствие, пользователю становится легче воспринимать и понимать изображения и текст.
![](/upload/setka_images/06150528052024_6caf85fa09e0642959e62c753d9a2f18236eb1da.jpg)
Скриншот: сайт All We Need / Skillbox Media
Что будет, если нарушить принцип параллелизма: как и в предыдущих случаях, это ухудшит восприятие интерфейса.
Однако не все элементы и не всегда можно и нужно структурировать параллельным расположением. Хаос в графике и иллюстрациях способен работать как фокусная точка, особенно если рядом с ним есть простая и понятная группировка на параллельных прямых.
![](/upload/setka_images/06151228052024_cece785eb92cd643f5e788e5f37e3d933a76f56c.jpg)
Скриншот: сайт Michael Brewer / Skillbox Media
Принцип общей области
Если элементы находятся в одной области, люди воспринимают их как группу. Элементы вне этой области — как отдельные, независимые объекты.
Область может быть очерчена заметной рамкой, а может быть и нет. В таком случае мозг «дорисует» границы предполагаемой общей области.
![](/upload/setka_images/06150428052024_2229e417950c39bd1ac90259b6c781a232a40430.jpg)
Скриншот: сайт Bang Bang Education / Skillbox Media
Как работает в UX/UI: если объекты визуально объединены в группу, мы считываем, что у них должны быть общие качества или одинаковые функции. Это значит, что нам не придётся внимательно вчитываться в каждое слово и всматриваться в каждое изображение в общей области — достаточно распознать одно-два и более не тратить когнитивный ресурс.
Элементы в одном контейнере — это классический пример, когда выполняется гештальт-принцип общей области.
![](/upload/setka_images/06150428052024_71b97f3681cfd481f98f8279e17d064ae63ea66a.jpg)
Скриншот: сайт Google / Skillbox Media
Что будет, если нарушить принцип общей области: разделённые объекты мозг воспримет как не связанные по смыслу. Если у таких объектов всё-таки есть общее значение или подобная функция, пользователь может не найти её или не обнаружить нужный ему элемент интерфейса.
![](/upload/setka_images/06150428052024_b96f49b701f581862428f9c58e1a46c731d0aa89.jpg)
Скриншот: Amazon / Skillbox Media
Принцип общей судьбы
Элементы, расположенные на одной линии, мы воспринимаем как связанные.
Единая линия для нас означает направление движения. Элементы на ней могут и не двигаться, но мы будем считать, что у них есть общая задача или цель.
![](/upload/setka_images/06150928052024_d75dd4921f9f5ca9dc828e1efafbd5a21dfa9c5d.jpg)
Скриншот: сайт Peden+Munk / Skillbox Media
Как работает в UX/UI: придавать объектам визуальную «общую судьбу» — это ещё один способ группировать их и делать интерфейс проще для восприятия.
![](/upload/setka_images/06151028052024_b76bc71fa80c20942ed01e19c21ead7b69ad6b89.jpg)
Скриншот: сайт Amy Currell / Skillbox Media
Что будет, если нарушить принцип общей судьбы: элементы, которые не «движутся» синхронно в одном направлении или по одной линии, наш мозг воспринимает как разрозненные, а значит, не связанные по смыслу и задаче.
Если разорвать общую судьбу объектов, которые на самом деле связаны (например, пункты в выпадающем списке), интерфейс станет неудобным для пользователя. Скорее всего, он не заметит часть важной для него информации и вообще ощутит дискомфорт от неожиданно высокой когнитивной нагрузки.
Но «разрывы», разделения общей линии движения тоже могут работать как развлекающий акцент.
Главное, взвесить: в конкретном интерфейсе важнее удобство и скорость восприятия для пользователя или нужно, чтобы графика производила впечатление и вызывала эмоции, даже отрицательные?
![](/upload/setka_images/06150428052024_1c076733da30d01108464d85a8ffad1517acec59.jpg)
Скриншот: сайт Yves Saint Laurent / Skillbox Media
Принцип прошлого опыта
Опыт пользователя прямо влияет на то, как он воспринимает элементы в интерфейсе.
У «прошлого опыта» есть несколько уровней:
- Общекультурный. Например, если в приложении есть слайдер, большинство людей будет знать, как им пользоваться, даже если они впервые его встречают. Всё потому, что у них есть опыт взаимодействия с физическими альбомами.
- Цифровой. Он складывается у пользователей digital-продуктов: например, если мы пользуемся несколькими банковскими приложениями, то ожидаем, что иконка функции «оплатить по QR» во всех будет на главном экране. Или в карточке товара на маркетплейсе самая яркая кнопка будет означать «купить».
- Моментальный. Этот опыт приобретён только что, но определяет оптику восприятия следующих единиц информации. На этом уровне часто работают с маркетинговыми техниками: например, первой показывают карточку дорогого товара, чтобы следующие цены казались приемлемыми. Или ставят первой «простую» задачу, чтобы мозг пользователя решил, что дальше будет так же несложно.
![](/upload/setka_images/06151428052024_1cc7c7aaff1472b38801633d33e2f9e6221a290f.jpg)
Скриншот: сайт Try Bored Cow / Skillbox Media
Как работает в UX/UI: принцип прошлого опыта помогает сделать интерфейс предсказуемым, а значит, удобным. Именно поэтому дизайн массовых цифровых сервисов примерно одинаков в своей основе.
![](/upload/setka_images/06150728052024_62bf1942effdabf0107c530d35221fdf53489254.jpg)
Скриншот: Figma / Skillbox Media
Что будет, если нарушить принцип прошлого опыта: пользователь будет тратить больше времени, чем он привык, на поиск стандартных кнопок, функций и разделов.
Если главная цель дизайна — заставить человека «залипнуть» в визуальных решениях и действительно провести на сайте или в приложении сравнительно много времени, то принцип прошлого опыта вполне можно не выполнять. Однако такие эксперименты не стоит проводить в дизайне ежедневных, рутинных приложений — навигаторов, почтовых клиентов, прогнозов погоды.
![](/upload/setka_images/06150428052024_ea2b2f998665356b094cbc9e4d99ecdc646b93d5.jpg)
Скриншот: сайт Kandalaft Studio / Skillbox Media
Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!