4 essential UX rules taught by eye-tracking research

Web designers use a lot of tools to make the sites they design the best possible for site visitors; one of the best ways of achieving this is incorporating actual science and research into design to maximize user satisfaction.

Eye-tracking research provides designers with a blueprint of sorts to guide them on the priorities with which site visitors generally absorb the information on any given site.

Eye-tracking research also tells us a good deal about the way in which site visitors read websites. This information can be used by savvy web designers to tailor-make a site to the average person. When users get a great experience from visiting your site, they’ll be back, and chances are good that they’ll even turn into regular site visitors. This has implications no matter what type of site you’re designing.

So just what does this insightful research tell us about the average site visitor? How can designers harness this very powerful information to create sites that are nothing short of excellent? You’ll be surprised at what the research has uncovered.


Draw visitors’ eyes with gripping headlines—not pictures!

Contrary to popular belief, it is in fact gripping headlines that catch the attention of site visitors and not eye-popping pictures. This finding is applicable to homepage layouts, especially if you’re working on the layout of a news site. This also explains why so many news sites frequently use sensationalistic to shocking headlines all in the effort to grab site visitors’ precious attention.

In one well-known study from a few years back, dubbed the Eyetrack III study, it was discovered that site visitors have a penchant for gawking at headlines, particularly if they’re dominant. Further, the specific placement of these headlines on the homepage has an effect on the speed with which a site visitor homes in on them. Place your headlines on the upper left part of the homepage, and you’ll get more site visitors paying attention to your content than if you positioned the headlines anywhere else on the homepage.

So if you’re a designer working for a news site, keep this in mind. Text draws the eye quicker on a computer screen than does a picture—again, contrary to what one might call conventional wisdom. The designers at Fox News, 173rd-most popular site in the world and 36th-most popular in the U.S., know this reality well. Observe how the main headline on its homepage is precisely situated in the upper-left section of the page, noticeably off-center.



Design your site in an F-shaped pattern

A few years ago, there was a very revealing web-user study that was put out by the Nielsen Norman Group. The study found that everyday site visitors usually read any given webpage in a so-called F-shaped pattern.

In essence, site visitors typically absorb the information on a webpage by an initial horizontal movement, over the page’s upper part. This is referred to as the top bar of the F. Then, visitors usually move their eyes down the page a little bit before reading across in another horizontal movement that’s shorter than the initial one. This accounts for the second and shorter bar on the F. Lastly, they look at the page’s content on the left-hand side in a vertical manner, thereby forming the stem of the F.

Knowing this constant reading pattern of the average web user, it should motivate you to design a site that’s geared to how visitors read web content. Doing so will improve their user experience vastly and give you more loyal site visitors.

Some websites already put this research into good practice. Ghost Games is one of EA’s new studios on Sweden’s west coast. Note how its homepage mimics the F-shaped pattern perfectly. This improves the user experience and makes for easier navigation, especially since the stem of the F in the pattern links to information about the site of the studio.



Don’t waste time with ads — your site visitors sure won’t!

Many people find display ads annoying, which helps to explain why many site visitors just ignore them and instead focus on a webpage’s useful content. The alliterative and technical term for this is banner blindness. Another study from the Nielsen Norman Group demonstrated that most web users simply don’t fixate on any ads when they’re absorbing web content.

Know that it’s simply a waste of time if you’re designing a site that relies primarily on display ads to generate money. In light of the study, you should reevaluate your primary means of earning money on your site. Do away with ads and switch to a subscription-based model that charges site visitors a membership fee. Some sites are already implementing this strategy in acknowledgment of the weakness of display ads.

A great example of this is Club Penguin, which is an MMO (massively multiplayer online game) that is owned by Disney. The site is absolutely free of any annoying display ads, which is why visitors are encouraged to purchase memberships to play the game.



Avoid fancy words and formatting

Again, minimalism rules the day, especially if you want site visitors who are able to find the information on your site efficiently. According to the U.S. Department of Health and Human Services’ Usability blog, the fancier (read: elaborate) a webpage’s formatting and words are, the more site visitors will be confused and fail basic navigation tests. The blog refers to a Nielsen study from a few years ago that asked test subjects to find a basic piece of information from the U.S. Census Bureau’s website. Most failed the test spectacularly.

Participants were asked to find the then-current population of the U.S., which was found on the Census Bureau’s homepage. Startlingly, just a pathetic 14 percent of participants were able to locate this information on the page, even though it was literally staring at them in huge, red letters on the right side of the page. It was suspected that this abysmally low success rate was due to the presence of the information on the page’s right side, in direct contravention of the F-shaped reading pattern so well established.

However, further examination revealed that the vast majority of study participants simply ignored the information although it was in big, red and not-easy-to-miss appearance. They ignored it because its fancy formatting and presentation made it look like a promotion or ad of some sort! Since many web users already don’t pay attention to display ads in the first place, this conclusion should come as no surprise to anyone in light of what we know.

This Nielsen study was 6 years ago, so it would be interesting to see if the U.S. federal government learned something in that time and improved its homepage for usability! We are talking about the federal government here, so efficiency isn’t its forté. However, looking at its current Census site, we see that it has made at least a significant change in that the population number doesn’t look like a glaring promotion anymore with fancy formatting. Still, the population number has been moved all the way down to the bottom left of the homepage, forcing site visitors to actually scroll down to the bottom to see it. This is not a good alternative either!



Understand eye tracking, understand effective web design

