To the front pageThe Interaction Designer's Coffee Break - Weekly postings and quarterly articles about interaction design  
  To the front pageSign inTo the frontpageSearch in GUUUI postingsAbout GUUUI  




Do we read web pages in an F-shaped pattern?

SURL has done an eyetracking study to investigate whether users follow the F-shaped pattern suggested by Jakob Nielsen when reading and scanning web pages.

Findings from the study:

- When reading or scanning text, users appear to follow by the F-pattern
- When scanning a page with a grid of product pictures, the F-pattern doesn't seem to hold true
- On the product picture pages, the area above the fold received significant more attention than the area below

The authors suggest that we should structure web pages so that important content falls in the F-pattern and that important or featured products on picture pages should be positioned above the fold.


  • Eye Gaze Patterns while Searching vs. Browsing a Website Open link in new window

Henrik Olsen - January 30, 2007

Permanent link Comments (1)

See also: Research (130)  Web page design (41) 



Label placement in forms

Matteo Penzo has conducted an eyetracking study to evaluate the best solutions for label placement in forms. A number of suggested guidelines arose from their test results:

- Place labels above input fields so that users aren't forced to look separately at the label and the input field
- Be careful to visually separate labels from the previous input field
- If you choose to place labels to the left of input fields, make them right-aligned
- Don't use bold labels - they are a bit more difficult for users to read than plain text
- Use drop-down list with care since they are very eye-catching


  • The article Label Placement in Forms Open link in new window

Henrik Olsen - November 12, 2006

Permanent link Comments (1)

See also: Research (130)  Forms (30)  Tips and guidelines (95) 



Is eyetracking worth the expense?

Jared Spool agrees that eyetracking is fun to watch and can demonstrate that users don't view content in a structured way. But he questions its diagnostic value and hence its ability to tell us how to improve our designs.

He points out a number of drawbacks:
- The equipment is expensive
- Some users can't work with the equipment (for example if they wear contact lenses or have long eye lashes)
- Calibrating the equipment takes time away from actual testing
- The results are hard to analyze, since you don't know if people gaze at something because they want to, because the design made them, or because they are just resting their eyes there.

Jared is not convinced that there is a useful place in the research process that "is worth all the hassle and expsese."


  • Eyetracking: Worth The Expense? Open link in new window

Henrik Olsen - June 27, 2006 - via Column Two

Permanent link Comments (0)



Squidoo eyetracked

Seth Godin has published a video of an eyetracking study where you can see how users explore

"The biggest lesson wasn't news to me, but it might be to your boss: your prospects are not rational and organized and linear. You can't count on them sitting still and hearing your story from beginning to end. They won't."

"The answer is not to try to change human nature. It's to embrace the hunting skills that people are bringing online (and to their daily offline media consumption) and to make your media match their needs."


  • The blog post What I learned from eye tracking Open link in new window

Henrik Olsen - May 30, 2006

Permanent link Comments (0)

See also: Cases and Examples (28)  Audio and video (48) 



Five eyetracking cases

Etre has published five examples from an eyetracking study of five UK web-sites, including:


Each example is commented with analysis of how the users explored the sites' homepages and how the layout of homepages performed.


  • Five days / five heatmaps Open link in new window

Henrik Olsen - May 17, 2006

Permanent link Comments (0)

See also: Cases and Examples (28) 



Video introducing eyetracking

Here's a short video showing how an eye-tracking session is conducted. It also demonstrates how a study is documented with session images showing the path that users' eyes take when looking at a page, and heatmaps highlighting the area that users pay most attention to.


  • Video introducing eyetracking Open link in new window

Henrik Olsen - April 25, 2006 - via Seth's Blog

Permanent link Comments (1)



People scan content in an F-shaped pattern

In an eyetracking study, Jakob Nielsen found that users often scan content on web pages in an F-shaped pattern:
- First, people scan in a horizontal movement across the upper part of the content area
- Secondly, in a shorter horizontal movement further down the page
- Finally, in a vertical movement along the content's left side

