Designing at scale – breathing life into your website with motion design

How can motion design improve your website?

Welcome back to the final part of our Designing at Scale series. In case you missed it, here’s part one on Atomic Design: a web-building methodology designed for scalability, and part two on semantic naming.

So, you’ve got a great website: it’s easy to navigate, beautifully laid out, and it’s scalable. Now, your visitors are going to be able to find the information they need with ease, and they’ll have a consistent brand experience throughout.

But there’s still the opportunity to take their User Experience (UX) one step further – beyond satisfaction and brand awareness, to delight and engagement. That’s where motion design comes in.

Motion design describes elements having an action or animation – a movement. It applies to content beyond web structures, but is particularly important within the context of website building.

But what is it? One example we’re all familiar with is when you add an item to your online shopping cart, and the basket icon changes in response – that’s motion design.

Or when you click the menu button, and the expanded menu ‘unfolds’ in front of you. Web developers and designers can animate many different types of content as part of the website building process.

Purposeful motion design can help your site look more sophisticated, more strongly echo your brand’s personality and even nudge your visitors to make certain decisions or engage with specific content. It has the potential to create a massive impact on your website visitors’ experience.

In this blog, we’ll explain how motion design encourages consumer engagement, ensures people stay on your site longer, and leaves visitors with a more positive experience of your brand.

Do I really need motion design?

According to a study by MIT, the human brain can process images in as little as 13 milliseconds. What this means is we process visual information much more rapidly than we can consume other kinds of content, such as by reading or listening to it.

When it comes to distilling information, the faster your audience can interpret it the better, because content that’s quicker to make an impression is more likely to grab your visitors’ attention.

So, they’re more likely to stay on your website engaging with your content for longer. And if the information you’re sharing becomes more visually appealing along the way, that’s a bonus too.

If you can create a motion graphic which tells a story, showcases an emotion or illustrates a point, you’re well on your way to more effective communication – and a greater impact, too.

Motion with purpose

Any animation included on a website needs to be carefully considered. There’s no point in animating content ‘for the sake of it’. Any motion needs to complement the essential content on your page.

Not only that, but it needs to work towards the goal of that page, too: animation shouldn’t detract customers’ attention away from making a purchase, getting in touch, or finding out more about a service. If it’s present, it needs a purpose.

This purpose can be broadly split in two: to either inform your visitor, or to entertain them.

First, let’s look at informative motion. Motion can show your website’s user where an interaction can take place. It can also provide clues to what actions are available for them to take – such as clicking, typing or scrolling – and what will happen if an action is taken. It can also be used to teach or demonstrate, too.

For example, a blinking cursor within a text field encourages visitors to type something. A flashing arrow, on the other hand, encourages them to click to the ‘next’ page.

Put simply, it can be used to focus your web visitor’s attention on what’s important, and encourage an action without distracting them.

The second reason you might introduce motion design is to add personality to your website.

Again, this doesn’t mean just animating elements for the sake of it. Motion cues add character and can help you say more about your brand – without saying anything at all.

These animations might be more decorative, celebrating a specific moment in the user journey, entertaining your visitor during loading times, or adding personality and style to your layout.

Try asking yourself where the user’s attention is focused before you’ve added an animation. What is the goal of your animation? Is it to redirect attention? Increase that level of attention? Or is it to show functionality or new features?

It takes just 50 milliseconds for people to decide whether they will stay on your website or leave to visit your competition. As we mentioned before, the quickest way to make an impression is visually. By creating animations which are emotive, playful, useful or simply unique, that impression is more likely to be a positive one.

The laws of motion

So, what makes ‘good’ motion?

As a rule, it’s not there to distract or confuse. And for that reason, it should adhere to certain characteristics.

• Any motion should be responsive to a user’s interaction, such as a click, scroll or hover. Not only should an action take place, but it should form an energetic and accurate movement. Don’t stagger or slow the movement of an element, as this can cause frustration, and your website visitors should never have to wait for an animation to finish.
• Movements should be natural, inspired by real world forces. So, objects should ‘accelerate’ and ‘decelerate’ as in real life, for example. Unnatural movements can look out of place and robotic.
• Motion should be aware. Actions shouldn’t happen without a reason: they need to take place in the context of the visitor (their interactions with your site), and the other website elements surrounding it. Any animation should demonstrate hierarchy and narrative, and be choreographed accordingly. For example, don’t have elements on a page cross paths or move in opposite directions.

Current, compelling, consistent – scalability is key

Motion design is your secret weapon when it comes to creating beautiful digital services which build trust and brand loyalty. Plus, when used correctly, and in combination with scalable website building, it can directly influence your bottom line.

It takes a combination of digital skill, behavioural science and expert strategy to ensure success. At P+S, we’ve been refining our clients’ marketing for over 40 years.

When it comes to digital, our in-house team takes care of everything: from back-end development, to front-end and digital design, SEO, AdWords, automation, information architecture and content optimisation.

And they’re led by our expert strategists, who’ll work with you to ensure we meet – and exceed – your expectations.

Get in touch with us today to discuss your website needs, or read more about motion design here.