Гештальд Принципы, Применяемые в Дизайне

Gestalt Principles Applied in Design

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

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

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

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

Мы рассмотрим 6 принципов связанных с гештальт, в контексте дизайна:

  • Proximity
  • Подобие
  • Закон Prägnanz (Фигура-Фон)
  • Symmetry
  • “Common Fate”
  • Closure

Гештальт: Вопрос Восприятия

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

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

The idea of the “gestalt” is a fairly old one, originating with early 20th century philosopher Christian von Ehrenfels along with his contemporary, psychiatrist Max Wertheimer, among others.

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

Let’s start with an illustration. This is called the “subjective triangle.” Что вы видите, когда вы смотрите на рисунок ниже?

Source: Dr. Russ Dewey.Source: Dr. Russ Dewey.

If you said “a hamburger,” go get some lunch and come back.

If you said “three Pac Man-looking things chomping on a triangle,” then you’re on target.

Где треугольник?

The triangle is implied.

Но посмотрите на картинку и скажите мне, есть ли там треугольник. Да, есть.

One of the bright minds of gestaltism, Kurt Koffka, made the famous statement, “The whole is other than the sum of its parts.”

His statement is often mistranslated as the much more familiar “The whole is greater than the sum of the parts.”

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

The famous “Dog Picture,” shown below, illustrates a Dalmatian dog sniffing under a stand of trees. When you squint at it for a moment, you see the dog “come together” from the disparate black and white blobs of the picture.

Source: José Pedro Gomes.

You don’t say, “Oh, I see the feet, and the legs, and the head, and the trees, and okay, now I see the entire picture.”

You look at it for a moment and say, “I see it, a spotted dog sniffing the ground near some trees.”

You went from the initial “What the heck?” straight to “Ah a spotted dog under trees” — no stopping to list items and deduce from that list that you must be looking at a dog sniffing the ground near some trees.

This is an illustration of the concept of totality — you grasp the “totality” of something before worrying about the details. As Interactive Telecommunications professor Clay Shirky puts it, “you cannot understand all of the properties of water from studying its constituent atoms in isolation.”

Так что ошибочное утверждение “целое больше, чем сумма его частей” неправильно. Целое не больше чем сумма его частей.

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

Целое - важно.

Части целого - важны

Целое что состоит из частей его составляющих - важно и отдельно от двух других

Proximity

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

Proximity in Site Navigation

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

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

Site source: Alpine MeadowsSite source: Alpine Meadows.

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

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

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

Близость в Группе изображений.

В 2002 сайт Europe Music Awards показывает, как использовать различные группировки. Логотипы MTV и Europe Music Awards - это отдельная группа в верхнем левом углу, в то время как логотипы спонсоров, сформированы в группы в правом нижнем углу.

Source: Mads SoegaarSource: Mads Soegaar.

Белое пространство помогает сформировать две группы, как и два синих треугольника по углам. Note that the triangles are not present in the “unoccupied” corners, thus they reinforce the notion of the two groups.

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

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

Proximity in Web Forms

Следующий пример довольно простой Web-формы на сайте Yahoo!. Обратите внимание, что форма подразделяется на три сегмента: личная информация, выбор логина и пароля, и информация для восстановления пароля.

The form implies that first set of fields is the most important and the third is the the least important.

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

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

Близость в Иконках

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

Веб-дизайнер Stu Nicholls, создал отличное (хотя и нетрадиционное) круговое меню в 2008 году.

[[ Source: Stu Nicholls. ]]Source: Stu Nicholls.

Because of the circle that all eight icons sit on, and because of the light gray circles that compose the “background” of the menu, the icons are perceived to be part of a similar group.

Так же помогает то что иконки тематически схожие, одинакового размера, цветов и стиля. В живом меню Stu Nicholls'а, при наведении указателя мыши на значке внутри внутреннего круга появляется описание.

Вы правильно группируете элементы?

Подобие

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

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

Одно представление для похожих функций.

В скриншоте старое окно настроек браузера Opera, меню сгруппированы по цвету.

Source: Mads SoegaardSource: Mads Soegaard.

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

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

Ненамеренное Неподобие

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

Во время президентской кампании США 2008 года, Журнал People разместил фото семьи Маккейна на обложке с кандидатом в президенты Джоном Маккейном в центре.

Source: Melissa McEwan Source: Melissa McEwan.

The McCains’ adopted daughter Bridget, a young woman from Bangladesh, was apparently “shoved into the corner,” occupying the bottom left corner of the magazine cover.

Combined with the effect of the top line of the cover text — which, if extended to the left, essentially “cuts” Bridget out of the picture — the photo gave some observers the idea that the McCains (or rather, the McCain campaign) were trying to “segregate” Bridget from the rest of the far more homogeneous family group.

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

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

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

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

McEwan wrote of People, “It doesn’t matter whether they intended to diminish Bridget on their cover, or merely failed to consider what message that would send. Either way, it’s a mess.”

Понимание принципа сходства могло бы это предотвратить.

