Research / Reports on Mobile Usability

Few days back, I was reading some article related to Mobile Usability on Jakob Nielsen’s website . I found it quite interesting and so trying to put in some facts which I think should be useful for us to understand the scenario.

To understand usability factors that makes mobile sites easy or an unpleasant experience, Jakob Nielsen had combined 3 different usability testing methods, namely: 1) Diary Study 2) User Testing 3) Cross-platform review.

Mobile devices’ users face several usability obstacles to overcome with, like Small Screens, Difficult / non-easy ways of input, bandwidth / download time issues and worst of all, badly designed website.

Surprisingly, as per the Jakob Nielsen’s tests which were designed to test participants using those sites which were specifically designed for mobile devices, their “average success rate” was 64% which is quite higher than the 53% success rate recorded for the “full sites”. And, as Jakob thinks, this is a enough powerful reason to start developing mobile optimized websites.

This “mobile usability” has several interesting facts unconvered. You can read the complete article here: http://www.useit.com/alertbox/mobile-usability.html

Some Resources:

Mobile Web – Navigation Design

Mobile Web Applications – Design factors

In this series of posts about “mobile web application development strategies’, we will discuss about ‘advantages of mobile web platform, strategizing for mobile web, initiating a mobile web project’ and much more will be added as and when possible.

To begin with, we will understand how mobile web is promising.

Advantages of Mobile Web platform:

Anywhere-Anytime information access:
Unlike conventional desktop-based computing, mobile web has surpassed the limitation of immobility. With mobile devices, users can access information anywhere, anytime when they are in the cell phone connectivity coverage area or using a WI-FI hotspot.

Wireless Internet Connectivity:
Users are now having access to internet on their mobile devices or accesses internet through their mobile devices.

Leveraging Application / Device capabilities:
Services / Applications now can take the advantage of in-built capabilities of mobile devices, like clicking on a phone number can help users to call the respective number with no hassles involved.

Geography-based Content Delivery:
Location-based technologies are enabling the end-users to receive the content based on the location. Such localized content delivery mechanism is helping users to get the desired content with minimal efforts, which leads to a better user experience and benefits to the respective service provider as well.

Strategizing for mobile web:

When an organization decides to design a website or an application targeted at mobile web users, they need to consider several factors like:

• Why should we make / create a mobile web application?
• Does the content delivered on mobile devices make sense for the TG? Is it really adding value to their usage?
• What kind of content can be made available online? Do we deliver useful content?
• We have a very powerful flash-based website. Should we create a similar application User Interface (UI) for mobile devices as well? Will it work across multiple device profiles?

Precisely, before we start working on a mobile web application, we must be aware of all aspects like advantages and limitations the mobile web platform has and also about how to leverage this platform for an organizations’ and end-users’ advantage. We must be clear about ‘whether creating a mobile web application can really add value’ to the respective website as well for the end-users / TG.

As this is a series of posts, we will continue with “Initiating a mobile web project” in the continuing post.

A great navigation is intuitive, easy-to-understand, and easy-to-use and ideally, should not need some plug-in to be downloaded to use navigation. For example, a site navigation is designed using Flash and no alternative way of navigation is not provided, can you imagine how miserable an experience a user can have who doesn’t have flash installed on this machine?

So, we must design sites to good navigation to make the website or an application successful in terms of end-users’ experience while using our website / application.

Below given are some of the points which can help us design a better navigation that helps users to use your site:

1. Navigation Placement:
Make sure that the navigation is placed at an easily visible location, so that the users don’t have to “guess” or “search” for it.

2. Place important things on high:
Keep the important things on the top area of the page, preferably in the first half of the page. Such significant information should get displayed first to the user.

3. Banner Blindness:
As Wikipedia describes it – “Banner blindness is a phenomenon in web usability where visitors on a website ignore banner-like information.

Make sure that you don’t put any content above the ad banners as users are tend to ignore all the content that’s displayed above ad banners. Make sure especially that navigation is not placed above such banners, as ‘navigation’ is very important & should not be ‘lost’.  [Read more about "Banner Blindness"]

4. Avoid being unconventional:
Designing website navigation in an ‘unconventional’ way to make the site stand out from the crowd is NOT a good method of navigation design. It becomes difficult for the users who are now quite used to the general web design practices of designs, navigation & such other generic functionality.

5. Ideally, an easy way to come back to homepage, like a HOME link should be always there:
Homepage being core of any website, a back-link to the homepage should always be there. Also, it is very much possible that user might have landed up on your website through some search engine or have come directly to your sub-page / inner page, a “home” link always helps them to come back to the homepage of your website.

6. Keep the navigational elements consistent across the website:
Make sure that all the links & navigational elements are kept consistently on the same place as there have been anywhere else, in terms of links, styles, etc. User can find them easily anywhere in the site.

7. Design it to ‘load fast’:
Do all your design & development by considering a user having low-speed internet connections. Make sure that your all your site’s HTML, CSS, Flash components (if any) loads faster,  so that users do not leave the site quickly even before it loads as they may not be ready to wait or may switch to your competitor’s site.

