Improve your websites with microinteractions

Your design is only as good as the worst part of it. You can have a killer feature, but if users are so turned off by the signup form, they may never stick around long enough to use it.

To create a successful product that users love, you need to focus on both parts of design: the big picture and the details. Microinteractions are those details and are the 'feel' part of the 'look and feel'.

What are microinteractions?

Microinteractions are the small product moments that accomplish one task and one task only. When you change a setting, rate a song, Like a Facebook post, search, or set a status message, you're engaging with a microinteraction.

Microinteractions are all around us, in every app, website and appliance. They're the brief pieces of functionality that can be utilitarian and forgotten, or be so interesting and memorable that they become part of the brand. The 'You've got mail!' microinteraction will live on long after AOL has been forgotten.

Why are microinteractions important?

Microinteractions usually get little attention. After all, no one comes to your app to enjoy the password change functionality. Microinteractions are usually what is dismissively referred to as 'product hygiene': something users just expect to be there.

But ignoring them entirely is a mistake. The difference between products we love and those we simply tolerate are often the microinteractions we have with them. You can take what is usually dull and forgotten and make it something enjoyable and memorable, and thus increase adoption and customer loyalty. If you care about user experience, you should care about microinteractions.

How to improve your microinteractions

The best microinteractions start with an understanding of user needs and of the context of use. In other words, what do they want to accomplish and where and when is this occurring, both within the product and the environment the person is in? This isn't just knowing what the steps in the process are.

For instance, no one wants to enter their user name and password, but people do want to log in so they can get to their personal stuff. You can learn this in the usual fashion: by asking people or by observing what they do. Or you can make a guess and see what happens, adjusting in usability testing or after the product launches.

Armed with this information, you're ready to craft your microinteraction. Microinteractions can be thought of as being composed of four parts: a trigger, the rules, feedback and loops.

Triggers for microinteractions

The trigger is what starts a microinteraction. This can be a manual control, such as when a user clicks a button or an icon, or a form that a user has to fill out. Manual triggers are often dictated by environment and convention: a search field is a search field.

But there is another kind of trigger, one that's possibly even more interesting: the system trigger. Every time an email message arrives and your computer pings, that's a system trigger. System triggers engage when a certain condition or set of conditions is met.

The best system triggers are those that anticipate the user's need without the user having to explicitly telling it. This usually means observing what the user does (collecting user behavioural data) and making assumptions about what that data means.

For example, if every time I log into a stock portfolio app in the morning, I check a particular stock, why not present me with that option immediately when I log in? Never start from zero. You almost always know something about the user or the environment, and that knowledge can make your app better.

Some triggers bring the data forward and out of the microinteraction. You don't need to look at your email app to see you've got a new message. Figure out what information is inside your app that users might be interested in, then design how that information could be revealed in the trigger.

The rules of microinteractions

The second part of microinteractions are the rules. Rules define what can and cannot be done with the microinteraction. They are the rules of the microinteraction 'game'. Rules determine what happens and in what order they happen when the user pushes that button or when a message arrives.

Rules shouldn't feel like, well, rules. What you want is a feeling of naturalness, an inevitability and a flow from trigger to rules to feedback. The rules should float users through the 'interaction' part of the microinteraction. This flow should include determining what actions most people take most of the time, and building those in as smart defaults.

Start by writing down all the basic rules you know then fill in the details, adding nuance and constraints. It can help to think of your microinteraction as a sentence, with nouns (UI elements) and verbs (what can be accomplished). Some of the most elegant microinteractions are able to do many verbs with just a few nouns.

Rules can prevent human error by blocking (or fixing) actions that would break the microinteraction. For example, Gmail is infamous for helping people catch an email before it goes out without an attachment if they've written, "I've attached…". Meetup will expand your search results if it can't find a meetup in the area specified.

Getting user feedback

Since rules are invisible, how users understand them is through the third part of microinteractions: feedback. Feedback (and the lack of feedback) is how we understand what's happening. Feedback can be visual, aural, or haptic, with visual being the most prevalent for the simple reason we're usually looking at what we're interacting with.

With microinteractions, the least amount of feedback you can provide, the better. Less is more.

One trick with feedback is to use the overlooked. Designers already have a lot of UI chrome to play with, so why add one more thing on screen? Use the overlooked - the cursor, the scrollbar, a button state - to convey more of what's happening.

Feedback is the place to add a veneer of personality to your microinteraction. Sometimes a little bit of humour or edge can work very well and are appreciated - particularly in situations that can be frustrating, such as an error message or when something is taking a long time to load.

The last part of microinteractions are loops and modes. Modes should generally be avoided in microinteractions, unless there's an infrequent yet essential action that would otherwise disrupt the flow of the microinteraction. For example, the 'forgot your password?' mode in a login.

Loops

Loops determine how long the microinteraction goes on for. Does the microinteraction end immediately, or does it repeat forever? Long loops can help extend your microinteraction into the future, asking you to consider what happens when the user returns the second time, then tenth time, the thousandth time with your microinteraction. How does it change and adapt to how it's being used? Create a long loop so that the microinteraction adapts over time.

Put together a trigger, rules, feedback, maybe a loop or mode, and you can create a polished microinteraction and turn something utilitarian into something that helps users enjoy your product.

Words: Dan Saffer

Dan Saffer is director of interaction design at Smart Design. Since 1995, he's designed everything from websites to robots. His book, Microinteractions, is out now.

Liked this? Read these!

• Great examples of parallax scrolling websites
• Inspiring ecommerce website designs
• Pro tips for mobile website design

How do you feel about microinteractions? Tell us in the comments!