The ElementsLocal Blog

Numerous research groups have conducted studies to determine how people read online (and print) content. Eye tracking research tests the theories and assumptions about this consumer behavior and can help us build a better website and guide better designs.

Although the test methodology may differ, researchers have collected and analyzed data regarding how different aspects of a web page are viewed (headlines, subhead/tag lines, ads, photos and other graphics); how people navigate a website; how long the readers stay with an article and how much of the content they read and content placement may affect any of this. Some research even tests reader retention.

Generally, eye trackers use fancy eye tracking equipment that records the users’ eye movements on a page. The results typically show red/orange/yellow spots where the reader’s eye stops or lingers; green/blue indicate areas that the reader finds less important or interesting, or, in some studies, the areas a reader does not even look at. Some tests also record where the reader clicks on their mouse and how far down the page the participant read or scrolled before bouncing away somewhere else.

Left, Right, Left

Reading in our Western culture flows top left corner to right and has a great influence in these studies. Not surprisingly, the upper left corner of the page (print or web) seems to be the overwhelming favorite gateway to websites. The upper left side of the page was strengthened when strong headlines and company logos (flags) were incorporated into the design of the page. Larger sized headlines obviously being more noticeable than smaller headlines.

Top, Right or Left

After starting in the top left corner of the web page, users’ eyes then moved left to right so logically, users focused on main navigation bars or other navigational elements that were placed at the top of the page. In some studies, main nav elements in the right hand column got more attention than those in the left hand column. The argument for a right side secondary nav is that the scroll bars are usually on the right side of the browser window. By putting the navigational elements on the right side, you increase your users’ efficiency on your website.

The argument for a left hand secondary nav is that the users’ eye always traveled back to the left side of the page (Western reading), so using the left column for this navigation would seem appropriate. The majority of websites are designed with left hand navigation and users’ are comfortable finding it in this area – force of habit. Forcing a change in this habit could force your user to have to work to figure the page out and potentially spend less time on the important content, or leave the site altogether. A good compromise is to leave the secondary navigation in the left column and include other calls-to-action items or links in the right column.

Pretty Picture or Catchy Headline?

There’s some controversy over whether people are more attracted to a photo or the web page’s headlines. After landing on a homepage, most users were attracted to content – catchy headlines – more than they were large photos. Content also guides the users’ actions on a site, so good content is critical. Users gravitated toward headlines and summaries leading into the main article as well. In most studies, they preferred content written in short paragraphs. Remember most online users scan for what they are looking for, rather than reading entire paragraphs of content.

However in some studies, users were attracted to larger and more eye-catching photos with good placement: mid-page and above the fold. Users do like content broken up with images (photos or graphics; photos were viewed more than graphics in general), whether larger or icon-sized. Since the text dictates the users actions more than images, compelling images will supplement your content well.

Ads and Folds

Ads placed in those same areas (left side of page, top of page) received a lot of attention, but that placement can cause a design challenge if you want to establish clear brand identity. Ad placement on a web page has more limits on the real estate, so it’s an extremely important exposure issue for advertisers. Users also looked at bigger ads over smaller ones and those placed near content they were interested in reading.

Content and ads placed “below the fold” or in the lower parts of the screen received some attention, but were often overlooked, especially if the user has to scroll too far down. There is some controversy over content placement in the lower right corner or lower parts of a web page, as those areas would be the logical end of the users’ eye movement. The decisions about where to place a call-to-action or an ad are: how far south on the page and above or below the fold. Best practice is usually above the fold.

F+

What we’re really looking at here is an ‘F’. The user enters your web page at the top left corner of the page (top left corner of the ‘F’) . Their eyes them move across the page to the right, comes back to the left side move down the page and then across the page to the right again….a loose ‘F’ pattern. Good web design will take advantage of this almost automatic reading behavior and place critical elements in the page’s strategic hot spots.

~ Place a captivating image or a dynamic headline in the top left area is great; combine the two and placing them together has even greater impact.
~ Use your left column for secondary navigation – it’s a natural fit for the spine of the ‘F’. And place other important navigational or calls-to-action on the right side of the page where the users’ eye naturally travel makes perfect sense.
~ Keep your most important content and eye-catching photographs above the fold helps grab users quickly.
~ Write in a way a scanner can rapidly absorb information on your home page to keep their interest. Include links or other strategies to lead users to sub pages where they can read articles in full or gather more information.

Good design. Very subjective topic even when following rules of “good” design…maybe almost too general a topic. But it’s important to examine “what is good design” and discuss some basics of design itself. By “design,” we mean elements that are brought together and constructed for a very real and specific purpose. Design affects us all daily in every interaction we have with something, even when we’re not conscious of a “design” form. From vacuum cleaners to Velcro, we consider here points that constitute good design.

Do it, and do it well.

The point of anything ‘designed’ is to serve purpose or fill a need. Well-crafted designs accomplish this goal easily. Good design bridges the end with the means with innovation and a realization of the best way to do its intended task. Take for example, the first ipod. After the fanfare died and the dust settled, we had a product that lived up to its promise, and then some. It did one thing unbelievably well — it played mp3s (not to mention was one of the first portable hard drives). But better than that, it enhanced its purpose with a couple of other critical features — an intuitive and innovative interface that was a breeze to learn and fun to use, and it utilized Firewire technology as opposed to USB which allowed faster download speeds. Good design by innovation, intuitiveness and efficiency.

Look good doing it.

Let’s face it, good design looks good. We appreciate the aesthetic. It appeals to the artist in all of us. Form and function are the Batman and Robin of good design. The ipod again is a great example. Scrolling wheel? Genius! All-white? Alluring! Curved surfaces and a backlit display? Sexy! The entire package is an exercise in ground-breaking and clever design. But what about something so commonplace and mundane as to take it for granted and even overlook it. A paper clip? Is that good design? It’s certainly easy to use. It does its intended task extremely well. It’s efficient. And hey, look at a paper clip. Nothing but curves within curves…its’ very good design indeed!

Designing for the web

This all had to relate somehow, right? What is good web design? All of the above rolled into one – good web design must absolutely meet the above criteria. A good website will illicit that ‘wow’ factor (form) and be easy-to-use (function). Moreover, a well-designed website will have attention to detail, masterfully laid out, innovative in its presentation, and if successful in its implementation, will inspire the user to perform its appointed task — be it inform, react, sell, whatever.

Design for the common man

There’s an interesting trend that’s happening for a while – society’s increased desire for well-designed, sleek, sexy, useful products. This increases the importance of good design in our daily lives. Not to say we didn’t have it before, but in the age of better, faster, smaller (and shinier) and technology’s easy access to everyone, we’ve all become a little more aware, and dare we say, artful. Product design was an afterthought in board room meetings ten years ago, but now take a look at Target stores. When we needed a trash can, we just simply needed a trash can. It didn’t have to be cool. We never even looked for “cool.” But now, anyone can buy a cool, well-designed trash can. Now if someone could just make one that would take itself out when full, that would be truly excellent design.