I’ve received multiple requests as of late to design websites that are in the “F” Shape – and for good reason. According to Heatmap eye movement studies:

“…eye movements move in the shape of an F. First users read in a horizontal movement across the header. Then they read in another horizontal movement across, but this time only about two thirds of the way across and a little further down. Finally users scan down the left rail.” From idwebdesign

Valid, I would say, if the studies were not based on old web design standards and offered a variety of website layouts in the eye map study.

As you can see, the first website used in this study automatically draw the eyes into an F shape, first with a main header, then with a secondary header down the page, and finally with a left hand navigation menu. The second Google results page is more of a blob, heavy on the top left. Which frankly doesn’t tell us anything, since the Google results page is content heavy, and doesn’t offer the eyes anything specific to draw to.

If the “F-Factor” is not all true, then why does the first website in the study look like an F?

Because the elements on the page draw the eyes where they need to go. This is the most important principle used in any good design. That’s why we use large headers, contrast, different colors and white space to create ads, brochures and … websites. It is up to the designer to create whatever alphabetically pleasing design he or she chooses, so long as it draws the eyes to the most important elements on the page.

Why do I see so many websites designed like an F?

You may see, or used to see, lots of websites with this format. The websites had a long navigation menu on the left hand side and the rest of the site was content heavy. Can I be the first to say… ew? These early 2000’s style websites are mostly used in free turn-key websites or web designers who aren’t also graphic designers.

Today, backwards F shaped websites are popular, as well as websites with colorful backgrounds that separate their content with floating boxes, like this website

When designing a website, I defer to the 4 basic principles of good design. It seems to keep me out of trouble:

1. Alignment
2. Proximity
3. Contrast
4. Repetition