Animation in UX/UI design

27 januari 2016 Design

Using animation on sites can add a lot of value to a website when it comes to user experience. Unfortunately a lot of websites over use it by animating every element; or worse impede the user by slowing down the browser so much that they don't want to continue using the site. Or even by just not testing very well and breaking the entire site.

Every time you want to use an animation on an element you should ask yourself / your team the following questions:

Does it stop or slow down the user from doing what they need to do?
Does it make the user lose where they are in the flow of your site?
Will it cause the site to lag?

If any of those are a yes, then you seriously don't need an animation. Or you're doing the animation wrong. The point of an animation is to help the user understand where they're coming from and where they're going to. Animations can create layers in an interface, when you slide from one element to another, the user remembers where the interface slid from, and if you take advantage of that memory correctly, you can make the interface slide back just as they would expect. Although it’s a simple, almost thoughtless transition, it can relieve frustration and build trust with the user.

Do’s and don’ts

Here are some do’s and don’ts when it comes to using animations on a website:

DO: Create context with meaningful transitions.
DON’T: Confuse the user by not allowing them to go back from where they came from.
DO: Add small fun animations around the site that delight the user.
DON’T: Slow the user down with animation.
DO: Help the user to understand that something is loading with a progress bar.
DON’T: Overload an interface with distracting animations. Only animate what’s in the users field of view or if something urgently requires the users attention (e.g. a modal to delete something).
DO: Use the correct type of easing to convey content.
DON’T: Make things bounce, just… never.

Performance

Another aspect of animation that’s usually overlooked by developers is performance, you and your team probably use the latest and greatest PC’s and Macs to create epic 60 frames per second websites. However you should assume that your target user has a slow machine. Because most of them do!

If your business is e-commerce for example, your main audience is mobile and tablet. And many of those devices can barely handle background color change of a button on touch (I mean, it’s a really slow world out there!), let alone a super scroll jacking, parallax super site filled with gifs, videos and poorly optimised Javascript you’ve copy n’ pasted from around the web. So you should definitely keep all animation to the bare minimum.

Know your brand

Animation can also define your brand. For example, Google uses very playful animations in their design, they've even created guidelines to show you how they think animation should be done.

If your brand is purely business to business, the user just wants to get their job done as fast as possible. This means you should keep the animation to an absolute minimum and let them accomplish their goal easily.

Conclusion

Animation is a really powerful tool for the web that’s going through a big transition at the moment. We’re moving away from old technologies like flash and fighting over what’s best for the future (Javascript or CSS).

We can do more than what we’ve ever been able to do before. There’s a lot of power at our fingertips, and we can make it really easy and fun for users to use our websites and applications.

But please, just keep it to a minimum, keep it running at 60 frames per second (butter smooth) and put it in the hands of your actual users on real world devices before assuming anything.