There’s been a lot said about web page layout. The importance of placement, and whether copy and images should be above or below the fold. However, one critical key to understanding effective webpage layout is knowing how the eyes of English speaking people flow across a page. Understanding how eyes track websites. There has been more than one study on how eyes track websites, for example, F shaped pattern reading content, but today I’m focusing on the oldest study on how eyes view a page.

The Gutenberg Rule

Readers of western romantic languages read from left to right, top to bottom. With this in mind, a page can be divided into four equal quadrants top left and right and bottom left and right. Understanding how the eye tracks across these quadrants will help a web designer successfully capture visitor’s attention.

“The Gutenberg Rule is one of the fundamental cannons of page construction. Introduced by Johannes Gutenberg, a 15th century goldsmith and printer, he developed this rule of thumb after observing how readers interact with content on a page. He discovered that it was common for readers to quickly scan the contents of a page from top left to bottom right to decide if the content was relevant or useful for their purpose.” – g1d The Gutenberg Rule

How Eyes Track Websites by Quadrant

Top Left – Primary Optical. This is where the eye begins its search of any page regardless whether the page is in a book or on a computer screen. It’s important to capture visitor’s attention in the primary quadrant. When designing the layout consider what will grab the reader’s eyes. What is the visitor searching for? What do they expect to find?

Top Right – Strong Fallow. This should be a smooth continuation from the primary quadrant. Positioning a call to action in here, such as contact us, could lead to losing contact—eyes breaking away from the page.

Bottom Left – Weak Fallow. Readers have a tendency to quickly scan or skip over content in this quadrant. So avoid placing critical information here.

Bottom Right – Terminal. This is a natural place for the eye to take a break, so it’s imperative that the layout includes an action here—inform or direct visitors, and lead them to other pages or additional actions.

The Eyes Have it

When designing a webpage consideration should be given to how the information will be taken in. Good ole Johannes Gutenberg had the right idea more than ½ of a millennium ago. Start top left, lead the eyes across the page, and close it out in the bottom right quadrant.

If you’d like to learn more, Contact Us. Our toll-free number’s in the bottom right quadrant.

Photo Credit: Unsplash Photos Photo by Alexandru Zdrobău