Гештальт принцип близости: ТЕОРИЯ ГЕШТАЛЬТА: краткое руководство для дизайнеров | by Helena Shchepilina

ТЕОРИЯ ГЕШТАЛЬТА: краткое руководство для дизайнеров | by Helena Shchepilina

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

В 20-х годах прошлого века группа психологов в Германии разработала ряд теорий зрительного восприятия, известных как гештальт-принципы, или теория гештальта.

Наряду с такими системами, как теория сеток (aka теория решеток), принцип золотого сечения и теория цвета, принципы гештальта лежат в основе многих правил дизайна, которым мы следуем сегодня.

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

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

Выдающимися основателями теории гешатальта были Max Wertheimer, Wolfgang Kohler, Kurt Koffka.

Несмотря на то, что принципы восприятия разрабатывались в течение многих лет, широкую известность они получили не в последнюю очередь благодаря книге Рудольфа Арнхейма: Искусство и визуальное восприятие (Rudolf Arnheim 1954 года). Эта книга стала одной из ключевых работ по психологии искусства XX века и входит в списки обязательной литературы художественных факультетов университетов.

Базовые принципы организации восприятия. 6 принципов гештальта.

01. Сходство

02. Продолжение / Непрерывность

03. Замыкание / Завершенность

04. Близость

05. Фигура и фон

06. Симметрия и порядок

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

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

Отдельные элементы, из которых состоит этот рисунок имеют одинаковые основные характеристики формы.

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

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

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

В этой композиции внимание привлекает средний квадрат, поскольку он отличается от остальных и нарушает рисунок подобия.Правая фигурка становится аномальным фокусом, потому что она не похожа на другие формы.Эта обложка для альбома The Beatles Hard Day’s Night использует принципы сходства (подобия) и аномалии

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

В этом примере взгляд движется по дуге через первый элемент конструкции к звезде.

Непрерывность — это закон, по которому взгляд движется вдоль линии, предпочитая видеть единую непрерывную фигуру, а не отдельные элементы.

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

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

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

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

Человеческие фигуры образуют единое целое (форму дерева) из-за их близости.Формы не обязательно должны повторять друг друга, чтобы сработал принцип близости. Схожие фигуры расположены рядом и составляют более крупное изображение пламени.

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

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

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

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

Это работает, поскольку человеческий глаз стремиться видеть фигуру (объект переднего плана) и фон (задний план) как две разные плоскости фокуса.

На этом рисунке отношения фигуры и земли изменяются в зависимости от фокусировки внимания, поскольку глаз воспринимает или форму тени, или силуэт светлого лица.А на этом изображении используются сложные отношения фигуры и фона, которые меняются при восприятии листьев, воды и ствола дерева.На известной картине М. К. Эшера “Sky and Water 1” (1938) используется принцип “фигуры и фона”

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

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

Симметричные фигуры образуют ветряную мельницу и обеспечивает чувство порядка и баланса

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

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

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

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

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

дизайном пользовательского интерфейса (UI).

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

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

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

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

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

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

— Курт Коффка

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

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

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

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

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

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

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

Постоянство

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

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

Близость

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

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

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

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

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

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

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

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

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

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

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

Сходство

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

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

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

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

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

Завершение

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

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

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

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

Симметрия

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

Психология дизайна. Гештальт принцип близости в шаблонах TemplateMonster

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

Всего известно 6 принципов гештальта: близость, схожесть, смежность, замкнутость, целостность и общая зона. Сегодня мы поговорим о «близости» в контексте шаблонов от TemplateMonster.

* * *

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

«Единое целое — гораздо больше суммы его частей» — Дэвид Хозерсолл (David Hothersall)

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

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

* * *

А вот еще один целостный дизайн сайта, который использует принцип гештальта.

* * *

* * *

Использование расстояний между блоками для выразительности

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

* * *

Случается, что пользователи желают упорядочить элементы сайта, но при этом не слишком увеличивать расстояние между ними. Свойство lineBreak позволяет задавать разрыв и перенос строк (горизонтальных или вертикальных).

* * *

Избегайте логической путаницы между разделами и элементами сайта

Старайтесь размещать названия, описания, ссылки максимально близко к элементам, к которым они принадлежат (изображениям, текстовым частям, кнопкам, подписям и т.д.). Помните, во всем должна быть ясность.

* * *

Модульная сетка — лучший вариант для правильного использования близости

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

* * *

Группировка элементов страницы

Это еще один способ создать единство вокруг элементов. Группировка элементов страницы осуществляется: по функциям, по результату действия. Существует также смешанный тип группировки. Делается это для удобства пользователей при работе с ресурсом.

