3 eye tracking studies that influenced my latest redesign

Posted July 27, 2009 by Brian Cray

Reading time: About 2 minutes

Eye tracking studies provide unique insight into user behavior. The following 3 eye tracking studies were part of my research for my redesign.

1. Web form design guidelines: an eyetracking study

An in-depth comparison of three form designs—Google mail signup, Hotmail signup, and Yahoo! Mail signup. The selection of forms are ideal because each form is long as well as unique in terms of label positioning, field grouping, and identification of required fields. Here are my major takeaways from the study:

  • Make the form fields vertical, not horizontal
  • Left-aligned labels are clearer
  • People tend to fill out all form fields regardless

Read the full first study

2. The Best of Eyetrack III: What We Saw When We Looked Through Their Eyes

This study focused on the layout of regular content and whether users scan or read. Here were my major takeaways from the study:

  • Headlines draw eyes before pictures
  • People scan the left side of everything
  • The first few words of headlines are very important
  • Single column designs produce the most eye fixations
  • Scrolling is okay
  • Introductory paragraphs get read

Read the full second study

3. F-Shaped Pattern For Reading Web Content

This is a classic eye-tracking study by a classic guru: Jakob Nielsen. If you don’t know who he is and you’re in web design, read his books or get out of the biz. Anyway, this particular eye tracking study reveals that users read content in a “F” pattern. Here are my major takeaways from the study:

  • People read the headline and the first paragraph before scanning the left side of the content
  • Headlines should start with keywords to pull the eyes from the left margin

Read the full third story

Using eye tracking studies in my redesign

Common themes arose in all of the eye tracking studies that made it impossible to ignore the strong implications of these rules:

  • Single column designs are a win. Left-side scanning played a key role in each eye tracking study. If important information is not on the left side of the page, it’s likely to get seen by few. So I made my design one column.
  • Keywords are crucial to conversion. The first few words of each headline and paragraph are likely the only things most users will see. Make them count. So I made the headlines large and scannable and in the future I’ll front-load keywords.
  • Content should be the focus of the design. Many elements play a role in the success of a design, but your content is what people come for and scan. If your content doesn’t move their eyes off the left margin, nothing else will. So I made my design secondary to the content.

What are your feelings about eye tracking studies? Are they reliable? What do you feel about the results? Are they valid? Your opinions are welcome!

About the author

Photo of Brian Cray

Brian Cray is a Columbus, Ohio-based web entrepreneur & consultant. View some of Brian’s work in his portfolio and learn how to make kick ass websites by reading his blog.

11 Article comments

Show/add comments

6 Article references from other blogs

Show all references

925
Previous:
Next: