Microinteractions can make or break your experience

This shows how ubiquitous microinteractions are, how they can make or break an experience, and how to apply microinteractions to your products and services, as well as what to be aware of in designing a great microinteraction. (This is a blog I wrote for my company, Axway, a while back to build understanding of microinteractions, so some images may be outdated, since technology changes so fast).

What is a microinteraction?

Dan Saffer, author of Microinteractions, coined the term microinteractions, which he describes as “A contained product moment that revolves around a single use case — a tiny piece of functionality that does only one thing…They can power an app or device, but more often exist alongside or inside a larger product.”

Microinteractions are functional, interactive details of a product. They should be simple, brief, and nearly effortless. These small moments should be pleasurable and engaging, not dull and forgettable. As Charles Eames said, “Details aren’t just the details; they are the design.”

Where are microinteractions?

Microinteractions are everywhere — in our devices, apps, environments! Whenever you change a setting, synch data or devices, set an alarm, pick a password, turn an appliance on or off, sign in to a system, display status changes, favorite or like something, etc., these are all microinteractions. Nest is a great example of taking something mundane, like a thermostat, and making it into something delightful and desirable and remotely controlled. I’m still waiting for the price tag to come down! ;-D

Famous Microinteractions

• Autocomplete
• Autocorrect
• Ctrl-Alt-Del
• AOL’s You’ve Got Mail
• Cut & Paste
• Facebook’s Like
• Hamburger menu

• Pull to refresh
• Scrollbars
• Typing indicator in chat

They Can Make Or Break A Product

Microinteractions are frequently the last parts designed and developed, and are often overlooked. This is a big mistake. Design is only as good as its smallest part. Remember when Android first came out, how clunky it was? Now it’s caught up to a large degree with iPhone.

They make the difference between a product you love and one you just tolerate.

Let’s look at some examples from social media and elsewhere on the web. You can see that microinteractions do a wide range of things, from bringing data forward, preventing errors, adding a personal touch, and so much more!

And now for a bit of iconic (pun intended) history! Did you know that the hamburger icon was first used in 1975 by Xerox Star? What’s old is new again!

Prevent errors by limiting options

It’s easier to prevent mistakes completely than to force users to remember a system constraint.

Some work great, others not so great…

When microinteractions go horribly awry…

Why was our expectation so different for this checklist pattern above? Mobile phone users are used to a checklist being something that you can interact with!

Like superheros, they can even deter crime!

The iPhone finder (when turned on!) has been shown to reduce theft by 32%! Now that’s a powerful microinteraction!

Show status and state changes

Axway’s SecureTransport Mobile uses microinteractions to show status and change mode.

Axway’s Central Governance uses microinteractions to provide only what is needed in a particular context or state, and to provide signature moments.

Do more with less

Simplify and declutter the interface by making some elements do double-duty, such as buttons showing icons to reflect loading state.

Make your own microinteraction

When designing a microinteraction, keep this equation in mind. What is your trigger? What are your rules? What is your feedback? What are your loops and modes?

This hypothetical badge and notification system shows how you can apply this equation. The notification comes in, a badge indicator increases by 1, the user clicks the notification icon, opens it, and performs an action, such as getting more detail or flagging it for later.

What to think about when designing a microinteraction

• Microcopy/labels/icons
• Constraints
• Feedback
• Triggers
• Diagram rules
• Prevent errors
• Limit options
• Reduce cognitive burden
• Engage by asking questions

Microcopy/labels/icons

• Use meaningful microcopy only when necessary. Use meaningful labels to eliminate microcopy whenever possible.
• If a word doesn’t fit, try using an icon instead
• Avoid misleading or ambiguous labels
• Make text relational instead of exact (1d or 3m is easier than dates and times)

Constraints

• What input/output methods are available (keyboard, speakers, mouse, etc.)
• What is type or range of any input?
• What kind of data is available?
• What kind of data can be collected?
• What device/platform is the user using?

Feedback

• Do as much as possible with as little as possible — make UI elements do more
• Change button to reflect object state (Save changes instead of save <object name>)
• Provide just enough feedback to make rules clear (e.g., affordance, what user can/can’t do)

Triggers

• Custom gestures beyond the usual taps and swipes are often found through a process of trial and error
• Invisible triggers should be guessable, or ideally, stumbled upon as user performs other actions
• Frequent microinteractions that most people do should be highly discoverable.

Diagram rules

