UX in Real Life: Traffic Lights

Wednesday, March 6, 2019 | By Liz Jones
Read time: 7-10 mins
Do not walk pedestrian sign in New York City

This is the second blog in a three-part series by atomix UX strategist Liz Jones about the principles of user experience and how they affect us in the real world. Read Part 1 here.


There is often a design challenge in trying to both communicate and streamline complex information.

It’s easy to focus on static elements when being presented web designs or moodboards. Maybe some of this is attributed to the default nature of these assets. And in some ways, animation can help portray and balance this additional load.

Animation is sometimes a completely underrated aspect; it can add a whole new level and layer of communication that isn’t possible with a static design.

NYC pedestrian crossings: signs and symbols

All over NYC were different types of pedestrian crossing signs. Some were more fancy than others. Most of the variations I saw fell into one of four versions:

  • Version 1: “stop” sign (static) to “walk” sign (static)
  • Version 2: “walk” sign (static) to “stop” sign (flashing) to “stop” sign (static)
  • Version 3: “walk” sign (static) to “stop” sign (flashing) and countdown (dynamic) to “stop” sign (static)
  • Version 4: “walk” sign (static) to “walk” sign (static) and countdown (dynamic) to “stop” sign (flashing) and continuing countdown (dynamic) to “stop” sign (static) + continuing countdown (dynamic) to “stop” sign (static)
Pedestrian stop sign in NYC
Version 1: the static ‘stop’ sign

 

Countdown timer on a pedestrian crossing in New York City
Version 4: this complex design had many changing elements

 

Before we continue any further, ask yourself; which version do you think would be most helpful? Why?

Symbols need to be universally meaningful

Some cities have “walk” and “don’t walk” text signs, which wouldn’t have been very accessible in New York due to the variety of cultures and languages in the city.

Some cities mimic mini traffic lights for their pedestrian crossings, which could be confusing to those not familiar with them due to their consistency with real traffic lights for cars.

Some cities have even installed “floor lights” to prevent “zombie walkers” – those who can’t look away from their phone screen – in an effort to increase pedestrian safety.

Floor lights on a pedestrian crossing in NYC
A floor ‘stop’ light for pedestrians

 

New York City utilised a red hand and a white walking man, which seemed more universally meaningful compared to some of the examples listed above.

I thought Version 4 was the most impactful implementation. The combination of symbols and the progressive countdown gave the user more information and, therefore, more control.

Table: how the different states of Version 4 can aid user decision making

Visual communicationUser interpretationUser behaviour
Walking man (static) + 25 second left on countdown.“Its ok for me to cross now, I have 25 seconds.”Crosses the road safely.
Stop sign (flashing) + 8 second countdown. “It’s discouraging me from walking, but I know I can get across in 8 seconds if I’m quick.”Jogs lightly across road, while looking out for cars either side.
Stop sign (static) + 5 second countdown.“I’m halfway across the road, and I've got 5 seconds left before the cars start again.”Quickens pace to reach the other side faster.

The countdown gives visibility of system status.

Without it, a pedestrian may not know if they have time to make it across or not. The flashing icon communicates more meaning (a sense of urgency), whether you are about to cross or are already crossing. Conversely, the static signs offer less feedback. Someone may cross too late into the light cycle and the cars could get a green light before the pedestrian has made it to the other side.

Stop signal at a pedestrian crossing
A ‘stop’ signal is illuminated

 

Walk signal on a pedestrian crossing
A ‘walk’ signal is illuminated

The use of animation in UX design

While digital experiences should always be designed with an end goal of great usability, animation can help take on an extra role in strengthening UX.

Animation can:

  • help a user understand a product;
  • draw a user’s attention to a key area;
  • hint at interactivity;
  • highlight a key message;
  • add reassurance and meaning to interactions;
  • make your product or website for engaging and enjoyable to use;
  • enhance continuity between elements and actions;
  • add smooth transitions between states;
  • and more!

Could animation enhance your website design or digital product?

Get in touch and find out how a great user experience could change the way you do business.

Let’s get started