Каким элементам вашего дизайна вы ненамеренно предали слишком большое или наоборот слишком маленькое значение в результате не правильного использования принципа подобия?

Закон Prägnanz (Фигура-Фон)

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

Andy Rutledge

The “figure-ground” principle has to do with objects portrayed against a background.

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

This is Design 101. Объекты переднего плана должны быть более заметным, чем их фон.

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

Examples of the “Figure-Ground” Principle

Возьмите например такое старое лого:

Source: Mads Soegaard.Source: Mads Soegaard.

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

Не видите его? Вспомните треугольник описанный выше и посмотрите снова If you still don’t see it, then you must have had the same trouble with those “magic eye” illustrations that I did; those things are all about figure-ground, as are many optical illusions.

Или Вы можете просто найти двух людей, в логотипе "Hope for African Children Initiative" ниже: Hint: a child is looking up at a woman, presumably his mother. (Вот почему в Намибии, похоже, возросли цены на недвижимость на ее западном побережье.)

Пользователи Linux быстро узнают старый логотип Gnome.

It’s a “G”, yes indeed, but it’s also a footprint.

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

С другой стороны, мы видим, как принцип Фигура-Фон страшно нарушен в этом сайте. Usually I don’t hold up examples of sites doing things wrong, but since Vincent Flanders and “Web Pages That Suck” outed this site some time back, and the site proprietors left the problematic design in place anyway, I feel no compunction to show restraint here.

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

Either those objects get lost in the background — which pretty much defeats the purpose of having anything in the foreground — or the foreground objects have to “shout” to be “heard” over the background “noise” usually by being very large and brightly colored to overcome the attempt of the background to dominate the design.

In two years of teaching web design and construction to middle- and high-school students, this is the biggest single challenge I’ve had; “weaning” them off of using extremely “loud” and obtrusive background designs. Many of them would love that lightning strike, almost as much as they love those “background” images of Waka Flocka Flame.

Ратледж указывает, что округлые кнопки с градиентом или другим не-сплошным цветным фоном могут быть важны для установления их как "calls to action".

Вот кнопка Jacob Gube’s, гладкая и чистая call-to-action button в качестве примера.

http://www.lightningbar.com/

The rounded corners, borders, gradient color scheme, and resulting illusion of 3D “depth” set the button apart from its surroundings, inviting the user to perceive as something apart from the background and makes it easily identifiable as something that can be activated.

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

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

in.house.media

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

Symmetry

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

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

When your designs are asymmetrically, you know you’d better have a good reason for making your design “askew.”

Симметрия встречается в природе, в математике, в молекулах, везде.

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

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

Финляндская CSC (национальный Центр по Науке и Технологиям) имеет очень простой логотип, который иллюстрирует идею симметрии в дизайне.

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

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

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

Знаменитый логотип Pepsi середины 2000-х.

Не используется более в США, старый логотип Pepsi-отличный пример идеальной симметрии. Aside from the artistically “randomized” ice crystals, the logo is perfectly symmetrical both horizontally and vertically, with a wavy “axis” dividing the upper and lower halves.

Even the 3D airbrush “light and shadow” effect is almost perfectly symmetrical, varying just enough to give the image a realistic appearance of depth. The “ice” and the airbrushing are excellent examples of how “pops” of asymmetry liven up a largely symmetrical design.

Асимметричный редизайн Pepsi

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

Как вы относитесь к новому дизайну?

Симметричные = Успешные?

Bizcovering сделал обзор десяти симметричных (и успешных) корпоративных логотипов в 2007 году. The article poses the question, “All are symmetrical, perhaps this has something to do with their effectiveness?”

Как вы думаете?

Асимметрия в Ransom Note Design

A more extreme example of asymmetry is the classic “ransom note,” which traditionally is made up from letters cut out of magazines, pasted onto a sheet of paper, and delivered to the victim during a thunderstorm with ominous music playing in the background. The whole thing stands for disorganization and a likelihood that the perpetrator isn’t concerned about delivering Aunt Gertrude home safe and sound.

Image generated by the Ransom Note Generator.

Notice anything symmetrical about the lettering? Most of them line up quite nicely, which is unusual for mad kidnappers with no sense of balance and form. I think the folks at Ransom Note Generator let their inner designer impose some unwarranted symmetry in their work.

Part of the reason why the ransom note is considered “scary” is because of its random, chaotic nature; asymmetry means action and the wildly asymmetrical nature of the letters implies action escalating into violence.

How’s the balance between symmetry and asymmetry on your sites?

“Common Fate”

I think I watch too many crime shows on television, because the first time I came across this concept, an image popped into my mind of some hardboiled New York cop slamming his fist down on a table and yelling, “If you don’t roll on your brother, you’re gonna suffer the same fate he does! Is that what you want, both of you doing twenty up in Attica? Sharing a common fate?!?”

If the idea unnerves you, then you probably watch the same shows I do, and you shouldn’t worry, you won’t go to jail by employing the principle of “common fate.”

