How eye scanning impacts visual hierarchy in UX design

Default avatar.
March 05, 2015
How eye scanning impacts visual hierarchy in UX design.
While millennia of art, from Greek vases to Italian chapels, have shaped our understanding of what beauty is, the comparatively recent technology behind eye tracking is adding a new dynamic to how we visually perceive the world. More to the point, this exciting new science is helping us better understand — and better design — websites that are both effective and aesthetic. Web design (as a visual art) follows many of the same rules as more traditional art forms. In this article we’ll briefly outline the importance of visual organization, then explain how the findings of eye tracking can improve the layout of web interfaces.

Creating visual organization

It’s no surprise that how a website looks affects its success, but it is important to pinpoint the reasons why. In his paper Communicating with Visual Hierarchy, Luke Wroblewski, author and Senior Principal of Product Design at Yahoo!, explains that the visual presentation of a web interface is essential for:

Guidance

A well-made interface can guide users from one action to the next without feeling overbearing. Regardless of what you think of their business practices, there’s no doubt that Uber is an example of an incredibly smooth yet structured website. Value propositions are at the top of the scroll, followed by a fun slider to learn about different car options, and finishing with the logical next step of finding rides in your city. uber

Communication

By matching otherwise unlike pieces of information, the a UI can form links in the user’s mind, communicating messages without saying a thing. Look at the popular design website Abduzeedo: the broad categories are at the top, featured content in the middle, and detailed categories in the footer. abduzeedo

Creating emotional impact

Don’t make the mistake of thinking your website is simply a mechanized tool. Websites have the potential to make emotional connections, and if yours don’t, your competitors’ will. In fact, people may actually be more prone to forgive your interface’s shortcomings if you produce a positive emotional response. MailChimp is a perfect example of a site with an interface that’s usable, lighthearted, and actually fun to use. mailchimp

The predictable human eye

Sometimes, it seems your eyes have minds of their own. Years of evolution have given us the instincts to spot objects and movements which we deem important, whether someone’s sexy walk across the street, or a cuddly cartoon bear advertising honey. While the relative weight we place on what’s important may vary from person to person, the one constant is the mechanisms on which they behave. On a large scale, the majority of people follow the same trends when viewing a web page. Of these trends, there are two that we’ll discuss in detail. In an article on visual principles, Alex Bigman, Design Writer for 99Designs, shows how, for cultures who read left to right, these two patterns are the most common — and most useful — when designing a web site’s layout. The first, the F-Pattern, is used mostly for text (but can be adapted for other purposes). The second, the Z-Pattern, can be used for any visual layout. We’ll explain the different pros and cons for each below.

F-Pattern

The F-Pattern is the sight trend that emerges on pages that are heavily laden with text, typically blogs, news sources, articles, etc. 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. Jakob Nielson of the Nielson Norman Group conducted a readability study based on 232 users scanning thousands of websites. From his research, he recorded what he believes are the practical implications of the F-Pattern:
  • 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.
As always, the upper-left corner is the most important, as it is where all left-to-right reading cultures start out. The user will usually read horizontally across the header, so here’s a good place for a navigation bar and/or a call-to-action. Then the user scans vertically down the left-side, until they come across content that interests them. Finally, the user ends on the right side of the page, a great place with a call-to-action or advertisement. Just don’t let the sidebar overwhelm the content. But the F-Pattern is not a template — really it’s not an exact practice, but more of a loose guide compiled from the trends of the majority of users. Keep this in mind because the F-Pattern loses its effectiveness after the top rows of the F. Kickstarter uses a card layout to show feature projects and to not become visually boring after the first 500 pixels. On the other hand, iZettle takes a more conventional approach to the F-Pattern on their homepage. However, they manage to avoid a templated look by overlaying the primary copy (“Grow your business with iZettle”) and call-to-action on a large background image. We’d consider this the bare minimum for adapting this reading pattern to your interface layout. izettle

Z-Pattern

Additionally, the Z-Pattern is the simplest and most universal pattern, popularly used on any webpage that’s based around text. The reader first scans horizontally across the top, darts down and back to the left-side, then scans horizontally again across the bottom. It’s important to understand the versatile Z-Pattern, as it addresses the core website requirements such as hierarchy, branding, and calls to action. Its beauty is in its simplicity, and an ideal layout for sites focused around a call-to-action. However, for more complex or excessive content, the Z-Pattern may be too simple. Think the Z-Pattern is right for your page? Here’s a few best practices to optimize the benefits:
  • Background — Keep the background where it belongs: in the background. You don’t want to distract your reader.
  • Point #1 — As the starting point, this is generally where you want to place your logo.
  • Point #2 — While the main call-to-action should come later, here is a good place for a secondary call-to-action, punctuating a horizontal navigation bar. (A nice graphic or image slider will help separate the top and bottom of the page, encouraging the reader to stay on the predictable path of the Z-Pattern.)
  • Point #3 This is a nice place to attract attention for other links, or alternatively to lead the user’s sight to the end goal: Point #4.
  • Point #4 — As the “finish line,” this is the perfect place for your main call-to-action.
The first thing you’ll want to do is prioritize the elements on your page for yourself so you know the most and least important ones. From there, it’s just a simple matter of allocating them to the appropriate “hot spots.” Moreover, the Z-Pattern can be repeated and extended throughout the entirety of the page. Just take a look at how Evernote zig-zags downward through calls-to-action and selling points. evernote DropBox takes a visually simpler approach to this zig-zag pattern by doing away with any background images. Instead, more functionality is built into the layout since a “Learn More” call-to-action helps to connect each section of the winding pattern as your eye makes its way down the page. This also helps informed readers click to the next relevant page without needing to read all the copy first. dropbox

Sight in foresight

Great interface design should be like an invisible hand that guides readers along at the speed of thought. The 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. Subtlety is a great advantage for any page layout, and these patterns can make the difference between suggesting something to your reader versus shoving it down their throat. Featured image, uses human eye image via Shutterstock.

Jerry Cao

Jerry Cao is a content strategist at UXPin — the wireframing and prototyping app — where he develops in-app and online content. To learn the methods, tools, and processes of UX prototyping, download the free The Guide to Prototyping.

Read Next

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…