Visual hierarchy

Share This Post

What is Visual Hierarchy?

Visual hierarchy is the principle of arranging elements to show their order of importance. Designers structure visual characteristics—e.g., menu icons—so users can understand information easily. By laying out elements logically and strategically, designers influence users’ perceptions and guide them to desired actions.

“Visual hierarchy controls the delivery of the experience. If you have a hard time figuring out where to look on a page, it’s more than likely that its layout is missing a clear visual hierarchy.”

Building Blocks of Visual Hierarchy

Hierarchy is a visual design principle which designers use to show the importance of each page/screen’s contents by manipulating these characteristics:

  • Size – Users notice larger elements more easily.
  • Color – Bright colors typically attract more attention than muted ones.
  • Contrast – Dramatically contrasted colors are more eye-catching.
  • Alignment – Out-of-alignment elements stand out over aligned ones.
  • Repetition – Repeating styles can suggest content is related.
  • Proximity – Closely placed elements seem related.
  • Whitespace – More space around elements draws the eye towards them.
  • Texture and Style – Richer textures stand out over flat ones.

 

In user interface (UI) design, an effective visual hierarchy helps inform, impress and persuade users, who have expectations – especially about an interface’s appearance. So, for a website, app or related product to succeed, it’s crucial to structure its pages or screens to minimize users’ uncertainty, show maximum empathy with them and give them something pleasant to view.

Author/Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and license: CC BY-NC-SA 3.0

Font size and style is one way to establish hierarchy.

How to Craft a Strong Visual Hierarchy

A strong visual hierarchy leads users to a page/screen’s functionality and gives them the right visual cues. You’ll need user research to learn about your users, but here are some general facts:

  • When encountering an interface, users react extremely fast (in milliseconds), developing gut feelings about whether to stay or leave.
  • Users’ eyes follow predictable reading paths, which are culturally influenced. Left-to-right-reading Western users use an F- and a Z-pattern. So, you can design a hierarchy either to:
  • Reinforce these natural patterns and lead users along a cleverly constructed path to a desired goal; or
  • Break these patterns to highlight a focal point for users.
  • Users prefer recognition over recall – hence why it’s essential they can scan instead of having to work at reading and remembering things.

 

Considering these, you can help envision how to show users the most important things as they try to achieve goals in their individual contexts. Then, you can choose and scale elements to make the most important information prominent—and unmissable—for users as they go from task to task. These points are especially valuable:

  • The Gestalt principles – These cater to the human eye. Use them to help users group visual elements, notice what’s important on each page and build trust with your brand.
  • Consistency –Familiar icons, menu hierarchy, colors, etc. are vital aids for users.
  • Center stage – Use this UI design pattern to show users important things right up-front.
  • Whitespace – The key to crisp, clean minimalist designs; use it to calm users’ eyes and direct them to important foreground elements.
  • Typography – Use the best font, color and contrast to present three levels of text for desktop-accessed screens, two—skipping the middle one—for mobile:
  • Mobile UX design specifics – Users on smaller screens must be able to notice elements right away and navigate that much more easily.
  • Typography and style – Elaborate fonts are more appropriate in some industries, but ornate text and special effects (e.g., embossed, washed-out text) might distract users, and even slight distractions reduce usability.

 

  1. Primary – Use a header to attract users’ attention with the page/screen’s core information, like a newspaper headline. The first two words of a header should let users understand the gist of the section below it.
  2. Secondary – Use (e.g.) sub-headers to help users scan and navigate through content.
  3. Tertiary – The body, smaller but still highly readable.

Design guidelines suggest a ratio of 3:1 for headers to body text size.

 

Our ‘About’ page exemplifies good visual hierarchy, including whitespace use.

Things to Watch regarding Visual Hierarchy

Here are some key considerations for optimizing your visual hierarchy for users:

  • Mobile UX design specifics – Users on smaller screens must be able to notice elements right away and navigate that much more easily.
  • Typography and style – Elaborate fonts are more appropriate in some industries, but ornate text and special effects (e.g., embossed, washed-out text) might distract users, and even slight distractions reduce usability.
  • Understand users’ priorities – You want to guide users with a sense of ranked information – so, it’s self-defeating to emphasize everything on a screen. Simultaneously, it’s vital that you know which elements users need to appreciate as being equally important (e.g., dials on some dashboards).
  • Remember the purpose –of each page/screen’s problem-solving function throughout the users’ interaction. For example, customer journey maps are particularly helpful to keep sight of what’s important and when. As you determine the order of importance per screen, you’ll likely notice some superfluous elements which you can leave out.

 

Overall, remember your design’s visual hierarchy is the structure for arranging well-chosen elements that must look and work best together – so users can enjoy seamless experiences and forget they’re using an interface as a medium.

On Experience Dynamics’ easy-on-the-eye webpage, the circled images are given equal importance in size.

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore

Do You Want To Boost Your Business?

drop us a line and keep in touch