* * *

Наиболее важные принципы гештальта

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

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

* * *

* * *

* * *

Собственно, близость: чем ближе элементы расположены друг к другу, тем более родственными они кажутся.

* * *

* * *

* * *

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

* * *

* * *

* * *

Схожесть: аналогичный цвет, форма и размеры элементов создают впечатление похожести и родственности.

* * *

* * *

* * *

Разработка сайтов на принципах гештальта обеспечивает оптимальное взаимодействие с посетителями ресурса. При разработке веб-сайта следует учитывать несколько аспектов:

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

Гештальт, теория близости в web дизайне

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

Одна из предыдущих статей «Психологические принципы в UI/UX дизайне» уже касалась это темы. Для краткого напоминания, теория Гештальта основана на следующей идее: когда люди воспринимают сложные объекты, состоящие из многих элементов, они подсознательно организуют части этого объекта в единую систему. Таким образом объекты воспринимаются как единое целое, а не разрозненные элементы. Это работает на разных уровнях восприятия, но гештальт теория близости в web дизайне ориентирована только на визуальную часть. Для примера давайте рассмотрим принцип близости в UX дизайне.

Принцип близости

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

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

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

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

Принцип близости для типографики и текстового контента

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

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

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

Сверху — концепция интерфейса блога по архитектуре. В этом интерфейсе принцип близости работает на нескольких уровнях. Во-первых, он объединяет строки одного текстового блока, которые должны быть восприняты как связанная информация. Во-вторых, каждый блок текста размещается рядом с изображением, которое он описывает, поэтому даже быстрый просмотр позволяет посетителю понять, что они связаны друг с другом и представляют единый фрагмент контента в общем макете. Элемент call-to-action — ссылка «See more» — также работает в соответствии с принципом близости, размещенным немного дальше, чем основной текст, но достаточно близко, чтобы показать, что она включена в этот конкретный блок контента. Итак, мы видим, что в этом случае дизайнер активировал близость как внутри, так и снаружи каждого конкретного блока контента, что делает их гармонично организованными.

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

Блоки контента и элементы управления

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

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

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

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

8 принципов повышения конверсии сайта, основанных на законах гештальтпсихологии

Небольшое вступление

Гештальтпсихология — направление психологии, направленное на изучение психики с точки зрения целостных структур, первичных по отношению к своим компонентам.

Вступление закончено, перейдем к главному.

1 принцип: Закон близости

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

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

На втором примере ситуация обстоит совершенно иначе.

А теперь посмотрим, как этот принцип использовала компания Zappos.

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

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

2 принцип. Закон замкнутости

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

Для примера, рассмотрим изображение.

Что вы видите — 3-х пакменов или треугольник?

Легко предположить, что вы видите именно треугольник — это закон замкнутости в действии — наш мозг интерпретирует воспринимаемую информацию и пытается дорисовать линии между “ртами” пакменов, чтобы получился треугольник.

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

Данный принцип активно используется на логотипах многих компаний.

3 принцип. Закон “хорошей” фигуры

Данный принцип еще известен как принцип простоты — мозг упрощает воспринимаемые предметы (см. изображение внизу).

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

4 принцип. Закон симметрии

Человеческий мозг воспринимает объекты симметрично.

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

Данный принцип реализован на этомсайте

Мозг воспринимает объекты горизонтально линия за линией, а не вертикально.

5 принцип. Закон “заземления”

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

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

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

Ниже представлен один из наиболее распространенных примеров данного закона.

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

6 принцип. Закон равномерной связности

Элементы, визуально объединенные, кажутся связанными логически, в отличие от других элементов.

На данном примере, несмотря на близость квадратов, мозг все равно объединяет квадрат и круг, поскольку они объединены линией.

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

На этом сайте 3 круга объединены пунктирной линией и демонстрируют единство процесса.

7 принцип. Закон подобия

Объекты, имеющие общий фон, объединяются в единую группу.

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

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

8 принцип. Закон непрерывности

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

На примере ниже представлена нестандартное, но простое для восприятия решение связи между фото и биографией.

§ 136. Теория близости

§ 136. Теория близости

Артемий Лебедев

24 августа 2006

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

См. также закон близости в гештальт-психологии

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

Проще всего проиллюстрировать принцип близости можно расстоянием между людьми. Тут Ж находится посередине между двумя М, и нельзя определить, к которому она ближе:

А тут по расположению совершенно очевидно, что Ж вместе с правым М:

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

