This is probably the 359th article you see about micro interactions, this week. It’s a buzz word and as a buzz word it is abused by everybody, in any context to obviously sound smart, modern, when most are actually designing fancy meaningless interactions. Attention to details is important, as long as the details enhance the experience.

“Design needs thought, care and honesty “— Mentioned by all people who succeeded in this field.

Short Definition

I am not an expert in micro interactions, even though I have used the concept without realizing, probably as many others. I do think that MIs (micro interaction is annoyingly long) are incredibly powerful when analysed and used correctly. They are the next step in differentiating a standardized world that follows design systems on a daily basis.

I recommend this book; Dan Saffer uses great practical examples and narratives, described mostly in plain language. Since this is the first in the series, I’ll start with the very basics — don’t roll your eyes, it’s short — read the book if you want the rest.

A better explanation of the basics

A micro interaction needs to:

Be discoverable, visible and explain its purpose right away — Trigger

Prevent errors, remove complexity and be clear in its actions and constraints— Rules

Present outcomes relevant to the context of use, be crystal clear in its response and make use of standards — Feedback

Memorize / learn from past interactions and state the current mode — Loops & Modes

“What a surprize, these are basic design principles right?” . Yes, they are and there is much more to them, around context and existing user data that can greatly influence one’s experience. Their true power is in their details, which is why they need serious thought.

For example,these could be used to create a signature moment; a single micro interaction that can help in connecting a product to a brand. Your website’s cart could jump three times when you add an item, to clearly indicate that it was added — “Oh yes, I remember that site, it has a funny jumping cart when I add something to it”. Apple makes use of these type of interactions in their OS, some good, others annoying.

Searching

There is a large variety of real world actions and objects translated in the virtual realm: tables, desktop, recycle bin, folders, a drop down, lists, etc. However, the one that intrigues me the most is searching. It is a fascinating, complex action changing in time based on our past experiences, the state of the world we live in and, obviously our goals. Think of this, if you visit a friend and you wish to find the fridge, you will most likely go in the kitchen at first.

The point is that we never start from point 0, we always have some knowledge of what we want to find, more or less accurate. In the virtual world, we have filters, sorting or views. They are tremendously helpful, only being applied after we wrote what we’re looking for or pressing search. Why not use the knowledge that we have while we type in, to immediately trim down the results? A micro interaction could prove really useful in this case.

Assumption

“If users of an e-commerce website have pre-filters, they will see and get to relevant results faster”. I started with a very simple example — buying running shoes. In this case we can safely assume that we know, even before searching, the following pre-filters:

Shoe size

Maximum price willing to spend on shoes

Shoes for males or females (probably more to add)

A very basic outline of my initial idea. In general, designers shouldn’t commit to visual too quickly (I think this is in the book above too), however this is an experiment based on assumptions. The first image is similar to the way a search field works on most e-commerce websites. In the second one, the results are similar, but users have the change to filter them immediately.

I’ve added some visuals and color to the design at this point. Specific results would appear in the left hand side after filters are applied on the right.

We could go a step further and add fewer, even more specific results, adding thumbnail images as well.

Something didn’t feel right though. Would users really spend time on playing with those filters? Why wouldn’t they want to jump to products right away, especially with those filters placed on the right side. I felt that there is space for rework and improvement.

What if we start using the user data we probably gather anyway?. When users get closer to the search field with their cursor, or after they click the field, a pop-up comes up asking for three main things. Maybe we can go even further — is there a clear difference between Women and Men browse website?. If yes, use that data to set defaults for those controls. In addition, the pop-up could make use of account data and previous purchases as well.

The interaction here can vary: the save button could be removed and the filters added automatically; in that case there is a need for close or x button.

I would love to animate this properly (after I get After Effects again), as detailed motion would clarify several details and point users to the right track.

My point is that we need to use micro interactions with care and treat them as powerful tools which will burdon users’ experiences with unnecessary animations, instead of directing them towards a path, presenting functionality based on context, or providing them delightful feedback.