Home > Blog Articles > Website Design for Viewer Eye Patterns

Website Design for Viewer Eye Patterns

November 22nd, 2010

Did-You-Know?
When planning your website deign and layout its important to consider the way a viewer visually scans a webpage.  Did you know that there are specific theories on viewer’s eye patterns when scanning a webpage?  By understanding the hot spots on your webpage it can lead you to position elements for the most effective visibility. I am aware of three such theories and will describe and illustrate each below.

Triangle Eye Pattern1. The Triangle pattern (also referred to as the Golden Triangle and the Google Triangle).  This may indeed be the hottest area and most commonly first viewed section of a webpage.  As company greetings and navigation buttons are frequently in this area it would stand to reason.  What this pattern does not consider is any additional locations a viewer scans to on the page.

Zig Zag Eye Pattern

2. The Zig Zag pattern (and Double Zig Zag pattern per illustration below). I first encountered this pattern theory in art school, presented as the way a viewer scans a painting.  Later a graphic artist went on to describing the same pattern. In a speed-reading class the theory was encountered a third time.

F Eye Pattern
3. The F pattern.
This pattern proposes that eye movement scans across the navigation area and then back on the same line.  The eye then scans down the left and again moves horizontally mid way down the page.  The F could also become an E pattern if there are elements to attract the eye upon reaching the lower left part of the F.

There are some obvious common denominators worth noting between the three patterns.

  1. The initial horizontal eye movement across the banner / navigation areas.
  2. The horizontal scans midway across the page in both the F and Zig Zag patterns.
  3. The top to bottom approach in the F and Zig Zag Patterns.

Your web designer can add sticky features and images to help encourage eye movement along the common patterns and help you layout your page for maximum effectiveness and a positive viewer experience.

jweissberg Blog Articles ,

You must be logged in to post a comment.