Designers need to get moving (with motion design)
Throughout the history of technology, creators have tried to replicate the look and feel of real-life objects. Skeuomorphism design principles are still prevalent today. Movement is a huge part of our natural world and hence humans tend to expect movement in software as well. By adding subtle transitions, a product feels alive and natural. Animation has made the web feel fluid and lively from the very early days of Adobe Flash. It is now helping product designers craft delightful experiences for users.
How animation improves UX
Animation can play various roles in a design. From a usability perspective, animation carries a lot of weight as it can convey a lot more while taking less space. Affordance is only one of the reasons why motion is getting popular. Animations also grab user attention. Product designers can use these features and deploy animations for various uses.
Feedback and state change
Animations make it simple to depict when an action has been registered by the app. These feedbacks help the user build a mental model of the app and also gives satisfactory reassurance that the action was recognised.
Similarly, animations are great to show state changes of a component. A popular example is the use of icon morphing like the following download animation.
The in-place animation gives the user live status which is very easy to understand. It finally ends with a tick mark as feedback. Animation makes visualising context-heavy state changes simpler to understand.
Easy and intuitive navigation
Just like in movies, how camera placement and movement are used to visual space, animations can be used in products to help users with navigation. If a drawer slides up over a screen, it is intuitive to the user that it can be pulled back down. Animations like zooming in and out, sliding etc give users the spacial information of the app without much cognitive load.
Brand tone
Like all designs, motion is a communication channel. Animation can help company display their personality. Although it is easy to go overboard with cute animations, when managed correctly the animations can add real depth and personality to the app. Animations in the Headspace app create a mood of calmness, visually communicating the brand’s voice.
The glue between design and dev
Experience design has seen meteoric growth in the last decade. The industry has seen some huge changes in a relatively small time. Products like Figma emerged that changed the way user interfaces were designed. Similarly, tools for exercises like mood boarding, wireframing and prototyping pushed what a design could be. Designers are no longer shipping pictures of screens but rather high-fidelity prototypes that are closer to dev than ever.
In this quest of making designs as close to the real product as possible, designers are using animation to fill the gaps in communication with developers. With built-in animation controls in design apps, prototypes are carefully tuned to mimic how the real product should function. The advantage of adding this layer of interaction is two-fold. First, it makes sure that designers and developers stay on the same page and that nothing is lost in translation. Second, the high-fidelity prototype motion also has a way of helping designers catch any edge cases or even some core design changes that might be needed.
The overall rise in the standards of design deliverables has raised the expectations of what a designer can do. The lines between different design roles are blurring.
Products require designers to be a jack of all trades and master of some.
Motion has become a key part of crafting digital products. Such a wide adoption means sooner or later designers have to sharpen their animation skills.
We need to get moving
As design matures, designers are exploring ways to make products better by using existing principles like animation. Animation has the power to make products truly alive and cohesive. They take out the jaggedness of an app and provide a delightful user experience. For designers it is especially useful to communicate the design to its true full extent to developers, thus slimming the margin of error. The expectation and requirements of the world are updating, and designers at every level should be delivered to the same.
Canvs Editorial regularly brings you insightful reads on design and anything related. Check out the work we do at Canvs Club.
The Canvs Editorial team comprises of Editorial Writer and Researcher — Sidhant Tibrewal, the Editor’s Desk- Aalhad Joshi and Debprotim Roy, and Content Operations- Abin Rajan
