As Wikipedia describes it – “Banner blindness is a phenomenon in web usability where visitors on a website ignore banner-like information.” As Jakob Nielsen mentions, “Users almost never look at anything that looks like an advertisement, whether or not it’s actually an ad.”

The term “banner blindness” was coined by Benway and Lane (1998). It was a result of website usability tests where major test participants, consciously or unconsciously, ignored information that was presented in banner or looked like a banner.

This eye-tracking study by Jakob Nielsen has confirmed that most of the time, the banner blindness is real. Users are now ‘immune’ to these ethical and now-ethical ways of advertising on the web and tend to ignore those ads or something that looks like an advertisement and rather keep looking relevant information in the form of links, etc, while ignoring large animated or colorful elements like graphics.

Also, users generally read the whole content; rather they do scan the content. If the content is interesting for the user, then he might choose to read it in-depth. But, in all such cases, he still may prefer not to see those noticeable banners.

Source: Banner Blindness: Old and New Findings
(Jakob Nielsen’s Alertbox, August 20, 2007)

Heatmaps from eyetracking studies:
The areas where users looked the most are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn’t attract any fixations. Green boxes were drawn on top of the images after the study to highlight the advertisements.
© 2007 by Jakob Nielsen.

References / Resources:

Benway, J. P., Lane, D. M.,
Banner Blindness: Web Searchers Often Miss ‘Obvious’ Links
1998, Internet Technical Group, Rice University

Norman, D. A., Commentary:
Banner Blindness, Human Cognition and Web Design
1999, Internet Technical Group

Pagendarm, M., Schaumburg, H.,
Why Are Users Banner-Blind? The Impact of Navigation Style on the Perception of Web Banners,
2001, Journal of Digital Information

Why Are Users Banner-Blind?
Journal of Digital Information (July 31, 2001)

Just How ‘Blind’ Are We to Advertising Banners on the Web?
Usability News (Summer 2000)

Please submit resources / insights for Banner Blindness here, if you have any.

Heuristic Evaluation is a “discounted usability testing” method which was originally proposed by Jakob Nielsen and Molich in 1990 which is relatively quick to do, cost-effective and provides insightful evaluation of a user interface tested under. This usability testing method requires relatively less number of people, who perform the specified tasks and others who record the evaluations / findings based on certain usability principles, called “heuristics”.

The Heuristic Evaluation Process can be summarized in following steps:

1. Planning for Heuristic Evaluation
2. Selecting the Users who will perform tasks and examine the interface
3. Set of Heuristic Principles
4. Executing the HE Tests
5. Analyzing the results and summarizing

Below given are some of the important Heuristic Evaluation principles to follow:

1. System Status Visibility:
Are end-users able to know, looking at the interface – where am I, where can I go? Effectively used navigation and breadcrumbs does help end-users a lot to identify where they came from, where they are and where they can go?

2. Match between the System and the Real World:
Is the language used in the system / interface suitable to end-users in terms of words, phrases and avoid technical terminologies / jargon wherever possible?

3. End-User Controls and freedom while using the application:Are users feel locked-in at point? For example, users may do mistakes while using the application and may tend to search for “home” link or may simply “back” button on the browser. Make sure that such ways to exit from a troubled situation is in existence. Browser buttons like ‘back’ button should not be disabled till it’s a mandatory application requirement, e.g. online banking application.

4.  Standards and Consistency:
Is the interface using different words / nomenclature for the same function or action? For example, in e-commerce application, is the interface using two words like “Add to Cart” and “Add to Shopping Bag” in the same interface?

5. Prevention of Errors:
Are errors shown frequently in the application? Instead of displaying good error message or page, it’s advisable to avoid those errors, by in-depth testing by the end-users. Also, if some error message is shown, make sure those error messages are in the simplest possible form, in an easy-to-understand natural language- free of technical jargon as much as possible.

6. Recognition rather than recall:
Are users able to remember where they have used a particular option, say ‘Login’ link? Users may not remember all what you have done in the application. Users prefer recognition than recall by remembering. Also, people with cognitive impairment would also face a great problem is there is no easiness while using the application and may find it tough as they don’t remember about a certain functionality they used last time. Make sure that users are able to make out easily while using the application about where they are and what all they can do with it.

7. Flexibility and Ease of Use:
Is the system using any kind of system accelerators? An interface can be designed to assist end users by using a proper “function allocation”, i.e. can decide which tasks can be taken care of by the system and end-users. For example, on e-commerce websites, we can store the personal information submitted by a user and same can be used for their future transactions, like Name, e-mail ID, which precisely reduces the load on the end-user of redundant tasks of filling up the forms and also enhances the experience.

8. Aesthetic and Minimalist Design:
Is the application / site providing inessential / lesser- important information upfront and thus adding up the clutter on the respective page or displaying secondary tasks on the core task page? Along with adding a visual clutter, it reduces the impact of core content (on websites) or adds confusion in the prioritized tasks which needs to be performed. Minimalist design gives a clean look and feel which enables end-users to concentrate on the core tasks / content.

9. Recovery Mechanism for end-users:
How do users recover from the errors? Errors may appear in spite of all possible testing done. So, even if some error message is shown to end-users, make sure that these error messages are in an easy-to-understand natural language, with no technical jargon added, as much as possible.

It should describe “what is the error that occurred, why it could have occurred and how user can solve the same”. For example, while filling up a form, if user fills in wrong e-mail id, indicate it clearly by – highlighting the e-mail id text box by some visual treatment (red-bordered box) and also present an error message upfront (“Please provide a proper email address!”).

10. Assist Users with help and documentation:
Is the system / application provide some kind of help / documentation for the end-users? For content-driven website, no documentation would be required but a “search” can help users as an assistive mechanism. But, for a software product interface, an easy to use help / documentation is a must. Also, this help should be linked from all the sections across the interface and should be placed on an easy-to-locate zone in the interface.

Also, this help or documentation can have some kind of search facility, an index and should be concentrated on the tasks and also, not too large and complicated to use.

For a detailed system checklist for Heuristic Evaluation: http://www.stcsig.org/usability/topics/articles/he-checklist.html

Heat maps provide you an insight for “sensitive areas” on your website which you can use to provide better placement to core content or promote product or information you are willing to highlight on your website to increase online sales, etc.

Heat maps are used to understand the user’s behavior on a web page for which the heat maps have been generated.

The core idea of using a heat map is to analyze/test how a user is interacting with a web site. What links are they clicking on? What kind of page design may work well? What functionality placed at different zones can work better? We can get help from such heat maps to understand some missing factors in our application.

For example, if a button is not getting any or less clicks even though it’s a button, then there is a serious issue of “affordance“, which tells us that the design of the button is not intuitively implying its functionality and use.

The screen shot given below is a heat map overlay for this ‘Usability Factors’ blog homepage (April 2009). The “warmer” areas depict more clicks.

Heat Maps generated for Usability Factors blog homepage

According to Jesper Rønn-Jensen, there is a difference in the results collected by mouse-tracking because it’s skewed by the mouse (or “pointing device” to put it in academic terms). You can read more about at: http://justaddwater.dk/2006/12/21/usability-heatmaps-eyetracking-vs-mousetracking/

For Eye-tracking and heat map tools, please see:
http://crazyegg.com
http://www.punkyduck.com/usability-accessibility/usability-reporting.aspx

For more information on Eye-Tracking, please see:
http://www.useit.com/eyetracking/
Download White Paper (PDF)
http://www.webusability.co.uk/wp-content/uploads/2009/02/eye-tracking-white-paper1.pdf

Please provide your insights on this! Thanks.