Back to all posts

6 Animation Guidelines for UX Design

Useful is better than delightful.

Before I start, a little bit of context. In the beginning of 2015 I gave a presentation where I framed animation as an essential discipline to design a good user experience, I talked about the 12 basic principles of animation, underlining which ones make sense in UI animations and all that shebang.

The 12 basic principles of animation beautifully animated by Cento Lodigiani

More than two years later I’m more than aware that this is not exactly breaking news or is it going to shatter any ceilings. Companies like Apple & Google really made the effort to integrate animation in their products and by consequence facilitating and encouraging Developers & Designers across the world to do the same, and so they did.

This was definitely a step in the right direction but along the way I think we’ve accidentally stepped on something brown, and it stinks a little. 
WAIT! Don’t pull out your pitchforks and torches just yet, let me first explain what I mean with a personal story.

I was just getting started in graphic design and had little to no knowledge about it. I remember the first tool I learned how to use was Macromedia Freehand, and it was mind blowing. The possibilities were endless. Gradients, drop shadows, comic sans, you name it and I was using it all together. The result? Well, as you probably can imagine it looked like a mess. But don’t give the young me a hard time, I was an unsupervised kid in a candy store, so I ate all the candy that I wanted and ended up with a belly ache. Just like John Snow, I knew nothing.

Back to the present. You’re probably asking: What does this have to do with animation? I think, EVERYTHING. Developers and Designers are the young me in this story, and in many apps and websites they’re using animation recklessly, defeating the whole point of improving the user experience with animation.

Now, I could go through a series of examples and point out what they’re doing wrong but, honestly, that sounds kind of lazy. Instead I thought it could be more useful for you, reading this article, if I point out how (in my humble opinion, of course) animation can be integrated in a way that is not superfluous but rather an essential piece of a good user experience. So, after some time thinking and researching I came up with a list of 6 guidelines that I hope can be helpful for your animation endeavours.

Let’s start with the obvious one.

1. Animation shouldn’t be an afterthought

You have all your interactions defined and visual design locked down to the pixel but you feel like something is missing. Then you might think “time to flair it up with some animation”. Big mistake and one of the reasons why animation is being so misused. It’s been considered at the end of the design process with the same consideration you would put into a transition effect in PowerPoint, and that’s just wrong.

Think of the user experience as a cake. In most cases animation is being thought as the cherry on top of the cake but I completely disagree with that approach. I think animation should be just another ingredient that you need to mix into the cake batter.


Quick sketch I made for the animations in this article.

This to say that animation should already be in your head when you are sketching your wireframes. It can be as simple as an arrow indicating where a certain object is going to go after a button is pressed or a simple note. Keep it simple, this will help you find a purpose for the motion (or a motion for a certain purpose) without focusing too much how it looks. This also helps you not to become too attached, because animation won’t always be the solution to your problem. Just discard it if it’s not helping you accomplish something, unnecessary animation will just be an obstacle for the end user.

2. Animation must serve a purpose

Gratuitous animation will just take your user’s precious time and after the first initial delight the user will get tired of it, that’s why animation needs to be functional. If you’re wondering what animation can help you with, here are some examples.

Soften harsh cuts

No transition vs Horizontal slide transition
No transition vs Horizontal slide transition

Designer or not, we’re all familiar with this. You are in screen A, you press a button and BAM! A completely different screen (B) suddenly appears. Then you’re left wondering, where did you come from? Did I press the right button? What now? What if “B” is visually similar to A? The user might even think that nothing happened. This shows one of the most suitable candidates for animation, moments of change. Consider the time that takes to make the «journey” from screen A to B, what objects are kept in the screen and show your users how they got there. Don’t overdo it though, as you’ll discover further down, animation is better served “invisible”.

Provide context

example loading animation to provide context
No transition vs Slide-in from the bottom

Sometimes you land on a screen and you’re not quite sure how to interact with it straight away. A good way to help the user is to provide a clue of the proprieties of a certain object when it is introduced. If you have a list of posts, for instance, sliding them could help the user understand that he can keep swiping to see more.

