/ web

What is Usability Design?

Weather you are a Web designer, programmer or project manager - if you want to know how to create competitive Web sites, software as a service applications or mobile phone software you have to know about Usability Design, in short UX.

This tutorial is mostly, but not completely copied from Jakob Nielsen, one of the most important figures in Usability Design. He bundled together and described in great detail 3 Design models to maximize usability of any application, weather off- or online.

  • Competitive testing
  • Parallel design
  • Iterative design
You have to try (and test) multiple design ideas. Competitive, parallel, and iterative testing are simply 3 different ways to consider design alternatives. By combining them, you get wide diversity at a lower cost than simply sticking to a single approach.

Iterative: Keep going for as many iterations as your budget allows. Test iterations via Heuristic Evaluation.

The goal of heuristic evaluation is to find the usability problems in the design so that they can be attended to as part of an iterative design process. Heuristic evaluation involves having a small set of evaluators examine the interface and judge its compliance with recognized usability principles (the "heuristics").

3-5 evaluators check the proposed Design/Wireframe against the Heuristic list each iteration.

'Heuristic (pronounced /hjʉˈrɪstɨk/) or heuristics (from the Greek "Εὑρίσκω" for "find" or "discover") refers to experience-based techniques for problem solving, learning, and discovery.' - Wikipedia.

Parallel Design

In a parallel design process, you create multiple alternative designs at the same time. You can do this either by encouraging a single designer to really push their creativity or by assigning different design directions to different designers, each of whom makes one draft design.

Use cheap methods if parallel designing, e.g. Wireframing



After wireframing you could go to interactive wireframing and then the actual visual design. Let the the user test up to 2-3 designs. The first one will be the one where the testers are the freshest, so variate the order. When finished take the best elements out of all different designs and merge the designs. Then refine this new design with iterative testing.

  • Out of 4 parallel versions,  pick the best one and iterate on it. This approach resulted in measured usability 56% higher than the average of the 4 designs.
  • Follow the recommended process and use a merged design, instead of picking a winner. Here, measured usability was 70% higher.
  • After one iteration, measured usability was 152% higher.
Stanford University took this approach to the domain of Internet advertising. Ads created through a parallel design process performed 67% better.

In a competitive usability study, you test your own design and 3–4 other companies' designs. Competitive testing is advantageous in that you don't spend resources creating early design alternatives. But as always, quantitative measurements provide weaker insights than qualitative research.

Combining these 3 methods prevents you from being stuck with your best idea and maximizes your chances of hitting on something better.

At each step, you should be sure to judge the designs based on empirical observations of real user behavior instead of your own preferences.


Ten Usability Heuristics

These are ten general principles for user interface design. They are called "heuristics" because they are more in the nature of rules of thumb than specific usability guidelines.


Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.


BaseCamp by 37Signals  
Match between system and the real world
The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.


User control and freedom
Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.




Consistency and standards
Users should not have to wonder weather different words, situations, or actions mean the same thing. Follow platform conventions
Error prevention
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.


Web Form Design by Luke W.


Recognition rather than recall
Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.




Flexibility and efficiency of use
Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.




Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.




Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.




Help and documentation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.




Heuristic evaluation is performed by having each individual evaluator inspect the interface alone. This procedure is important in order to ensure independent and unbiased evaluations from each evaluator. The results of the evaluation can be recorded either as written reports from each evaluator or by having the evaluators verbalize their comments to an observer as they go through the interface.

During the evaluation session, the evaluator goes through the interface several times and inspects the various dialogue elements and compares them with a list of recognized usability principles (the heuristics).


Software specific Heuristics

One way of building a supplementary list of category-specific heuristics is to perform competitive analysis and user testing of existing products in the given category and try to abstract principles to explain the usability problems that are found (Dykstra 1993).

One approach that has been applied successfully is to supply the evaluators with a typical usage scenario, listing the various steps a user would take to perform a sample set of realistic tasks.

The output from using the heuristic evaluation method is a list of usability problems in the interface with references to those usability principles that were violated by the design in each case in the opinion of the evaluator. Detailed answers are needed.

Debriefing Meeting: A debriefing is also a good opportunity for discussing the positive aspects of the design, since heuristic evaluation does not otherwise address this important issue.


Example Interface


DeviantArt (Creative Commons)



A good site, service or application also takes into account if it needs to be used by the hearing impaired and a screen reader, or weather your users use mobile devices, such as smartphones, tablet PCs or others. Evaluate if your users prefer or are bound to a keyboard and provide shortcuts.  
I hope you enjoyed this tutorial on Usability. Why don't you subscribe to my RSS feed? I also appreciate any comments in the section below. Thanks for reading.
What is Usability Design?
Share this