• Determine the rules of the microinteraction (i.e., trigger, does user have any control?, sequence of interactions, mode, feedback, end, etc.)
• Diagram rules to find any gaps or errors
• Where is data used in microinteraction coming from (e.g., x unread messages, file status)
• Show info from inside microinteraction when possible (x unread messages)
• What are the steps in the process? What comes before what? Are there any conditionals/dependencies?
• What are the decisions (if…then)
• How does the algorithm loop (e.g., updating search results when typing in search field)
• What are the variables? (numeric, alpha, boolean [t/f]

Prevent errors

• Poka-Yoke: Products and processes should be designed so that it’s impossible to get an error
• Only show error message when system cannot respond properly
• The microinteraction should try to fix any errors that do occur

Limit options

• Will giving the choice make the experience more interesting, valuable, or pleasurable? If not, leave it out.
• Items at top and bottom recalled better than middle options
• Highlighted option selected more often than one that is not
• Start with simpler, broader decisions and move towards detailed options
• Make options meaningful
• Emphasize or automatically perform the next most likely step
• Limit choices and use smart defaults.
• Remove as many edge cases as possible. Revise rules to make them impossible.
• Remove most control from user and have microinteraction handle most decision making
• If user control is necessary, decide where necessary and provide it only then

Reduce cognitive burden

• If you make a decision for the user, make sure you let them know (Snooze 15 minutes instead of just Snooze)
• Return (or Enter) should perform the default action
• Avoid modes if possible (e.g., view city, view weather details for city)
• Use progressive disclosure to provide info on as-needed basis
• Use short, unambiguous labels
• System should handle computations, calculations, simultaneous multi-tasking, remembering info, detecting patterns, searching through large data sets
• Use forgiving format
• Consider shortcuts for frequent actions
• Fewer rules = better, more understandable microinteraction
• Fewer options = less cognitive burden. Ruthlessly eliminate options
• Provide feedback

Engage by asking questions

• Should this be a Signature Moment? In other words, how memorable should it be? The more memorable, the richer it can be in terms of controls (including custom controls) and feedback.
• Am I starting from zero? What do I know about the user or the context that would improve this microinteraction?
• What is the most important piece of data inside this microinteraction, and can I bring it forward? What does the user need to know at a glance?
• Would a custom control be appropriate? A custom piece of UI practically guarantees the microinteraction will become more prominent.
• Am I preventing human errors? If there are any situations where a user can cause an error, what can you do to prevent that automatically?
• Am I using what is overlooked? Are there pieces of UI chrome or hardware that could be doing more?
• Can I make an invisible trigger for advanced users? Is there a place to make a hidden shortcut (via a gesture or a command key) to get deeper into the rules faster?
• Are the text and icons human? Does the microcopy sound like something another human would say out loud? Can you add a touch of humor?
• Can you add animation to make it less static? Could you have transitions between screens or states, or an (nonintrusive) indicator of what the next step would be?
• Can you add additional channels of feedback? Sound or haptics?
• •Ask what happens when the user returns to the microinteraction the second time. And the hundredth time. Figure out what the long loop could be.

Remember these rules

• Don’t break visual affordance. If it looks like a button, should act like a button
• Don’t make them think (too hard)
• Focus on goal, not steps of microinteraction
• Use movement only for highest priority actions (Like button on Facebook)
• Don’t start at zero. What do you know about the user and context? How can you use that to improve the UX?

Prototyping, Animating, and Testing

Prototyping

• Figure out relationships between interactions, and persistence
• Focus on rapidity and effortlessness. Most microinteractions should not be signature moments.
• Keep tone and emphasis consistent between microinteractions. Don’t design them in isolation.
• Step back and ensure everything works together as a whole.

Animating

• Must indicate an accurate behavioral model of the microinteraction
• Should communicate something useful to the user (iphone network strength indicator moves faster when network signal is stronger)
• Must be SMOOTH. Stuttering, choppy movements make it seem broken
• Must be natural (e.g., obey gravity, inertia such as clockwise rotation instead of counter-clockwise)
• Maintain context while changing views (e.g., scrolling, flipping pages)
• Can make an object state change or value change more obvious
• Improves perceived performance (progress bars make time seem shorter)
• Create an illusion of virtual space (how/when panels slide in & out)

Testing

• High fidelity required to test effectively because pieces are tightly linked
• At least 20 for quantitative testing. Small changes require larger experimental sets
• Errors, duration, # of steps, mistakes
• Understand the goal. Understand which data is important. Ensure microcopy is clear. Ensure good timing and flow.
• Listen for: You can do that?, What is that?, Now what?, Where is…, What just happened?

Make a sentence

Think of your microinteraction as a sentence. Nouns are used for what is acted on or to enable action. Verbs are for what users can do with each object. Make sure any of the same nouns or verbs also act the same in ALL places. Every noun should be unique. Try to combine rules that have the same noun.

Don’t start from zero

You almost always know something about your users. What device/platform is the user using? How long since the microinteraction was last used? What has the user done in the past? If the user does an action often, can you provide that as a default setting when loading?

Check your analytics and logs. Where do the bulk of your users live? What types of devices are they using? What actions are they performing most? What can you to optimize and enhance this experience?

Resources

• http://microinteractions.com/ — Dan Saffer’s site and his eponymous book, Microinteractions
• http://smartdesignworldwide.com/thinking/microinteractions-why-details-matter/
• http://littlebigdetails.com/ — source of some images in book and this presentation
• http://www.kantarworldpanel.com/smartphone-os-market-share/ — mobile market share anywhere in the world!
• http://aycl.uie.com/virtual_seminars/vs_103_micromoments (Stephen Anderson — Designing for MicroMoments — AYCL library)