Creating the Right Visual Hierarchy for Your Website

Posted by Juliet Ramirez, May 11, 2017 0 comments

“Design is not just what it looks like and feels like. Design is how it works.” —Steve Jobs

While I am neither a designer nor a marketing expert, I do fall under the category of the typical hasty millennial who will often close out of a tab when I am unable to find the information I am looking for after scanning a website after a whole 10 seconds.

I guess this makes me part of the new generation that is changing the way we all consume information.

Lately, I’ve been intrigued by “viewing patterns” of people; i.e., the pattern in which people view, in this case, websites. People who stick around longer than a few seconds on your website should be able to scan through the focal points in your website design to gain the most important message(s) that you need to communicate.

The ugly truth is: over the past 15 years, our patience has decreased. Studies show that the percentage of page views that last more than 10 minutes is only 4% (source). Here’s the good news: you can structure your content into logical patterns, and the chance of the average visitor leaving your site will decrease!

So, I pose a question to you: is your website designed with visual hierarchy (and I’m not referring to the visual identity, such as imagery, color schemes, and typography) in mind? If the answer is “no,” then this blog is here to help.

Why Scanning Patterns Are Important

One of the most important “must haves” for your website is an intentional scanning pattern, or the positioning of the content on your site. A scanning pattern is effective when one of the elements on a webpage has a powerful influence on the overall order of the rest of the page, and how your visitors’ eyes sort through it. When done well, the scanning pattern leads to smarter navigation—a critical aspect of the user experience.

(And as a tech-savvy millennial living and working in a world filled with content, there’s one truth I’ve come to know: if your website doesn’t provide user-friendly navigation by way of effective pattern, another website will.)

Pattern Types: The ‘F’ Pattern and the ‘Z’ Pattern

There are two predominant pattern that help users find what they are looking for in seconds. Let’s take a look!

The ‘F’ Pattern: Best for sites where calls to action won’t overwhelm content

The F pattern works with our natural reader’s behavior. Information is placed left to right, top to bottom. The end result is something that looks like the letters F or E. CNN and The New York Times both use the F Pattern. The F Pattern is practical because:

  • Users rarely read every word; instead, they scan.
  • The first two paragraphs are the most important content and should contain your hook.
  • Paragraphs, subheads, and bullet points usually have enticing keywords.

The ‘Z’ Pattern: When simplicity is a priority

The ‘Z’ pattern is an effective pattern that is not centered on text, which is huge for many users—including myself. The most important information is placed on the top of the page, whether because of the menu bar (my favorite) or simply out of a habit of reading left-to-right from the top. When the eye reaches the end, it shoots down and left, and repeats a horizontal search on the lower part of the page. A perfect example is the National Arts Marketing Project home page. 

  • The Z pattern addresses hierarchy, branding, and calls to action.
  • Most Western readers will scan a site the same way that they would scan a book—top to bottom, left to right.
  • It provides a foundation from which you can pretty much go anywhere (i.e., quick access to sub-pages).
  • Important information is always visible and immediate CTA is clearly visible.

Juliet Ramirez is a member of Americans for the Arts.

Images source: Envato Tuts+

Please login to post comments.