3 eye tracking studies that influenced my latest redesign

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!

10 comments skip to comment form

  1. Gaurav Narain Saxena said— 50 minutes later

    I agree with most of the study’s findings. Specially the single column layout, and big font size.

    I resized firefox to 800 width to see if the site is still usable .. it is albeit with scroll bars. This is the last bit I consider for a good design for myself.. the ability to use it on at 800 width.

    Fwiw, I thought I’d let you know.

    Gaurav

    #1

  2. Paul said— 1 hour later

    Awesome, thanks Brian – more for the reading list :-)

    Anything that’s going to put errant eyeballs in touch with key content can only be a good thing. Even if people are attracted to different elements of a page, playing the percentages has to make sense.

    Small critique of your new design.. to my eye, there’s not enough variety to make it interesting.

    Obviously this is intentional as you’re experimenting with the uber-simple, but I’d suggest it’s maybe a little *too* flat (I found my eyes wandering, just because it all looks very similar).

    Perhaps a little more variety in headings would more readily break up the page without too much pollution?

    Back to eye-tracking – I’ve been playing with StomperNet’s Scrutinizer lately, might be worth checking it out if you haven’t already (http://about.stompernet.com/scrutinizer)

    Cheers
    - Paul

    #2

  3. Brian Cray said— 3 hours later

    Guarav: .33% of my visitors in the last 30 days have had a 800×600 resolution. I’m not designing for .33%, I’m designing for the other 99.67% :)

    Paul: I value your feedback! Others have told me that colored headlines would make a difference, so perhaps it’s time I hear the music. :) I’ll check out Scrutinizer, thanks!

    #3

  4. Seth Etter said— 4 hours later

    Awesome information! I really like the new redesign and now I appreciate it even more so based on these studies. Great work.

    You’ve officially convinced me to make my next redesign to be single column. Thanks! :)

    #4

  5. Vladimir Carrer said— 8 hours later

    Interesting findings and conclusion. I also tried to understand more about “F-Pattern” and how we read. I wrote a blog post about my findings “F pattern or just simple triangle” http://www.vcarrer.com/2009/03/f-pattern-or-just-simple-triangle.html .
    I’m glad that you based your design decision on some serious research, keep up the good work.

    #5

  6. @mthinker said— 1 day later

    Thanks. Great piece. I still hate scrolling. I think the scrolling findings are research bias (observer effect). People over-use (try harder) in usability studies because they know they are being watched. They want to please the researcher. That’s a petty detail though. This was really helpful and I agree with you about Jakob.

    #6

  7. Digital Agency said— 2 days later

    Really impressed by this study. The results are spectacular.

    #7

  8. Chris J. Politzki said— 4 days later

    Thanks… I’ve heard about similar tests, makes you wonder how they do it. Do they put special glasses on the subjects?

    Thanks again for sharing!

    Chris

    #8

  9. Dhane said— 3 weeks later

    Great post!

    This information will definitely come in handy the next time I go for a new look on my Website, but it’s also good to keep in mind when talking to clients when it’s time to talk site layout and structure.

    Once again, the new site looks great and it does “pop” and stand out a lot more!

    #9

  10. Betty said— 3 weeks later

    Thanks for sharing — I always enjoy the wisdom — I agree with the F shape…..I viewed my own site as if I were looking at it for the first time.. interestingly enough I noted a few changes I need to make….keep up the good work

    #10

  11. Respond to this post—

Return to navigation
925