MICROINTERACTIONS

Nancy Gould MACA 1840 T-TH FALL 2016

What Are Microinteractions?

Microinteractions are contained product moments that revolve around a single use case—they have one main task. Every time you change a setting, sync your data or devices, set an alarm, pick a password, log in, set a status message, or favorite or “like” something, you are engaging with a microinteraction. They are everywhere: in the devices we carry, the appliances in our house, the apps on our phones and desktops, even embedded in the environments we live and work in. Most appliances and some apps are built entirely around one microinteraction.

Microinteractions are good for:

  • accomplishing a single task
  • connecting devices together
  • interacting with a single piece of data such as the temperature
  • controlling an ongoing process such as music volume
  • adjusting a setting
  • viewing or creating a small piece of content like a status message
  • turning a feature or function on or off

Even though we’re surrounded by microinteractions every day, we don’t usually notice them until something goes horribly wrong. But microinteractions are, despite their small size and near-invisibility, incredibly important. The difference between a product you love and a product you tolerate is often the microinteractions you have with it. They can make our lives easier, more fun, and just more interesting if done well.

Why Use Microinteractions?

It’s likely that you started your day with a micro-interaction. By turning off the alarm on your mobile phone, you engaged with a user interface in a single moment. You will continue to engage throughout the day in these moments with your digital devices. Each one is a micro-interaction. Each one is probably so small you don’t think about it. And each one works because of that simple fact.

By using microinteractions, you can give the user a fun experience and a rewarding one as well. Microinteractions are that little spice or addition that can make or break their interaction with your product.

When it comes to the design of micro-interactions, it can be tricky or even considered boring by some. The design elements are so small and can happen so quickly that designers might easily forget the details. Don’t make that mistake. The importance of micro-interactions can’t be over-emphasized. These are the details that make users love or hate an app or website. This simple, wonderful usability is why you choose one alarm clock or weather app over another. And someone had to design that.

So that is why you SHOULD use microinteractions, because even though most people do not realize it, they deal with microinteractions every day and would miss them if they were not there.

THE STRUCTURE OF A MICROINTERACTION

WHAT ARE THE BEST PRACTICES FOR MICROINTERACTION USE?

Response Time

Your users expect the microinteraction to activate immediately - within 0.1 seconds if we're being precise. Anything longer, and it'll be dissociated with the initial action...and will probably annoy your users too.

Repetition

Everyone loves clever design, but if it's too clever, it will irritate people. Ditch the gimmicks and complex animations, and keep it in-line with what your users expect.

Simplicity

Yes, we know your designs rock. But complex typography, muted colors and lack of structure will confuse your users. Don't add more detail than you need and aim to communicate the message as quickly and effectively as possible!

Relatable

Your text should read like people talk. It should communicate human emotion, and all your copy should match the moment. Keep it light-hearted, but also respectful and helpful.

Easy-to-Use

Your microinteraction should mimic natural human behavior. Keep it familiar, and always keep in mind human error (and how you can prevent it). For example, think of hover states or custom cursor pointers. Reebok's intuitive cursor and hover to close-up are classic ecommerce features put to great use.

Animation

Animations aren't just aesthetically pleasing; they can enhance the user experience. Make sure that your animation informs about progress, but doesn't burden current actions. If they're visually stunning, that's great - but it's more important that they're useful.

Balance

Contrast is great if you're trying to highlight a specific process or action. However, use it too much and you'll distract your user. Make sure the balance is harmonious on your site, and that every moment is visually connected to your overall app design. When it comes to microinteraction, it should all be about complementing the bigger picture

Evolution

Remember, your microevolution doesn't have to behave the same every time it's used. It can evolve with additional actions and make the experience even more user engaged.

EXAMPLES OF MICROINTERACTIONS