How do we discern the difference between warning, an alert and success? UX.
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 with web designs or mood boards. 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 of communication that isn’t possible with a static design.
NYC pedestrian crossings: signs and symbols
All over NYC, we saw different types of pedestrian crossing signs. Some were fancier 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), 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.
)
)
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, 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.
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!