Cast your mind back, if you will, to the days of dial-up internet. The painful cacophony of dings, beeps and dongs that forged together to create the ‘connection anthem’ that eventually opened the gates to the world wide web where sites would load at a glacial pace.

‍

The only thing that stopped us from hurling a stapler at the screen was knowing exactly where we stood in the page loading journey, and that was thanks to loading bars that we commonly refer to today as micro interactions.

‍

Of course micro interactions are by no means limited to loading bars alone. They take many forms and are often driven by semi-amusing design elements aimed at keeping us mildly entertained while waiting for a request to be actioned. From traditional loading bars and percentage dials racing towards completion, through to autofill forms and even dubious Tinder swipes, micro interactions are all around us.

‍

Micro interactions aim to make the user experience more rewarding by improving navigation, streamlining actions and keeping us informed throughout the user journey. Thanks to them, we know where we stand as opposed to staring at a screen hoping, wishing and praying for something to happen (insert crickets here).

‍

Micro interactions can be oddly satisfying to use. Take swiping for example, the action itself is smooth and easier on the finger than a clunky tap. It feels streamlined and satisfyingly decisive. The animation in a swipe is kept simple, however that’s not to say that animation can’t be leveraged when it comes to micro interactions. Here, great design practices can be put to work to create an animated micro interaction that engages the user while ensuring they aren’t distracted from the main task.

‍

There are four parts that drive the mechanics of micro interactions. These influence the design and functionality from a UX perspective.

‍

Triggers

As the word suggests, a trigger initiates the micro interaction. This can be user-initiated or system-initiated. Triggers ask us to swipe, scroll or click and should be kept simple and as easy-to-use as possible.

‍

Rules

The rule dictates the action once the micro interaction is initiated. What happens? Where does it take us? Rules underline the purpose.

‍

Feedback

By keeping the user informed they know what the heck is going on. This is vital in eliminating any frustration and keeping your audience from straying.

‍

Loops & Modes

This determines the unique principles of the micro interaction and what happens when conditions change.

‍

Micro interactions matter. They can make or break the user experience. They can be stylised to compliment the overall look and feel of a site to further enhance a brand identity or tone of voice. They can be quirky or fun so the user feels entertained at key touchpoints in the journey.

‍

When it comes to creating micro interactions coders can turn to programs such as Xcode, Android studio (for mobile) or Framer and Css Animation (for web). For more interactive and design-centric micro interactions you might consider Adobe CC, After Effects, Origami Studio or Protopye. Whichever you choose, ensure your micro interaction remains easy-to-use and simple by design.