Heuristics for Modern Web Application Development

Heuristic evaluation is usually done either to augment usability testing, or where usability testing is impractical or cost prohibitive. Heuristic evaluation is considered slightly more objective than a simple "expert review" as the results are based upon generally agreed guidelines rather than personal opinion.

There are a number of different usability heuristics around, but the most popular ones on the web are Jakob Nielsen's 10 usability heuristics and Bruce "Tog" Tognazzini's basic principles for interface design.

As part of my consultancy work I run a lot of expert reviews and heuristic evaluations. While planning a recent evaluation, I started to feel that the existing heuristics didn't accurately describe the requirements of a modern web application. In particular I felt that Mr Nielsens heuristics were somewhat convoluted, contained a lot of overlap and varied widely in terms of scope and specificity.

Since Mr Nielsen first created his heuristics back in 1990, the web has changed on a lot. Many of the underlying principals remain the same, but their relative weight has shifted. So using these heuristics as a starting point, I set out to create a set of web application heuristics that better reflected the current landscape.

Usability heuristics are by their nature subjective, so I don't claim what follows is a definitive list. However I have tried hard to cover as many common usability issues as possible. There is still a lot of overlap, but I think this is because one problem can the result of multiple causes.

Anyway, this is just a first draft so I'm really keen to hear your opinions.

Design for User Expectations

Design the system around the users, their goals and expectations. Choose features and functions the audience will find useful and use the appropriate level of complexity for their experience and abilities. Make processes work in the way users expect, and mirror real-world processes where applicable. Ensure the interface always upholds its promise and never trick or mislead the user. E.g.

• Choose features that will help users achieve their goals
• Use common web conventions
• Make online processes work in a similar way to their offline equivalents
• Don’t use misleading labels or buttons

Clarity

Make the system as clear, concise and meaningful as possible for the intended audience. Use meaningful icons, symbols and imagery. Use the natural language of the user and optimise for skim reading. E.g.

• Write clear, concise copy
• Only use technical language for a technical audience
• Write clear and meaningful labels
• Use meaningful icons

Minimize Unnecessary Complexity and Cognitive Load

Make the system as simple as possible for users to accomplish their tasks, but no simpler. Do not overload the user with too many unnecessary choices, and make sure those choices are prioritised. E.g.

• Remove unnecessary functionality, process steps and visual clutter
• Use progressive disclosure to hide advanced features
• Break down complicated processes into multiple steps
• Prioritise using size, shape, colour, alignment and proximity

Efficiency and Task Completion

Design for user productivity, not the system’s. Optimise the system for the most common tasks. Provide experienced users with advanced features that speed up task completion. Use the most common defaults and honour user preferences and previous selections. However, allow them to be easily overridden when necessary E.g.

• Provide quick links to common features/functions
• Provide advanced features like the ability to delete multiple messages
• Pre-check common options, like opt-out of marketing emails
• Allow defaults to be changed, cancelled or overridden.
• Remove unnecessary steps

Provide Users with Context

Interfaces should provide users with a sense of context in time and space. The system should let users know where they are, where they have come from, what they can do and where they can go next. Processes should inform users of the progress they have made and the remaining duration. E.g.

• Provide a clear site name and purpose
• Highlight the current section in the navigation
• Provide a breadcrumb trail
• Appropriate feedback messages
• Show number of steps in a process
• Reduce perception of latency by providing visual cues (e.g. progress indicator) or by allowing users to complete other tasks while waiting.

Consistency and Standards

Labels, processes and interface elements should be used consistently throughout the system. The system should use common web conventions unless a new convention provides a significantly improved user experience. E.g.

• Use common naming conventions such as “log in�?
• Place items in standard locations like search boxes at the top right of the screen
• Use the right interface element or form widget for the job
• Create a system that behaves in a predictable way
• Use standard processes and web patterns

Prevent Errors

The system should help prevent errors wherever possible. This can be done by limiting incorrect choices, accepting alternative input formats, providing guidance and inline validation where applicable. E.g

• Disable irrelevant options
• Accept both local and international dialling codes
• Provide examples and contextual help
• Check if a username is already being used before the user registers

Help users notice, understand and recover from errors

Errors should be obvious and easy to recover from. Error messages should be clear, concise and easy to notice. They should succinctly explain what has happened and suggest possible solutions. E.g.

• Visually highlight errors
• Provide feedback close to where the error occurred
• Use clear messages and avoid technical jargon

Promote a pleasurable and positive user experience

The users interaction with the system should be positive and where possible enhance their quality of life. The user should be treated with respect and their preferences and wishes honoured. The design should be aesthetically pleasing and promote a pleasurable and rewarding experience. E.g.

• Create a pleasurable and attractive design
• Provide easily attainable goals
• Provide rewards for usage and progression