Hierarchy
Hierarchy is the organization or presentation of elements in a way that suggests importance. The arrangement and emphasis of visible elements influence the order in which the human eye perceives what it is seeing. This order of dominance is created by the visual contrast between objects and the principles of Gestalt philosophy.
Establishing a focal point
An important function of hierarchy is to establish a point of focus by giving your customers an entrance point to begin navigating your product and leading them to the critical and pertinent information. Before addressing the hierarchy of visual elements, understanding the importance of your content is key. You cannot start prioritizing the appearance of any elements until you understand what is the most important to your customers.
Creating hierarchy through contrast and scanning patterns
Contrast is the difference between two things to the point that attention is drawn to the difference. Contrast can be created with color, typography, spacing, shapes, and more. These basic principles are used to organize and prioritize your content.
The prominence of some elements over others is an effective way to guide your audience through a story. For example, the title of a blog post gives context as to what the reader is going to get out of the body text. And to an extent, that title is there to convince the reader to read the post, continue down the page, and even continue reading to another post or page. The title, or heading, is often at the top of the visual and information hierarchy of most pages online. This is the typographic hierarchy of text elements, a fundamental organization of information on the internet.
The heading, subheading, and body text of almost every text-based web page is organized this way and is used to help tell the story of the page. The heading, or H1, is the most prominent object in the image below. Followed by the subhead, or H2, and then the body text. The heading and subheading are there to provide context for what the viewer is about to read. By giving it visual dominance, an entry point for the eyes is created, followed by a clear path for the reader to travel.
By separating the different elements visually, it is easier for your readers to see the individual parts and move through them in a specific order — an order of your choice.
But creating a linear route is not the only option here. You can use contrasting elements to move the viewer's eye around a screen in many directions and patterns. Some commonly used conventions are "F" and "Z" scanning patterns, named after the shape created if the viewer’s path across a page where drawn as an overlay on a design.
“F” or “E” patterns are generally used for forms and dashboards, or text-dense pages like articles and blog posts. The previous image is from Medium’s account settings dashboard, with the scanning pattern on top of it in red.
The image below is from Slack’s homepage, which takes advantage of the “Z” pattern to place two call-to-actions, Create Workspace and Get Started, within the path that an eye may travel across this page.
Other ways to draw attention from your audience, and guide their journey through your design is to use color, size, type style, shapes, spacing, and other elements of contrast.
For example, emphasis can be created with tints of color, shown in the grid of photos below. If all but one image are black and white, then the color image demands more attention.
Gestalt principles
We've established that hierarchy is used to prioritize visual elements to organize information into recognizable patterns. Gestalt principles, or the principles of grouping, are a psychological understanding of how we as humans interpret visual information and the elements that affect those perceptions.
Our minds identify patterns in what we see and experience. Psychologists group these perceptions into five categories: Proximity, Similarity, Continuity, Closure, and Connectedness. Since the original definition and categorization of Gestalt principles, there have been additional categories identified:
Proximity is the grouping of multiple items near each other. When objects are close to one another, we believe that they are related in some way. Use more white space to separate dissimilar objects and reduce white space to link elements.
Similarity is the associating of elements based on something they have in common, such as shape, size, or color.
Past Experience is the understanding of what is in front of someone based on what that person has experienced in the past. The brain identifies patterns across time and place based on the previous exposure to the object or pattern.
Continuity is the repetition of a pattern or theme. Similar to Past Experience, but can include all new input.
Closure has a pattern with an incomplete object, that implies the pattern continues outside a composition.
Connectedness is when two or more objects are in contact, with either direct contact or connect through another object like a line.
Simplicity is our preference for objects that are simple, ordered, and clear. Complex shapes are broken down into basic components like squares, circles, and triangles to reduce complication.
Figure-ground relationships are meeting of white space and negative space to balance or unbalance a composition.
Symmetry is a mirror image or layout, where if a line was drawn down the middle, perhaps horizontally or vertically but possibly on a diagonal, the layout is the same in each direction outward from this dividing line. It often implies order and balance in a composition.
Summary
You can't emphasize everything. If everything is bold, nothing is bold. Use these elements of contrast and Gestalt selectively and with a purpose to draw attention to what is most important.
If you are unsure what element has prominence: close one eye, step back from your screen, and unfocus your vision. You can also step away from your design for a day or two to gain perspective. And one of the best ways is to show your design to another person and hear from them what elements they are drawn to first.
Further reading
- Steven Bradley's article, "Design Principles: Visual Perception And The Principles Of Gestalt" in Smashin Magazine.