8. Quality as against to Quantity:
Internet users like minimum options & clicks to get the desired information. Create sub-sections & sub-categories to help the user to “navigate easily & locate the required content easily & quickly”.

9. Browser-Compatibility:
There is multi-browser application scenario.  Do compatibility tests for your website before it goes live on major browsers like “MS Internet Explorer, Mozilla Firefox, Netscape Navigator, and Opera” & check if the look & feel as well functionality of JavaScript used in the site is working well.

10. ONLY essential stuff in the navigation:
Non-core Information like “Privacy Policy, Terms of use, even Contact Us (in most cases)” should not be in the main navigation & can be placed in the “bottom menus” zone.

Also read:

Navigation Design for Mobile Web – Best Practices

Drop Down Menus – Usability

Do provide your suggestions / insights that can imprve the way we design navigation.

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.

These new kind of drop down menus has features like:

• Everything visible at the same time, so users don’t have to scroll (in most cases).
• Split into two or more panels for an easy to understand navigation interface and grouped sensibly.
• Has features like usage of typography, icons (even may be thumbnails), assistive features like tool tips.
• Users don’t have to remember a lot, everything being visible upfront (as the short-term memory is involved while browsing such objects and several users may miss it as they rely on short term memory).

These kinds of menus are easy-to-use and have been rated good on usability as per tests done by the Jakob Nielsen’s (Alertbox, March 23, 2009).

Also, in desktop application interfaces (GUIs) like Microsoft© Office 2007 , this kind of drop down menus with illustrations has been used effectively.

Microsoft Office Word 2007 – Formatting

Microsoft Office PowerPoint 2007 – Publish Slides

Below given are some of the examples:

Microsoft US homepage

BP homepage

CompareIndia.com homepage

You can read more about the Mega Drop Down menus on Jakob Nielsen’s website: http://www.useit.com/alertbox/mega-dropdown-menus.html

A usable navigation design improves the end-users experience and makes sure that users don’t leave the website due to frustration as they are not able to use your website on their mobile device.

While designing websites specifically for mobile devices, there are several factors which you will have to consider. In this article, we will discuss particularly about “navigation design for mobile websites”. You can read more about Usability Factors for mobile web as well as Design Factors for mobile web.

Here, we will discuss some important aspects of navigation design for mobile websites:

1.Provide only minimal navigation at the top of the page:
Only basic navigation to help users enhance the experience by reducing clutter for these relatively small screens. Core links upfront also help users to navigate across the application easily without getting much frustrated. In case of footer links, provide very few (2-3) and only if it’s really essential and helps users.

Provide only minimal navigation.

2. Balanced Site Structure:
Unlike desktop-based browsers, mobile web browsers has too many limitations like screen size, hardware’s processing capabilities, memory, etc. Scrolling too much could be painful for the users on such devices. So, the information architecture will need to take care of this balance between that will help end-users to reach the desired content with minimal links.

Inessential links or steps added to get the desired content make users frustrated and they simple stop using the site.

3.  Consistent Navigation Mechanism:
The way users navigation on mobile devices is not as easy as pointing devices like mouse on a desktop and they have to rely on joysticks / 4-way navigation or keypad. In such a case, using a consistent navigation method helps a lot.

A “drill-down” navigation mechanism in such interface can help end-users, as it is based on the major headings that take you inside it based on your preferences. For example, someone who wants to see what’s available in movies or music can be directed to the same using main heading link as “entertainment”. Also, we should make sure that links that takes him to main homepage or category homepage are available, e.g. home, entertainment, up, back to top.

Consistent Navigation Mechanism

Make sure you keep these links minimal required and steps to get the desired content also very minimal, as users may not be interested in going for more retrievals or clicks to get the content he / she is looking for. Also, some form of breadcrumbs can help them to track their trail as well as to go back easily.

4. Device-based Access Keys:
Unlike traditional desktop computing, mobile device is not capable of relatively easy-to-use point device (but is bit easier in smart-phones with some point device like stylus). In such a case, we should use the built-in capabilities of the keys built on the device, which are keyboard shortcuts for a mobile device. Users can press a number on the keyboard to go to a link associated with.

Also, make sure that same access key assigned a link is used across the application for the same link.

5. Description for the link:
Provide information related to a link. For example, if a link is directed to a file which may not be supported by the end-users device, it may be frustrating for him as he isn’t ware of the kind of file type is linked with that particular link. Handsets which don’t support videos etc. may show undesired response and may frustrate the end-user.

6. Do not Use Image Maps-based navigation:
Even though it’s an effective way to navigate by using client or server-side image maps, most of the mobile devices don’t support them. Also, usage of images as navigation should be avoided as end-users with information-seeking behavior tend to disable loading images and your navigation may go completely invisible for the end-user, as browsing websites on mobile devices do involve data usage charges to the end-users and they may be simply not interested in viewing those images as they have to pay for it.

There could be more ways to design a better navigation for mobile web. Please contribute them here if you can think of anything.

