The concept of visual hierarchy has been applied in design since the internet was a distant fantasy, and it is just as important in modern product design as it was at the zenith of the print ad.

Visual hierarchy determines the order in which people take in and process information on a page, regardless of whether it’s digital or print. It’s a vital part of creating an optimal user experience.

Strong visual hierarchy has persisted through decades of Nike's branding.

Nike in the 1970's vs Nike today. Both benefit from a clear sense of visual hierarchy.

Put simply, a clear sense of visual hierarchy guides people toward content or actions of importance. In a print advertisement, this would be the strapline, whereas in a digital product it could be brand messaging or a primary call to action.

It’s an incredibly useful way of creating an orderly and purposeful customer experience while improving the chances of achieving a strategic outcome.

Here are a few steps UX designers can take to achieve a clear sense of visual hierarchy in digital products, and take customer experiences to the next level.

Define UX and Brand Objectives

Using a variety of methods, many product teams are already defining the UX goals for each section of their product.

Shaping the definition of UX goals by meeting the criteria for S.M.A.R.T. methodology (Specific, Measurable, Actionable, Relevant, Trackable) is one popular way of doing this. There is a good article about it here.

Equally as important are brand objectives. These reflect the overarching goals of the business, from both brand and commercial perspectives. An example of brand objectives for an automotive service landing page would be: a) establish the brand as a premium service, and b) encourage car searches.

The easiest and most effective way of documenting the UX and brand objectives of the various phases of the customer journey is to run a collaborative visual hierarchy workshop.

Using a broad-canvas collaboration tool such as Milanote, or even Sketch, lay out the prototype screens in broadly chronological order. Invite the key practitioners to an online or physical meeting, making sure there is representation from both UX and brand perspectives.

Then screen share (or plug in to a monitor), and start annotating!

Information hierarchy is an important part of UX design.

This project kicked off by outlining the goal of the workshop, then delved straight into a pre-populated annotation prepared earlier, based on a working hypothesis.

This kicks off the process of identifying the UX and brand objectives for each section of the customer experience and sets in motion a strategic workflow that can be leveraged throughout the rest of the design process.

Rank Actions and Content for Clear Visual Hierarchy

Now that the UX and brand objectives are in place, it’s time to define the appropriate visual hierarchy of each action or piece of content, and document that for reference during subsequent design work.

First of all, a taxonomy is needed. It’s best to use a 1 to 3 scale—1 being the most important, 3 being the least.

Using the broad-canvas format profiled earlier, start collaboratively annotating the prototype layout.

UI hierarchy is vital to good UX.

In this example, there is a UX objective of “I want to learn more about this brand’s service to determine whether it fits my budget, needs, and preferences.” The brand objectives are to a) establish the brand as a premium service, and b) encourage car searches.

In light of this, the brand messaging Find your ideal car from 500+ cars has been assigned a hierarchy of 1, as has the accompanying form and CTA.

Despite its importance to the overarching customer experience, the actual logo (and navigation) has been assigned a 2, as it doesn’t play as big a part in meeting the UX and brand objectives.

Supporting content is marked a 3, which may seem counter-intuitive. However, it adheres to the narrative flow that’s starting to take shape, with the brand messaging and “get started” functionality as the primary focus, then the logo and navigation to establish the premium identity and structure of the service, then the supporting content to reassure, provide context, and inspire the customer.

As designers become accustomed to taking visual hierarchy into account, it’s easy to start to appreciate the narrative possibilities it reveals, adding real depth to user interfaces and the stories they tell.

Build Visual Hierarchy Into the Design System

Now that the objectives and visual hierarchy rankings are set, the visual language that is going to bring them to life can be created. Let’s assume that there is already a design system in place (if not, this should be done first!) and that a range of UI elements have already been designed.

The first place to begin is composition—the layout of the necessary templates. Consider where highly ranked elements should appear (as described earlier, it’s not always the most expected). Multiple variations may be needed to cater for a range of scenarios. To make sure nothing is overlooked later on in the project, designers should take the time to create them now.

Later in the design process, a number of example mockups can be included in the design system document, with live symbols of UI patterns (so designers working on the project have the latest versions).

Visual hierarchy is influenced by a variety of UI factors.

The core brand messaging in this example is considered the most important content on the page, supported by the navigation bar, then contextual help and supporting services.

Once a broad idea of the composition has been established, variants of UI elements can start to be created.

Take the humble page header. In this example from a recent project for an HR consultancy, there are three variants in the design system in order to cater for the varying ranks of visual hierarchy.

Creating UX hierarchy can be a very straight-forward process.

The visual design of the page headers reflect their hierarchy, with the foremost using a combination of photography and imagery to grab the attention.

Designers can expand upon this with the building blocks of their UI. For instance, on a recent project for a popular recruitment app, depth was used to differentiate content panels — the greater the depth, the higher the visual hierarchy.

UI hierarchy can be achieved in a variety of ways.

The "money bar" overview has been designed to sit above the rest of the content (both vertically and in the 3d sense) to make it the first element users will pay attention to.

Visual hierarchy can be designed into just about every element of a brand’s visual language: composition, typography, depth, imagery, iconography, and tone of voice. The deeper the design goes, the more cohesive and focused the customer experience is going to be.

Wrap-Up

Incorporating a visual hierarchy workflow into the design process results in considerably better user experiences. It does this by giving designers a means of assigning a rank to different types of content, resulting in user interfaces that not only feel ordered and intuitive but also allow core brand objectives to be met.

Clear visual hierarchy not only boosts your UX it also sets in place a sustainable workflow that gives the design process a strategic focus—essential in a modern product design environment.

• • •

Further reading on the Toptal Design Blog:

Understanding the Basics

What are the 5 SMART goals?

The five criteria for setting SMART goals that can be used in the UX process are Specific, Measurable, Actionable, Relevant, and Trackable. Utilizing these five criteria can help UX designers plan designs that use a strong visual hierarchy to achieve brand and usability goals.

About the author

Chris Berridge, United Kingdom
member since January 1, 2017
Chris is a highly experienced brand and UX/UI designer. He brings a strategic approach to every stage of the digital design project lifecycle, including research, brand identity, prototyping/MVP, user testing, user interface design, and design system production. He's successfully led design projects for clients including Google, Spotify, Virgin, Marriott, and Adidas, as well as numerous startups. [click to continue...]
Hiring? Meet the Top 10 Freelance UX Designers for Hire in November 2018

Comments

comments powered by Disqus
Subscribe
Free email updates
Get the latest content first.
No spam. Just great articles & insights.
Free email updates
Get the latest content first.
Thank you for subscribing!
Check your inbox to confirm subscription. You'll start receiving posts after you confirm.
Trending articles
Relevant Technologies
About the author
Chris Berridge
Designer
Chris is a highly experienced brand and UX/UI designer. He brings a strategic approach to every stage of the digital design project lifecycle, including research, brand identity, prototyping/MVP, user testing, user interface design, and design system production. He's successfully led design projects for clients including Google, Spotify, Virgin, Marriott, and Adidas, as well as numerous startups.