From wild west to theatrical experiences: how to get wise on website motion

From Victorian Zoetropes to today’s Hollywood blockbusters, humans have always been enraptured by movement on screen. Motion, we’ve found, can lift stories beyond our imagination and create experiences with spirit. 
 

In the world of websites however, getting motion right hasn’t always proven straightforward. 
 

Time and again since the birth of the web, site builders have been sucked in by technological leaps forward. Early dotcoms, for example, were pockmarked with animated GIFs that defined the fragmented experiences of the time. Later, Adobe Flash Player – years ahead of its time in terms of the immersive experiences it generated – spawned a wild west where thousands of sites, overwhelmed by movement-fuelled flourishes, pushed boundaries too far. While Flash was popular, it was discontinued on the grounds of security vulnerabilities and the introduction of more efficient web technologies like HTML5, WebGL and WebAssembly - technologies that provide better performance, security and compatibility across devices. 
 

Since mobile came to dominate, we’ve come to think about websites in a new way. Audiences expect ‘tactile’ experiences, and the likes of Apple and GSK have showcased how more considered approaches to movement can hold audiences for longer, deliver inspirational moments and nurture more meaningful relationships. 
 

Sadly, these approaches still aren’t the norm. Too many sites fall victim to a ‘toy shop’ mentality, and the results tend to look the same. We see dotcoms where the pace and rhythm is off: there’s just too much movement, too fast. Sometimes movement jars because it’s entirely inconsistent with a brand. Elsewhere, motion is delivered piecemeal, boxed off from a site’s general flavour. Too many prioritise dazzling movement at the expense of users with specific accessibility needs.
 

These sites miss massive opportunities. On a functional level, movement helps users navigate important content and boosts effectiveness on all key metrics, but it can achieve so much more. Genuine emotional connections with your audiences. A more three-dimensional view into your brand’s personality. A sense of drama and pace in your digital experience. And, uniquely, a means of empowering users with a sense of control that helps them lean-in to content and open-up to the potential of discovery.

But in a world where movement is just as likely to distract as galvanise, what does good look like? How can you make sure motion adds meaningfully without overwhelming audiences or pillaging your brand? Six principles for design, approach and process offer some guardrails. 

 

1. Bring purpose to movement through ‘experience principles’ 

 

Most movement faux pas fall into the category of ‘movement for its own sake.’ Just because you can make something move, it doesn’t mean you should: every use should be justifiable. Movement is about personality and attitude. Every movement or micro-interaction has its own dynamic and shape, and these should be a natural extension of your brand. If you needed to convey approachability, for example, you might opt for softness: movements that curve, for example. If you needed to reflect a more aggressive dynamic, you could opt for sharper points of reference at a different speed. 
 

To understand how movement should fit within your broader brand experience, it’s valuable to establish ‘experience principles’. These are defined characteristics, embodied in motion. This makes brand guidelines, values and tone of voice a first port of call for any digital project. Ask yourself about the story that lies behind these elements, and the clues they offer to the web build process. Translate these into principles that define a purpose for movement that is unique to your brand and, most importantly, offer actionable criteria to guide decision-making for every potential use of movement on your site.  
 

2. Embed a new mindset among brand leaders

 

We often witness a damaging attitude: ‘here’s a brand, how can we make it move?’. When developing brand identity, many organisations still don’t think about the immersive, movement-based elements as part of the process. Result? Movement that promotes a disjointed, inauthentic and alienating digital experience. 

 

We need to see a mindset shift that elevates movement to its rightful place as an important part of the brand palette. This is starting to happen. Movement is finding its way into brand guidelines (it certainly does in the work we do), and brand guidelines themselves are starting to transform to meet new needs. But these foundations need to be built before any major web build project. Dismantling any siloes between divisions and agencies, and finding more joined-up ways of working, is critical.

3. Think ‘theatre’

 

Until recently, motion on dotcoms was always delivered sporadically ‘in boxes’ across a site. Today’s tech – scrolling, parallax, for example - allows us to be more sophisticated. 
 

The best uses of movement are woven intelligently through a site to tell a cohesive story. We find it useful to think about movement and micro-interactions in almost theatrical terms. Movement can deliver emotion and engagement, but only if each instance is engineered in the context of a bigger picture. Every detail should be coordinated with each precise detail as if they’re characters or moments in one bigger, unfolding drama. 
 

Once you have experience principles, free up brand owners, designers and UX strategists to work closely together to think like choreographers, balancing each movement at every micro-moment.
 

4. Get ambitious about user journeys

 

There’s nothing particularly innovative about user journeys, but your audiences’ path through your site will be better enabled by being more progressive with movement. Imagine a museum. Curators don’t want visitors to just see: they want them to stop, feel and make connections. Maps, audio books and signs are engineered to inspire all that. It’s the same in the digital space: every movement and micro-interaction is an alert, cue or piece of signposting that helps your audiences respond. It’s a truism of product design that humans see movement as an unconscious ‘action’ sign: it invites all of us to investigate. This calls for closely engineering motion at key moments of each journey. 

5. Get a handle on (the right) tech

 

As our expectations for motion, movement and micro-interactions increase, so does the data burden. The risk is reduced performance that pushes audiences away and threatens your place in Google search rankings. 
 

Make sure you have access to approaches that make movement more intrinsic (enshrining it within a site through a code framework). It means you’ll be able to imitate the kinds of graphics you might expect in the gaming world, for example, while lightening the data burden and keeping load times manageable. 
 

6. Experiment. Test. Learn. Repeat.

 

All-too-often website builds are big beasts: heavy, onerous long-term projects that update a dotcom at considerable cost – and, when complete, they’re typically under-invested in until they’re obviously obsolete again. 
 

This way of working is inadequate in an age where both technology and audience demands are evolving rapidly. A more agile approach to these kinds of projects, paired with an ‘always on’ attitude to continuous improvement, removes the boom-and-bust cycle and helps a site stay relevant, all the time. 
 

Where movement is concerned, it also fosters a ‘safer’ environment for change. Big waterfall-style projects can attach considerable risk to new approaches and reduce opportunities to put mistakes right. Thinking more nimbly and facilitating experimentation will reduce the ‘cost’ of inevitable early errors – and help you keep pace with evolving needs. 
 

Wrapping up

 

In a world where the first ten seconds a user spends on your site is make or break, integrating movement is a no brainer. It offers immediate differentiation, boosts effectiveness, and has huge potential to nurture deeper, more productive connections between your audiences and brand. 
 

Doing it well, however, requires an end to viewing movement as a piece of tactical execution, or a toy to ‘buy in’. It needs to be finely engineered in response to a digitally-coherent brand. The quicker companies embrace this way of thinking, the better: we stand on the precipice of huge leaps forward in immersive technologies set to redefine how we all interact with the world. Today’s clearest thinkers on movement will be tomorrow’s fast-movers - and have huge advantage baked-in.

 

 

If you want to learn more about website motion, or have a digital project you'd like to discuss, get in touch. We'd love to chat.