Design has been around since the beginning of time. From the time of stone tablets to the electronic devices we use today, we have used and continue to use design to communicate our important messages. Every element in our design should help improve our user’s experience and more clearly convey that message.
In this article, we’re going to learn about Visual Hierarchy in UX Design and how we can use it to improve our products and optimize our users’ experiences.
What is visual hierarchy?
Visual Hierarchy is used to rank design elements and influence in the order you want your users to view them. By using principles like contrast, scale, balance and, more, you can help establish each element in its rightful place and help the most important elements stand out.
Why is visual hierarchy important in UX design?
Visual hierarchy can play a key role in the planning of your information architecture to help your users navigate through your product easier. This can drastically reduce the amount of effort needed to engage with your product. UX design is all about removing friction and enhancing usability for a product, and paying attention to visual hierarchy is a key way to do this.
Let’s take a look at some of these principles and how they work to help influence the navigation of your content.
Using size and scale to pull focus
Sizing is a very basic but crucial principle that can give elements more importance than others and help draw the viewer’s eye towards a certain area. By increasing the scale of an element, you can immediately attract the viewer’s attention. You want to be careful, however, not to enlarge too many elements or increase the size in a way that might decrease the importance of other elements on the screen.
Notice in the example illustration above where your eye is drawn and how your perspective changes as the objects resize.
Simply Chocolate, pictured below, is a great example of how to use size and scale to emphasize visual hierarchy. The first thing you’re drawn to in the design is the huge text that explains what the product is all about. This is done in a way that doesn’t detract from the other elements on the screen.
Using color and contrast to make objects stand out
Colors can be used similarly to size and weight to give importance to elements in your design. Brighter colors are typically going to grab the viewer’s attention much more than dull, non-saturated colors.
Similarly, colors with higher contrast are going to appear heavier and closer to the viewer, giving them more sense of importance. In the example below, you can see that brighter colors look closer when they’re on a darker background and further away when they’re on a lighter background.
Using one bright color as a focal point can help draw attention, no matter where you place that element in the order of your design.
In the example below, as well as with most website navigation, you will notice a primary high contrasting color on buttons that serve as the most crucial call to actions. By helping users understand where you want them to go, you can give them a more pleasant experience and increase conversions in your desired flow.
Playing with perspective
Most interfaces, such as websites and apps, are designed to be two dimensional and can often appear flat. By playing with perspective, you can create an illusion of distance and separation in your elements to help bring focus to the areas that are important in your designs.
A few ways you can give the illusion of perspective is by increasing the size of elements in relation to those around it; this will make those elements appear closer to you. Adding a parallax motion effect to your elements to move slower or faster than those around it, adding drop shadows, or adding a blur over a background or foreground layer can also have a dramatic effect.
Take a look at the example below, on the left. All the elements appear flat with no depth. Text is hard to read as the contrast competes with the background, and there are no shadow effects helping the text lift off the image.
In the right image above, on the other hand, a blur has been added to the background image and a shadow has been added to the text. This helps give these elements some distance and makes things much easier to visualize.
In this next example below, there are multiple image layers that are set to scroll at different speeds providing a parallax website effect to give viewers a better sense of perspective and depth.
The importance of viewing patterns
Did you know that each person has a subconscious viewing pattern that they typically use to scan content? This pattern may be different for each person and might change slightly depending on the type of content they’re viewing, but arguably the two most popular viewing patterns people use are the Z pattern and the F pattern.
Both viewing patterns serve a unique purpose based on the type of content you’re designing. Designing your content to flow with these patterns will help viewers have a much better experience. Let’s take a look at these two patterns in more detail.
The Z pattern
The Z pattern follows a path from top-left to top-right, then down to the lower left, and across to the lower right.
This pattern is best used for content that is not text or content heavy. Designing your content to flow with this pattern will help your readers scan through each element quickly and get a sense of where you place the importance of each element.
On Apple’s website, as you’ll see below the Mac page is designed to show multiple Mac options at the top, scanning horizontally and then placing a tagline along the diagonal direction. It then finishes off with a call to action for their product. All information is laid out very clearly, in a path that most people are already subconsciously drawn to use.
The F pattern
The F pattern for viewing is more prominently used on text-heavy pages such as articles and blog posts. In this pattern, viewers usually scan sites from the top left to the top right, then down to the next line from left to right, and so on. This is similar to the direction most of the western world reads.
With blogs and text heavy content, such as the Verge (pictured below), a simple F pattern layout helps readers scan images and headlines.
When designing your content to flow with this pattern, it’s important to keep in mind that although your viewers may scan the full width of the first few lines, as they move further down and across, they will typically only scan the left portion of each row as they move fast to find something that catches their attention.
Harnessing typefaces
The right pairing of typefaces can give your website its own personality and call attention to certain areas. Typefaces with different sizes and weights can also be used to increase hierarchy and make more important text elements stand out.
Most websites are designed to make use of different size headings as well to give importance or call out the content associated with them. It’s good practice to use a heading 1 (H1) as the largest and most important headline of a page, and use heading 2 (H2), 3 (H3), and so on to call out less important areas. This also helps readers scan through pages of text to land on the exact area that interests them.
Slack’s website is a great example of a site that uses headings to give content an order of importance. In the banner section, they have the largest header with additional information and some calls to action that make this area feel the most important. Below the banner, there are many sections with smaller headers to introduce more features.
In addition to font size, you can also use different font weights to make fonts of the same size appear heavier or lighter. You can also balance larger fonts that have a lighter weight with smaller fonts that have a heavier weight so they’re perceived with similar importance.
In the example below, we have three different font sizes; however, notice how the bottom font size catches more of your attention, even though the top font is the largest. This is because the font below appears to be heavier with more contrast.
Using spacing to direct the user
As you first start working on your designs as a blank canvas, you might be thinking of all the ways you utilize the space to fit as many elements as possible; but, keep in mind, the space you leave blank is just as important as the space you use.
Whitespace is a term used to describe the negative spacing between elements in a design. It can be used to group elements together or separate them to give them greater importance.
On quip’s website below, you’ll notice the spacing around the text on the left and all other elements around it. This use of whitespace groups the text and call to action together while still providing nice spatial balance to the overall design.
Texture and tone can direct attention
You can use texture and tone to direct the viewer’s attention, even if some elements might be smaller or lower than other elements on the screen.
In the first example below you’ll notice the title text first; but in example 2, when we change the tone of the text below, the two lines of text appear more balanced. In the last example, the scribble in the background conflicts with the title, making it hard to read or recognize. This makes the text below stand out much more prominently.
Balance and symmetry in visual hierarchy
Elements that appear symmetrically on a page can help provide balance to a design, keeping things simple, organized, and easy to follow.
Pictured below, Avioc utilizes symmetry on its homepage to bring focus to their key strengths while offering a broader summary on each side of the image. The focal point is directly in the center, yet it’s still easy to glance around the page to find more information without feeling lost.
You can also use a lack of balance and symmetry in your designs to convey importance to certain elements and help your designs appear more fluid and random. In the example below, products are designed randomly on the page in a way that still feels balanced spatially even though the elements are placed randomly and there is no symmetry. The first thing that draws your attention is the arrangement of scattered products.
Alignment on screen
When you align elements along the same path, you can help them feel associated with each other, making it easier to scan the other similar content around it.
Think about the tables you see in many apps and websites. When you align the content in each column, there is really no need to have column borders because your eye associates this column by the alignment of the data.
This can also be seen on many websites with a navigation bar. Because the logo and all page links are aligned horizontally, you immediately associate this as the nav bar and are familiar with the relationship of each page link and call to action.
Image credit Partha Sarathy Aila.Proximity of elements
Placing elements closer together can give the reader the perception that they are related, which will give them incentive to read on or engage further.
In the below example, before the elements move closer to each other, it is difficult for your eyes to easily scan the content. When you read the title, because the summary text isn’t directly below, you might not be as inclined to follow along; when we rearrange these elements, scanning the content is much easier increasing the chances of higher engagement from the viewer.
Rules to arrange layout
By using guides and grids to layout your design, you keep all elements clean and aligned, helping the viewer follow a simple pattern that doesn’t disrupt the experience. Their eyes know where to follow and each group of elements can be closely associated due to their alignment and grouping along these guides.
Formulas like the golden ratio, attempt to accomplish this; but you can also break important elements away from these established rules to increase their visual hierarchy. This can also help your designs feel more dynamic and fun.
In the example below, the website concept uses a grid to lay out elements for a clean look, but to give more attention to the Mercedez, the image ignores this grid layout, which creates a pop-out effect that feels independent from the rest.
Effective use of motion
Remember the days when the world wide web was still new and every popup or callout had to blink or bounce to try to get your attention? This practice did work to get our attention but, in the process, it sacrificed a pleasing experience and just came across as annoying to viewers, which did not help with engagement.
Nowadays, we can use these same principles of motion in more subtle ways to call attention or give importance to certain areas. Again, we can use simply chocolate as an example of how they incorporate subtle motion to draw your attention and give hints that compel you to engage with the design.
As you scroll through the flavor choices, colors change to match the product. When you hover over the wrapper, it opens just a sliver to reveal the chocolate inside, giving you the impression that you can tear this open to learn more.
The best ways to incorporate these visual hierarchy principles into your UX designs
We’ve gone over many different principles and examples of visual hierarchy for UX design. They might all make sense now, but could be more confusing when it comes time to put them into practice and figure out a way to balance all these principles in one design.
Here’s a bit of advice to help you out. Visual hierarchy is used to help place importance on certain elements of your design, but the more elements you deem the “most important,” the harder it’s going to be to perfect your design. Start simple and focus on that one thing of biggest importance that’s going to help drive your design towards success.
One of the biggest struggles of visual hierarchy is when everything is deemed of “utmost importance” by stakeholders. Have you ever had a client or team member try to explain how important every element is? Their comments might go something like this:
“We need the title to be bigger so that’s the first thing they see.”
“Let’s bold some of these items so they stand out above the others.”
“Can we rotate this text and make it caps so it draws attention to the reader?”
“What if we used orange in the background to make it pop?”
The example below tries to incorporate dozens of these principles to meet the request and give importance to everything. This makes for a distracting design with no clear headline and dozens of font sizes and typefaces, causing a very messy look.
In this scenario, you could take a step back and ask yourself what the goal is of this design. Who is your target and how do you plan your information architecture to drive that single most important engagement? By answering these questions, you start on the right track to using these principles effectively in your UX design journey.