Traffic lights methodology

Introduction

Using the traffic light methodology – where:

  • Red is something that could be looked with caution
  • Orange should be waited upon
  • Green is of positive end result

trafficlights-no-iconsjpg
Using the traffic light methodology but without icons to determine meaning of the action.

Colour blindness

The only problem with this methodology is that colour blind users might not be able to initially tell what dialogue is asking them to do.

trafficlights-colourblindnessjpg
Someone who suffers from Protanopia colour blindness sees an example like this.

Solution using icons

Icons could be designed to get around this issue. Each icon is associated with a possible outcome.

  • A tick is used with green to create positivity
  • Two arrows pointing towards each other represent orange and reaffirm waiting for a response.
  • An exclamation mark promotes red – the combined effect denotes caution.

trafficlights-with-icons
Attaching icons to each action lets the user know what is going to happen when clicking on the button.

trafficlights-colourblindness-with-icons
Someone who suffers from Protanopia colour blindness sees an example like this.

With the icons, a person who suffers from colour blindness will still be able to notice a difference between each of the dialogue boxes.


Image from Flickr – taken by Audiotribe.

One Response to “Traffic lights methodology”

  1. Cool Article!

    We are a ISV based in Buenos Aires, Argentina and we will use this concep in the next release of the our flagship product! :-)

    Thanks!

Leave a Reply

Further information

Date
Monday 20th of April, 2009
Tags
,
Categories
Design

You can leave a response, or trackback from your own site.

You can follow any responses to this entry through the RSS 2.0 feed.

Categories

Hmmm…

If you have a question about something then feel free to email and I'll be more than happy to write a journal entry about it.

Send me an email