Вот, например, неизвестный автор непреднамеренно объединил два разных указателя:

Его неизвестный коллега из Владивостока совершил ту же ошибку:

Действителен и обратный принцип: трудно различать объекты с одинаковыми признаками.

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

Заказать дизайн…

Гештальт принципы в графическом дизайне | в постели с арт-директором

Теория гештальта, как раздел психологии, зародилась в Германии в 1920-х годах. Пока психологи обсуждают полезность принципов в понимании визуального восприятия информации, дизайнеры и художники используют привлекательную теорию в своих проектах. С одной стороны, знание законов гештальта помогает правильно выстраивать визуальную коммуникацию, в другой стороны — даёт понимание того, как аудитория воспринимает произведение.

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

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

«Целое не является суммой частей» — Курт Коффка

Ключевая идея

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

1. Появление

Целое проявляется не сразу, а после прочтения частей. Когда мы смотрим на объект, состоящий из форм (см. рисунок слева), наш мозг сначала идентифицирует точки, а затем проявляется собака.

2. Инвариантность или неизменность

Наш ум очень хорошо распознает сходства и различия. Например литера «М» (рисунок справа) представлена разными стилями, но всё же понимаем, что это та же самая буква. Мы хорошо умеем распознавать объекты независимо от масштаба и расположения в пространстве. Например, знакомого человека мы легко узнаем в любом ракурсе, даже по маленькому фрагменту или обрывку разговора.

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

3. Реификация

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

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

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

Почему теория гештальта так интересна?

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

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

Законы гештальта

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

Слева: закон простых форм, справа: закон фигура-фон

1. Закон простых форм (слева)

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

2. Закон фигура-фон (справа)

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

Слева: закон близости, справа: закон сходства

3. Закон близости (слева)

Объекты, расположенные ближе друг к другу, образуют группы. Даже если они имеют разные размеры, форму или цвет, они будут отображаться как группа, если они расположены близко друг к другу.
Закон близости использует пространство в качестве объекта. Когда элементы расположены близко друг к другу, они рассматриваются как часть группы, а не как отдельные элементы. Это особенно верно, когда элементы в группе ближе друг к другу, чем к любым элементам вне группы.

4. Закон сходства (справа)

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

Слева: закон смыкания, справа: закон непрерывности

5. Закон смыкания (слева)

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

6. Закон непрерывности (в центре)

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

Слева: закон симметрии, справа: закон общей истории

7. Закон симметрии (слева)

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

8. Закон общей истории (справа)

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

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

Принципы гештальт теории в создании логотипа

Слева направо рис. A-D.
A — NBC лого, Chermayeff & Geismar & Haviv, 1986.
B — The Chase лого, Chermayeff & Geismar & Haviv, 1961.
С — bp лого, редизайн Landor Associates, 2000.
D — Старбакс лого, редизайн Lippincott, 2011.

Онлайн-курс по графическому дизайну

Это часть блока «Гештальт: правила дизайна» из платного курса о графическом дизайне.

Группа принципов визуального восприятия, разработанная немецкими психологами в 20-х годах. Является фундаментальной основой графического дизайна.

Изучение гештальт-принципов дизайна

Слушайте аудиоверсию этой статьи

Негативное пространство долгое время было основой хорошего дизайна. Первое, что обычно приходит в голову, — оставить пустое пространство вокруг элементов дизайна. Но есть дизайны, в которых это пустое пространство используется для обозначения элемента, которого на самом деле нет (в качестве примера сразу приходит на ум стрелка, скрытая между буквами E и X в логотипе FedEx).

Буквы «E» и «x» в логотипе FedEx образуют стрелку в отрицательном пространстве между ними.

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

Этот принцип является одной из важнейших идей, лежащих в основе гештальт-принципов визуального восприятия. Наиболее влиятельное раннее предложение, написанное по поводу теории, было опубликовано Максом Вертхаймером в его книге « Гештальт-законы организации восприятия » 1923 года, хотя обсуждение Вольфганга Келера « Physical Gestalten » в 1920 году также содержит много влиятельных идей по этому поводу.

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

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

Существует шесть отдельных принципов, обычно связанных с теорией гештальта: сходство , продолжение , закрытие , близость , фигура / фон и симметрия и порядок (также называемый prägnanz ). Есть также некоторые дополнительные, более новые принципы, иногда связанные с гештальтом, такие как общая судьба.

Сходство

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

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

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

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

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

Продолжение

Закон непрерывности гласит, что человеческий глаз будет следовать по гладкой траектории при просмотре линий, независимо от того, как они были нарисованы на самом деле.

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

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

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

