visual-hierarchy-in-web-design

I’ve just read a great article on how eye scanning impacts visual hierarchy in UX Design.

Say what? Well, us humans have a predictable pattern when it comes to reviewing blocks of content. Starting at the top of the page, we naturally order things into a hierarchy/order of importance based on the points of interest we find throughout the content/block of text. You can read the article here.

So, what determines hierarchy?

Things that stand out to us, such as enticing keywords, larger fonts, standout text, you catch my drift.

With this in mind, it’s important that when designing websites and interfaces, we understand this natural pattern of reading progression, and include our most important information in all the right spots i.e. where it will be “stumbled upon”.

“All cultures read from the top down and most cultures read from left to right. Recent studies have shown that people first scan a page to get a sense of whether they are interested, before committing to read it. Scanning patterns tend to take one of two shapes, “F” and “Z,” and you can take advantage of this in your design.

F-patterns apply to traditional, text-heavy pages like articles or blog posts. A reader scans down the left side of the page, looking for interesting key words in left-aligned headings or initial topic sentences, then stopping and reading (to the right) when he or she comes to something interesting. The result looks something like an F (or E, or something with even more horizontal bars; but the “F” term has stuck).

source

Interesting stuff.

Did you know

When faced with a block of words, most readers will first scan a vertical line down the left side of the text, typically looking for keywords or points of interest in the paragraph’s initial sentences. Eventually the reader finds something they like, and begin to read normally, forming horizontal lines. The end result is something that looks like the letters F or E.

  • Users will rarely read every word of your text.
  • The first two paragraphs are the most important and should contain your hook.
  • Start paragraphs, subheads, and bullet points with enticing keywords.

– source

Follow the yellow brick road

A well-made interface can guide users from one action to the next without feeling overbearing

“Great interface design should be like an invisible hand that guides readers along at the speed of thought.he important takeaway from the F-Pattern and Z-Pattern trends is that you can place your most important content where the reader will “stumble upon” it naturally, as opposed to trying to force them to look at them.”

– source

How can we do better

Here are 6 principles in visual hierarchy,  5 pillars of visual hierarchy in Web design, and information about how eye scanning impacts visual hierarchy in UX .

We can use this information to better understand natural human reading progressions, user reading habits, and better guide our users with simple tweaks to things like size, colour and spacing.

Enjoy!
EP.