Tips From Eye Tracking Studies on Website Design

Here at Eye Tracking update we’re often talking about lessons learned from the various eye tracking studies that have been done over the years. A reader recently forwarded a decent article that collected a bunch of these into one place. Twenty-three to be exact. Here are a few of them relating to webpage layout and design:

1. Text attracts attention before graphics. We as humans have become pretty good at filtering out all the extra “garbage” on a webpage, and contrary to what people might think, it’s not actually the images we’re drawn to on a page. Of course, this is a generalization. Many of us are more visual than others, but even as that’s the case, when we visit a site, we’re looking for information. Text is the most obvious form of information, and so that’s where our eyes often go at first glance.

2. By now it’s been well documented that eye movement tends to focus on the upper left corner of the page before anything else. If you have a website, you can help your readers by putting relevant information there, as opposed to placing it arbitrarily throughout the page.

3. Viewers love white space. White space is good. It’s tempting to fill up a page with text and images, but if you offer a viewer a white space, not only does it give them a place to rest their eyes, it helps focus information so readers know where to find it. Too much text overwhelms.

4. Web viewers tend to spend a lot of time looking at buttons and menus. So, make sure the site is easy to follow, buttons work (this seems like an obvious point, but you’d be surprised!), and that they are well designed well and organized.

5. The eyes are attracted to clean and clear faces. When using photos, it’s good to have images with people in them. Artsy and design-y photos may look great with the page, but when it comes to pure statistics, eyes fixate on simple, easy to read faces.

6. Be aware of fonts and text sizing because they influence behavior. Viewers tend to scan more across larger text, while smaller fonts increase focused viewing behavior. You may want a viewer to scan, or you may want focused attention, but it’s a decision that should be made purposefully and not randomly.

7. Paragraph length is important. Who wants to sift through an enormous paragraph like a needle in a haystack? The truth is, smaller paragraphs break up the gaze and move the eyes around the page in addition to helping to organize information and give it flow.

There are plenty more from the article, so take a look. The key lesson to take away from all these eye tracking and design studies, really, is that no decision should be arbitrary. There are reasons why certain placement and designs work, and reasons why they don’t. So don’t fall victim to arbitrary design. Look around online, buy a book, or delve further in with your own study: it will help both you and your viewers in the long run.

Scientific Web Design: 23 Actionable Lessons from Eye-Tracking Studies