Hot on HuffPost Tech:

See More Stories
Free Switched iPhone app - try it now!
AOL Tech

What eye movement teaches us about web design

Google Heat MapVirtual Hosting has an excellent article up detailing 23 actionable web design lessons that we can learn from eye-tracking studies. Most of the items are common sense: people scan web pages rather than read them, people look at the top left corner of the page first, people ignore banner ads, people ignore fancy formating that looks like ads, etc. But why do people interact with pages in this manner?

The answer should be obvious: web designers have trained visitors to use their sites in a certain way. Yahoo, Google, AOL, and MSN all format their sites according to the above listed guidelines. Because of this, people expect site names and logos to be a the top left. They expect banner shaped images to be banners and therefore ignorable. They expect sites to look, feel, and function a certain way and they are very frustrated when they don't.

In a way it is like news papers. People expect news papers to look and function a certain way no matter what city or country they are in. Its perpetually reinforcing as each site that follows this standard pattern (which is not a bad pattern by any means) causes more users to expect the next site they visit to look the same. It is good because it promotes usability but bad because it limits creativity and new design patterns. People have to innovative inside a very small box.

Tags: design tips, DesignTips, eye movement, EyeMovement, howtos, web design, WebDesign

Comments

3

Add your comments

Please keep your comments relevant to this blog entry. Email addresses are never displayed, but they are required to confirm your comments.

When you enter your name and email address, you'll be sent a link to confirm your comment, and a password. To leave another comment, just use that password.

To create a live link, simply type the URL (including http://) or email address and we will make it a live link for you. You can put up to 3 URLs in your comments. Line breaks and paragraphs are automatically converted — no need to use <p> or <br /> tags.