Return to site

The beauty of microinteractions

I recently started to have a proper look to an interesting book about Microinteractions (finally!). 

It was on my bookcase from a while but I didn't have any chance to explore it properly. I'm currently working on a native app, so I thought it was the case to refresh some knowledge about it.

I've got the older version, but you can find online the recent one, which includes colours. 

Microinteractions force designers to work simply, to focus on details

Dan Saffer

broken image

In the UX world, we know that recently the topic "Micro UX" is been quite popular, sometimes used not correctly, just to describe a nice transition effect which entertains the user. 

A microinteraction is not just a transition. It can be represented by an animation, but it represents so much more, sometimes it can be a small piece of microcopy.

There are quite few interesting posts which collect some best practices for Micro UX and for me some brilliant examples.

What is a micro-interaction?

In the book, Saffer describes the microinteraction as "a contained product moment that revolves around a single case - a tiny piece of functionality that only does one thing". 

I found this brilliant. In the end the user interacts with one functionality at time, so it makes a lot of sense to scompone the system and to focus the attention on tiny bits of it, connect them together to create the whole and general experience.

broken image

An example of micro UX: Floating labels and in-line validation form (Pinterest)

Isn't that beautifully simple, auto-esplicative and fun?

A microinteraction is structured by 4 different parts:

  1. triggers, or the condition that initiates it
  2. rules, or the predefined behaviour
  3. feedback, or the immediate consequence
  4. loops and modes, or the change of status 

In my simplistic view, I see this 4 moments as the expression

If true then this (and this)

But it's only my way to summarise it in my mind.

How to apply this philosophy to our work?

The author answers giving us 3 different way to approach:

  1. listing the microinteractions of a project and focusing on them individually
  2. reducing the product to a core microinteraction
  3. treating every functionality as a set of microinteractions

I find the second one quite inspiring, so I'll start from that. 

After all, more is less!