Interaction Design

NOTE: This page contains several animated GIFs that may take a few minutes to load and run smoothly. It is advisable to proceed over a Wi-Fi connection as standard data charges apply over a mobile network.

Interaction Animations

Motion is a powerful way to liven up design solutions – when used wisely and purposefully.

Mankind has always been fascinated by motion – right from the early zoetropes to modern cinema, motion and animation has been used to tell stories by giving the viewer a degree of context within the storyteller’s canvas. This also holds true in the world of digital design – given that UX is all about solving a problem by taking the user on a journey. Yet, interaction design is sparingly used in UX and UI design.

The reason – conceptualising effective interaction designs is no cake walk, and nailing the timing and synchronisation in order to provide context and clarity rather than chaos and confusion is even more tedious. In other words, it’s hard to get right and extremely easy to get wrong. However, when crafted wisely by vetted professionals – interaction animations can give the user spacial sense of where they are, and where they need to be. Think Google’s magical material design cards, or even Apple’s frosted overlays.

While interaction design falls largely under the umbrella of user experience, sometimes it’s just about providing customer delight. Here are a few of my favourite interaction animations:

(p.s. the files are heavy, so they may take a few minutes to load and play smoothly!)