Закрытие

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

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

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

Closure довольно часто используется в дизайне логотипов с другими примерами, в том числе для USA Network, NBC, Sun Microsystems и даже Adobe.

Еще один очень важный пример закрытия при работе в UX и UI-дизайне — это когда вы показываете частичное исчезновение изображения с экрана пользователя, чтобы показать ему, что есть еще что-то, что можно найти, если он проведет пальцем влево или вправо.Без частичного изображения, то есть если отображаются только полные изображения, мозг не сразу интерпретирует, что можно увидеть больше, и, следовательно, ваш пользователь с меньшей вероятностью будет прокручивать (поскольку закрытие уже очевидно).

Близость

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

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

Возьмем эту группу кругов, например:

Единственное, что отличает группу слева от группы справа, — это близость линий. И все же ваш мозг интерпретирует изображение справа как три отдельные группы.

Пример PDF-формы USPS, где принцип приближения ухудшает UX.Из-за того, что метки полей расположены ближе к полям под ними, люди ошибочно полагают, что именно здесь идет информация о букве «c». и «d.» Тем не менее, информация должна быть предоставлена ​​в полях над текстовыми метками.

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

Рисунок / Земля

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

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

Некоторые люди сразу увидят дерево и птиц при просмотре логотипа Питтсбургского зоопарка и аквариума PPG, в то время как другие увидят гориллу и льва, смотрящих друг на друга.

Еще один отличный пример принципа гештальта фигура / фон.

На этом изображении можно увидеть более простой пример двух лиц, образующих подсвечник или вазу между собой:

В этой знаменитой иллюзии, разработанной датским психологом Эдгаром Рубином, зрителю обычно предлагаются две интерпретации формы — два лица или ваза.Это еще один отличный пример принципа фигура / фон.

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

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

Симметрия и порядок

Закон симметрии и порядка также известен как prägnanz , что в переводе с немецкого означает «хорошая фигура». Этот принцип говорит о том, что ваш мозг будет воспринимать неоднозначные формы как можно проще. Например, монохромная версия олимпийского логотипа воспринимается как серия перекрывающихся кругов, а не как набор изогнутых линий.

Вот еще один хороший пример принципа гештальт-дизайна « prägnanz »:

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

Общая судьба

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

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

Стая птиц рассматривается как единое целое, летящее в одном направлении и, таким образом, разделяет общую судьбу. (Мартин Адамс на Unsplash)

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

Гештальт-принципы в UX-дизайне

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

Принципы

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

• • •

Дополнительная литература в блоге Toptal Design:

Визуальное восприятие и принципы гештальта — Smashing Magazine

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

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

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

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

Дополнительная литература по SmashingMag:

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

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

Ключевые идеи, лежащие в основе теории гештальт

«Целое — это не сумма частей». — Курт Коффка

Цитата выше — это в двух словах гештальт.Когда люди видят группу объектов, мы воспринимаем их целиком, прежде чем увидим отдельные объекты. Мы видим целое как нечто большее, чем сумму частей, и даже когда части представляют собой совершенно отдельные объекты, мы будем стараться сгруппировать их как единое целое. За гештальт- и гештальт-терапией стоит несколько ключевых идей.

Эмерджентность (целое идентифицируется перед частями)

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

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

Реификация (наш разум заполняет пробелы)

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

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

Мультистабильность (разум стремится избежать неопределенности)

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

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

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

Инвариантность (мы умеем распознавать сходства и различия)

Инвариантность — это свойство восприятия, при котором простые объекты распознаются независимо от их вращения, перемещения и масштаба.Поскольку мы часто сталкиваемся с объектами с разных точек зрения, мы развили способность узнавать их, несмотря на их разный внешний вид.

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

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

Принципы гештальта

Большинство принципов относительно легко понять. У многих из них есть общая тема.

«При прочих равных, элементы, связанные X, как правило, перцептивно группируются в единицы более высокого порядка». — Стивен Палмер

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

Закон Праньянца (Хорошая фигура, Закон простоты)

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

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

Закон Прананца (Хорошая фигура, Закон простоты).

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

В этом случае увидеть три отдельных объекта проще, чем увидеть один сложный объект. В других случаях проще увидеть один объект, что приводит нас к…

Замыкание

«Когда мы видим сложное расположение элементов, мы склонны искать один узнаваемый узор».

Как и в случае с Prägnanz, закрытие стремится к простоте.Замыкание противоположно тому, что мы видели на изображении Прагнанца выше, где три объекта были проще, чем один. С закрытием мы вместо этого объединяем части, чтобы сформировать более простое целое. Наш глаз заполняет недостающую информацию, чтобы сформировать полную фигуру.