The idea of “common fate” is simple: We perceive items or objects moving (or appearing to move) in the same direction as related to each other, more so than elements that are stationary or appear to be moving in different directions. Those related items are sharing a “common fate.”

The cars in the photo below form two “streams,” the left “stream” moving from top to bottom of the image (essentially “toward” the viewer) and the right “stream” moving from bottom to top, “away” from the viewer.

Source:  stock.xchng

Although this is an entirely static image, movement is implied, and relationships immediately form.

In our designs, elements that “move” with one another relate to one another, while elements that resist that common movement or move in a different direction, do not relate.

This is a powerful, primal sensory cue among humans. Just think of the drivers’ reactions when a car comes down the lane in the opposite direction from everyone else. Consternation and chaos ensue within moments.

Common Fate in Dropdown Menus

Drop-down and sliding menus such as the one from RedBrick Health shown below — especially the ones that “slide” as opposed to just appearing in the blink of an eye — appeal to the “common fate” principle.

This main menu item has a slide-out sub-menu, so do the others. therefore the two items are related in our minds.

Common Fate in Tooltips

Tooltips also form an important informational relationship. If your tooltips always contain secondary but pertinent information, it won’t take long for a site user to put together — subconsciously — the relationship between moving/hovering the cursor and bringing up new information. As Rutledge notes, “[p]ointer-plus-information all moving together is a useful association.”

Counter-Example of Common Fate

This doesn’t just apply to moving elements, but also the orientation of designs. In my earlier days, I designed a site with two background color gradients inadvertently “fighting” with one another. The header gradient went from light to dark, left to right; the navigation bar immediately underneath went from light to dark, top to bottom. Individually, they worked well enough, but together, they clashed.

The horizontal “movement” of the header gradient didn’t go well with the vertical “movement” of the bottom gradient.

The “movement” of the two gradients flow against one another. The effect violates feng shui and “common fate” both.

Are there design elements in your work that fight instead of flow together?

Closure

Closure means that we “close” objects that are themselves not complete; not only completing the figure in our perception, but perceiving the figure as having an extra element of aesthetic design; we look for a simple, recognizable pattern.

Take a look at the old IBM logo.

Вы распознаете буквы, I, B и M без проблем.

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

Не наводит ли это вас на мысль о старом ASCII art'е, который был так популярен в 70-х и 80-х? It does me.

Вот воплощение испанского конкистадора из 1975, созданное с помощью перфокарт и перепечатанное в 1978 году в Доминиканское газете:

Source: Wikipedia.

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

It’s a nifty three-dimensional cube hiding in among the “spotlights” of lighter red. They are, in reality, 24 dissimilar red shapes on a darker red background. Our perception fills in the blanks.

Another example hit the newspapers in the late 1990s, when the “Face on Mars” stirred the public imagination. Some people were put in mind of the monolith of 2001: A Space Odyssey, wondering if aliens hadn’t left us some cyclopean artifact for our use if we could just find a way to get to it, while others thought about War of the Worlds and stockpiled their bunkers with ammunition and MREs.

Source: Wikipedia.

A closer look proved the “Face” was just a landform. Guess we didn’t need all those MREs after all.

Собираем все вместе

This article is just a quick look at the principles of gestalt as they apply to design. There is far, far more to the topic than can be addressed here. Do remember, though, that we introduced the concept of “totality” in the beginning of the article. Mindful of that concept, think back over the 6 principles we delineated.

None of them stood apart from the other; each one employed other principles as well as standing on its own.

For example, Nicholls’s circular menu depended as much on the laws of similarity and symmetry as that of proximity. Make the icons dramatically different from one another, for example, and the menu loses much of its functionality and aesthetic appeal.

Same with the “triangle that isn’t there” — it depends as much on the principle of closure as it does on figure-ground.

The RedBrick Health menu featured in this article not only employs the principle of “common fate” in its drop-down, but also the principle of similarity in its color choices.

None of these principles stands alone, and all of them function “in totality” with one another.

The concepts work with one another to achieve a totality of function, elegance, and aesthetic appeal.

Some of the best designers in the world know nothing of gestalt principles. They use them intuitively; when designs look and feel right, usually they incorporate gestalt principles whether the designers knows the terminology or not.

Gestalt principles aren’t artificial constructs that people have concocted to apply to design; they are attempts to describe and verbalize how we naturally perceive things.

It’s arguable that in at least some sense, “design talent” is an ability to naturally — and perhaps even unconsciously — understand how human perception works, and how to create designs for websites, paintings, or wedding dresses that are artistically beautiful and functionally efficient by appealing to it.

It doesn’t matter if you use these principles by instinct or by deliberation; what matters is how they can help you make better designs.  These are things clients look for when choosing a web design agency, whether they are a college an online auto parts retailer, which is why they are important to know.

Sources and Further Reading

Related Content

About the Author

Michael Tuck is an educator, writer, and freelance web designer. He serves as an advisor to the Web Design forum on SitePoint. When he isn’t teaching or designing sites, he is doing research for the History Commons. You can contact him through his website, Black Max Web Design.