Image via Shutterstock
While animations previously
had a notorious reputation for being too flashy—they came almost exclusively in the form of popups and ads—2017 has seen a rise of the use of animation
in mobile apps. Today, the tool serves as an essential part of UI design.
Software developer Nick Babich
has written a useful article on WebdesignerDepot
about how functional animation should be used as an aid to users on your mobile app.
Read on and learn
how functional animation serves as a pillar of UI/UX design. Find out more by checking out Babich’s article
1. Success/Failure Visual Feedback
See the Pen Live HTML CSS Iphone by Suman Thapa (@Jeigsaw) on CodePen.
Animation by Suman Thapa via CodePen
Animation can be used
to provide visual feedback, which subtly alerts your user that the system has received their action. It then reacts to show if the interaction was a success or not.
If your phone requires
a passcode to be unlocked, try typing the wrong password and see what happens. Does it quiver to let you know that your entry was incorrect? “It’s like the shaking of the head as if to say, ‘no, try again’,” Babich says. Instantly, the user will understand that the interaction wasn’t a success.
2. Transitioning Between Steps A and B
Image by Jake Blakeley via uiuxgifs
Great places to use
functional animation are during moments of change. Animated transitions add “flow” between screens A and B and give the illusion of speed.
“[Changes] often involve
hard cuts which can make them difficult to follow. Nothing feels more unnatural than a sudden change. Abrupt changes in an interface are hard for users to process.”
3. Letting Users Know Where They Are
See the Pen Pull To Launch by Chris Gannon (@chrisgannon) on CodePen.
Animation by Chris Gannon via CodePen
Visibility of system status
is one of the principle rules of UI design, according to Jakob Nielsen’s ‘10 Heuristics for User Interface Design
’. It’s imperative that your users know their current context in the system during any given time.
No one likes waiting.
Your user’s wait time begins from the moment an action is initiated. “Worst case is when they don’t have any indication the system has received it.”
‘Pull to refresh’
animations, for instance, are an excellent way of keeping users distracted. Test the gorgeous example above by pulling its screen down to see why.
Check out Nick Babich’s
full article over at WebdesignerDepot
, images via various sources]