Website Layout Suggestions Part1: F-Shape

According to a research done by Nielsen group in 2006, readers focus hard at the top left corner, and progressively less to the right and down the page. This means that you’ve got a relatively small piece of your total real-estate to both get your readers hooked on your content and to teach them how to use your site.

Figure1: Heat Map for F-shape pattern illustration

From above illustration we can infer that:

1. Visitors start at the top left of the page. 
2. Then they scan the top of the site (navigation, subscription, search, etc.) 
3. Next they move down, reading the next full row of content… all the way to the sidebar. 
4. Last, surfers enter a “scanning pattern” once they hit the bulk of the site content. 

Figure 2: Illustration of Eye Movement 

Marketing Lessons:

1. If you need to say something, you absolutely must say it at the top. 
2. Images and Headlines are only reliable if they are interesting and engaging. 
3. Sidebar could be an advertisement, a listing of “related articles”, a Social Media widget, etc. 
4. Use Sidebar as a tool for users to find specific content. The obvious example is a search bar, but it would also be a category listing, a tag cloud, a “popular posts” widget, etc. 

2.

3.

4.

Example of F-shape Layout:

Figure 3: Home Page of www.alibaba.com

This type of layout is generally useful for the websites in which content spreads vertically.These type of websites are mostly heavy content websites like portals,auction websites,forums,blogs and deal websites.