Web & Mobile sites are not desktop software
There are a number of interface guidelines and heuristics to help evaluate user interfaces. One of the most well known are Jakob Nielsen’s 10 Heuristics for User Interface Design. These were developed by Nielsen in the mid 90’s and were intended for the evaluation of user interfaces for computer software applications in general. He has since then revised them several times, but they remain rooted in the desktop in my view.
In designing and building websites it seemed to me that some of these heuristics did not translate well to the web and even more so now for mobile. While some rules could be rephrased to be more applicable to web sites, others when it comes down to it, really do not apply to the web. I also felt that several items were too closely related to each other and could be better understood as a single point.
Another popular heuristic is from Steve Krug’s book, “Don’t Make Me Think”. A wonderfully short book that encapsulates Krug’s approach to evaluating websites. While Krug’s work is very straight forward, it is perhaps too simple. Although he provides several other guidelines that are derrived from his main guiding principle, his guidelines are in my view insufficient to fully evaluate websites that could also be much more complex applications.
I have put together a revised set of heuristics that build upon a combination of Krug’s work with Nielsen’s. My goal was to create a set of heuristics that would provide a simple, yet comprehensive way to evaluate web/mobile sites and applications. It was important that it be balanced between being easy to work with and also be comprehensive enough to cover a website as an application. While there have been many others who have created similar website usability evaluation tools, they tend to be overly rigid with checklists of 100s of items that don’t always apply or they lack practicality with ambiguous guidelines that are hard to interpret, let alone apply.
I have since presented these heuristics to colleagues at several companies that I have worked with over the years. It has helped provide teams of reviewers an easy to use, consistent, and comprehensive approach to assess the usability of a web and/or mobile site.
Web heuristics for evaluating web/mobile sites
I call these the “Magnificent 7” heuristics with detailed descriptions below:
- Fast Speed/Fluid Interactions
- Branding/Consistent/Trustworthy Appearance
- Accessible
- Proper Feedback/System Status
- Clear and Concise Writing
- Reduce Cognitive Load & Disruptions
- Minimize Redundancy
Download the web heuristics rating guide
I have also put together a spreadsheet which is used as a template for documenting heuristic reviews:
Descriptions
Fast Speed/Fluid Interactions:
With today’s high speed connections it is easy to think that speed is no longer an issue. This issue actually seems to be getting worse with a number of sites with gratuitous graphics, animations, and complex styling. Quite simply for a great experience, all pages of a site must load quickly. People may wait for content to load after clicking a link or wait for a response from submitting a form… If they are extremely interested and they are sure that they will get what they need. However, most of the time people are just getting started or are somewhere in the middle of the journey and they are in a hurry. Repeated slowness has been shown to drive down conversions for places like Google (Speed Matters) and other ecommerce sites (Speed Kills Conversion Rates). If those places see people abandon their products due to delay, how long do you think people will wait for your pages to load?
Elements within a page that allow interaction also need to respond to the control of a person quickly and fluidly. Twitchy hover menus and other strange hover affects can cause people to make mistakes in clicking and selecting. Calls to action need to be large enough not only to notice, but also to be easier to click or tap on (Fitts’s Law). Menus that slide or scroll can be difficult to manipulate if they move too quickly or be annoying if they move too slowly. For mobile, long drop menus can be much more difficult to manipulate.
There are many ways to optimize a site as well as ways of letting people know that something may take a while. While spinners and animated progress bars seem like good ways to make people think something is happening, they are no better than watching paint dry if they are used too frequently. A new recommendation is to provide pre-content blocks or a skeleton screen that establish the layout prior to content flowing in to a view as proposed by Luke Wroblewski (Avoid the Spinner). Responsive mobile designs that are not made adaptive for images and code can be exceedingly slow, especially when on slower cellular data connections.
Branding/Consistent/Trustworthy Appearance:
Establishing trust with a person is paramount to them providing information to your business or using/buying products or services from your business. Unintentional inconcsistency can cause people to lose trust in a site. Using different words for buttons that perform the same action or having different titles on pages than what appeared on menus/links, can cause people to lose trust in your site and your brand. Inconsistent placement of content, buttons, or navigation links lead people into the tedious task of hunting for the “cheese”. Unlike a rat trapped in a maze, people can escape the maze of an inconsistent site and find the product or service they want elsewhere.
Sadly, it is becoming common to see intentional inconsistency and trust issues. Despite that a large number of people share everything on Facebook and other social sites, many continue to be wary of organizations that appear inconsistent or untrustworthy. I know of no one who likes Facebook’s privacy policies or how the prviacy controls of the site appear or function. Facebook is treading a dangerous line and has already lost tens of thousands of people over gaffe’s in their handling of personal data in the past. Even if a person does not leave the site permanently, this still causes people to spend less time on their site and be less willing to share or interact. Eventually they may look for alternatives.
Another area that breaks trust is providing irrelevant content, products, or services. The same crappy marketing that has appeared on TV and in print, is now growing rampant on the web. Companies over eager to cross-sell and up-sell risk turning off repeat customers with cluttered shopping carts and site merchandising that goes too far. For mobile experiences it is even more critical to avoid cluttering the UI which is also part of your brand.
Accessible:
It is imperative for a site to be accessible for a company that does business with a government agency / department. Governments throughout the world require sites to be accessible if they are to be used by government employees and personnel. A site should meet the Section 508 requirements for US government compliance and otherwise should meet the WCAG 2.0 level AA requirements for other countries globally. This includes having proper skip links, alt text, keyboard short-cuts, and other elements that enable assistive technology to navigate and manipulate things as intended. Accessibility inspection can be done on a basic level with a tool for evaluation. Manual checks can and should also be done if the reviewers have access to or use assistive technologies themselves. Ideally you should include people with assistive devices in your usability testing as well.
It is smart business to provide an accessible site to the public sector as well. Making a site accessible is not trvivial, but neither is it overwhelming. This is not just making the site usable for only the blind also be aware of color contrast which can limit what people perceive as well as using color as the only indication of status information.
Designers often love to use subtle colors and make text less dense by lowering the contrast. However, this can create problems for people who suffer from a variety of visual deficiencies. There are also different kinds of color blindness, which affects as much as 10% of the population. An error message may look fine to you, but for someone with a problem seeing red colors, it may be indistinguishable from other text if there is not also an icon or other element to highlight the problem.
Mobile uses the same accessibility guidelines as the web. However, there are additional challenges that can affect accessibility for mobile. Colors that look fine on a desktop may not appear as clear on a device viewed in direct sunlight. Things that need to be tapped may need to be made larger. In general though, most modern mobile devices actually support accessibility very well with built-in features/functionality that make them ideal for use by those with disabilities. Despite those features you still should check and test designs for accessibility.
Proper Feedback/System Status:
Nielsen has several heuristics that all relate to feedback and status of changes on the system. Providing ways to go back in navigation or in a process and displaying proper alert or error messages, help people to avoid problems or escape from them when they do something by mistake. Unintelligible error codes and language including the basic http ones (401, 403, and the infamous 404) leave people stuck with them making the most likely choice of leaving the site. See the next guide on clear and concise writing for issues related to the wording of status messages.
Other problems occur when a person clicks/taps a button and nothing seems to happen. They click/tap it repeatedly waiting for the action to take place, when in some cases it has already been completed the first time. This is especially true when a page reloads to the same state it previously appeared or there is a technique used for updating part of a page, which is then not noticed. It is necessary to make sure changes whether prompted by interactions or automatic changes from the system are clearly displayed.
Clear and Concise Writing:
As Steve Krug describes, most users scan pages for what they are looking for and rarely, if ever, read blobs of text that are not the actual content they are wanting to read. Too much text can push other valuable content down the page, including products and services that a person may be interested in finding. This is even more critical on mobile where text that only takes a couple inches on a desktop, can be two pages of scrolling. Just to be clear, this does not apply to articles and / or content that are rich in information which a person is interested in reading or learning.
For websites, this applies to not just marketing content, but also help and documentation. Help content that is a wall of text and requires rereading several times before being able to figure out, is of little help at all. Long, poorly written instructions are useless and only teach a person to not bother looking for help again. If someone cannot figure out how to use a website/application on their own, they are likely to give up and leave.
One of the most common usability problems that frequently occur is the use of jargon or ambiguous terms for critical navigation or features. This is often hard for heuristic reviewers to catch, as they are may be too familiar with the terms used on a site to see them as problems. Alternatively, they may flag false negatives for things that may be common to an industry or domain.
It is important to not oversimplify a label or link as this can cause people to miss important content or functionality. Sometimes being too concise can also cause meaning to be lost. Lastly, if there are commonly accepted terms and abbreviations in an industry, it is important to actually use those terms correctly.
Reduce Cognitive Load & Disruptions:
The main tenet from Krug is to avoid causing people to stop and think. Providing the right information at the right time helps people in making a decision of where to click next in their journey, or deciding which product is right, or to complete tasks such as checkout. Asking someone to remember something that they saw on a previous page, or worse, to remember information from an offline source, is going to cause them to stop. This excludes asking for a credit card number to complete a checkout as that is a common need. However, asking them to choose or fill in a company account number means they have to stop to go find that information, if they do not have it ready or remember it at the moment (Miller’s Magic Number 7). Side note: Miller’s law is often misused to apply to navigation, it is important to understand that Miller’s studies only covered the memorization of numbers and strings and did not involve navigating menus. However, it does have implications for needing to remember things like account numbers.
It is critical for things like help, which need to be available and visible on the page where a person is stuck. Making people go to an entirely different location for help content can make it challenging to flip back and forth. People do not often go looking for help or documentation on how to navigate or use a website so it is important that when they do you make it simple for them to refer to it in context. On mobile it is even more unlikely that users will spend their time reading through a long help article.
Even for complex web applications, while you may force people to read an online training guide or tutorial, it needs to be presented in a way that a person can quickly move through it as needed. Onboarding, can be a critical factor to the success of a mobile site/application. Avoid displaying disruptive pop-ups or overlays if they are not necessary. An overlay or alert may be OK if it is critical result to an action a person has taken, but if it is unrelated or appears frequently, it will be frustrating.
Lastly, presenting an overwhelming number of options can cause a person to ignore or abandon key tasks. Often referred to as the paradox of choice, providing people with too many results can cause them to not make a choice . Poorly designed option displays, or search filters, or not providing easy ways to compare all items, prevent people from narrowing down the options effectively.
Minimize Redundancy:
If a task needs to be performed several times or more, there needs to be a way to either shorten the steps taken to start the task or, if possible, to automate it in some way. A repetitive task that requires multiple steps to restart, becomes tedious and painful. This is another area in which heuristic reviewers may overlook as they may not repeat a common task to see how tedious it can become.
Something as simple as creating a new page in a content management system can become tedious, if it takes several steps to navigate to the location to add the page and then open a form and then when completed, resets the display to a dashboard or list of pages. Allowing someone to save a series of steps previously taken up to a certain point can greatly minimize the effort as well. If a user keeps entering the same settings every time they add something, allow them to set them as defaults so that they do not have to repeat the entry over and over.
A common pattern for ecommerce, is shopping and building an order for multiple products. If a person is taken to the shopping cart every time they add an item to the cart, they may have to go back to where they were to get another item. This can quickly become tedious and annoying. Many sites now show a simple item added to the cart via an overlay, keeping the person on the page they were shopping. Further more, many sites will retain address and payment information from a first order and allow them to skip the tedium of reentering information on repeat orders. There is a balance as sites also lose customers when they do not know how to get to the cart and checkout as well. If you know that most customers may only buy one item or there are certain items that typically bought individually, then having them go to the cart on adding an item can help improve conversions.
On mobile this is critical when entering info because using on-screen keyboards can be quite laborious. Simplifying form input and removing unnecessary fields not only makes the mobile experience better, but it also improves the desktop experience as well. This also ties back to the “Don’t make me think” principle from Krug where truly unnecessary fields can cause people to stop and never complete the task.
Links in article
10 Heuristics for User Interface Design, Jakob Nielsen, retrieved on 2014-08-30
http://www.nngroup.com/articles/ten-usability-heuristics/
Don’t Make Me Think, Steve Krug, retrieved on 2014-08-30
http://www.sensible.com/dmmt.html
Speed Matters, by Jake Brutlag, retrieved on 2014-08-30
http://googleresearch.blogspot.com/2009/06/speed-matters.html
Speed Kills Conversion Rates, Info Graphic shared by Linda Bustos, retrieved on 2014-08-30
http://www.getelastic.com/site-speed-infographic/
Fitts’ Law, from Wikipedia, retrieved on 2014-08-30
http://en.wikipedia.org/wiki/Fitts’s_law
Paradox of Choice, from Wikipedia, retrieved on 2021-04-24
https://en.wikipedia.org/wiki/The_Paradox_of_Choice
Mobile Design Details: Avoid The Spinner, Luke Wroblewski, retrieved 2016-05-16
http://www.lukew.com/ff/entry.asp?1797
The Magical Number Seven, Plus or Minus Two: Some Limits on our Capacity for Processing Information, by George A. Miller, retrieved on 2014-08-30
http://psychclassics.yorku.ca/Miller/
Side Note: Again, I need to repeat this as many people have mistakenly used Miller’s Magic Number 7 to improperly suggest that menus should be only7 +/-2 items. However, his work focused only on the memorization of numbers/digits and not the ability of people to scan and select from a menu of options.
Go to the comment form