You can even add another layer to this by timing their appearance in a way they slide one after the other, this will reinforce that these items are separate and you can interact with each one individually.

Let’s say that you decide to tap one of them and it opens to display the entire content for a specific post. Now the information that was previously at the same level of others is now the principal. To animate this transition is a good way to reinforce the user’s selection and also to show that you’re still interacting with the same object but in a focused state, which also gives you more screen real-estate.

Provide Orientation

When all the obstacles between the UI and the user are removed from the equation the UI becomes more physical, therefore it’s important to give the user a sense of spatial orientation. You can accomplish this by being consistent with your animations and keep your app structure simple to digest.

Consider an object that moves out of the screen to the left, if it reappears, logically, it should come from where it exited. This will help your users understand the app physiognomy and by consequence make them feel more comfortable when interacting with it. If you do it otherwise it will just create confusion and your users might even think that they’re looking at a different object.

contextual animation
Content entering from the bottom vs Content entering from the right (where the arrow is pointing)

The same applies to the visual hints present in the screen. Imagine that you pressed a list item with an arrow pointing to the right, the logical transition should be a slide from right to left, as if the user view port was moving right, reinforcing the visual clue in the UI.
Many times you’ll see the UI elements contradicting the transition. Personally I find this very annoying and I think it’s something we should avoid, otherwise the animation will look intrusive to the users since it defies what they expected to happen.

Provide instant feedback

Have you ever asked yourself, did I press that button? Did it do anything? Should I press it again? The answer probably is yes and you probably pressed it again just to realise that you actually pressed it in the first place. That’s why providing instant feedback is important, even if the app doesn’t respond instantaneously.

In a world where your finger often covers the button you’re pressing, animation plays a huge roll in providing the user the reassurance they need.

expressive an animated reactions
Subtle color change vs Quick animation

In some cases, you can even take it one step further and jazz it up a bit. Let’s say you have a “star” button in your app which is one of your “hero” actions (never seen before, I know). This is exactly when you can be playful and delight your user. Make it feel rewarding and the user will want to repeat the action. Be mindful with time, the animation needs to feel instantaneous or it will become old and annoying soon. Also, don’t jazz it up too much.

Make the content feel alive

Using animation to show new items loading in a list
No transition vs Slide in from the top

If your app or website has live content, like pictures, comments or some sort of counter, animation can help you accomplish two things. Smooth the addition of new elements and cushion the possible delay of loading such elements.

Storytelling

In almost every application, there’s a place where we need to explain something that went wrong or introduce a new feature. Illustrations play a huge roll here, providing a more visual and immediate way to understand a problem and how to fix it.
If an image is better than a thousand words, imagine an animation, that’s like 30 images every second.

Be creative with storytelling
Trying to put a smile in the user’s face, despite the negative message.

This type of screen is really the time and place where animation can shine, be memorable and bring a smile to the user’s face, especially if something went wrong. However, if your app is constantly showing an error screen, then you might want to ignore this point. The last thing you need is for your user to remember all the times that error came up.

Now that you have some clues on when and where animation can be used we must proceed to the how.

3. Animation must reflect the brand

Consider a simple motion of an object from left to right. There are virtually endless ways to make this motion just by tweaking it’s easing curve. With this you can add a personality to your animation. See the example below, all use the same animation and timing, the only difference is the easing curve.

Find the right animation curve that suits your app and brand
A: Quick & snappy, B: Smooth & natural, C: Bouncy

The possibilities are endless but, before going crazy and make all your transitions bounce like gelatine, consider your brand, your user and the tone you want to transmit. If the animation doesn’t fit the tone your users might feel out of place and lose their trust in your brand. Imagine if your banking app had the same bouncy style of animation you find in a game. Would you trust it?

It’s important that your animation reflects the brand but something you must keep in mind when designing your animation is the next guideline.

4. Animation shouldn’t be the hero

