F-Pattern for reading the web

When I was reading the “Don’t make me think”, I was quite interested in one of three facts it mentioned about how people read webpages. Particularly, its accompanied picture reminds me of how human eye reads a website. To make numerous information in a right visual hierarchy, UI designers are supposed to understand how human eyes process web content — “F Pattern“.

According to a research conducted by Nielsen Norman Group on eye tracking visualization, the dominant reading pattern for human eyes looks like an F.

Heatmaps from user eyetracking


Source: https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

It is consistent with the reading materials that “People scan rather than read”. And this also explains the fact that when people can not find the info they want “at the glance”, they feel frustrated and then have to waste much time to read in lines. So it is important to make the webpage self-content, obvious and self-explanatory.


After seeing those awful website, I made a little summary.

1) Do not cramming too much info in a long page. In fact, people are not willing to scroll for more information and just skip those hidden ones. And to make the web more accessible like for the mobile users, it is wise to build the web with built-in responsive design.

2) Lack of main point. Just like writing paper, every page should has one main point. If you do have a lot of information to display, do have an intuition navigation which is critical for user to find what they are looking for.

3) Colors are important. Not too many and have right color combinations.


(Besides, I found endless “rules” online talking about how to make an exceptional web page. 🙂


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s