Five things I learned prototyping UI animation
Does this sounds familiar? You’re fresh out of college and about to start your dream job in a prestigious design agency. Introductions are made and whilst you’re still figuring out where the coffee machine is and acting like you remember everyone’s name, you’re assigned to prototype some animations for an interface because according to your CV, you’re a design ninja.
Your stomach drops and your mouth goes dry as you realise that it’s time to walk the walk on the resume talk. It’s a large-scale project for a popular brand and your work is an integral part of the whole service. How do you deliver?
Fear not fellow traveler, if you’ve got the tools, we have the blueprints. I’ve written the five things I learned when prototyping UI animation. It is all about understanding the 5 aims of UI animation.
1. EXPRESSION — brand personality through motion
Why is expression an important goal of UI animation?
An effective brand defines the character of the entire company. Think Google, Virgin or John Lewis. The best brands have values that permeate into their work culture and direct how companies relate to their customers via social media and (whisper it) real life. When a company is defined by its brand and its perceived values, that ethos needs to be taken on board and protected. Many corporations have employees specifically hired to take care of brand guardianship. It’s not something you can take lightly, in these days of Death By Comment Section. What needs to be recognised is your brand is a character with a personality and a way of getting things done. What is that character? And how can you express it through motion?
One of the aims of designing UI animation is to help the brand to express and reinforce its essential values with motion. You are, in effect, distilling its message into a series of frames. It’s more than visual standards, convincing UI animations can make people feel that the movement they see on the screen is the brand speaking to them. You can help brands express who they are through motion by following these four steps:
1. Make sure you understand what the brand is about, beyond its logo and visual standards. Familiarise yourself with brand guidelines, tone of voice or style bible, if they have them. Research previous iterations of how the brand is expressed in publications, videos, annual reports etc. Ask yourself how do people perceive the brand and expect them to behave. Make sure you know what the brief is for the commission — does the company want to reflect their brand as it is now, or are the looking to change the way they will be perceived in the future?
2. Once you have immersed yourself in the ins and outs of the brand, focus your efforts on translating the brand values into motion. Use the keywords, shapes, images and so on that you observed in your research to keep your visual focus sharp. Ask yourself as you’re going along:
- What relevant aspects of the brand should be expressed and displayed consistently in the UI?
- What transition techniques make sense for this brand? It might be opacity change, scaling, using 3d perspective, sliding right or left, or using wipes.
3. Channel the essence of the brand (example of different dials) and if possible, create visual nuances in the movement that cannot be displayed in other mediums. A good way to do this would be to work on the easings and timings. They are essential to form the brand perception in motion. Subtle changes of the movement timings affect how people will interpret the same animation. Adding or removing a quarter of a second is enough for an animation to be perceived as slow or fast. On the other hand, easings help us to create animations that are less mechanical. You can create custom
bezier-curves which reinforce the uniqueness of the brand.
Ask yourself — where would it be most effective to see the brand expression dialling up? What I mean by “the brand expression dialling up” is, where are the areas of the UI where the brand has permission to dial up its personality on elements of the UI? Examples could be: app logo animation, onboardings, loadings and easings of the animations. If you’ve done your homework on the brand, you’ll be more likely to interpret this.
2. GIVE CONTEXT — where are users in the UI?
Why is contextualising an important goal of UI animation?
We’ve evolved to understand how things move and predict their trajectory based on their previous behaviour. Our brains automatically apply the rules that govern the real world to all movement. If you see a rubber ball thrown up to in the air you know it is going to fall. We understand the concept of gravity because we experience it constantly. The physics of the planet earth shapes our expectations of how things move.
UI motion design is meant to indicate how one screen connects to another. Screen transitions help users understand their spatial location in relation to the previous screen. The physical rules that govern the world we experience every day, and some others that we have in the digital world, are applied in the UIs. Examples of these physical metaphors would be: cards sliding left or right, scaling screens coming from the z space, radial wipes or any type of wipe (examples here).
To give users context of where they are:
1. Map the IA and Content Architecture to help decide how transitions work in different levels of the interface, and in some cases find solutions to problems using animations. Ask someone in the team to give you a tour of the IA and the Content Architecture to understand the hierarchy of information so you can start thinking of ways transitions might happen between different levels. Perhaps transitions between two different levels rely on one physical metaphor (transition), whereas between same level screens it is another type of transition. A transition between two screens or entering a new state/mode of a screen is not the same effect. That’s why it is important to take into account the hierarchy and states of the screens. The clearer that is manifested on the screen, the less confusing it will be for the user to interact with the interface you are building. By nailing down the hierarchy of information it’ll be easier to determine what screen transitions work better.
2. Brainstorm several ways of transitioning from one screen to another. Remember you are striving for clarity, not coolness so keep your head here. No over-animating allowed (more on over-animating in my previous article).
Test your transitions on other people. Bring users or team members to critique the transitions and pinpoint flaws in your design. You want to test if the transitions you animated help your users to know where they were in relation to where they are, as well as if your transition could be potentially harmful — for example, too much rapid movement can cause epilepsy.
When animating transitions to give context, ask yourself:
- Does the user understand the jump between screens and does it fit with the brand expression?
- How do I communicate a transition between different levels of hierarchy through animation?
3. REACT — give users feedback
Why should your UI react (or animate) after any user interaction?
This question shouldn’t even exist but there are still many interfaces that leave users puzzled, exasperated or surprised. Let’s say users click a button but the button doesn’t react to their interaction. That is a bad UI — an undesirable outcome — and it’s on the people who designed it, hopefully not you. What we call “Reacting” is acknowledging users’ actions taken upon components of the interface, and displaying a reaction back to the users. It’s a simple feedback mechanism. That feedback, or change of the components state through motion, gives feedback to the users. The purpose is to communicate to users the transition between two states of the same component and its implications. Most components are binary like a switch, but more often we see that there are different states and levels of interactivity for the components on the screen. Some designs even manage to create interfaces where the same component behaves slightly different depending on factors, for example, the loading time.
How can I make my interface react to users interactions?
If you are a visual or UX designer you might have worked on style guides that contain different button states: Idle, tap, visit, etc. These guidelines are good to have when your task is to prototype animations to let users know that the UI is reacting to their interactions.
To make the components of your UI reactive:
1. Identify the components that are interactive and what triggers they need to react to. Buttons, form fields, links, carousels, sliders, tabs, cards, the whole screen, basically most components, need to react to user interactions. When that is done, you need to define what components react to different devices, such as a tap, a swipe or the accelerometer. If a component is reactive to more than one trigger, you might have to design completely different animations for each trigger.
2. Define the states according to the brand guidelines and animate them if that hasn’t been defined previously. The component states are comparable to the multiple expressions of one person. That person can go from feeling bored to engaged, or from apathetic to happy, depending on how we interact with them. That state change needs to be defined, taking into account the situation of the user. If users have to tap to a submit button after filling in a form, it is important to use state transition animations to acknowledge their accomplishment. On the other hand, an animation created in the context of an error would look different.
What should I pay attention to when animating state changes (reactions)?
Pay attention to how you animate the state change, like the position, scale and opacity of a component, so it doesn’t affect the rest of the surrounding components on the screen. It is good to prototype this to make sure there are no surprises. You might have to consider different screen sizes and how a hover state surfacing a website on a laptop differs from the same website on a mobile device or even a TV.
4. EMPHASISING — indicate to users what to view and do
Why is Emphasising important to grab users’ attention?
I’m sure you’ve stumbled through pages with blinking banners or a web modal window that suddenly appears in front of your eyes with a suspicious advertisement. They are annoying experiences, I know, but on the other hand, they are good examples of emphasising components that might be important for you to pay attention to.
Emphasising is the art of displaying the hierarchy of interaction or information using animation. If, for any reason, a key interaction is embedded in a component that is visually not prominent, that component is in need of emphasis.
Emphasising is also useful to highlight the order of a process.
It’s normally used for first-time interactions (onboarding), highlighting interactions that might be not obvious or hidden, to explain processes or to notify something.
How to create Emphasis
1. Understand the purpose of the thing you want to emphasise. For instance, the purpose could be to give prominence to an element, explaining a process, describing how an interactive process works, indicating the level of urgency or to display important information.
2. Brainstorm different ways of emphasising. Look at what features of the component can be made more prominent, like the scale, opacity or movement. Alternatively, you can also de-emphasize other components of the UI. Ask yourself, ‘what should I pay attention to when animating state changes (reactions)’ and check that the animations you create are in tune with the brand.
5 . ENGAGE YOUR AUDIENCE — design in entertainment to make the interaction pleasant
Why make animations that are entertaining?
Opportunities to make users smile appear in different situational moments in the UI. Usually, those moments are when the users are waiting for a task to happen. The purpose is to reduce users’ time perception of the process by entertaining them. There are several ways to reduce the perception of time; for example, showing the task progression in %, loading bars, cycling loading animations and instructing users on how to use the UI. My personal favourite technique is displaying a short animated story that captures the brand .
Suggestions for keeping users entertained:
1. Identify where in the interface you have the opportunity to engage the user. If you have a refresh screen mechanism, for example.
2. Develop themes/stories for the animation sequence that align with the brand. If you are working for a hot dog brand, you can animate the process of cooking a hot dog or the condiments throwing themselves onto the hot dog in a bun.
3. Review the animation you have created and do it in the context of the UI they’ll be placed in, to ensure they work smoothly. You need to make sure that what you created is not in the way of the purpose of what the user wants to accomplish in the interface. Ask yourself, what do I need to pay attention to when trying to entertain the user?
Pay attention to the time and timings of the animation. You want them to take enough time so the user understands that something is still happening in the background and the additional content is not causing additional waiting time. Entertaining doesn’t work in all situations. It is vital to understand when and where in the UI it is OK to entertain and when it is not. Brand ethos is also something to think about here.
Final tips and recommendations
This five keys to UI animation don’t work in isolation. Most of the time they complement each other and therefore, as a designer creating motion behaviour animations, you will have to be a bit of an octopus, switching from one to the other. What would certainly help would be to define the overarching principles of the animations for the brand you are working for first. Then, animate the UI components according to those principles, so you can make the animations coherent, cohesive and consistent throughout the whole experience.
I encourage you to create a library of animations for different purposes that are adaptable and can be modified for future projects. Since there is not a unique animation easing that accommodates all purposes, work on bezier curves and timings that are suitable for different situations and components.
These aims are just empty words if you don’t apply them, so start prototyping with them in mind.
This article is a follow up to “the soul of UI”, where I explain the functional and emotional importance of UI motion.