Animation is here to save the day, not like a standalone hero but more like the Ninja Turtles, fighting as a team playing on each other’s strengths. If your animation takes the centre stage, you’re not designing an experience, you’re just forcing the user to watch a movie.

don;t get too carried away - be consistent
Flashy vs Consistent

Animation needs to be part of the whole experience, complementing the visual design and a supporting the interactions, to achieve this restraint is key. In most cases a good animation is the one that users don’t even notice.

If you’re designing, your job is not to entertain the user but rather help him accomplish something in the easiest, most intuitive and natural way possible, and the next guideline comes to help with that.

5. Animation must feel natural

Ensure the animation feel naturalLinear animation vs Ease-in & out

I know that the word “feel” might be ambiguous, but bear with me.
Since the user interacts directly with the UI there’s a certain expectation that the UI follows, to a certain extent, rules of physics. A list that responds to the speed you’ve interacted with is a perfect example, but the same applies to other objects.

However, this doesn’t mean that all the apps should react the same way. In the real world if you kick a ball they don’t react the same way. A football will fly away but a bowling ball will probably just hurt your foot. As I mentioned in the previous guideline, it’s all about the tone and the weight you want your brand to transmit.

You have to define what’s your app’s “material” and weight, and make it behave accordingly, but remember to always adjust it if necessary so it doesn’t go against the next guideline.

6. Animation must not waste time

ensure your animations dont waste time
Both animations take 6 seconds.

Animation can be used to tweak the user’s perception of time, so use this in your favour. For the human brain, anything below 0.1 seconds will seem instantaneous and below 1 second will seem seamless. So, if you have a process that takes 6 seconds for instance, you can break it down in a few separate animations. This trick should make the process feel a lot faster and keep your user engaged.

You can also use animation to fake an instant action that will actually take bit longer in the background. This will make the app feel more responsive even though the process still takes longer than what the user sees.

You can’t mimic everything in the real world, you need to take into account the user’s expectations. If you press a button in the UI you expect an instant feedback, thus it’s not the best place to apply physics, so don’t ease-in an animation in cases like this.

Ok, if you made it this far I truly believe that, if you apply these guidelines, you’re in a good path to make the best of animation and improve not only how your UI looks and feels but also how your user experiences it. Now that you know the guidelines, you still need to go over a few more jumps.

The last hurdles

If you want your user engaged you need to provide a seamless experience and, if used right, animation can definitely help you to accomplish that. It’s not going to be an easy journey though, as with anything design related you need to be prepared for an iterative process.

You also need to know how to prototype and collect feedback, if your colleagues lack the vocabulary it’s going to be hard to communicate. They won’t be able to comment on your animation without using an onomatopoeia (e.g. “That button could go more like swoosh and then kablam, you know?”), for that reason I think it’s good to introduce people to the 12 basic principles of animation, so they get familiar with the terms allowing them to express themselves in a way that you can understand.

One last hurdle to go, the effort that your development team can/wants to put into animation. You really need to push through and show them that in a world where animation is becoming an intrinsic part of a good user experience the question is not if, but when are you going to have to catch up with the herd? The sooner you do it the better. Your user will appreciate it and you will reap the benefits.

This article was originally posted at:
http://www.designyourway.net/blog/user-experience/animation-guidelines-ux-design/

Can we take you from stuck to unstuck?

We'd love to hear from you

Product Design

The ‘Product’ is the website, service, application, interactive thing being worked on by the business. The practice of Product Design is similar in a lot of ways to UX Design. It involves the coming together of many specific design disciplines...

Call to action (CTA)

A call to action is a marketing term that refers to a prompt that invokes a response leading to a sale. When referring to a call to action (CTA) in the digital design world we usually mean the interactive element that leads to the next step in the experience - something that needs to be clicked or tapped.

User testing

User testing refers to a technique used in the design process to evaluate a product, feature or prototype with real users. There are several reasons why you might want to undergo usability testing, the most common is that it allows the design team to identify friction in a user experience they are designing, so that it can be addressed before being built or deployed.

WYSIWYG

