4 Words: Closure, Good Continuation, Law Of Prägnanz, Proximity
The principle of closure states that whenever possible, people tend to perceive a set of individual elements as a single, recognizable pattern, rather than multiple, individual elements. The tendency to perceive a single pattern is so strong that people will close gaps and fill in missing information to complete the pattern if necessary.
When simple, recognizable patterns are not easily perceived, designers can create closure through transitional elements (Le., subtle visual cues that help direct the eye to find the pattern).
Closure can be used to make us perceive objects or patterns using the smallest amount of information. Our minds are so eager to fill in the missing information that it can be done with very few elements. Use closure to reduce the complexity and increase the interestingness of designs.
Creating Effective Closure:
- Positive and negative space
This can be achieved by looking for the hidden forms in the negative space of a design or within type. Additionally, removing elements from the foreground can create interesting negative shapes, and in doing so, simplify a design.
Create a strong contrast between the foreground elements and background. As always, black-and-white creates the best contrast, but you can also experiment with complementary colors for strong contrast as well.
Color not only adds life to a design, it also can be used to reinforce relationships, especially if using abstract shapes to represent forms.
It asserts that aligned elements are perceived as a single group or chunk, and are interpreted as being more related than unaligned elements.
Our mind chooses the path of least resistance, perceiving lines as continuing along their established direction. The ability to accurately perceive objects depends largely on the perceptibility of tile corners and sharp curves that make up their shape. When sections of a line or shape are hidden from view, good continuation leads the eye to continue along the visible segments.
Create Effective Continuation
- Avoid disruption, or use it to your advantage.
To encourage movement, avoid elements in your design that might disrupt the established direction of movements, such as too much white space between elements or large graphics or images. Conversely, you can use disruption to focus attention on an important element or to signify the beginning or end of a section or grouping.
- Ensure good alignment and consistency between elements.
Make sure that the elements establishing direction are aligned well and consistently styled. Poorly aligned or inconsistently styled elements will either undermine the direction of movement or cause the eye to lose the established direction.
- Use cues to suggest direction.
For horizontal scrolling, such as we saw in the App Store, indicating that there is more to see to the left or right to help establish the direction of movement.
- Avoid disruption, or use it to your advantage.
This linear arrangement of the rows and columns of these various apps makes the app icons seem more related than other elements on the screen, such as the time display, the battery indicator. Continuation can be used to imply a direction to follow when space is limited. Play this short video to see it in action.
Law Of Prägnanz:
It asserts that when people are presented with a set of ambiguous elements (elements that can be interpreted in different ways), they interpret the elements in the simplest way. Here, “simplest” refers to arrangements having fewer rather than more elements, having symmetrical rather than asymmetrical compositions.
Therefore, minimize the number of elements in a design. Note that symmetrical compositions are perceived as simpler and more stable than asymmetrical compositions, but symmetrical compositions are also perceived to be less interesting. Favor symmetrical compositions when the efficiency of use is the priority, and asymmetrical compositions when interestingness is the priority.
It asserts that elements close together are perceived as a single group or chunk, and are interpreted as being more related than elements that are farther apart.
The grouping resulting from proximity reduces the complexity of designs and reinforces the relatedness of the elements. Conversely, a lack of proximity results in the perception of multiple, disparate chunks, and reinforces differences among elements.
Proximity is one of the most powerful means of indicating relatedness in a design.
White space guides the user’s eyes in the intended direction, creates contrast and makes a lasting impression.
The card above is a good design example which makes great use of proximity as the information is all related. Take note how the studio name and its descriptive text are grouped together, which makes perfect sense as these three lines all have a connection to each other — the name of the business and what the business does. Now look at the second paragraph — this contains all the contact information about the business.
Creating Visual Hierarchy
Hierarchy is conveyed by the way in which elements are grouped and sub-grouped. For example, a grid-based layout, with appropriate gutter sizes, allows for plenty of room between sections, and in many cases, it forces the designer to implement principles of proximity without even thinking about it.