According to Jakob Nielsen the F-pattern behaviour shows that:
- People don't read text thoroughly
- The most important information should be at the top
- Headings and paragraphs must start with information-carrying words that users will notice when they scan down the left side of the content


  • F-Shaped Pattern For Reading Web Content Open link in new window

Henrik Olsen - April 19, 2006

Permanent link Comments (2)

See also: Research (130)  Text (24) 



Introduction to eyetracking

"The eye is the mirror of the soul, and the soul is the mirror of our thoughts." In his introduction to eye-tracking, Matteo Penzo explains how eyetracking works, what the outputs are, and how eye-tracking can introduce quantitative measurement to standard usability evaluation techniques.


  • Introduction to Eyetracking: Seeing Through Your Users' Eyes Open link in new window

Henrik Olsen - January 15, 2006

Permanent link Comments (0)

See also: Primers (14) 



Eyetracking as a supplement to traditional usability tests

SURL have studied how eyetracking can be used to supplement traditional usability tests. They found that eyetracking data can be used to better understand how users search the interface for a target and what areas of a page are eye-catching, informative, frequently ignored and distracting.

The study is based on a test of three toy e-commerce sites, which is described in detail in the article.


  • The article Hotspots and Hyperlinks: Using Eye-tracking to Supplement Usability Testing Open link in new window

Henrik Olsen - August 02, 2005

Permanent link Comments (0)

See also: Research (130)  Web page design (41)  Usability testing (71) 



How to use eyetracking for website redesigns

This case study by Eyetools demonstrates how eyetracking analysis can be used for guiding a redesign of a website. The before and after heat maps reveal significant improvements to users attention to content and navigation on a home page.


Henrik Olsen - March 24, 2005

Permanent link Comments (0)

See also: Cases and Examples (28) 

<< Back | More posts >>

Browse GUUUI postings

Methods and the design process

Prototyping and wireframing (120)  Usability testing (71)  Cost-justification and ROI (28)  User research (24)  Personas (19)  The design process (24)  Eye-tracking (14)  Card sorting (13)  Web traffic analysis (12)  Expert reviews (11)  Implementing user-centred design (9)  Site and flow diagramming (6)  Envisionments (4)  Use Cases (3) 

Design elements

Navigation (63)  Web page design (41)  Search (27)  Text (24)  Forms (30)  Links (19)  Guidelines and Standards (15)  Site design (14)  Ads (9)  Design patterns (8)  Sections (8)  Shopping Carts (9)  Error handling (7)  Home pages (9)  Help (3)  E-mails (3)  Sitemaps (2)  Personalization (1)  Print-friendly (1)  Landing pages (5) 

General aspects

E-commerce (28)  Persuasive design (23)  Visual design (20)  Information architecture (15)  Accessibility (13)  Search engines (7)  Credibility, Trust and Privacy (6)  Emotional design (10)  Simplicity vs. capability (7)  Web applications (6)  Intranets (3) 


Flash (6)  Download time (5)  Javascript (3)  URLs (3)  Browsers (3)  Web standards (2) 


Bad designs (20)  Cartoons (14)  Fun music and videos (13)  Funny tools and games (12)  Misc humor (8)  Fun with Jakob Nielsen (9)  Designs with humor (3)  Fun posters (5)  Funny 404 pages (2) 

Resource types

Research (130)  Tips and guidelines (95)  Tools (106)  Books (47)  Audio and video (48)  Interviews (30)  Cases and Examples (28)  Talks and presentations (18)  GUUUI articles (11)  Primers (14)  Online books (5)  Posters (5)  Glossaries (3)  People and organisations (3) 

Information sources

Blogs (12)  Websites (11)  Discussion lists (4)  News (3)  Newsletters (3)  Online magazines (3)  Wikis (1) 

  To the front pageSign inTo the frontpageSearch in GUUUI postingsAbout GUUUI