How to effectively leverage animations for better UX?
Animating fun and delightful interactions is not easy, but when done right the payoff is priceless.
Source:DesignWoop
( http://designwoop.com/uploads/2014/06/11-dribbble-animation-iphone-app-ui.gif )
If a picture speaks a thousand words, animations bring life to those words. They connect and converse to your users.
Not long chats. Just small talks.
One that informs your users. “Hey…I’m so excited to see you again.”
One that tells that something is happening. “Hey…your order is in your way.”
And entertains. “Hey, while you wait for this thing to happen…let me show you my new moves.”
Animation can explain whatever the mind of man can conceive. This facility makes it the most versatile and explicit means of communication yet devised for quick mass appreciation.
Walt Disney
Done right they can make using your app or website a joy. Make users hook to it. Wanting for more.
But animation has a purpose. The right place. Do it right and you nail it. Do it wrong and you fail it.
When to use animation?
Animations have multiple utilities in design. They can be used to attract your user’s attention and then inform, guide and entertain him. Here are some popular uses of animations in a website or mobile app-
- Attract user’s attention: A motion element in a static page is a good way to attract user’s attention to to a particular section of the web page and app. So use animation to guide your users to the desired part or element of the website.
Source: dribbble.com/LudmilaShevchenko
( https://dribbble.com/shots/2719343-magic-co-landing-page-concept )
- Engage with user: A little bit of fun goes a long way in engaging users and boosting user experience. Add fun and engagement in user interactions by using animations.
Source: giphy
( https://media.giphy.com/media/l0HlI6QDBQ72MkNKU/giphy.gif )
- Show relationship between different objects: Animation is a good way to explain relationship between two objects. For example, see how a play button transforms into a menu button below. Similarly you can use animations to smoothen transition between two views, screens and objects.
Source: medium.com/@adaptivepath
(https://cdn-images-1.medium.com/max/600/1*eEa4woRL5vja-6PMg6nU4Q.gif )
- Make waiting entertaining: Users hate waiting when a page gets loaded or the feed is getting updated. An empty screen makes it annoying. Animations help you engage with users during background processes like fetching content or loading the next view.
Source:ebarnette15.wordpress.com
- Give user feedback: Animations are great in providing feedback to users on errors or completion of tasks. Feedback tells users that intended task is complete and he can move onto other things.
Source: medium.com/@michaelvillar
(https://cdn-images-1.medium.com/max/800/1*e2cyEPwtLqX8I1JN6yLG6g.gif )
How to design animations that boost UX?
The process of designing animations can be categorized into two parts- Identifying the right opportunity to animate and secondly, designing the animation. Here are few best practices that go into the process-
- Define purpose and goal: What is the goal of animation? What it brings to user experience? So think about the purpose of animation and what you wish to achieve with it. Do you want to guide your users to a particular action, inform him/her about a particular functionality or give feedback on completion of an action.
- Know your users: Who are your users? Kids? Adults? While designing for kids you need to be bold, crazier and a little over the top to attract their attention. While adults would like subtle and meaningful animations. Do user research to identify areas where your users would find animations helpful.
- Define the dynamics: How will the animation play? Will it be user initiated or system initiated? What will be the speed of the animation? Will it be one time for a user or recur every time he is on the page? Will your animation has the longevity to be engaging to her everytime she uses it? Contemplate and organize your thoughts around the above questions before getting into designing an animation?
- Be close to real: Animated objects should be close to their counterparts in the physical world. Think of a music player in the physical world. It has buttons for start, pause, stop etc. Use same or similar styled buttons in your animations. It is easy for users to understand as well as help your animation connect with physical world.
- Be quick, clear and cohesive: Animations should be quick. Don’t make the users wait for long. Keep it clear by avoiding doing too much at once. And lastly, keep it cohesive by unifying various elements like consistency, responsiveness and speed.
- Pay attention to details: We live in high resolution, HD world. Nothing skips user attention. From characters, objects to elements, design with great detail. Users appreciate good work. And that’s what will separate you from the rest.
- Prototype and test: It is important to create prototypes to see how your animation is working and how well it fits with your overall app or website design. Also test different animation ideas and ways till you find the perfect one. While you are creating and testing your prototype, you can use CanvasFlip.com — Free prototyping, user testing and collaboration platform ( shameless plug!)
Final Thoughts
Don’t use animation just for the sake of making your app or website look modern or cool. Animations can deliver you rich dividends if done with a purpose. If it helps users by informing, guiding and entertaining. Finding an opportunity to animate is half the job done. The other half is to design animations well and tie it with your overall website/app design to make user experience better. Do it and you can make your users stay longer in your application and get desired results.
