Simple Ways You Can Improve Your UI Design With Functional Animation

By Mikelle Leow, 27 May 2017

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.

[via WebdesignerDepot, images via various sources]
Loading ...