WYSIWYG (pronounced WIZ-ee-wig) is an acronym for "What You See Is What You Get". It helps identify an an interface that allows user input resulting in an output that is rendered in a similar way. For example; a word processor application interface might resemble a piece of paper,so when printed the user can see how the output will appear.

Content Management System

A content management system (CMS) is an tool that allows a website editor/administrator to manage the content that is displayed. Websites are made of HTML and CSS to create pages. Pages can be hard-coded but would require technical development skills to make changes. A CMS usually allows a person without coding knowledge to amend existing and add new content to a website using a WYSIWYG interface.

Responsive Web Design

Responsive web design refers to a web page that dynamically adapts its layout to fit the size and orientation of the device on which it is viewed. A responsive design allows for a more optimised user experience across desktop and laptop computers as well as smartphones and tablets of varying sizes.

User Stories

User stories allow the functionality of a product or service to be expressed as written descriptions of an experience as seen from the users perspective. The writing of user stories creates a list of design and development tasks to complete in order to create any required functionality.

User Interface

A user interface (UI) is a conduit between human and computer interaction - the space where a user will interact with a computer or machine to complete tasks. The purpose of a UI is to enable a user to effectively control a computer or machine they are interacting with, and for feedback to be received in order to communicate effective completion of tasks.

Personas

A persona in UX Design is the characterisation of a user who represents a segment of your target audience. On a project you might create any number of personas to be representative of a range of user needs and desires. The solutions you design must answer these needs in order to deliver value to your target audience.

Card sorting

A great, reliable, inexpensive method for discovering patterns in how users would expect to find content or functionality. Card sorting is used to test the taxonomy of data with a group of subjects, usually to help inform the creation of the information architecture, user flow, or menu structure on a project.

Brainstorming

A technique used to generate ideas around a specific topic. Often done in groups, but can be done individuals. The process usually involves writing down all ideas around a topic onto paper, a whiteboard or stickies often implying some kind of association.

Minimum Viable Product

An MVP is a product that has the minimum set of features to prove the most essential hypothesis for a product. Businesses building a new product can create a Minimum Viable Product to prove that an idea is viable and warrants further investment. A further benefit being that the next stage of development can be informed by feedback obtained from testing that MVP.

Sitemap

A sitemap is a diagrammatic representation of a hierarchical system. It usually depicts the parent-sibling relationship between pages in a website, showing how sub pages might be arranged underneath their parent groupings. This arrangement forms a map of the site.

User journey

A user journey represents a sequence of events or experiences a user might encounter while using a product or service. A user journey can be mapped or designed to show the steps and choices presented as interactions, and the resulting actions.

Prototype

A prototype is draft representation built to test ideas for layout, behaviour and flow in a system. Prototypes are an indispensable tool for resolving a large number of potential issues in a concept or business before too many resources are deployed to put a design into production.

Wireframes

A Wireframe is a visual schematic that conveys a basic level of communication, structure and behaviour during the design of a system. Wireframes are low-fidelity designs that bypass including a detailed user interface or visual design, conveying just enough to get across the core idea.

Usability

To say something is usable is a qualitative statement about how easy that thing is to use. Usability is an assessment of how learnable a system is and how easy a user finds it to use. The usability of a system or product is a key factor in determining whether the user experience is a good one.

Information Architecture

Information architecture is the design and organisation of content, pages and data into a structure that aids users understanding of a system. A more organised system enables users to more easily find the information they require and complete the intended tasks.

UI Design

User Interface Design is the discipline of designing software interfaces for devices, ideally with a focus on maximising efficiency, responsiveness and aesthetics to foster a good user experience.

UX Design

The practice of User Experience (UX) Design is the coming together of many specific design related disciplines to improve the usability, responsiveness, uptake and aesthetics of a product or service.

User Experience

A general term that covers all aspects of a user's participation while engaging with something that has been designed. Usually when talking about User Experience in the digital design field it refers to the interactions, reactions, emotions and perceptions while using an app, service, website or product.