YOUR BEST GUIDE TO PROPER UX ANIMATION

The world of the internet has certainly come a long way since those early days when most websites used to consist of a few simple pages of text with some images thrown in. Animation was the last thing on the minds of most developers and designers back then but now things are much different.

Today, animation has become an essential tool for the designing of a quality user experience. In fact, there is nothing more attractive in a digital product than an expertly-designed animation sequence. As a user, good animation will instantly grab your attention and help you understand the product (or service) in a better way.

IMPORTANCE OF ANIMATION IN UX

Animation that is good and functional will instantly make the user interface much more appealing, attractive, and user-friendly. But in order to do that, there has to be a clear and logical aim behind the use of animation in UX. Stuffing in animation just for the sake of it will only end up cluttering your interface.

You should have the following goals in mind whenever you are dealing with any type of animation in UX.

 

  • Provide visual ease and comfort.

 

  • Avoid cognitive overload so that the user can have a much-needed visual and mental break.

 

  • Keep the bounce rate minimum with an engaging interface.

 

  • Avoid change blindness with the help of strong graphic cues in your animation.

 

  • Promote better comprehension of spatial relationships.

BENEFITS OF GOOD ANIMATION

When done right, animation can breathe new life into a user interface. It is a great multipurpose tool that works like a friendly host to the website or app. Users are provided with lots of reassurance and their interactions become meaningful with good animation. And there is always an added level of fun and delight.

Users feel a lot more comfortable when they do something and the results are delivered with an attractive animation. For example, an item is deleted from the screen and it either slowly fades away or slides out of the screen. This feels much more engaging than when something instantly disappears after deletion while the remaining stuff on the page realigns itself. Simply put, animation can bring meaning to the UX design. At the same time, it brings forth new and exciting methods of user interaction.

 

DOING ANIMATION THE RIGHT WAY

Content is what attracts users and brings traffic to your page. Layout and functionality make usability simple and easy. ANIMATION brings the whole thing to life by being the thread that holds it together.

Think of it this way. You probably won’t buy something in a store if it isn’t packaged in a nice and attractive way. Yet, what you are really buying is the product inside the packaging and not the presentation on the outside. However, you aren’t likely to buy a similar product that has been poorly packed and presented and there is no visual appeal to it.

 

Source: https://paypertalent.com/images/7-consejos-para-entrevista-trabajo-marketing-digital2.png

 

Just like you don’t notice the salt in your food unless there is too much of it or too little, good animation has to find the right balance. Like salt in a perfect tasting dish, good animation needs to be invisible. The timing and flow should be such that you don’t feel like you are looking at animation.

There are a few guidelines that you can follow to make proper use of animation in UX. Read on to learn more about them.

 

  • Speed and Timing

As the elements on a screen change their positions, the animation must be slow enough for the users to notice the change. At the same time, it needs to be quick enough to not keep the user waiting.

Most researchers recommend that the ideal speed for an interface animation sequence has to be between 200 and 500 milliseconds. Keep them shorter than 100 milliseconds and the majority of users won’t even know that something happened. On the other hand, any animation with a timespan longer than 1 second will cause an extra delay and become boring for the user.

For smartphones, the ideal animation duration is 200 to 300 milliseconds. For tablets and iPads, it needs to be between 400 and 450 milliseconds. This is because of the larger screen size of tablets which means that a longer distance has to be traveled by the objects. In the same way, it should be between 150 and 200 milliseconds for wearable devices like the Apple smartwatch.

 

  • Easing

This is to make the movement of objects more natural instead of presenting a mechanical outlook. There needs to be some acceleration or deceleration like it is the case with stuff in the physical environs. Any mechanical movement is likely to turn users away from your website or app.

Source: http://4.bp.blogspot.com/-MDqrMTI5kSg/VDZllylSydI/AAAAAAAAACs/k2RyYC-tRh0/s1600/easing2.gif

 

  • Interesting Loading Sequences

 

According to research, over 40% of users expect that a webpage will load within 2 seconds at most. Ideally, it should be less than that but any more than 3 seconds and the average user will begin to feel frustrated.

If this delay goes up to 8 seconds, most users are likely to leave. Such is the nature of the online world that a delay of 1 second in the loading of your animation can cause user engagement on your page/app to reduce by as much as 7%. In short, loading time is one of the most crucial factors in the success of your program, app, or website. So, keep the loading animation time as little as possible and if there is an inevitable delay, make sure that you keep the users fully engaged in that time.

 

  • Your Animation Should Highlight the Areas You Want the User to Focus On

 

Quite often a user finds a ton of things when opening a website or app and isn’t really sure where to start. This is where animation comes in and it is one of the major benefits of using animated sequences.

For example, if there are a number of posts on your page, it is better to show them as sliding across rather than simply putting them all up there in a block. That way, the users would understand that they can keep swiping to see more stuff. The most important objects can slide across first while the rest can follow.

You can also go for a timing sequence whereby the items can slide across and away one after another without the user having to swipe or click. The key here is the duration of time one piece/post/object stays on the screen before making way for the next one. Get it right and you’ve got a nice and attractive thing going on your site/program/app.

 

Source: https://s3.amazonaws.com/www-inside-design/uploads/2018/05/business-computer-device-35550-sq.jpg

It is all about finding the right balance when it comes to animation in UX. The tips mentioned in this piece will help you in designing more attractive and interactive animation sequences.

Leave a comment