Scientific Web Design: 23 Actionable Lessons from Eye-Tracking Studies
By Christina Laun
Eye-tracking studies are hot in the web design world, but it can be hard to figure out how to translate the results of these studies into real design implementations. These are a few tips from eye-tracking studies that you can use to improve the design of your webpage.
- Text attracts attention before graphics. Contrary to what you might think, the first thing users look at on a website isn’t the images. Most casual users will be coming to your site looking for information, not images, so make sure your website is designed so that the most important parts of your text are what is most prominent.
- Initial eye movement focuses on the upper left corner of the page. It shouldn’t be surprising that users look at webpages in this way, as most computer applications are designed with the top left hand side as the main focus. You can do your website a favor by keeping this format in mind when creating a design. Remember, while you want to have a personal style, you have to keep the habits of your readers in mind if you want your site to be successful.
- Users initially look at the top left and upper portion of the page before moving down and to the right. Users were found to generally scan webpages in the shape of an ‘F’. Make sure the important elements of your content are located in these key areas to keep readers engaged. Place headlines, subheadlines, bullet points, and highlighted text along these lines so readers will be enticed to read further.
- Readers ignore banners. Ads may be the bread and butter of your site, but studies have shown that readers largely ignore banner ads, often focusing for only a fraction of a second. If you’re trying to make money from ads, you need to be creative in your ad placement or in the types of ads you have on your site.
- Fancy formatting and fonts are ignored. Why? Because users assume they are ads and don’t have the information they need. In fact, studies showed that users had difficulty finding information in large colored letters formatted in this way because visual clues told them to ignore it. Keep your site streamlined and not so shiny that important elements will be glossed over.
- Show numbers as numerals. Readers will find it much easier to find factual information on your site if you use numerals instead of writing out numbers. Remember, you’re writing for readers that are going to be primarily scanning your site, so make it easier for them to find what they need and keep them interested.
- Type size influences viewing behavior. Want to change how people look at your page? Change the size of your font. Smaller fonts increase focused viewing behavior while larger fonts encourage scanning. Depending on your needs, you may want more of one than the other.
- Users only look at a sub headline if it interests them. Don’t put in subheadlines just to stick to a particular format–make sure that they are relevant and interesting. You can also help yourself out by making sure they include keywords that will bring search engines to your site.
- People generally scan lower portions of the page. You can use this to your advantage if you give readers something to latch onto when they’re scanning your page. Highlight certain sections or create bulleted lists so information is easy to find and read on your page.
- Shorter paragraphs perform better than long ones. Information on your page should be designed for the short attention span of most Internet users. Keep paragraphs and sentences short unless context mandates otherwise, such as descriptions of products on an e-commerce sites.
- One-column formats perform better in eye-fixation than multi-column formats. Don’t overwhelm visitors to your site with too much information. Simpler really is better in some cases. Multiple columns will more than likely by ignored by users, so eliminate clutter from the get-go.
- Ads in the top and left portions of a page will receive the most eye fixation. If you’re going to place ads on your site, try integrating them into the top left portion of your page, as those will get the most visual attention. Of course, just because readers see them there doesn’t mean they’ll click on them, so don’t sacrifice design just to gain some extra visibility.
- Ads placed next to the best content are seen more often. If you want to get your ads seen and hopefully clicked on, incorporate them into your design in a way that places them near the most interesting elements of your content. Users will still be able to find what they need, but you’ll gain an advantage in advertising.
- Text ads were viewed mostly intently of all types tested. Like we said earlier, the average Internet user generally doesn’t waste much time looking at things that immediately appear to be ads. That’s why text ads perform so much better. They aren’t distracting and blend in with the rest of the content on the page, making them less visually irritating to the reader and ultimately more successful.
- Bigger images get more attention. If you are going to use images on your page, bigger is better. People are more interested in an image where they can see details and information clearly. Just make sure that any image you are using is particularly relevant to your text, otherwise it will most likely be ignored. Most readers have high-speed connections these days so don’t be afraid to stick a few larger photos on your Web host.
- Clean, clear faces in images attract more eye fixation. While they might look good with your design, abstract and artsy photos aren’t going to garner much reader attention. If you’re using photos with people in them, make sure they are clear, easy to read shots. It should also be noted that photos with “real” people, not models, perform better.
- Headings draw the eye. One of the first things readers have been found to look at on a webpage are headlines. Make sure yours are unobstructed by other items on the page and that they are engaging enough to draw the reader into looking further through your site.
- Users spend a lot of time looking at buttons and menus. Because of this, you’ll want to put in some extra time making sure that yours are well-designed. After all, they not only draw a lot of eye fixation, they are one of the most important elements of your site.
- Lists hold reader attention longer. One way you can break up the paragraphs in your content and keep users looking through your site is to make frequent use of a list format for your articles. Use numbers or bullet points to highlight important information within your content. It will make your site more scannable and easier for users to find the information that they’re looking for.
- Large blocks of text are avoided. Studies have shown that that your average Web visitor isn’t going to take the time to study large blocks of text no matter how informative or well-written they might be. Because of this, you need to break up these larger blocks of text into smaller paragraphs. Highlighting specific areas and pulling out bullet points can also help to keep user attention.
- Formatting can draw attention. To keep users from skipping over the main and most important points in your content use bold, capitalized, italicized, colored, and underlined text. Use these things judiciously however, as too much will make your page hard to read and send readers away.
- White space is good. While it might be tempting to put something in every corner of your page, it’s actually better to leave some of your site free of any text. Sites with too much going on tend to overwhelm users and they ignored a large part of the content. So keep things simple and allow some visual open space for readers to rest their eyes.
- Navigation tools work better when placed at the top of the page. Ideally, you don’t want readers to just look at the initial page they came to on your site, you want them to stick around and look at other interesting things as well. You can help send them in the right direction by making your navigation easy to find and use by placing it at the top of the page.
If you enjoyed this article, please bookmark it at del.icio.us »
November 14th, 2007 at 11:20 am
This is an excellent post! It has a lot of great information that I suspected but could not confirm. I found it super interesting that readers ignore banners. I had assumed that they would probably perform the best. Thanks a lot!
November 14th, 2007 at 3:01 pm
Nothing particularly new, but a good summary of things to consider when designing. I think the one-sentence takeaway from this is:
“Design for the average user, not for yourself.”
November 14th, 2007 at 5:08 pm
yes yes yes this post is being cut out and put on the refrigerator
November 14th, 2007 at 10:54 pm
very insightful…i’ll be applying some of what i read as .mobi will be perhaps slighly different in my humble opinion
November 15th, 2007 at 11:33 am
really interesting, I have read some of these before, but I like that you put them into one large list. I will be keeping this as a quick reference.
November 15th, 2007 at 11:37 am
Wow! What a great and helpful article. Thanks so much for writing this up. Reading these facts, I’m all “well, duh! Of course!” but when I design web stuff I do the opposite. Definitly a learning experience, and a wonderful resource.
November 15th, 2007 at 12:23 pm
Excellent and useful article. It boils a complex area down into a concise list. A guide that I have found invaluable is “Research-Based Web Design & Usability Guidelines”, published by the National Institutes of Health. (NIH Pub 03-5424). Many of the examples listed in the eye-tracking studies confirm the findings of the guide. Although published by the government, they do not hesitate to use their own sites as examples of what not to do. Each item is rated as to importance and strength of evidence supporting the guideline.
November 16th, 2007 at 7:21 am
thanks for the tips and the great article!
November 16th, 2007 at 9:16 am
Very well sorted… Some of the things I knew, some I didn’t but all data is useful. Bookmarked and thumbs up.
November 16th, 2007 at 9:59 am
Very glad I read this article. Thanks for the tips and advice. It is sad but when I am laying out a page, I hardly ever take into consideration the audience’s tendencies.
November 18th, 2007 at 3:03 pm
Wow, very useful information, wish I had known this before I made my last website. This has given me some good ideas, thanks.
November 18th, 2007 at 10:20 pm
Very interesting points, thank you. A must read for many of us.
November 19th, 2007 at 6:03 am
This a very useful post, thanks for making it happen! It seems there’s a bit of interest in this so I would like suggest the book ‘Call to Action’ by Bryan & Jeffrey Eisenberg - its awesome!
November 21st, 2007 at 6:38 am
Fantastic timing - I’m a few days off getting back some results of an eyetracking study I did as part of a university project. This list will work well as a reference point for when I’m evaluating the results.
Thanks for sharing.
November 21st, 2007 at 7:03 am
Great article! I was not aware that text was more prominent than images. Keep up the research!
November 21st, 2007 at 7:08 am
Nice post. Am well interested in these results. The conclusions back up some research I’ve been doing with click tracking software on some sites. Its also given me more things to study in the future. cheers.
November 21st, 2007 at 7:30 am
Points 5 and 21 don’t necessarily contradict each other as was suggested earlier. Point 5 says that “fancy formatting” will be ignored says that heavily stylized, contrived, heavy-handed, and abusive use of formatting will be interpreted as advertising and ignored by the reader. Point 21 states that careful formal use of formatting to draw attention to a key message can be effective. The distinction is a question of degree. If you bold just two key words, this may draw attention, if you use a bold font just for its own sake then your message will be diminished.
November 21st, 2007 at 8:45 am
I disagree that designers should build the site around its viewers current viewing habits. Viewers are used to looking at poorly designed sites. I think its better for you users to be able to naturally navigate your site without a conscious learning phase, even if your site doesn’t follow all standards.
November 21st, 2007 at 10:50 am
I assume that this is for “Western” web users? What about users in Asia on the Middle East who may not traditionally read left-to-right?
November 21st, 2007 at 1:27 pm
Cool stuff!
I think my site needs a redesing.
November 21st, 2007 at 4:37 pm
alot of these points are well made, however a good designer can take this information put it to use while breaking a lot of the ‘rules’ put forward here. What makes good design is the freedom to break convention in order to communicate an effective message. In the case of a well branded company the ‘fancy formatting’ can be reckognized as an extension of that companies ‘brand’ and as a result although the eye does not fixate on the image/banner the message has been communicated. Unfortunatly we are a long way from tracking what the brain actually processes and until then I will find this a very loose guide to designing an effective website. Non the less, you can’t really break the rules if you first don’t understand them – so it is a great list to have read.
November 21st, 2007 at 5:29 pm
What exactly do you–or not you, but authors of the study you quote–mean by “numerals”? I agree than “a thousand” or “a hundred” may be better than “1000″ or “100″, but “87329″ seems to be much more readable than “eighty seven thousand three hundred twenty nine”.
November 22nd, 2007 at 1:35 am
I am working as a web designer-developer, and this information is really handy, altought it can not be used on any kind of web sites.
Clever post.
November 22nd, 2007 at 3:30 pm
Very enjoyable read, definitely bookmarked!
November 22nd, 2007 at 8:57 pm
Thanks,
for describing how the findings from usability research can increase the effectiveness and profitability of a Web site. I pass the link to this articles on to my readers as well.
November 22nd, 2007 at 9:14 pm
I think this is great
November 23rd, 2007 at 5:28 am
For this to be scientific I think you need to reference all sources. Or are those items that include no reference based on tests run by you?
November 23rd, 2007 at 10:34 am
An interesting mix of points stating the obvious, plus some generally new ideas (for me, at least). Not that there’s anything wrong with stating the obvious - sometimes those are the exact thngs you overlook!
It’s the second time I’ve read someone recommend expressing all numbers as numerals (’1′, not ‘one’), and the justification makes a lot of sense. I’m still quite wedded to the old-skool way (one to ten spelled out, 11+ as numerals), but although I think it looks better, I’m struggling to convince myself that it actually works better.
Give me another few months and I’ll probably be doing it the new way…
November 24th, 2007 at 12:13 am
Good stuff!!
November 24th, 2007 at 1:21 am
What a scrutinization.
November 24th, 2007 at 6:56 am
Useful information because it’s all relevant and to the point. It highlights areas to consider, not rules to follow, so it is pretty universally applicable. Great job!
Can I also recommend the work of Robert J Heath and Brett Martin for anyone interested in the science of attention and advertising. And definitely Seth Godin’s “The Big Red Fez” for web-specific advice.
There is no such thing as a holy grail of all websites because each website exists for a different user and use. The advice above will definitely be helpful optimising webdesigns!
Thanks again!!!
November 24th, 2007 at 1:51 pm
I think the question Ryan has raised about the cultural framework of the user is very important and should be taken into consideration when testing interactive designs.
It should be understood that findings from eye-tracking studies are uniquely based around the design goals of the stimulus being tested, and according to the defined parameters of the eye-tracking study. Broad based rules, i.e., “23 Actionable Lessons” should be referenced loosely, because online user behavior is always in flux constantly shifting and changing according to what new stimulus is made available.
November 26th, 2007 at 12:39 pm
The actionable lesson numbered six contradicts itself, no?
November 27th, 2007 at 1:33 am
I found your blog via Google while searching for web developer and your post regarding Scientific Web Design: 23 Actionable Lessons from Eye-Tracking Studies looks very interesting to me. I have seen many sites before and most of them do not look this good. I cannot wait to let my friends know about this site. Thanks for the excellent content.
November 27th, 2007 at 4:05 am
Found your piece to be very helpfull in setting up my blog
Thanks indeed!
November 27th, 2007 at 4:07 am
Anthony: thank you. I did not realise that the word ‘numeral’ has more than one meaning and that among them are “a word expressing a number” and “a symbol used to represent a number”–well, quite opposite in this context.
Speaking in general, people who learn English as a foreign language are used to know ‘numerals’ as a grammatical category of words like ‘nouns’ or ‘verbs’. And so did I. The other meanings were unknown to me until now. Sorry for misunderstanding.
November 28th, 2007 at 5:58 pm
Excellent summary(Bujar from Albania)
November 29th, 2007 at 11:18 am
Love this comment:
“Design for the average user, not for yourself.”
It’s so true!!
November 29th, 2007 at 10:32 pm
Doug Stewart? Are you suggesting that using images for advertising and branding and not other information is a bad thing? Would you prefer to use them only as graphs and bar charts? PC, is that you?
It should be realised that the social bombardment of images in our everyday life is a direct response to consumer reaction. Very much like Christina Laun’s study many studies for many years have been conducted on Brand. It is well understood that the power of a good brand is not ‘abusing’ the use of an image. This too applies to the web, where a site can be viewed by millions of people world-wide! That power is in developing an identity associated with a specific message that is attached to a product, organization or company. The web is about communication and as human beings we understand things visually, this means the web is the perfect medium to re-enforce a positive association with a brand and that brands messaging.
With that said, yes there are a shit-load of lousy brands out there, but before you question the integrity of ‘brand’ try to consider why it plays such a huge role in the biggest, richest, and most powerful companies success through out the world.
December 6th, 2007 at 3:40 pm
What is the scientific basis that readers ignore banners?
They ignore advertisements on banners or all banners?
December 11th, 2007 at 5:28 am
Great information!!! I probably broke every rule with my website!! I will use this as a guide for my redesign. I will certainly use this for my Web Blogs (JoeMurphy180 and clientize.blogspot) … I will also link to this site. GREAT!
December 18th, 2007 at 8:22 am
I would like to know if there exists a standards organization about this (how well designed is a Web site) and if there are consultant firms that do this “certification”.
Thank you!
December 24th, 2007 at 4:36 am
A nice roundup of general points to consider.
Eye tracking was used to update the usability guidelines of newsletters by Jakob Nielsen back in 2006. http://www.useit.com/alertbox/newsletters.html
A good discussion on the pros/cons of eye tracking in web usability can be found here :
http://www.webcredible.co.uk/user-friendly-resources/web-usability/eye-tracking.shtml
January 8th, 2008 at 4:30 pm
People spend a lot of time looking at buttons and menus.
“Spending a lot of time” suggests a bottleneck in the process. The navigation is confusing, or even unreadable. I have spent a WHOLE lot of time looking for very hard to read labels.
January 11th, 2008 at 8:45 am
if you could provide the research methods , that will be ok,thank you.
January 13th, 2008 at 4:22 am
Great article, very useful - I’d like to add however, that to aid a user’s ability to ’scan’ a page (particularly if dyslexic) is helped by avoiding using fully justified text; something that can perhaps be addressed on this blog.
January 15th, 2008 at 2:37 am
Very great article Sir! Your tips are all very helpful… I agree with #4…
Most people really ignore banner ads. I personally don’t look on banner ads and I don’t find them that attractive.. Anyway, great looking blog you got here Sir… Keep it up…
January 16th, 2008 at 12:33 pm
Thanks
January 18th, 2008 at 11:30 am
What about eye tracking for the blind? Or for that matter, the deaf?
January 31st, 2008 at 7:15 am
I would love to see a posting like this on branding!!
February 1st, 2008 at 2:57 am
that very good post.
thanks.
February 1st, 2008 at 3:49 am
Excellent
February 1st, 2008 at 5:39 am
i looked for this article couple of months
thanks a lot
February 2nd, 2008 at 9:14 am
nice list
February 13th, 2008 at 11:36 am
great post!
February 15th, 2008 at 6:25 am
nice.
February 19th, 2008 at 4:14 am
Very, very nice stuff. I like it very much and going to implemtn at my own site.
February 24th, 2008 at 3:54 am
Peter lifted the adult websites with nude black women of the specific and examined me.
February 28th, 2008 at 10:44 am
nice post.
March 4th, 2008 at 6:34 am
Nice summary of a powerfull tool.
-Shir
March 6th, 2008 at 1:41 pm
Very nice. There are so many temptations to make things more complicated than they should be and/or to ignore what really works and to go with what makes us feel good.
Your list will provide a nice tool help us all gauge whether or not we’re accomplishing what Albert Einstein so rightly advocated for in web design
“Make everything as simple as possible, but not simpler.”
Thanks for a great post.
Drew
March 8th, 2008 at 3:15 pm
Thank you for your great summary about to improve the usability of websides worlwide. I hope, many customers will read your article…
Ralph
March 18th, 2008 at 2:31 am
Hello!
I think this try.
March 19th, 2008 at 5:05 pm
great site
March 19th, 2008 at 5:06 pm
I want to tell u that u r great
March 26th, 2008 at 7:57 am
Absolute great post!
April 11th, 2008 at 3:11 am
great things u got here bro.
i got some nice ideas from u thankes
April 16th, 2008 at 3:04 am
Great article!
Thanks!
April 23rd, 2008 at 10:25 pm
Hi All,
Sub:- Please help me out, in wiki Web Design & Development.
I have puzzled with the task of Wiki Web Design & Development Strategies, and very much eager to know these questions:
1 Whether should we prepare for the final presentation of our Wiki Web Design work?
2 Will is it exact task of web programming? Or the content of the website can be something we fetch?
Thanks
Best wishes!
April 25th, 2008 at 11:00 pm
Hi Web Developer India & whom who is concerned about Wiki Web design
I won’t go so deep with the definition of Wiki but if you are not familiar with it, they are websites that anyone can freely edit and optimize to grow through collaboration; This Wiki software is developed by Ward Cunningham to exchange ideas between computer programmers. Wiki Web Design is an incredibly fun skill to learn - combining the latest technology with the creativity of Wiki web design. Wiki merely supports hyper links & has simple text syntax for creating new pages and cross links between any numbers of pages on the fly.
Thanks & Regards
Dexterous SEO India
April 29th, 2008 at 2:31 am
Very enjoyable read, definitely bookmarked!
May 4th, 2008 at 11:40 pm
Here we have designed plethora of websites & having a huge customized web designed portfolio. But right now we are lagging behind from client list.
Why & how my competitors are fetching my clients.
May 9th, 2008 at 6:18 am
חשוב
May 9th, 2008 at 10:53 am
thanks for the nice things you right here
May 19th, 2008 at 10:06 am
Hello all. I’ve just found this place and wanted to say hi.
May 21st, 2008 at 6:26 pm
Very Nice!10X
May 21st, 2008 at 6:26 pm
Great List!
May 21st, 2008 at 6:27 pm
Nice Post!
May 22nd, 2008 at 2:41 pm
This site looks like its made by these guides, only that there is no ads.
Great tips.
June 23rd, 2008 at 5:21 pm
Great Tips! Thanks!
June 28th, 2008 at 10:56 am
Great article! I was not aware that text was more prominent than images. Keep up the research!
July 11th, 2008 at 11:49 am
Very enjoyable read, definitely bookmarked!
July 11th, 2008 at 11:49 am
חשוב
July 14th, 2008 at 2:58 pm
מירי שחם - טיפול הוליסטי לכל דורש
July 16th, 2008 at 3:07 pm
mgnf gmcaxi nvykwdzj hqifzwrgp mohsbglj rbnsu fruqwn
July 21st, 2008 at 8:08 am
Nice post, I like it
July 21st, 2008 at 8:08 am
So true
July 26th, 2008 at 7:38 am
good post
July 30th, 2008 at 10:48 pm
love this articles
great stuff
July 30th, 2008 at 10:49 pm
love the stuff here
thanks for the nice article
August 1st, 2008 at 9:40 am
If you visit my site you will see my bias right away… With that said, what studies have been made with regards to motion and animated graphics vs static graphics. And, which graphics were used in the testing you sight in your list?
August 17th, 2008 at 2:06 pm
Cool Post!!!
August 23rd, 2008 at 8:32 am
Really interesting but you need to pay attention because all this stuff are not right. Indeed the eye scanpath depend on the architecture you’ve build.
Just an example : “Users initially look at the top left and upper portion of the page before moving down and to the right.”. That’s completely false. Indeed, depending on the construction of the page, a behavioral expert can guide the eye with in a specific visual flow.
I propose you to write an article together to balanced these results. Does it sound right for you?
Have a nice week.
Marc
August 27th, 2008 at 11:25 pm
great post u wrote
thank u for all the stuff