Eye-tracking studies exist for a reason: They virtually lay out a blueprint of what web users like and don’t like on any given site, based on their behavior. Web designers who ignore this copious research are doing so at their own peril. Why wouldn’t you want to design a site that your visitors found easy to navigate? Make smart use of this research, and web users will find your site extremely pleasing to navigate…which will only lead to more visitors and greater popularity.

Remember that, on any given site, it’s always headlines that draw the eyes of the user and, thus, their attention, not pictures. Always keep in mind the notorious F-shaped pattern that represents the general viewing pattern of many site visitors. It would do you good to design at least a homepage layout that mimics this pattern in some respect.

Finally, steer clear of display ads. Not only do they look bad, but many site visitors don’t even pay them mind and ignore them completely. Explore other ways to get revenue for your site, perhaps through membership fees and other approaches. And whatever you do, don’t make useful web content look like a promotion or ad because site visitors tend to ignore that too. Keep all this in mind, and you’ll design a site in harmony with your visitors’ behavior.

Do you design to the ‘F’ pattern? What other usability tips would you share? Let us know in the comments.

Featured image/thumbnail, eyes image via Shutterstock.

  • http://www.inverselogix.com/ Hemanth Malli

    Interesting and useful article!! Next time while designing I will keep these points in mind !!


  • Oksana Frewer

    Marc! This is one of the most informative articles I’ve read over the last few months. Thanks.

  • http://www.tylerbrownvisuals.com/ Tyler Brown

    Informative and concise. I like it! I don’t think any of these came as a major surprise but it’s definitely a good refresher – especially someone like me who has a tendency to put photography/design in front of verbiage.

  • jhkoenig

    Interesting concept! My F-shaped landing page has three bars instead of two. Will that work? If not, how about rotating content?


  • Manoj Soni

    I Agree with most of the points on the article except, I have been using Completely contrast colored Banners and Forms on my lead generation website and got results all the time. What are your views on it?

  • x

    “Don’t waste your time with ads.” This seems like a strange “UX rule,” seeing as how the purpose of many web based applications is to generate revenue. Shouldn’t the rule be something along the lines of “Appropriately balance your ads with content.” Your users will “waste their time” on ads if the content of your page is useful and relevant.

    • http://marcschenkerwriting.com/ Marc Schenker

      I guess it’s time to rethink the ads-generating-revenue belief, then. Sure that’s the conventional wisdom, but the study above disproves that. I suppose that a fraction of site visitors will always “waste their time” on ads if the page content is valuable, but is it really enough to warrant spending time and money on ads? Don’t know about that.

  • Club Penguin

    You mention Club Penguin and if you take a look at the game it is filled with ads to purchase membership. When you are on the front page, when you login, within the game at multiple places as well as when you logout.

    • http://marcschenkerwriting.com/ Marc Schenker

      Hey there “Club Penguin,”

      I just checked by going on Club Penguin’s front page and login page, and there are no ads at all! So you’re wrong about that. I can’t speak for “within the game at multiple places” since I haven’t had the privilege of playing Club Penguin, but there are definitely no ads on the front page or login page. Are you sure you’re referring to Club Penguin?

      • Club Penguin

        Hi Mark, On the front page you now see the ad screen 1 that at bottom left tells “Features shown require paid membership” and an About membership button. On screen 2 you see “Members can quest for Gold Puffles” as well. If you click on Play now you also see similar “ads” promoting membership. Same thing when you log off.

  • Premier SEO & Web Design

    Great post Marc! Gripping headlines and nice photo go a long way. When we design slider slides, we always try to use them both effectively. We are always trying to give our clients the best website possible.


  • Sarah Bauer

    Excellent article, worth a bookmark. From a content creation point of view, the F-shape pattern is hugely important. That’s why keywords for the information on a page should usually be placed near the beginning in a headline or title – it’s the first bits of text the eye grabs, helping to inform users as to whether or not the page contains what they’re looking for.

    Thanks again!
    Sarah Bauer
    Navigator Multimedia

  • Bianca Board

    Great article. I’ve never thought of doing eye tracking research on my sites. Might be worth a look to see if I can improve my designs in future.


  • Bryce Fisher-Fleig

    Great article! However, I wonder about several of these points:

    1) As one other commenter already pointed out, ads are a major source of revenue especially for small blogs. Only sites with a huge following (like New York Times or Andrew Sullivan’s blog) have been able to effectively use a paywall. As a small time blogger myself, I wish I could use a paywall! However, transaction fees are high relevant to demand for blog posts. So, my guess is that ads are here to stay given the economics of blogging.

    2) Are there any eye tracking studies that follow mobile users eyes? My guess would be that eye movement follows different patterns on phones and small screens. Probably a bit different on “tablets” than phones. I’d be really interested in this sort of research!

    3) This “F” seems like the conventional way that websites have been built. I think our eyes are so trained that this movement is almost a Palovian response. I agree that following this pattern is a really really great idea for helping users find the important content, however it doesn’t seem like a law of nature — more like the current pulse in web design. For a truly groundbreaking website, following this F pattern might not be a good idea.

  • Approachnet

    I agree having ads on pages can get distracting. I can’t remember the last time I clicked on an ad.

  • Al

    Great job on the article MIke. Will definitely implement the F shaped design for my projects.


  • http://www.therabbot.com Manolo HK

    I finished the article and by accident I noticed that an ad was following me down the page. Haha. No body cares about ads!

  • http://digitalcusp.com/ Jordan Scott

    Hey , Again an amazing post i found. third point is really good “Avoid fancy words and formatting”, I’m agree with you. Design should be clean & sharp.