Закрытие.

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

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

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

Симметрия и порядок

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

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

Симметрия и порядок.

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

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

Фигура / Фигура

«Элементы воспринимаются либо как фигура (элемент в фокусе), либо как фон (фон, на котором стоит фигура)».

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

Рисунок и земля.

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

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

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

Равномерная взаимосвязанность

«Элементы, которые связаны визуально, воспринимаются как более взаимосвязанные, чем элементы без связи.”

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

Единая связность.

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

Обратите внимание, что линии не должны касаться элементов, чтобы соединение было воспринято.

Общие регионы

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

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

Общие регионы.

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

Близость

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

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

Близость.

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

Продолжение

«Элементы, расположенные на линии или кривой, воспринимаются как более связанные, чем элементы, не расположенные на линии или кривой».

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

Продолжение.

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

Общая судьба (синхронность)

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

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

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

Общая судьба (Синхронность).

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

Параллельность

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

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

Параллельность.

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

Сходство

«Элементы со схожими характеристиками воспринимаются как более связанные, чем элементы, не имеющие таких характеристик».

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

На изображении ниже красные круги связаны с другими красными кругами, а черные круги — с черными кругами из-за сходства цвета. Красные и черные круги кажутся непохожими друг на друга, хотя все они являются кругами.

Сходство.

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

Фокусные точки

«Элементы с интересной точкой, акцентом или отличием будут привлекать и удерживать внимание зрителя».

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

Координаторов.

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

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

Прошлый опыт

«Элементы обычно воспринимаются в соответствии с прошлым опытом наблюдателя».

Прошлый опыт, пожалуй, самый слабый принцип гештальта.В сочетании с любым другим принципом другой принцип будет преобладать над принципом прошлого опыта.

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

Прошлый опыт.

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

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

Краткое изложение гештальта

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

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

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

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

Дополнительные ресурсы

Я особенно рекомендую эту серию из пяти частей Энди Рутледжа.

(cp, ml, il)

Что такое принципы гештальта? | Фонд дизайна взаимодействия (IxDF)

Gestalt — это немецкое слово, имеющее большое значение, особенно для нас, дизайнеров.Давайте внимательно рассмотрим его принципы, чтобы увидеть, сколько информации заключает в себе это словечко!

Центральный принцип гештальт-теории был аккуратно резюмирован гештальт-психологом Куртом Коффкой: «Целое — это , а не , а не сумма частей». Человеческий глаз и мозг воспринимают единую форму иначе, чем отдельные части этих форм. Это глобальное целое — это отдельный объект, который не обязательно состоит из суммы его частей.

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

Что такое гештальт-принципы?

Автор / Правообладатель: Impronta. Условия авторских прав и лицензия: CC BY-SA 3.0

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

«Гештальт» на немецком языке означает «форма» или «форма»; принципы — первоначально разработанные Максом Вертхаймером (1880-1943), психологом австро-венгерского происхождения. — позже были усовершенствованы Вольфгангом Кёлером (1929), Куртом Коффкой (1935) и Вольфгангом Мецгером (1936).

Исследователи объединили все эти теории, чтобы показать, как люди неосознанно соединяют и связывают элементы дизайна.

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

• Сходство ( также называется инвариантностью ): Человеческий глаз имеет тенденцию выстраивать взаимосвязь между схожими элементами в дизайне. Сходство может быть достигнуто с помощью основных элементов, таких как формы, цвета и размер.
• Продолжение: Человеческий глаз следует по контурам, линиям и изгибам дизайна и предпочитает видеть непрерывный поток визуальных элементов, а не отдельные объекты.
• Закрытие (, также известное как Reification): Человеческий глаз предпочитает видеть законченные формы. Если визуальные элементы не завершены, пользователь может воспринимать полную форму, заполняя недостающую визуальную информацию.
• Близость (, также известная как Возникновение): Простые формы, расположенные вместе, могут создавать более сложное изображение.
• Фигурка / Земля ( также известна как Мультистабильность): Человеческий глаз отделяет формы от фона.
• Симметрия и порядок: Дизайн должен быть сбалансированным и законченным; в противном случае пользователь потратит время и усилия, пытаясь понять общую картину.

Закон подобия

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

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

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

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

Проектирование с учетом сходства

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

Использование этой связи может улучшить взаимодействие с пользователем следующим образом:

Ссылки

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

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

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

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

Контент

