Understanding the place of Motion in Applications

By Dennis Muthuri
iHub
  Published 11 Jun 2018
Share this Article

Motion can be a painstaking affair when it comes to applications, especially to the engineer whom artistry and design tools don’t always come naturally. A client or designer conceptualises interactions in the mind and executes them in click and drag fashion on prototyping tools such as Framer or Principle for mac, but ultimately, implementation lies with the developer, who in most cases, may feel that it’s beyond reach.

Creating interactions from scratch requires not only imagination but also experimentation, something which may not be afforded when a team is in the middle of a sprint. This always makes the place of motion in interaction an after thought after all the real work is done, or drive animation framework misuse to meet deadlines. However, there is hope.

The age of Material and demystification of motion

Ambiguity doesn’t have to be the case any more as Material Design standards on motion create common starting ground for engineering and design teams. Material Design guidelines offer impressive documentation on what motion can do for an application and how to use it meaningfully in a way that doesn’t feel awkward, mechanical and unnatural. Material tells us that

“Motion helps make a UI expressive and easy to use.”

Here a couple of highlights from the docs to get you started.

Common Uses and Techniques of Motion


1. Revealing and Hiding

reveal action reveal additional action


Displaying items at the right time in a non mechanical way allows the user to make the correlation between actions and controls.

2. Education and guidance

guidance animation guidance animation


You can emphasise an area you’d like a user to act on by ensuring it has movement associated with it. A blink or wobble effect draws attention to that element in a way colour can’t.

3. Communicating progress

loading animation loading animation


You can’t prevent the wait from happening but you can control the experience of waiting. Motion can captivate interest as it gives a taste of what’s to come

4. Showing transitions

transitions transitions effect


We can show relationships between different types of content based on how we display the items in the interface. Clicking on the tab to the left could show us it’s content in a flash but fading it in from the left gives an understanding between the tab placement and the content related to it.

In the next article, I’ll go over code samples which will demonstrate how to make these effects a reality. Stay tuned.

iHub Software Consulting is a design-led company that offers best-in-class software development and design consultancy. Our services include user experience research, design thinking facilitation, and software development. Interested in learning more about our work? Talk to us on [email protected]

Further Reading
1. Inspirational content
2. Invision article on Importance of animation
3. Google Material Guide on Motion

 

comments powered by Disqus