There's no doubt that there’s power in movement. Of all the tools designers can call upon to communicate effectively - motion is a strong one. It’s naturally eye-catching because it comes down to how we’re hard-wired to see. Our eyes were evolved for hunting so we could spot a potential meal on the horizon. We are drawn to movement before anything else because it was once for our survival.
It may be easy to catch attention with animation, however without consideration to how we use that attention span, it can be lost just as quickly.
Designing with motion is more than flapping your arms to get noticed (unless that's the desired effect). From a young age, we've been conditioned to think a certain way. Reading and watching we’ve grown used to rules of storytelling via content.
We interpret animation with an established bias so most of us know what feels right, but not why. One example correlates to how reading sets a precedent for how we interpret a linear timeline. The way the western world reads from left to right dictates a direction of progression. Left to right = forward progression. This same idea translates to how we might navigate through an app, fast-forward along a video timeline or expect movement from a character. A protagonist may enter a scene from the left, and exit to the right. An antagonist vice versa.
It’s understanding the underlying rules and expectations of visual language that help us craft effective user experiences using motion.
The rules to creating effective animations are based on real-world elements we can relate to, like gravity and perspective. Disney was the first to establish guidelines called “The illusion of life”, a series of twelve motion principles that defined all their animations.
Today, brands like Google set the bar for motion within UI with their twist on the same basic principles. Techniques like easing add a more human-like expression to the acceleration or deceleration of movement over time. By adjusting the strength of easing a brand can establish a style of movement that aligns to their values.
Brands on the move
For brands in today’s age of high-volume content in a multi-channel world, it’s never been more important to appear cohesive and consistent when it comes to motion. The need for brands to be instantly familiar grows as screen media becomes the norm. By developing their own motion principles, a brand can not only establish consistency across any platform but also build on their personality too.
IKEA adopted a playful way to show off patterns and colours used on their furniture products, using energy and choreography that reflects the idea of matching and arranging IKEA products to create something new.
IBM looked to their company history and DNA when considering how they might approach motion. A duality of Man vs. Machine dictates their brand motion ethos and approach to their design system: Productive and Expressive.
Motion for users
Once upon a time, in the age of dial-up internet speeds, a common action was simply waiting for something to load. Time estimation animations were a classic of any basic loading animation. While the process may have felt endless, the looping animation of your files moving from left to right indicated that something was actually happening.
Fast forward to today, and the waiting animation is still very much in effect. Data transfer web service Wetransfer.com incorporates looping animations to mesmerise you while your files float away to their destination.
Feedback plays a large role in any UI experience. Creating great virtual experiences means following real-world ideas: every action has a reaction. In an increasingly mobile-first world, UI feedback is the immediate contact with a customer, and it's important to show that you're listening.
Google’s Material Design is a system that outlines the three main ways motion can enhance usability as: informative, focused and expressive.
Having these three principles in place allows Google to design products and applications for a global audience. They set the basis for a robust framework that can be applied to any design task, becoming especially important for larger and more complex projects.
Workflow is a big part of using motion in any project at SLIK and early consideration to motion in the concept stages maximises the potential for the finished product. When necessary, concept animations are often explored using applications such as Adobe After Effects or Principle before hand-off to development in code.
Test it, refine it and test it again.
Often the best way to find out if the usability has been improved is to test it. Watching a user navigate through a menu system or a webpage can quickly show us where the strengths and weaknesses lie. This part of the process is crucial in revealing where, if any, refinement is needed to not just the animation but the experience as a whole.