Animations come in all sorts of shapes. From fluffy Pixar-animations, to airline tutorials that beg us to act perfectly normal in rather unpleasant situations. The ones that move us the most as digital designers, are those we experience through graphical user interfaces. In the following read we would like to share some of our thoughts and opinions on this matter. We will have a look at a few trends, followed by a search for uniqueness in animation. Apart from that, we lean into the factors we all play with: movement and suspense.
Shout-out to co-writer and buddy Jesse Zoutewelle ⚡️
An approach in full motion: where are we headed for?
If you are an animation enthusiast, you might have seen The Horse in Motion at some point. At the time, people were blown away by the twenty-four frames that Edward Muybridge tied together into a somewhat fluid movement.
Fast-forward to 1981, when two Johnston and Thomas, both animators at Disney, wrote an extensive guide to real-life animation called, The Illusion of Life: Disney Animation. Natural laws of physics and emotional timing were incorporated into these guidelines. These twelve principles still stand strong today and are a good reference point for digital designers.
Not too long ago, Flash left our lives. Many designers felt like they lost the ability to freely animate their ideas. Therefore not fully capable of communicating them to developers, clients and other stakeholders. But — as always — creative people bring forth creative solutions. Scripting and modern CSS gave us plenty of opportunity to communicate motion and unfold conclusive stories. Not to mention a plethora of animation-tools out there, some of which are free to use for everyone. Apart from this moving little piece of history, we see other interesting trends appear in regards to animation.
Define your own rules
People can generally tell when something just feels right. Whether it’s an animation, or a beautifully crafted user interface in itself. Still, there is plenty of space to explore of course. Lots of tech companies claim to have found their own animation-language for user interfaces. Facebook developed its own prototyping tool Origami, and Airbnb introduced Lottie. Of course Google claimed his territory in the form of their library of principles called ‘Material Design’. Part of it is called Material Motion. All great examples of companies that are enabling designers to make products that almost feel like the live version.
Interestingly, it seems to us as if every little tween and micro-interaction is well-documented and set in stone. These rules and tools make for unity and familiarity in an animation’s look and feel, which is obviously great for a continuous user experience.
Nevertheless, this effect has as many pros as cons. If animations are perceived in the same pleasant way on every OS, users feel in control: recognition over recall. If you are used to Apple iOS, you will get iOS-native animation, same goes for other operating systems. On the other hand, these guidelines create a sense of sameness you might want to avoidin user interface design. Making sure recognition and uniqueness are balanced-out, is not an easy process. In order for us as a design-agency to stay on-top of this, we have to embrace animations in the early stages of our designproces, or it might be an afterthought any way.
Being unique, or using shoulders of giants to stand on: in the end we are all trying to tell stories. Step-by-step we unfold a plot, that is the message across to our clients and stakeholders. But, how do we get this message right?
Okay, hold still now
Through every product we release, we start a conversation with our end-users. Either an informative productpage for an insurance company, or a full-blown catalogue with a new selection of brews for a coffee brand. The scene is set: a user interface to interact with the elements, a viewport defining the lines along which we can play.
Whether we like it our not, a lot of work is still pretty static. A campagne-page, an online identity or an empathising chatbot. Sure thing, we could present all of the content at this same time. Never mind about animation, users will get it anyway. Like any romantic play or movie, we all know the hero will end up with the girl. But nobody wants to know this beforehand. Presenting users with an answer straight-up, just does not answer to our need for a persuasive story.
We think these four factors help us to create an alluring story:
- A user’s knowledge and expectations;
- A storyline of our end-user;
- Our ability to translate these needs to suitable designs and products;
- Time and suspense.
Time and suspense will translate our, otherwise flat, images into a vibrant conversation. Shapes and images will change place, creating elements that will invite interaction. Key-elements in this flow are a clear story and a unique animation-language. We defined 3 types of animations that can help facilitate this.
01 | Animations that invite
When an end-users interacts with the product we design, certain elements can attract more attention then the other. Without a proper introduction of these elements, you might lose a lot of visitors. Its all about progressively disclosing the elements on the page.
A while ago, we designed a platform for Nespresso’s de Boer en de boer-campagne. This platform invites visitors to explore the process of coffee making, from berry to cup. The scene is set in Colombia, and visitors control drone-images to fly over the coffee plantations and beautiful scenery. 360-video and photography accompany the story.
When opening the webpage, the user is invited to ‘Start the flight’. This can be done by clicking the ‘Start’ button. But we also made the little airplane draggable across the screen, this gave a deeper sense of actual movement. The flipping panels enhance this even more. Form follows story, if you may.
02 | Animations that guide
Where do we come from, where are we going? Tough call, but animation can help answering them. In-page movement, or between screens, provide direction to our concepts.
Sure we like coffee, but music even more. The Soundcloud-app is one we use on a regular basis. It has a neat feature in which animation creates context for one specific interaction: scrubbing through video.
03 | Animations that delight
Some animations are just there to delight. Buttons you want to click on forever, or a nicely fading transition between two pages. Sparingly using movement is pretty important. In the aforementioned Flash-era, this was often forgotten. When applied to with care, fun animations can lift your design and brand to a new, recognisable level. One good example of this is the Paper Planes-game developed by Active Theory and presented at the annual Google IO-event.
Starting point for Active Theory was pretty straight forward: “ What if you could throw a paper plane from one screen to another?” The heart of this concept was bringing people together. They did this by relying on a user’s common knowledge of the system in a clear and simple storyline, combined with cutting-edge technology. Folding the plane is a fun flow to engage with, after that, the phone is used to throw the plane to the other end of the world. As you can see the plane leave on your computer screen.
Any brand can do the same thing, and as designers we have more and more building blocks to make unique experiences. On the one hand, there are animation libraries assembled by the Googles and Apples of the world. But with a little more effort and brand guidelines, we can claim our own animation-language, and really stand out.
Just keep on moving
When it comes to movement and animation, we’re miles away from a standstill. Design agencies can claim their unique approach to motion design. In order to do so, we have to define our own animation guidelines, together with our brands. In which their own story, is a leading factor. Early sketches and animations, can help doing so.
Good animations feel right. They serve a purpose, and are most certainly not the center of attention in your product. Progressively disclosing elements on a page, can be done using motion. But use sparingly, you can never make a first impression twice. As with any talk, a clear message combined with a sense of delight are essentials for a great conversation.
As we all can guess by now: balance is everything, you’re not supposed to overdo anything. A subtle scrolling element, or an all-out page-flip might be worth debating about. Sometimes, it is best to let animation be an unobtrusive guide in your interactive product.
But never lose track of the end-user and the message you are trying to get across. They are the ones who are taking the time to interact with your product, and might possibly be moved by it.