We like to move it, move it!
This is how we do Motion UI at Aerolab.
The thing with UI is that it has four dimensions. When you think about a classic design piece, say a poster or an infographic, it’s usually static and there tends to be one ‘correct’ way of reading it.
It’s different with digital interfaces: there’s different layers, different ways to navigate them, and users tend to have multiple possible paths that they could use. In a way, digital interfaces are alive to users: they change, they move, they grow, and users can talk with them. The possibility of interaction is what brings this fourth dimension to UI.
[By the way, if you’re interested in Motion UI you should definitely check out this landing page we did on the subject, fresh out of the oven. No, really, you should click that link. It’s awesome.]
[See? We told you it was great.]
Our goal as designers is to guide users through the interface, to help them find their path.
We may do this with clear navigation, a simplified information structure, affordable components and a beautiful UI. And we bring all this to life with some Motion UI.
What the hell is Motion UI, you ask?
|Mo-tion-UI|
(n.) It’s when animation, visual design and user experience converge into dynamic visual elements that help communicate something to the user.
Motion UI as an integral part of Product Design is a pretty new concept, one which few agencies all over the world are embracing and implementing correctly. If you’re familiar with Aerolab, you know how much effort we put into making memorable products with unique personalities.
Defining and developing that uniqueness is a key part of our process. The most effective way to convey it is through small, meaningful details that may seem little by themselves but speak volumes when put together. From the voice that defines a product’s copy to the way in which we implement Motion UI, these aspects are what make interacting with said product a truly memorable and positive experience to users.
When an animation accompanies the concept of a product, it disappears. It becomes both an inherent and necessary part of the whole. When this happens, the design is effective, i.e. it has been properly executed. In short: it works.
Animations are felt. They invisibly accompany the ideas that want to be transmitted on a platform. There are many companies that resort to Motion UI Design just because ‘it looks pretty’, what they fail to realize is that this resource is a step within design that requires some serious development on a conceptual level.
The animations in a user interface must be aligned with a communicational objective and with the underlying personality of the product.
Of all the information on Motion UI that’s flooded the web over these last few years, we’ve found these 12 Principles by Disney Animators Ollie Johnston and Frank Thomas to be perhaps some of the best advice on animation you could ever get.
[If you haven’t, you should really check out that landing page we told you about earlier. And if you have, you should do it again. We love it.]
The more we worked with animation, the more we learned. At Aerolab we’re always looking for ways of refining our process, finding things that work best or that simply fit our methods and objectives.
These are the five main principles we use when approaching Motion UI at Aerolab, it’s mostly about common principles and agreed upon ideas, but with a little of our Aeromagic thrown in the mix.
Detail
Sometimes we don’t want to take the user’s attention away from a certain element of our product, but there’s still something that they should be aware of. We can achieve this by including microinteractions that reward the user when they successfully complete an action (or that indicate when said action can’t be realized.)
A great example of this is how some apps go through their user’s onboarding, with subtle hints all over the screen indicating that certain elements can be interacted with.
We put special attention into Detail when creating Banco Galicia’s mobile app, guiding the user’s focus throughout the app’s different interactions in order to help them achieve their goals. We used micro-interactions to reinforce the way in which certain actions could be done.
Anticipation
Sometimes you can use subtle motions to predict other, more complex movements. Just as a basketball player flexes his knees before jumping, the slight prediction makes the whole movement feel more natural.
Here’s an example of Detail and Anticipation applied to Motion UI. For Aerolab’s new website, we thought we’d give users a fresh approach to the usual, boring contact form.
Through subtle, elegant animation on the action button we managed to give feedback in a clear way that accompanies the user’s goal and reduces room for error.
Charm
Quirk in animation can be an amazing tool to make the whole product feel more light-hearted and to reinforce its personality. You should try to find non-intrusive ways to show off and try and capture the user’s attention and make them fall in love with your product.
We’ve got so much love for Doge that we decided to give him his own space on our web’s footer. It’s also a fun way of showing our personality to visitors and, should you not become immediately enthralled by his charming gaze, you can also hover over him with your mouse and you’ll get a high five. This works as an example of Charm and Anticipation.
Exaggeration
Just like in storytelling, exaggeration can be used for emphasis in animation. Exaltation of movement, character or physical features can add depth to a product’s personality. It’s key that this remains coherent with said personality, otherwise it would hinder the user’s experience and feel out of place.
When thinking about Taringa! Shouts’ notifications system, we decided to use Exaggeration as well as Detail to highlight actions on comments, reposts and likes to emphasize the playful and friendly personality we wanted to give the app.
Staging
User’s attention is fleeting. When setting up certain actions, we can highlight items of importance or relevant to a desired action. In this case, context is key to attracting attention to elements.
A great example of this is whenever a modal pops up and the rest of the screen goes dark, as if to indicate that that’s the only important action at that time.
On top of adding information about each service through Detail, we used Exaggeration and Staging here to highlight each section and focus the users’ attention on the text.
Here’s another example of Staging; in order to showcase all of Pixel2HTML’s awesome services, we centered information around a moving context to emulate how an order moves through their system.
We’re not re-inventing the wheel here. The folks over at Disney made a fine wheel to begin with. This is simply our adaptation of those principles for working with Motion UI on Digital Products.
[The article is almost over, you should really check out our Motion UI landing page before it’s too late.]
As with any other element on UI, motion UI shouldn’t be some plain decoration. The decision of using animations should serve a purpose and contribute towards an objective: it should communicate and guide the user.
Entretiempos, the game we did with La Nación, has a lot of neat features centered around Motion UI. The example above shows how we used subtle motion to both direct user’s attention toward a certain interaction, as well as indicate that the answer as incorrect.
This is also a shot of Entretiempos, where we used micro-interactions to give feedback in a clear, charming way, which goes hand in hand with the product’s personality.
By making something that is both visually attractive and functional we are adding value to our Users’ Experiences and making our product more intuitive and friendly, making the interface feel alive. Applied properly, Motion UI can be an amazing tool that allows us to seamlessly integrate the fourth dimension of interaction to our digital products.
This fourth dimension has the potential of making or breaking a product. It acts as a reflection of it’s personality and values which, ultimately, are what make users fall in love with it.
If you’re still yearning for more knowledge about Motion UI, take a look at this.
We can’t finish this article without crediting the amazing -and former member of the Aerofamily- Pantufla Cuántica, who was instrumental in us understanding traditional animation. Also, her piece on animating interfaces is a must-read.
Cover illustration by Alejandro Ramirez, animated by Wanda Arca.
Principle illustrations by Pam Schiavone, also animated by Wanda Arca.
Editing by Sof Andrade, Alejandro Vizio, Guillermo Vidal Quinteiro and Bautista Aguiar.
Here’s some more Aeromagic for ya’ ✨
Our website — Facebook — Twitter — Instagram