Мы также можем использовать цвет, размер и тип шрифта, выделение и т. Д., Чтобы различать и отмечать типы контента, прежде чем пользователь их прочитает.

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

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

Заголовки

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

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

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

Например, давайте примерим на размер бессмертную модель Les Misérables Виктора Гюго. Перелистывая шесть страниц вперед, я, наконец, перешел к новому заголовку главы, который мой глаз сразу заметил и прочитал. Ни один другой текст не выделялся для меня до того, как я это увидел.

The Take Away

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

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

Осознание потенциала применения гештальт-мышления помогает нам создавать (буквально!) Привлекательные работы. Внезапно у нас появляются новые идеи и способы решения проблем и задач. Это подарок — мы можем адаптировать нашу работу в соответствии с «инженерией» человеческого глаза и мозга.

Начиная с закона подобия, мы обнаруживаем, что можем использовать следующее, чтобы привлечь внимание пользователя и позволить его или ее мозгу сделать все остальное:

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

Где узнать больше

Заинтересованы в изучении принципов гештальта? Ознакомьтесь с нашим курсом «Гештальт-психология и веб-дизайн: полное руководство»: https://www.interaction-design.org/courses/gestalt-psychology-and-web-design-the-ultimate-guide

Ссылки:

Изображение героя: Автор / Правообладатель: Eumedemito.Условия авторских прав и лицензия: Public Domain.

гештальт-принципов восприятия | Введение в психологию

В начале 20 века Макс Вертхаймер опубликовал статью, в которой продемонстрировал, что люди воспринимают движение в быстро мерцающих статических изображениях — понимание, которое пришло ему в голову, когда он использовал детский игрушечный тахистоскоп. Вертхаймер и его помощники Вольфганг Кёлер и Курт Коффка, которые позже стали его партнерами, считали, что восприятие включает в себя нечто большее, чем просто комбинирование сенсорных стимулов.Эта вера привела к новому движению в области психологии, известному как Гештальт-психология . Слово гештальт буквально означает форму или образец, но его использование отражает идею о том, что целое отличается от суммы его частей. Другими словами, мозг создает восприятие, которое представляет собой нечто большее, чем просто сумму доступных сенсорных входов, и делает это предсказуемым образом. Гештальт-психологи преобразовали эти предсказуемые способы в принципы организации сенсорной информации.В результате гештальт-психология стала чрезвычайно влиятельной в области ощущений и восприятия (Rock & Palmer, 1990).

Один гештальт-принцип — это отношение фигура-фон . В соответствии с этим принципом мы склонны разделять наш визуальный мир на фигуры и фон. Фигура — это объект или человек, являющийся фокусом поля зрения, а земля — ​​это фон. Как показано на рисунке 1, наше восприятие может сильно различаться в зависимости от того, что воспринимается как фигура, а что — как основа.Предположительно, наша способность интерпретировать сенсорную информацию зависит от того, что мы называем цифрой и что мы называем землей в каждом конкретном случае, хотя это предположение было поставлено под сомнение (Peterson & Gibson, 1994; Vecera & O’Reilly, 1998).

Рисунок 1 . Концепция отношения фигуры к фону объясняет, почему это изображение может восприниматься либо как ваза, либо как пара лиц.

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

Рисунок 2 . Гештальт-принцип близости предполагает, что вы видите (а) один блок точек с левой стороны и (б) три столбца с правой стороны.

То, как мы что-то читаем, является еще одной иллюстрацией концепции близости. Например, мы читаем это предложение так, а не иначе. Мы группируем буквы данного слова вместе, потому что между буквами нет пробелов, и мы воспринимаем слова, потому что между каждым словом есть пробелы.Вот еще несколько примеров: Cany oum akes enseo ft hiss entence? Что означают эти слова?

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

Рисунок 3 . Глядя на этот массив точек, мы, вероятно, воспринимаем чередующиеся ряды цветов. Мы группируем эти точки по принципу подобия.

Два дополнительных гештальт-принципа — это закон непрерывности (или хорошее продолжение) и закрытия . Закон непрерывности предполагает, что мы с большей вероятностью воспринимаем непрерывные плавные плавные линии, а не неровные ломаные (рис. 4). Принцип замыкания гласит, что мы организуем наши восприятия в целостные объекты, а не как серию частей (рис. 5).

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

Рисунок 5 . Замыкание предполагает, что мы будем воспринимать полный круг и прямоугольник, а не серию сегментов.

