We interrupt our series on graph traversal for the following question. Here are some UX elements from a “quiz” program I used recently:
In this series of activities, select whether each person should:
- Stop now because the action is inappropriate
- Proceed with caution because the action is questionable
- Go ahead because the action is appropriate
A scenario is then given, with the following UI element:
That is, the program is testing whether or not the user can correctly apply company policy to the given scenario.
In what ways is this traffic light element wrong from a UX perspective? I am curious to see what you come up with. Please leave problems with this UX in the comments.
Here, I’ll start.
The meaning of a solid yellow light on a three-lamp traffic signal is not “proceed with caution” — that’s the meaning of flashing single-lamp yellow light. A solid light on a three-lamp traffic signal means “you are hereby warned that this signal is about to turn red, so stop now if you can do so safely“. The analogy is therefore subtly flawed.
Fabulous adventures in coding 
Off the top of my head, “Stop Now,” in a traffic light doesn’t actually stop you. Have you never stopped at an empty intersection in the dead of night and then proceeded through it when you observed that there really is no traffic. In that sense it also is advisory. What we really want are the traffic barriers at railroad crossing to prevent an inappropriate action (I know, even that is flawed since you can drive around them).
I did that once, and got a ticket.
But you weren’t stopped and, presumably, were able to proceed safely through the intersection – so the light was arguably “wrong” – that’s another inconsistency in UX. The stop light sometimes prevents you from doing perfectly reasonable things given the conditions.
That’s the cost of prohibiting you from doing unreasonable things reliably: false positives.
Relaxing the rule to “Red means ‘you can’t go’, unless you believe you can actually safely go in which case it has the same meaning as the green” would effectively turn the intersection into an unregulated one, since this rule is virtually the same as “You can go as long as you believe you can do so safely”.
But most states already have a “you can’t go unless you can actually safely go” law, specifically, right turn on red.
Well,
1. It’s not friendly to red/green color blind people
2. The banner box for “Proceed with caution” is much larger than the other two, drawing your attention to it more prominently and possibly subtly biasing behavior.
3. It’s unclear if selecting an option requires clicking the text or the light.
4. All three lights are never leave t at the same time on a real light as they are here.
5. In different countries or regions traffic light placement is different. For instance go (green) is sometimes on the top.
6. How do you undo a selection if you make a mistake. For that matter – how is your intended choice highlighted before you commit to it.
7. In traffic systems, a light is a non-interactive element; it’s job is inform you not let you make a choice.
Regarding #1, the buttons alone wouldn’t be any help either. The traffic light scheme only adds intuition (although, as many are mentioning, not a very accurate intuition). Besides, the color blind are allowed to drive; they understand traffic lights, just without the color. To whatever degree the traffic light is a good analogy, it’s not really any less friendly to the color blind.
Why do you assume that the people using this UI are necessarily drivers or old enough to understand typical driving rules? My friend’s 6-yr old niece can read but know nothing about traffic lights and happens to be R/G colorblind.
I’m trying not to assume anything, but I also think it’s reasonable to say that whoever made the program knows their target audience. If, for example, this is something Eric’s employer is using to survey employee workplace behavior opinions, it’s okay if the program is targeted at adult Americans.
Anyway, I’m just talking about color here. A six year old who doesn’t understand traffic lights will fail to understand traffic lights whether or not they can see the difference in the colors.
I agree with Brandon regarding colour blindness; the colour blind could still use this UI element effectively by reading the text; seeing colour is not *necessary* to use this element. However, one then has to wonder: if the text is sufficient, then why have the graphic element at all?
Um, because redundancy is a fundamental element of reliable communication?
I am R/G colourblind according to various standard tests, but have no difficulty telling the colours in this image apart. R/G colourblindness does not work in the way most people seem to think. It tends to manifest more as a lack of contrast between pairs of muddy or unsaturated colours that most people would see as clearly different. (E.g., the Isihara plate that looks like ‘8’ to most people, but ‘3’ to R/G colourblind people would look different again to totally colourblind people (who see no number at all). The reason R/G colourblind people are able to perceive a 3 to is because the fairly well-saturated reds and greens are clearly different – the test relies on our ability to do the very thing most people think we can’t! We don’t see an 8 because the left hand half of the number is formed of somewhat washed out orange dots on a background of washed out yellow and brown dots. Those are the pairs that are hard to distinguish if you’re R/G colourblind. And even then, I can even see the difference in colour looking at individual dots next to each other, it’s just that there’s very little apparent contrast, so the overall impression is of a mixture of colours with no overall pattern where most people would see a clear boundary.)
So most ‘colourblind’ people (R/G being the most common kind) wouldn’t be troubled by this particular image. (Fully colourblind people would, though. And even though that’s a much more unusual condition, it’s still a concern, obviously.)
In what ways is this wrong from a UX perspective?
It assumes that users are not color blind.
It assumes users are english speaking.
it assumes users have knowledge of traffic signaling.
Whether an action is inappropriate or questionable is not addressed or conveyed.
Skeuomorphism is old-fashioned. 🙂
I’d hesitate to say anything about localization problems, because I’m not sure the UI doesn’t account for other locales. With that in mind, if this is for an American audience, the analogy isn’t too bad. As you say, it’s flawed because that’s not what yellow means. Also, maybe there’s a disconnect because real traffic lights direct traffic flow and not behavior, or because traffic lights cycle and coordinate with other lights on a timer, but that kind of stuff is just getting picky.
There do seem to be some presentation flaws. Like the buttons being different sizes and overlapping with the light a little bit. The texture on them is a little unpleasing as well, but that’s also just getting picky.
Others have indicated issues with red and yellow, but the green light also seems to be slightly incorrect.
A green light on a traffic signal does not mean “go ahead” — if anything it’s closer to what they show as the yellow definition “proceed with caution”. A green light indicates you have the right-of-way; it says nothing about the safety or availability of the intersection. There might be stalled or damaged vehicles blocking the way, a policeman manually directing traffic, or a semi-truck about to speed through from the other direction.
Of course once you start pointing out nuanced little things specific to traffic signals and irrelevant to a questionnaire, you end up in a mess. The real problem is drawing a bad analog between two incompatible objects. I think they would have been better off removing the traffic signal image altogether and relying on the colors and words alone.
sorry just can’t help my self…
I loved that movie when I was a kid.
I think the following design works much better: three signs, only one at a time is highlighted/selected.
Stop sign
Warning sign
Go sign
with possible localization (e.g. https://trafficsignstore.com/stop-arabic.jpg).
This way you eliminate any color blind issue (three completely different shapes), only the relevant sign is clearly highlighted and the meaning of the Warning sign better matches the statement “proceed with caution”. If required, the UI will present a particular sign (e.g. Stop) already selected by default or just leave them all unselected. In this case, you may have to select one of the signs to proceed with the next action.
“If it needs a sign it’s a bad design.” The fact that the coloured light symbols can’t stand alone (they need explanatory captions) indicates that they aren’t a good choice for expressing the idea.
Please don’t make me think! What will I be stopping.
Clearly, I’ll choose the middle ground. Not sure about stopping. Not sure about going. I might also pick up that an equal number of users either stop or go, yet the majority (50%) proceed with caution.
An explanation prompt text would help here. Something like “To tech the tech select the teching tech. Tech the tech?”
From what I’ve heard, red light is perceived as “Go” in China and possible other countries as well. UX should be as culture agnostic as possible, so the red/orange/green light solution is probably not a good solution in an international public application.
I guess one could localize the colours of the lights, but that would probably just cause too much confusion.
Red has generally positive connotations, but the colors of actual traffic signals (and therefore any UX element that heavily leans on a traffic signal analogy) and stop signs are universal except for occasional use of blue for green lights.
In general when I’ve heard about this the example been more about an isolated delete or close element rather than something that’s part of a set like this.
I dont like the idea of having a “yellow” state in a computer application.
As some other people suggested, traffic lights are advisory and the current state is totally uknown to the lights. So yellow is like “OK, not sure what’s going on but be careful now”.
An application though, is (or should be) totally in control and aware of the current state (there might be some exceptions of course). So a user action is either valid or invalid. What’s the yellow says here? “You filled the form but I’m not sure if I can accept it or not…” ?
Long story shorter, yellow light is just there to cope with the fuzziness of real life and other peoples unpredictable actions and I think such middle states would be confusing in applications.
I could see a yellow light being reasonable as part of a storage-space indicator, if “green” meant “enough memory remains that almost any reasonable operation will succeed”; “yellow” meant “storage is sufficiently scarce that some operations may fail, but operations that don’t require much space will succeed”; and “red” meant “storage system is full; no operation that requires allocating additional storage can succeed unless or until some things are removed to make room.”
In the UK:
– The (solid) amber light also means stop (you may go only if you have already crossed the line). https://www.gov.uk/government/uploads/system/uploads/attachment_data/file/312214/the-highway-code-light-signals-controlling-traffic.pdf
– The light at the bottom is actually nearly blue to aid those with red/green colour blindness.
“or are so close to it that to pull up might cause an accident ” – generally, yellow lights are short enough that this is going to be true for anyone who actually ends up crossing the line while it’s still yellow – if you’re far enough away for it not to apply, the light will probably be actually red when you cross it.
Also in the UK… Green Light does NOT mean Go Ahead or Go… it means process if it is safe to do so.. remind me not to accept a lift from you!
Why would he be giving you an elevator?
From a UK point of view yellow (amber) **never** means anything like “proceed with caution”. The closest would be when both red and green show simultaneously (just before changing to green) which means: “Stop. Do not pass through or start until green shows”.
The green light doesn’t mean “Go ahead”, it actually means: “you may go on if the way is clear. Take special care if you intend to turn left or right and give way to pedestrians who are crossing”
So to me: Red means stop, Yellow means stop as long as it’s safe to do so and Green means proceed with caution.
There is also the problem that traffic lights are generally something I *react to* not something I control (however much I may want to!)
> Red means stop, Yellow means stop as long as it’s safe to do so
So does that mean red means “stop even if it is *not* safe to do so”? If not, what’s the effective difference between red and yellow? Isn’t it really more like red means stop unless it is manifestly unsafe to do so, while yellow means consider stopping if it reasonable to do so?
That’s an interesting point of view. Going through red is likely to be extremely dangerous, the transition period (yellow) should be enough time to ensure that it is safe to stop by the time the light is actually red.
I point you to the Bruce Springsteen song “Johnny 99”: http://www.youtube.com/watch?v=OAjhHbtZyQU
🙂
Agreed Rob, Traffic lights are very much an output, not input device!
A red light means “stop now, this action is inappropriate”. In UX this is useless. If the action really is inappropriate, prevent it.
Meanwhile, a green light is meaningless. If it means go ahead it conveys the exact same information as no light at all.
If you have only one light left – yellow – which is a general warning (it doesn’t mean here the light is about to go red, so it’s just a warning light that something looks like a bad idea, or might be fishy but you’re not sure), there is not much left of the entire traffic light analogy.
I agree: traffic lights are an “output” mechanism: they give information to the user. Here they are used as an “input” mechanism: please user, tell me what I should do. That is not the way traffic light work, you can’t “click” the red light to make traffic stop.
I agree. My first reading of this question was that this was somehow the computer telling me what to do – which I hate. They’re stupid and cussed creatures.
So the use of traffic lights set up a false and negative impression, which I had to correct later. Not a great journey to send your users on.
Oh wow. Comments work. I’m at home, so I guess that means I’m blocked at work. Great.
Traffic light is just a wrong idiom for conveying the message. TL prescribes how the moving state should be changed:
RED – stop or continue staying,
YELLOW – get ready to change state,
GREEN – go, or continue moving.
The signal is encoded by color and location (+ sometimes text)
Form (circle,star,triangle) can be used as well in UI. (for real TLs size and uniformity matters more).
Second, lights do not have semantic order (compare with the guage: http://www.itasca-mantrap.com/images/gauge_green.jpg)
So using TL for describing the severity of possible consequences is not a very good idea. Nonetheless if consistently used in UI, user can learn the meaning and get used to.
The traffic light adds nothing to the text options: It only makes the user think about driving in traffic when there is no need to do so.
Where do you click? Do you click on the lights? Or on the text next to the lights? What happens if you clicks between the light and the highlighted text? Or further to the left of the light?
How would you localize it?
Pingback: Dew Drop – November 13, 2014 (#1895) | Morning Dew
If I wait long enough, should the red light turn green by itself ?
I was never a fan of how often the traffic light analogy is used, mostly because I suffer from red-green colour blindness. Which is the most common form of colour blindness from my understanding, I believe 60% of males have some degree of it.
I think I could add a little bit to this actually, without it just being a joke! Hooray!
Things on top are generally thought to be better. This may be a cultural thing, but the same is true of things on the right-side – they’re considered to be “more correct”, e.g. grades on a paper (“top of the class”), or number-lines for non-number-line synesthetes – typically, higher numbers reside to the right or the top, lower to the left or downward. Even our very language implies that “left” is bad, i.e. sinister derives from the Latin for left-handed. Why do we look down when feeling shame or guilt? Because we don’t deserve to look up where the normal people are, that’s for sure. (Thanks, Catholicism!).
This doesn’t ultimately seem like a huge issue, but it’s a point not in the favor of the traffic light idiom, where the top-most light is nearly always the “stop” light.
That’s only true for Western cultures. Most of what you say does not apply anywhere else, or even in specify industries in the west.
For example in Forestry there are colour codes for marking trees. Blue is used for ‘bad’, not red.
That’s probably why I mentioned it could be a cultural thing.
In what ways is this traffic light element wrong from a UX perspective?
in the context of the program there are 3 options on the screen when I only need 2 (red and green):
– yes the user can correctly apply company policy to the given scenario.
– no the user cannot correctly apply company policy to the given scenario.
I don’t think the question is whether or not you should apply company policy. One should *always* apply company policy. I think the question is about if a certain action is in accordance to policy. E.g. “You’ve taken your home laptop with you to the office to work on a document you’ve created at home. Can you plug the ethernet cable in the socket at your desk?”
Yes – Employees are encouraged to connect, thereby testing the resilience of the network’s security.
With caution – Employees may only connect their own devices when measures (as described in section such and such) have been taken to ensure the network’s safety.
No – Of course not! Are you even an employee!?
So, actually, having three options kind of makes sence. The traffic light, and the accompanying text, is a bad choice because caution is always sensible. Green will almost never be clicked. And red possibly less so than with clear multiple-choice options (as in my example above).
point taken – that’s exactly what went through my head when reading the question, but I don’t like over complicating things, there is actual another valid state here – no lights? what happens in that situation? Does the user just wait – also flashing and solid on the same color – a users understanding of this scenario would again be reflected in their country of origin . Also red in context could also mean ‘stop now’ + ‘Proceed with caution because the action is questionable’ if you’re from North America. Another bit of trivia – if you are from South Africa a traffic signal is called a ‘robot’ 🙂
I’d love to give some feedback on what’s wrong with this from a UX perspective, but I’m still suck here waiting for the light to go green so I can proceed (if safe to do so) to one of the buttons.
In much of Quebec (in Canada), though not in Montreal, traffic lights not only vary in color but in shape and to some extent, size. Red is square (and visibly the largest light), green is a circle (diameter about the same as a side of the square) and yellow a diamond (diagonal about the size of the side of the square).
http://john-s-allen.com/galleries/Quebec/signs/IMG_0053squarelightsm.JPG shows a typical red light.
There is no indication for what should happen when more than one light is lit.
In many countries (such as the UK) the red and yellow is shown together to indicate that the light is about to change to green; while elsewhere the green and yellow are shown together (often with the yellow light flashing) to indicate that the light is about to change to yellow (“warning I’m about to change to a warning light” while redundant was deemed necessary by the relevant transport department).
Also there is no indication of what a lone flashing green light indicates (such as the pedestrian controlled lights in Canada, in other places a flashing green light indicates it’s about to change to yellow).
Lastly there is no consideration for what action should be taken when there are no lights lit at all (traffic analogy here would be if the bulb is blown, where as in software it might just be that no default value is selected somehow), or if there is conflicting light signals that can be seen from one direction.
An ideal traffic signal would allow any approaching motorist to know at a glance whether it will be necessary to stop at an intersection, or whether it will be safe to proceed through it at speed, while avoiding overwhelming the motorist with too much information. For an amber light to provide a motorist with the necessary information, it would be necessary for the motorist to know both when the light changed to amber, and how long the light is set to remain amber before turning red. If the amber indication is preceded by a green+amber indication whose length is equal to that of the amber-only indication, then a motorist will be able to get the necessary information about both things with greater accuracy than would otherwise be possible (a motorist who sees a green+amber light could quickly determine a decision point where the light should be checked again, such that if the light is still green at that point the motorist could be assured of making it through the intersection, and if the light was amber the motorist would be able to stop).
If we’re talking about applying the traffic light approach, so-to-speak, to UX (and not the other way around: that is, how good is the UX that traffic light provides), then I’d say that:
– “Stop now because the action is inappropriate” should not be necessary because well-designed UX won’t include inappropriate actions: they’d be hidden to discourage the user from even thinking about them, or at least blocked before the user can attempt them;
– “Proceed with caution” is a polite form of “sorry, the UX you’re about to get is stuffed, but there was nothing we could do about it, time-constrained and cash-strapped as we are”. The whole point of UX design is to eliminate the need for caution;
– And finally, considering all of the above, the “go ahead, your action is blessed by the Creator (of the software)” is a bit redundant, even if motivating.
“That is, the program is testing whether or not the user can correctly apply company policy to the given scenario.”
Hmmm… let’s turn this into a multiple-choice question, so belov’d by HR/compliance staff:
1. Questionnaires should be written by people with extensive UX knowledge.
2. Questionnaires should be written by people with extensive subject matter knowledge.
3. These Questionnaires exist purely for regulatory/compliance reasons, and let you submit multiple answers until you find the right one, negating the need to read any background material, ensuring all staff receive 100%, and essentially make a mockery of whatever regulatory/compliance issue the questionnaire was supposed to enforce.
Yellow as an inter mediary for green and red means “red is coming”. Since you don’t know when, it implicitly suggests you speed up to avoid waiting for a light.
This is what it looks like without syntactic and semantic errors
—————————————————————————–
Yellow is serving a color intermediary, and is interpreted as “between green and red.” This alerts us that “red is coming”.
Since we don’t necessarily know when red is coming, theres a case to be made that yellow implicitly suggests that a rational agent would speed up to avoid waiting for a traffic light.
Okay just less syntactic and semantic errors, but still an improvement