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)
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.
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 communication||User interpretation||User 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.
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.
- 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.