Согласно теоретикам гештальта, восприятие паттернов , или наша способность различать разные фигуры и формы, происходит при следовании принципам, описанным выше.Вы, вероятно, уверены, что ваше восприятие точно соответствует реальному миру, но это не всегда так. Наше восприятие основано на гипотезах восприятия : обоснованных предположениях, которые мы делаем при интерпретации сенсорной информации. Эти гипотезы основаны на ряде факторов, включая нашу личность, опыт и ожидания. Мы используем эти гипотезы для создания нашего перцептивного набора. Например, исследования показали, что те, кому даны словесные прайминги, предвзято интерпретируют сложные неоднозначные цифры (Goolkasian & Woodbury, 2010).

Копай глубже: глубины восприятия: предубеждения, предубеждения и культурные факторы

Из этого модуля вы узнали, что восприятие — это сложный процесс. Созданные на основе ощущений, но под влиянием нашего собственного опыта, предубеждений, предрассудков и культур, восприятие может сильно отличаться от человека к человеку. Исследования показывают, что скрытые расовые предрассудки и стереотипы влияют на восприятие. Например, несколько исследований показали, что участники не-чернокожего населения быстрее идентифицируют оружие и с большей вероятностью идентифицируют неоружие как оружие, когда изображение оружия сочетается с изображением черного человека (Payne, 2001; Payne, Shimizu, И Джейкоби, 2005).Более того, белые люди принимают решение стрелять по вооруженной цели в видеоигре быстрее, когда целью является Черный (Коррелл, Парк, Джадд и Виттенбринк, 2002; Коррелл, Урланд и Ито, 2006). Это исследование важно, учитывая количество очень громких случаев за последние несколько десятилетий, когда молодые чернокожие были убиты людьми, которые утверждали, что верят в то, что невооруженные люди были вооружены и / или представляли некоторую угрозу их личной безопасности.

Подумай над

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

закрытие: организация наших восприятий в целостные объекты, а не как серию частей

взаимосвязь фигура-фон: сегментирование визуального мира на фигуру и фон

Гештальт-психология: область психологии, основанная на идее, что целое отличается от суммы его частей

хорошее продолжение: (также, непрерывность) мы более склонны воспринимать непрерывные плавные плавные линии, чем неровные ломаные линии

Восприятие паттернов: способность различать разные фигуры и формы

гипотеза восприятия: обоснованное предположение, используемое для интерпретации сенсорной информации

близость: близких друг к другу объектов, как правило, группируются вместе

сходство: одинаковых объекта обычно группируются вместе

У вас была идея улучшить этот контент? Нам очень понравится ваш вклад.

Гештальт-теория для UX-дизайна: принцип близости. | by tubik

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

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

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

Источник

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

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

В общем, мы могли бы определить два направления применения принципа близости в пользовательских интерфейсах: для элементов типографики и копирования контента и для блоков разного контента и элементов управления. Как и в предыдущей статье , посвященной принципам группировки, мы подкрепим их примерами от дизайнеров Tubik.

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

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

Источник

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

Блог об архитектуре

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

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

Веб-сайт Slopes

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

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

Приложение электронной коммерции для ювелирных изделий

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

Большой пейзаж

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

Дизайн пользовательского интерфейса на практике: принципы гештальта

Практические советы и рекомендации.

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

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

Но почему это происходит? В этом нам помогают принципы гештальта. Правила объясняют нам, как мы воспринимаем мир.

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

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

Гештальт — немецкое слово. Это означает «форма» или «форма». Группа психологов сформировала его в начале ХХ века. Отцами теории являются Макс Вертхаймер, Курт Коффка и Вольфганг Колер. Гештальт-психологи интересовались поведением ума. Принципы описывают то, как мы воспринимаем мир.

Ключевые фундаментальные правила гештальт-систем — это эмерджентность, овеществление, мультистабильность и инвариантность.

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

Мы можем видеть или вычитать весь объект, даже если элемент отсутствует или он неполный.

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

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

Хорошо, хватит теории. Давайте перейдем к объяснению принципов в контексте дизайна пользовательского интерфейса!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Когда элементы имеют тенденцию двигаться в одном направлении, мы воспринимаем их как часть одной группы.

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

Common Fate также применяется к таким элементам, как вложенные меню, раскрывающиеся списки или аккордеоны, которые ясно показывают, как элемент меню будет вести себя.

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

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

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

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

Это очень полезный закон в дизайне пользовательского интерфейса. Возьмем пример карточек из Material Design. Они могут включать в себя различные элементы, такие как изображения, значки, текстовые блоки или кнопки. Однако благодаря карте (белый прямоугольник с закругленными углами с едва уловимой тенью) они воспринимаются как единый объект.

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

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

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

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