Kiosks are mean to be easy for all types of end-users, even those who may have very minimal experience with computers, non-tech savvy users who may be hardly interacting with computers. Also, the target end-users are expected to spend very less time at such kiosks to perform certain quick-to-do tasks such as cash withdrawal, balance statement inquiry, shopping mall information like direction for an x store located on some x floor.

For such users, ‘especially non-banking application users’, the time span to be spent on a kiosk will be minimal. And, if they are not able to learn using the kiosk and getting the information they want in around 15-25 seconds, they might turn away from the application (kiosk).

To avoid such issues, one needs to understand the underlying usability and accessibility principles for success in kiosk application development scenario.

Some of the important things which will help you achieve success in your kiosk applications are:
1. Understanding the target users and the environment they are supposed to use this application.
2. Usable interface, designed to suit the end-users / Application design
3. Reliable hardware (displays, ergonomically designed cabinet / hardware)

In this article, we will discuss about understanding the target users. Consider following aspects while designing usable interface for Kiosks / Touch screen based applications:

> End-users are not trained for the application interface: When kiosks are developed, end-users being general public can not be trained at such a large scale, considering the practicality and the viability from business perspectives. Kiosks are of “self-help, learn quickly” kind of applications. Generally, kiosks are set up in places where there is no possibility to train end-users about how to use the Kiosk application.

> Kiosk is an assistive mechanism and can be secondary for people who are late technology adopters or not willing to use such applications [except banking ATM kiosks – being the easiest way for quick-to-do banking tasks such as cash withdrawals and is a must for such users]: There are users who are not willing to use kiosk because of their bad past experiences or fear in the mind about using the technology being late technology adopters. For such users, Kiosk must attract their attention, must be engaging & should not frustrate the user with its complexity. And, most importantly, it must deliver the information.

> Even a small reason can turn them off: Any small flaw in the software / hardware design can make users feel bad about the kiosk and can have a negative effect on the usage level. For example, an action button, if not mapped properly for the action or have a bad “affordance”* can damage the experience and turn them off.  [*Affordance: a situation where an object's sensory characteristics intuitively imply its functionality and use. - Ref: UsabilityFirst ]

> End users must be satisfied: Else, they will go away from the product and may not use it again, due to the bad experience they had while using it first time. (In case of important services like banking ATMs, they will have to come back but will have an adverse effect about the respective bank’s reputation as people may spread negative message about the applications (such as “this bank’s ATM is really tough to use! I am not getting the things quickly…there are too many options to choose from…there are several actions that take me to the action which I desire to do but don’t want to waste so much of time.” And this leads to bad reputation for the x company.

Good software interface is a key to the success in Kiosk-based applications. We will discuss more factors like “An Effective interface for Kiosk – Success Factor” in the continuing post.

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

This has also lead to the growth of online sales. E-Retailing has grown up a lot since then and has identified several factors of success when it comes to retailing online.  You can visit sites like Amazon, 1800Flowers, Dell, officedepot.com to see how they are doing good business online.

To build a successful e-Retailing (e-commerce) experience, it needs to consider several factors like products, website’s visual design, technical architecture, and user-interaction, content, offers, brand value in the market, banner advertisements. They all build a seamless experience for the end-users, which converts website surfers to online shoppers (lead conversion).

In such an environment, Information Architecture plays a vital role, without which a seamless user experience is difficult, leading to lost customers who could have been converted. However the visual design is appealing, technically it is robust, but without thoughtfully developed information architecture, an e-commerce site is about to fail. For example, if the shopping cart design is not done with a process that suits the end-users mental model, they will leave the conversion process midway and the e-commerce site will loose a lead.

Shopping cart design is one of the most crucial parts when it comes to conversions. An effective shopping cart can be designed which matches the user’s mental model and try to apply these insights with core information architecture rules like navigation design, nomenclatures, labeling consistency, along with visual design aspects like consistent screens for enhanced user experience. Using usability testing methods or prototyping tests at initial stages, like Eye-Tracking or Heat-maps or rapid prototyping, you can understand where the users are entering from, where they are making exits, what’s confusing them and what kind of responses they expected from the application?

Being a core part of any e-commerce application, a Shopping Cart needs to be designed effectively. In the absence of an effective shopping cart, the whole application might fail to generate revenue by not converting users into shoppers.

Rules for Effective Shopping Cart Design:

1. Build a clear, clutter-free user interface
Easy to use application interface

2. Avoid multiple windows and pop ups:
No add-on scripts that slows down browsers and confuses end-users

3. Display Product Shipping costs upfront
Clarity in the costs shown increases trust

4. Customer Support to be prominent
Humane touch is embedded and enhances the reliability factor by making users felt that there is someone at the other end.

5. Design effective forms for Shipping and Billing processes with clear labels
Redundant forms which forces end-users to input the same information repeatedly and leaving the site soon.

In the continuing post, we will discuss more about some design strategies that help improve the effectiveness and conversion rates for such websites.

References:
Read more about US Retail E-Commerce at: http://www.emarketer.com/Reports/All/Emarketer_2000492.aspx

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.