- Gestalt principles
- Figure-ground articulation
- Proximity principle
- Understanding and Using the Laws of Perception in eLearning Design
- 1. Law of Similarity
- 2. Law of Proximity
- 3. Law of Simplicity
- 4. Law of Closure
- 6 Major Principles of Perceptual Organisation | Perception
- Principle #1. Closure:
- Principle #2. Pragnanz:
- Principle #3. Proximity:
- Principle #4. Similarity:
- Principle #5. Continuity:
- Principle #6. Inclusiveness:
- Exploring the Gestalt Principles of Design
- Symmetry and Order
- Common Fate
- Gestalt Principles in UX Design
- Further reading on the Toptal Design Blog:
- Why is gestalt theory important?
- What is visual hierarchy in design?
- What is the gestalt theory of perception?
Curator: Dejan Todorovic
Gestalt principles, or gestalt laws, are rules of the organization of perceptual scenes. When we look at the world, we usually perceive complex scenes composed of many groups of objects on some background, with the objects themselves consisting of parts, which may be composed of smaller parts, etc.
How do we accomplish such a remarkable perceptual achievement, given that the visual input is, in a sense, just a spatial distribution of variously colored individual points? The beginnings and the direction of an answer were provided by a group of researchers early in the twentieth century, known as Gestalt psychologists.
Gestalt is a German word meaning 'shape' or 'form'. Gestalt principles aim to formulate the regularities according to which the perceptual input is organized into unitary forms, also referred to as (sub)wholes, groups, groupings, or Gestalten (the plural form of Gestalt).
These principles mainly apply to vision, but there are also analogous aspects in auditory and somatosensory perception. In visual perception, such forms are the regions of the visual field whose portions are perceived as grouped or joined together, and are thus segregated from the rest of the visual field.
The Gestalt principles were introduced in a seminal paper by Wertheimer (1923/1938), and were further developed by Köhler (1929), Koffka (1935), and Metzger (1936/2006; see review by Todorović, 2007). For a modern textbook presentation, including more recent contributions, see Palmer (1999).
Figure 1: Figure-ground articulation.
If the visual field is homogeneous throughout, a situation labeled as Ganzfeld (German for 'whole field'), it has no consistent internal organization. A simple case of an inhomogeneous field is a display with a patch of one color surrounded by another color, as in Figure 1.
In such cases the visual field is perceived as articulated into two components, the figure (patch) on the ground (surround). This figure-ground articulation may seem obvious, but it is not trivial. This type of field organization has a number of remarkable features, first described in the work of Rubin (1915/1921), predating Wertheimer's publication.
The two components are perceived as two segments of the visual field differing not only in color, but in some other phenomenal characteristics as well. The figure has an object- character, whereas the ground has less perceptual saliency and appears as 'mere' background.
The areas of the figure and the ground usually do not appear juxtaposed in a common plane, as in a mosaic, but rather as stratified in depth: there is a tendency to see the figure as positioned in front, and the ground at a further depth plane and continuing to extend behind the figure, as if occluded by it.
Furthermore, the border separating the two segments is perceived as belonging to the figure rather than to the ground, and as delineating the figure's shape as its contour, whereas it is irrelevant to the shape of the ground. Certain displays are bi-stable, in that what is perceived as figure can also be perceived as ground and vice-versa.
However, in displays structured such as Figure 1, in which a smaller region is wholly surrounded by a larger region, it is usually the former that appears as figure (although it may also be seen as a hole), and the latter as ground.
The described organization of the display into the figure and the ground is not its only conceivable segmentation. To illustrate this, consider that Figure 1, as presented on the computer screen, is a set composed of a certain number of pixels, and that the segmentation into figure and ground corresponds to a particular partition of this set into two subsets.
However, this same set may be partitioned into a huge number of other pairs of subsets (such as the subset of pixels in the left half of the figure and the subset in the right half, or the subset at one side of any arbitrary line meandering through the display and the subset at the other side, or the subset consisting of even pixels in odd rows plus odd pixels in even rows and the complementary subset), or into any conceivable three subsets, or four subsets etc. Nevertheless, while an enormous number of such alternative partitions are conceivable, none of them is perceivable, save one or very few. The partition that is actually seen is not a matter of geometric combinatorics and attention to arbitrarily selected subsets: the natural, and often the only way that we can perceive such a display, given the structure of the visual input, is as segmented into the figure and the ground. Such articulation, in which a virtual infinity of geometrical possibilities is pruned down to a single or only a couple of perceptual realizations, is a very basic feature of the working of the visual system.
Although figure-ground perception is a fundamental aspect of field organization, it is not usually itself referred to as a Gestalt law or principle of grouping. Rather, such terms are mostly used for describing the rules of the organization of somewhat more complex visual fields.
There is no definitive list of Gestalt principles, but some of the most commonly discussed are listed and described below, illustrated with examples mainly Wertheimer (1923/1938) and Metzger (1936/2006).
As demonstrated by these examples, the perceptual groupings are in some cases strong and unambiguous, but in other cases they are better described as tendencies, especially when different factors compete with each other.
Figure 2a contains six patches,each of which is perceived as a visual unit, a figure on a common ground. However, they are also collectively the elements of a higher-order visual unit, the horizontal row.
According to Gestalt theory, this type integration of individual components into a superordinate whole can be accounted for by the proximity principle: elements tend to be perceived as aggregated into groups if they are near each other.
Figure 2: Proximity principle.
The effect of varying proximity is illustrated in Figure 2b. Due to the change of distance between some of the components, here the patches are perceived not just collectively as a sextuple, but also as being subdivided into a triple of doublets, an organization that in Wertheimer's notation is designated as 12/34/56.
Understanding and Using the Laws of Perception in eLearning Design
The Gestalt Theory is based around the idea that the eye sees things as entire before distinguishing individual components. In other words, in the Gestalt Theory, the whole is not equal to the sum of all its parts. Basically, its our brains trying to make order chaos.
From this theory the laws of perceptual organization are born. These laws of grouping create a very helpful guide for designers in every field, eLearning being no exception.
The laws state how designers can use various techniques to help learners organize and structure graphical information effectively.
By simply understanding how our visual system works, we can convert this knowledge into rules for displaying information in our courses in order for content to be more comprehensible and straightforward.
This post specifically looks at how eLearning professionals can apply the most relevant of these timeless laws to modern design.
1. Law of Similarity
“Design action of repetition”
The law of similarity states that learners will group things together that have a similar appearance. Basically, grouping -objects is an organizational tool of the unconscious mind.
Things that are a are perceived as more related than things that are different.
Similar appearance may even equate to similar function: the reason why designs tend to used blue, underlined links, or otherwise make links appear distinct from other text but the same as each other.
Additionally, similarity plays a significant role in creating unity — the more a two items are, the more ly they are to form a group. wise, dissimilar items usually appear more varied and resist grouping. The three main ways to create similarity (or dissimilarity) are shape, size, and color.
Implications for eLearning designers:
Designers should use similar layouts in their courses to create a sense of symmetry and grouping. They can also aid recall through contrasting colors and highlighting. It is important to avoid too many differences on one screen of information — course creators should limit the technique to emphasizing keywords, graphics, and other important aspects of learning.
2. Law of Proximity
“The mind will group elements their closeness to each other”
According to this principle, users assume that components spaced closely to one another are related and vice versa. As our brain naturally groups closer elements together into a coherent whole, cognitive load is reduced and information is easier to learn by relieving learners of the need to process a large amount of small stimuli.
Implications for eLearning designers:
You can apply this principle by accurately managing the white space around the elements on the screen. Always keeping related elements close from each other and vice versa.
Placing related elements close to one another reduces ambiguity as well as the risk that users will draw incorrect conclusions about relationships between components. The technique also encourages users to make comparisons, look for similarities, and make connections between elements.
Developers should refer to the information priority of any given screen and create groupings that support this priority when applying this law.
3. Law of Simplicity
“People will perceive and interpret ambiguous or complex images as the simplest form possible”
Also called law of Prägnanz or law of good figure, the law of simplicity is central to gestalt.
It states that users perceive objects in an environment in a way that makes the object appear as simple as possible: they see the screen as a whole instead of a collection of components.
Users prefer things that are clear and ordered as such objects take less time to process and are less ly to be dangerous surprises.
Implications for eLearning designers:
As learners will simplify visuals into a form that they can better understand, it is often more efficient for designers to simplify the version of the graphic they first introduce and then gradually add complexity as necessary. eLearning designers can also use the opportunity to remove distracting and irrelevant visuals.
4. Law of Closure
“Mind seeks completion”
the above, the law of closure is concerned with simplicity; however, instead alluding to combinations of parts to make a simpler whole, it refers the learners’ ability to fill in missing information their past experiences. It states that when learners see a complex arrangement of elements, they seek simple, recognizable patterns while their brains ignore contradictory information.
Implications for eLearning designers:
eLearning developers can sometimes use incomplete images, as these simpler images reduce cognitive load on the mind. However, it is important to note that incomplete information can also lead to misunderstandings.
Therefore, it is crucial to check each screen display to ensure users will be able to fill in the gaps of the learning point.
Designers can do this by using familiar shapes and forms that have relevance in learners’ long-term memory.
6 Major Principles of Perceptual Organisation | Perception
This article throws light upon the six main principles of perceptual organisation. The principles are: 1. Closure 2. Pragnanz 3. Proximity 4. Similarity 5. Continuity 6. Inclusiveness.
Principle # 1. Closure:
Gestalt psychologists claimed that when we receive sensations that form an incomplete or unfinished visual image or sound, we tend to overlook the incompleteness and perceive the image or sound as a complete or finished unit. This tendency to fill in the gaps is referred to as closure.
Show figure 7.2 to your friend for a brief time. The partial outlines of the figure will be filled out and your friend might say that it is a square, though it is not, in-fact, one.
But even if it is seen as an incomplete square it shows that your friend first saw a square and later registered its incompleteness. This illustrates that the principle of closure was in operation.
This shows a tendency to perceive meaningful objects.
Principle # 2. Pragnanz:
The term pragnanz indicates fullness or completeness. Gestalt psychologists are of the view that the process of perception is dynamic and goes on changing until we reach a stage of perceiving with maximum meaning and completeness. Once we reach this point, the perceived gestalt remains stable. Such a stable gestalt is called a good gestalt.
The perceptual process according to gestalt psychology tends to move towards a good gestalt. This phenomenon is very obvious in the case of children. If once they perceive something, they keep on asking questions about it which may appear silly to an adult. Closure is one basic mechanism which illustrates the principle of pragnanz.
The reader should not confuse between perceiving a good gestalt and the accuracy of perception. The term good gestalt means that at that stage the perceptual process is stable and that under given conditions a clear figure-ground demarcation has been arrived at.
Apart from the above principles, other principles which play a role in the organisation of perception are proximity, similarity, continuity, etc.
They explain how perception takes place in the presence of a large number of stimuli.
Perceptual organisation, under such circumstances, is determined to a great extent by the laws of association-similarity, continuity, etc. These principles are explained with the aid of illustrations below.
Principle # 3. Proximity:
When objects are close to each other, the tendency is to perceive them together rather than separately. Even if the individual items do not have any connection with each other they will be grouped under a single pattern or perceived as a meaningful picture (Fig. 7.3).
For instance, when the English teacher in the class questions a student, ‘What is often?’ This is completely different from the question, ‘What is of..ten?’Both the sentences contain the same sounds but the way the speaker groups the sounds and where he pauses will determine how the sounds are perceived.
Principle # 4. Similarity:
Similar elements tend to be perceived as belonging together. Stimuli that have the same size, shape and colour tend to be perceived as parts of the pattern as shown in Fig.7.4
Principle # 5. Continuity:
Anything which extends itself into space in the same shape, size and colour without a break is perceived as a whole figure (Fig. 7.5).
For example, when several dots form a curved line, an individual may perceive the figure as two different continuous lines irrespective of the factors proximity and similarity of the dots.
Thus, the whole figure is organised into a continuum though the dots are unconnected (Fig.7.5).
Principle # 6. Inclusiveness:
The pattern which includes all the elements present in a given figure will be perceived more readily than the other figures. For example, in Fig.7.6 the hexagonal figure formed by all the dots may be perceived more readily than the square formed by the four middle dots. Single dots at either end act as a fence or enclosure within which all the other elements are included.
We have here examined some of the factors which play a role in the organisation of perception. These principles explain how perception is often independent of characteristics of individual stimuli.
While discussing the phenomena of sensation it was mentioned that often our perception bears very little connection to the actual stimulus situation.
We now know that this is because of the fact that perception is a complex and active process influenced by many factors other than stimulus characteristics.
Exploring the Gestalt Principles of Design
Listen to the audio version of this article
Negative space has long been a staple of good design. Leaving white space around elements of a design is the first thing that usually comes to mind. But then there are designs that use that white space to infer an element that isn’t actually there (the arrow hidden between the E and X in the FedEx logo immediately comes to mind as an example).
The “E” and “x” in the FedEx logo create an arrow within the negative space between them.
The human brain is exceptionally good at filling in the blanks in an image and creating a whole that is greater than the sum of its parts. It’s why we see faces in things tree leaves or sidewalk cracks.
This principle is one of the most important underlying ideas behind the gestalt principles of visual perception. The most influential early proposal written about the theory was published by Max Wertheimer in his 1923 Gestalt laws of perceptual organization, though Wolfgang Köhler’s 1920 discussion of Physical Gestalten also contains many influential ideas on the subject.
Regardless of who first proposed the ideas (there have been essays dating back as far as 1890), gestalt principles are an important set of ideas for any designer to learn, and their implementation can greatly improve not just the aesthetics of a design, but also its functionality and user-friendliness.
In the simplest terms, gestalt theory is the idea that the human brain will attempt to simplify and organize complex images or designs that consist of many elements, by subconsciously arranging the parts into an organized system that creates a whole, rather than just a series of disparate elements. Our brains are built to see structure and patterns in order for us to better understand the environment that we’re living in.
There are six individual principles commonly associated with gestalt theory: similarity, continuation, closure, proximity, figure/ground, and symmetry & order (also called prägnanz). There are also some additional, newer principles sometimes associated with gestalt, such as common fate.
It’s human nature to group things together. In gestalt, similar elements are visually grouped, regardless of their proximity to each other. They can be grouped by color, shape, or size. Similarity can be used to tie together elements that might not be right next to each other in a design.
The squares here are all equally spaced and the same size, but we automatically group them by color, even though there’s no rhyme or reason to their placement.
Of course, you can make things dissimilar if you want to make them stand out from the crowd. It’s why buttons for calls to action are often designed in a different color than the rest of a page—so they stand out and draw the visitor’s attention to the desired action.
In UX design, using similarity makes it clear to your visitors which items are a.
For example, in a features list using repetitive design elements (such as an icon accompanied by 3-4 lines of text), the similarity principle would make it easy to scan through them.
In contrast, changing the design elements for features you want to highlight makes them stand out and gives them more importance in the visitor’s perception.
Even things as simple as making sure that links throughout a design are formatted in the same way relies on the principle of similarity in the way your visitors will perceive the organization and structure of your site.
The law of continuity posits that the human eye will follow the smoothest path when viewing lines, regardless of how the lines were actually drawn.
The eye tends to want to follow the straight line from one end of this figure to the other, and the curved line from the top to the bottom, even when the lines change color midway through.
This continuation can be a valuable tool when the goal is to guide a visitor’s eye in a certain direction. They will follow the simplest path on the page, so make sure the most vital parts they should see fall within that path.
Since the eye naturally follows a line, placing items in a series in a line will naturally draw the eye from one item to the next. Horizontal sliders are one such example, as are related product listings on sites Amazon.
Closure is one of the coolest gestalt principles and one I already touched on at the beginning of this piece. It’s the idea that your brain will fill in the missing parts of a design or image to create a whole.
In its simplest form, the principle of closure allows your eye to follow something a dotted line to its end. But more complex applications are often seen in logos, that for the World Wildlife Fund. Large chunks of the outline for the panda are missing, but your brain has no problem filling in the missing sections to see the whole animal.
The gestalt principle of closure is illustrated beautifully in the World Wildlife Fund’s panda logo. The brain completes the white shapes, even though they’re not well defined.
Closure is quite often used in logo design, with other examples including those for the USA Network, NBC, Sun Microsystems, and even Adobe.
Another very important example of closure at work in UX and UI design is when you show a partial image fading off the user’s screen in order to show them that there is more to be found if they swipe left or right.
Without a partial image, i.e., if only full images are shown, the brain doesn’t immediately interpret that there might be more to be seen, and therefore your user is less ly to scroll (since closure is already apparent).
Proximity refers to how close elements are to one another. The strongest proximity relationships are those between overlapping subjects, but just grouping objects into a single area can also have a strong proximity effect.
The opposite is also true, of course. By putting space between elements, you can add separation even when their other characteristics are the same.
Take this group of circles, for example:
The only thing differentiating the group on the left from those on the right is the proximity of the lines. And yet your brain interprets the image on the right as three distinct groups.
A USPS PDF form example where the proximity gestalt principle is impairing UX. Due to the field labels being closer to the fields under them, people would mistakenly believe that’s where the information goes for “c.” and “d.” Yet, the information is supposed to be provided in the fields above the text labels.
In UX design, proximity is most often used in order to get users to group certain things together without the use of things hard borders. By putting things closer together, with space in between each group, the viewer will immediately pick up on the organization and structure you want them to perceive.
The figure/ground principle is similar to the closure principle in that it takes advantage of the way the brain processes negative space. You’ve probably seen examples of this principle floating around in memes on social media, or as part of logos ( the FedEx logo already mentioned).
Your brain will distinguish between the objects it considers to be in the foreground of an image (the figure, or focal point) and the background (the area on which the figures rest). Where things get interesting is when the foreground and background actually contain two distinct images, this:
Some people will immediately see the tree and birds when viewing the logo for the Pittsburgh Zoo & PPG Aquarium, while others will see the gorilla and lion staring at each other.
Another great example of the figure/ground gestalt principle.
A simpler example can be seen with this image, of two faces creating a candlestick or vase between them:
In this famous illusion developed by Danish psychologist Edgar Rubin, the viewer is usually presented with two shape interpretations—two faces or a vase. It’s another excellent example of the figure/ground principle.
In general terms, your brain will interpret the larger area of an image as the ground and the smaller as the figure. As shown in the image above, though, you can see that lighter and darker colors can influence what is viewed as the figure and what is viewed as the ground.
The figure/ground principle can be very handy when product designers want to highlight a focal point, particularly when it is active or in use—for example, when a modal window pops up and the rest of the site fades into the background, or when a search bar is clicked on and the contrast is increased between it and the rest of the site.
Symmetry and Order
The law of symmetry and order is also known as prägnanz, the German word for “good figure.” What this principle says is that your brain will perceive ambiguous shapes in as simple a manner as possible. For example, a monochrome version of the Olympic logo is seen as a series of overlapping circles rather than a collection of curved lines.
Here’s another good example of the gestalt design principle “prägnanz”:
Your brain will interpret the image on the left as a rectangle, circle, and triangle, even when the outlines of each are incomplete because those are simpler shapes than the overall image.
While common fate was not originally included in gestalt theory, it has since been added. In UX design, its usefulness can’t be overlooked. This principle states that people will group together things that point to or are moving in the same direction.
In nature, we see this in things flocks of birds or schools of fish. They are made up of a bunch of individual elements, but because they move seemingly as one, our brains group them together and consider them a single stimulus.
A flock of birds is viewed as a single unit when flying in the same direction and thereby sharing a common fate. (by Martin Adams on Unsplash)
This is very useful in UX as animated effects become more prevalent in modern design. Note that elements don’t actually have to be moving in order to benefit from this principle, but they do have to give the impression of motion.
Gestalt Principles in UX Design
As with any psychological principle, learning to incorporate the visual perception principles of gestalt into your design work can greatly improve the user experience. Understanding how the human brain works and then exploiting a person’s natural tendencies creates a more seamless interaction that makes a user feel comfortable on a website, even if it’s their first visit.
Gestalt principles are relatively easy to incorporate into just about any design and can quickly elevate a design that seems haphazard or it’s fighting for a user’s attention to one that offers a seamless, natural interaction that guides users toward the action you want them to take.
Further reading on the Toptal Design Blog:
The classic principles of the gestalt theory of visual perception include similarity, continuation, closure, proximity, figure/ground, and symmetry & order (also known as prägnanz). Others, such as “common fate,” have been added in recent years.
Why is gestalt theory important?
Gestalt principles can quickly elevate a design that seems haphazard or it’s fighting for a user’s attention to one that offers a seamless, natural interaction that makes your site feel familiar while guiding users toward the action you want them to take.
What is visual hierarchy in design?
In design, visual hierarchy is the arrangement or positioning of different design elements to give them greater or lesser importance. The various gestalt principles heavily influence visual hierarchy.
What is the gestalt theory of perception?
The gestalt theory of perception attempts to explain the way the human brain interprets information about relationships and hierarchy in a design or image visual cues proximity, similarity, and closure.