Вы используете Sketch? Хотите разрабатывать быстрее и эффективнее? Ниже вы можете найти некоторые ресурсы, в которых применяются различные методы экономии времени, которые помогут вам:

Создавайте пользовательские потоки быстрее в Sketch — С SQUID вы можете создавать пользовательские потоки прямо в Sketch файл эскиза с вашими монтажными областями.Все можно сделать за пару кликов. Посмотрите, как это работает ..

Создавайте веб- или мобильные дизайны за считанные минуты — Начинать дизайн пользовательского интерфейса с нуля — это скучно. Интересно, как пропустить эту часть работы, чтобы сосредоточиться на более интересных задачах. Prime Design System Kit — это ресурс, который позволяет быстро настраивать все основные элементы пользовательского интерфейса и сразу переходить к наиболее интересным частям процесса проектирования. Более того, он включает в себя диаграммы, шаблоны устройств и набор иллюстраций для ускорения определенных частей работы.Благодаря Prime вы создаете веб-дизайн или мобильный дизайн за считанные минуты. Посмотрите на Prime в действии.

Если вы ищете больше практических советов, не стесняйтесь подписаться на информационный бюллетень (как подписчик вы получаете дополнительную скидку на дизайнерские ресурсы).

Принцип близости в визуальном дизайне

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

Дизайн пользовательского интерфейса

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

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

Разместите связанные элементы рядом друг с другом

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

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

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

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

Однако на экранах меньшего размера поддержание этого интервала невозможно.Чтобы эти области не воспринимались как единая группа, Search сдвинут вверх, в сторону от основной навигации. (Да, другие аспекты этого дизайна могут быть дополнительно улучшены, например, группировка метки Search и соответствующего значка с использованием либо близости, либо общей области.)

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

Использование близости для создания значимых групп отражается даже при представлении основного текстового содержимого: предложения группируются вместе в абзацы, разделенные сверху и снизу пробелами. Кроме того, пробелы вокруг хорошо продуманных заголовков сигнализируют, с какими абзацами они связаны — текст из соответствующего раздела обычно помещается ближе к заголовку, чем текст из предыдущего раздела.

(слева) Proximity определяет группы связанного текста (абзацы и разделы) и помогает сканировать.(Справа) Эти группы различимы даже без просмотра фактического текста.

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

12 полей формы в одной большой группе (слева) кажутся более сложными, чем такое же количество полей, разбитых на три группы (справа). (Очевидно, предполагая, что группы значимы — например, информация о доставке в одной группе и информация о выставлении счетов в другой.)

С другой стороны, группирование несвязанных элементов может скрыть их от пользователей. Например, на веб-сайте California EDD кнопка Добавить для перечисления информации о работодателе, необходимой для формы, скрыта среди несвязанных кнопок для перехода к этапу Next процесса, Сохранить как черновик и Отменить .При просмотре страницы пользователи могут смотреть только на один элемент в пределах воспринимаемой группы и использовать это, чтобы сделать суждение о том, какими должны быть другие элементы в этой группе . (Напротив, Предыдущий и Следующий связаны, поэтому их группировка повысила бы удобство использования.)

CA.gov: Кнопка Добавить была размещена в непосредственной близости от несвязанных кнопок, вдали от основной области формы, что затрудняло ее поиск.

Далекие элементы кажутся не связанными друг с другом, их легко не заметить

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

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

Мобильное приложение Kayak: ссылка Skip представлена ​​в верхнем левом углу экрана, вдали от основного контента и наиболее заметных призывов к действию. Такое размещение позволяет легко не заметить и заставить пользователей думать, что они должны войти в систему.

Точно так же приложение Hulu на Apple TV представляет инструкции о том, как полностью взаимодействовать с содержимым текущего экрана в правом нижнем углу экрана. экран, вдали от релевантного контента.Кроме того, текст закрывается фоном фотографии выбранного шоу. Это отсутствие близости заставило моего мужа поверить, что нет возможности получить доступ к экрану Details (где были перечислены другие эпизоды сезона) — к счастью, он попросил меня поправить его!

Hulu на Apple TV: инструкции для Нажмите и удерживайте: (для) Подробности представлены в правом нижнем углу экрана, вдали от информации о следующем эпизоде ​​для просмотра.Такое расположение делает его незаметным, особенно на большом экране телевизора.

Близость может измениться в адаптивном дизайне

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

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

Транспорт для Лондона: информация о двух типах зон с низким уровнем выбросов отображается в непосредственной близости на большом экране (слева).