The Devil In The Micro-Interactions

Issue 10

Adventures in UX Design is a newsletter helping you navigate UX roadblocks.

Experiences can hinge on small moments. You forgot the password and the authentication process on the site is unintuitive and frustrating. The product QR code on your ketchup bottle launched a porn site, something you didn’t anticipate.

The German-American architect Mies van der Rohe is said to have coined the phrase “God is in the details.” Most of us are familiar with the converse: the devil is in the details. Creators uncover the sublime in that space, or the second-rate, depending on the time spent there.

When we explore digital spaces, we can use the analogy of a symphony or a screenplay: all contain a set of pieces and players who work in concord. A trained ear can hear the instrument that has come in too late, too brassy. Much like the dialogue that sounds corny and inauthentic, or the players and scenes that lack believability. All these orchestrated elements come together in music and art to create harmony, to elevate, convey emotion, and persuade.

The world building in our digital lives can come fast. The parts and players arrange. The pieces comes together to establish a consistent tone, to scaffold the overall customer experience, and support the vision we’ve worked so hard to build. Within these arrangements, the details make an experience unfortunate, or exceptional, memorable, and repeatable.

1. Sweat The Small Stuff

Microcopy is found in all of those interactions that lead customers through an experience: the call to action, the labeling on a button, form fields, the prompt within an empty state, login. Every piece of an interface that explains and orients the user to its purpose is microcopy. When it’s done well, you barely notice how it has guided you, influenced your actions, and responded to your interactions. It has subtly conveyed a sense of what the brand is through language, and as such, should be the responsibility of one person to establish, develop and define.

How we label a thing creates a relationship between the user and the action they will perform, explains Intercom’s Des Traynor. The words we use define actions and provide context. If you change the label, you’ll change the behavior. And if you label poorly or inconsistently, users will respond in kind with incomplete forms, lack of action, complaints, or disinterest.

Des points to examples of microcopy that have become iconic with use, like Facebook’s “Like” button. The evolution of Twitter’s prompt from “What are you doing” to “What’s happening?” The way that LinkedIn defines relationships by forcing users to identify how they know a person: friend, business colleague, etc.

As we’ve discussed in past issues, empty states are another fertile ground to infuse with microcopy.

Des outlines criteria to approach the microcopy on your site.

  • Who are you talking to?
  • What is the actual message: what are you saying?
  • What is the next step you want the user to perform?
  • What is the tone?
  • How does the product speak? (Is it casual and friendly, formal and clear, cute and funny?)

Consider at what point in the interface customers interact with microcopy: what it conveys, what you want customers to do with it, how the copy is displayed, and its tone, so you can deliver the right message at the right time.

WATCH: “Microcopy That Strengthens Your Design’s Experience with Des Traynor

2. Details Make The Product

When you like a piece of content on Facebook, you are engaging in a micro-interaction. Have you logged into a site lately? Set an alarm on your phone? When someone posts a comment on Facebook in a different language, have you ever selected the “see translation” link? That’s three micro-interactions that you’ve engaged in a row. You’re on a roll and you might not have known it.

Micro-interactions are moments built around single tasks, explains Dan Saffer. These moments can be as simple as adjusting a setting, turning a feature on or off, viewing or creating a small piece of content. Some interactions have become iconic, like Facebook’s “Like” and the old “You’ve Got Mail” notification from AOL that has long outlived the product.

In these examples, a person or team has thought through scenarios that customers might experience and anticipated their needs. It is in moments like these that customers can find true delight, because they are unexpected and helpful.

Dan Saffer not only knows micro-interactions, he coined the term and wrote a book about them. Dan identified how these interactions can create delight when they exceed the user’s expectations.

Dan defines four parts of micro-interactions:

  • A Trigger — What starts the micro-interaction (a person or a system)
  • The Rules — When the interaction begins, something happens and the rules define what that is
  • Feedback — Let’s you know what the rules are
  • Loops and Modes — These define the nature of the interactions: does it repeat, what happens over time?

Many micro-interactions are outlined at the end of a design process, when teams are busy. They should be considered at the very start of a product’s design, Dan argues, when teams can wireframe, prototype, and improve upon them. These interactions in the aggregate influence the experience our customers have with our products: negative and positive.

If authenticating your login is laborious or creates unexpected havoc, it creates a bad experience. Teams don’t always design for what happens when things go wrong, when passwords are forgotten and the reset link is hit, but they should. Micro-interactions can create serious inconveniences when they fall apart.

Dan explains that he looks at experience design on two levels, “One is the big picture level. We are able to see the strategy, what the overall product is, but also be able to dive down into the details, to be able to go deep and start to figure out what these little moments are, because they could be really meaningful.”

WATCH: “Dig Into Tiny Detailswith Dan Saffer

READ:Focusing On What Our Users Shouldn’t Focus Onby Jared Spool

3. Kill Your Darlings: Don’t Get Too Cute

Experiences that pull out all the stops to create obvious, immediate delight, sometimes in the form of introductory product animations, unorthodox design and audio elements, clever copy, can get a little old after the 10th time you’ve experienced them, if not sooner.

Designer John Saito explores this balance of creating delight that doesn’t get in the way of the usability of your product. Delight has an element of surprise to it, but it can also be subjective to taste and hard to translate across a large audience. Global brands tend to be more cautious and straightforward with language for this reason, to avoid offending customers, while smaller brands have more room to experiment, explains John.

John explores five areas where it is safe for brands to experiment with delight and humor:

  • When they first launch an app
  • When they finish setting up an account
  • When a new feature is introduced
  • When they complete an important action for the first time
  • When there’s an empty state

While many of us reach for that brass ring of delight in our experiences and micro-interactions, let’s not lose sight of the usability and accessibility that should form the foundation of our products, and the clarity of the language that should support them.

READ: “The Dangers of Delightful Designby John Saito

Have a Delightful Weekend.

Would you like to receive this newsletter directly in your inbox? Sign up to receive twice a month email delivery of Adventures in UX Design.

Like what you read? Give UIE a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.