Friday, July 8, 2011

Status Lights, Usability and Accessibility – Notes on User Experience

Not long ago I was reviewing the usability of a client’s application, including a “status list”; the first thing that caught my attention was the amount of status available and the illegibility of the 'lights' identifying the status.

Having researched colour vision deficiency in the past, it was very obvious to me that these status indicators were not only impractical, but also they were not complying with accessibility best practices and laws (the famous Section 508).

The colour selection was random and unplanned and the visual treatment was not helping either. The design was trying to add some volume to the 'status lights' with light and shadow, making the colour even more confusing. Finally, the page was too busy, using more lights than a Christmas tree.

After discussing this with the client, he confessed an embarrassing situation while presenting the software to a potential client; someone in the audience pointed out that he couldn’t see the 'status' that he was talking about.

What to do:
Thinking about Usability and Accessibility doesn't mean compromising on the result, but including these requirements in the design process.

First of all, always keep in mind that colour-only is not a good identifier. We all perceive colour in different ways and many people may have serious difficulties to understand your message. Forget the ‘traffic light’ concept. Although we are used to the message, this is not the most user-friendly approach.

Review the colours you are using and test different values/hues to achieve a clear contrast in the absence of colour.

Use a combination of colour and symbols to identify your status indicators.

Finally, reduce the clutter.
  • Do you really need all these status indicators? 
  • Can the status list be simplified to have a cleaner screen?
  • Do you really need a status indicator when everything is OK?
    After all, when driving, you don’t have a green-blinking light in your car dashboard indicating that everything is OK.
Learn how Innovo Ideas can help improve your user's experience ››