Ö÷²¥´óÐã

Great motion design is like giving a performance on a stage.

Sure, it might look simple. You might think "that looks easy". But like every performance, a lot of craft has gone into it. Motion plays a key role in defining an online experience, so it's important that we get it right. Let's start with the basics…

What is 'motion'? It's animation, used to add character and a sense of magic to an online experience. It aids and subtly delights as we navigate an online space.

Why do we use it? Motion is used to prompt enquiry, drive discovery and inject confidence in both expected and unexpected ways.

How do we use it? This is a more complex question to answer. How you use motion depends on your project, your product and your goals.

Whatever the design challenge, we use our three basic principles - The ABCs of Motion:

• Always Appropriate
• Best Behaviour
• Consider Capability

Always Appropriate

Motion always serves a purpose. It should deliver, not dazzle. Use it sparingly and you'll make a far greater impact.

Consideration is key in any project. Ask yourself what you're trying to communicate and why adding motion improves things. Great motion should always support interactions and act as a guide. One that helps people make sense of an online space. Take a drop-down menu for example. Instead of it appearing and disappearing instantly, try easing it in from a particular spot. This'll make it clear what's changing and from where.

Motion that's thrown in for novelty will only be disruptive. Say that you add complex animation to a frequently used button. If people have to endure that every time, you're just going to frustrate them. Think about all that time wasted, not to mention the negative impact on the experience. Adding too much movement to a space can also be confusing, as everything shouts for attention. This means people start to dismiss your animation as 'white noise'. Better to use less motion and create more impact.

If motion isn't enhancing the experience or improving understanding, just bin it.

Be careful of underdoing it too. No one likes to interact with something jarring and lifeless. The best motion is subtle and should almost go unnoticed. If it's distracting from the content, it's not doing its job.

But there are specific moments when it's OK to use motion just to entertain. This is usually when something is going on behind the scenes and you want to show that progress is being made. A great example is a page loading or refreshing. Instead of a blank screen, try giving people an engaging piece of motion to look at. Odds are they'll stick around for longer and feel good in the process. Remember, time flies when you're having fun.

A tip from us - keep things consistent.

From big transitions to small icons, all the motion in a product should feel like they're part of the same family. This consistency is reassuring and makes the experience more harmonious. For example, playful objects would suit a younger audience in an entertainment context. But these would look out of place in something with a more serious tone, like a news feed.

The best motion is subtle and should almost go unnoticed

Best Behaviour

Motion can turn good experiences into great ones. It should be memorable, not mediocre. It's those creative touches that make an experience stand out.

Adding motion to your project is more than just functional. With the right execution, it can also feel great. Investing in innovation, and crafting even the smallest details, can make all the difference. It can bring personality to an experience and create a positive emotional connection. Even the tiniest gesture can make a product feel alive and a joy to use.

One way of adding some sparkle to a transition is to choreograph each of its parts, like icons or buttons. How will they work together to communicate what you want? You'll be starting at one state and you need to end up at another. How might you do that? What are the steps in-between? Just think of it like a dance routine or a story structure. Ask how everything moves from beginning to middle, to end. This approach needs to work across cultures too. A menu that slides in from the left might seem natural. But how will right-to-left readers feel about that?

When designing any motion, it's best to take your inspiration from everyday life. For example, say you needed to approach someone in the street. You wouldn't rush up and surprise them. You'd take it nice and easy with no sudden movements. The same goes for notifications on screen. Borrowing this everyday movement is key to making an experience feel more human. It's a bridge between technology and people. And it doesn't have to be complex either. A small movement is enough to make an object feel 'happy' or 'sad'.

Like telling a great joke, motion lives or dies by timing. Animations should always be brief, but tiny changes can have a big effect. Too short and it feels rushed, too long and it becomes frustrating. Whether you're dealing with one object or many, try out different timings to get the right feel. Remember, animations shouldn't slow you down as you move through an experience. A half-second is usually plenty of time.

A tip from us - use easing.

Easing is the simplest way to add subtlety to your work. Objects don't start or stop abruptly in the real world: forces act on them. Think about a ball rolling on a table - it'll slow before stopping. Easing imitates this natural movement and makes the experience 'feel' more natural.

Even the tiniest gesture can make a product feel alive and a joy to use

Consider Capability

For motion to be helpful and delightful, you need to understand where it'll be used. This will help you deliver the right experience to everyone. Your ideas may be great, but in the end they'll need to run well on a range of devices, browsers and connections. If they don't, the whole experience may suffer. And no one wants something slow and unresponsive.

In cases like this, no motion is better than bad motion.

The solution is not adding motion universally. Instead, optimise it to run well across different contexts. Just as you design and test layouts for different devices, consider levels of animation. Whatever the context, motion should always feel like it's running well.

It's also important to know the costs of motion. Devices vary a lot, not only in screen size but also in performance. And in those terms, not all motion is equal. Changes of position, scale, rotation and opacity are the easiest for a device to achieve. Anything more complex, or having too many objects moving at once, will make the frame rate suffer.

The 'frame rate' is the frequency that you show individual frames of an animation. A browser should animate at 60 Frames Per Second (FPS) to give things a smooth and elegant feel. 30 FPS is an acceptable fallback. When you drop below 12 FPS, the gap between each frame is so great that we no longer perceive it as a moving image.

For motion to be helpful and delightful, you need to understand where it'll be used

Making motion accessible for everyone

The capability of technology isn't the only thing you need to consider. You also need to think about the capabilities of people. Motion has to work for everyone. Even for those impaired by age, illness, injury or circumstance. It's crucial that motion isn't a barrier to important information or interaction.

It's crucial that motion isn't a barrier to important information or interaction

For example, say you use motion to deliver a message or imply something. If the content didn't load or someone couldn't see the motion, the information or interaction would be inaccessible. So, make sure that all information can be perceived and interactions can be controlled. Next, ask yourself some questions about your motion design. Can a keyboard or switch user interact with it? If you have moving text, can a screen reader read it? And does the text colour contrast well with the background? If you can say yes to all these, then you're all good.

Also, motion mustn't adversely affect those sensitive to flickering or distractions. Constant flickering can cause nausea or even fits. And looping motion can affect concentration for reading and focus. The best solution is motion that plays the once or is very subtle. Otherwise, you need to give people the ability to pause.

You can find out more in our How to design for accessibility guideline.

A tip from us - talk to developers early and often.

The best way to know if your ideas can work is by talking to developers as early in the process as possible. What you'll get is a better idea of what you can or can't achieve. What you won't get is a headache later on.

The all-important checklist

The ABCs of Motion can help you tackle any piece of motion design, for any type of project. And if you're ever in doubt, keep asking these questions:

• Does the motion help and add to the experience?
• Is it appropriate to my product?
• Have I crafted the details, e.g. the timing?
• Do other people love it too?
• How does the motion impact performance?
• Does it work across devices?
• Is it accessible for everyone?

Now go, and make some memorable motion.