When one considers how Amazon was able to radically upend multiple industries by altering how we shop for and purchase products, it’s likely that one of the first words that come to mind to explain its success is convenience.
After all, the e-commerce giant allows us to shop for an ungodly number of products without ever leaving our homes – or even our beds, if we’re being honest here – and then having those products delivered to us in two days. Amazon has largely defined what “one-stop shop” means for the digital age. And while convenience is no doubt a crucial ingredient to its market dominance, it can also be argued that just as important to Amazon’s success has been the way it designed its platform to ensure maximum engagement with its customers by effectively utilizing microinteractions.
More Than a Game
But let us digress here for just a moment and think about another enterprise that has successfully used (mostly) non-digital microinteractions to continually build its brand: The Super Bowl. Whether or not you follow or care about football has become increasingly irrelevant to what the Super Bowl represents. Yes, there is the big game; but the game only matters to football fans. The Super Bowl has in fact been designed over the years to become much bigger than the actual game, attracting people who don’t know the difference between a touchdown and a jump shot, but who want to participate in what has become a de-facto holiday in America.
And so, think about all the things that have become synonymous with Super Bowl Sunday that have only a tangential connection to the football game: There are all those expensive, much-discussed commercials; there is the halftime show; there are the Super Bowl parties; there is the Puppy Bowl; there is even Super Bowl counterprogramming for people who really don’t want to be tuned into the football game.
The National Football League, advertisers, broadcast networks and the internet have all figured out how to engage with the 100 million-plus people who routinely tune in to the Super Bowl – or in the case of the counterprogramming, engaging with people who at least know that the Super Bowl is on. The football game is merely the platform upon which to interact with the audience; again, whether or not you care about the game doesn’t really matter anymore.
Take the commercials: People at your party will discuss the commercials, perhaps getting on YouTube to rewatch ones they particularly liked. Some people will tweet about the commercials, hashtagging this or that product or celebrity. Bloggers and journalists will write about the commercials, sometimes ranking them in order of quality.
And so, what all of these things outside of the game accomplish – the commercials, the parties, the Puppy Bowl, the counterprogramming – are essentially what microinteractions can accomplish for your digital product. They are all triggers that engage with viewers, encourage people to take action, incite emotional reactions
Getting from Point A to Point B
Now, back to the topic at hand: A microinteraction designed into your digital product begins with a trigger, as Vamsi Batchu, senior UX designer at SunTrust Banks explained in a post for the UX Collective. The trigger is what initiates your microinteraction – it could be a swipe, a click, a scroll, a drag, etc. Every trigger must come with a set of rules, which sets the parameters of what must happen when the microinteraction is triggered. Microinteractions illicit feedback, which is what a “user sees, hears, or feels while a microinteraction is happening,” Batchu notes. There are then the loops and modes, which are the “meta-rules” that determine what happens “when conditions change”; or rather, what happens once a microinteraction has been triggered more than once.
Taking all of this into account, think about how thoroughly Amazon has perfected the use of microinterations in its design: Once a user views a product, there is a tab that allows her to add it to her cart (Trigger). Amazon’s parameters dictate that adding a product to the cart will allow her to purchase the item (Rules). After she clicks on the tab to add a product to the cart, she will see a “1” in her cart at the top right-hand corner of her screen, letting her know that the product has been successfully added and is ready for purchase (Feedback). As soon as she’s uploaded her payment and shipping information and made her first purchase, Amazon automatically enables 1-Click ordering on her account, so she can skip the whole process of adding items to her shopping cart the next time she makes a purchase on the site (Loops and Modes).
The microinteractions on Amazon’s website allows its users to get from point A to point B, and then the site becomes personalized based on the route you took to get between those two points: It will recommend products based on your purchases; it will recommend similar products other people on Amazon purchased; it can even tell you about products that are popular in your area for a particular month. As made most obvious through its Alexa product, Amazon has set out to build a site that creates a more human experience, almost like you might find at a brick-and-mortar store.
While microinteractions are just a small part of your overall design, most experts agree that they play an outsized role in the effectiveness of your UX. The question then isn’t why you need microinteractions, but how they should be integrated into your design.
Let’s go back to that Super Bowl analogy for a second: Most of us find it annoying when we have to wait for multiple commercials or advertisements when we’re watching a show on television or watching a video on YouTube. They are distractions that pull us out of the viewing experience. However, when we tune into the Super Bowl, we’re actually waiting for the commercials, almost as much as a fan is waiting for the next play to begin. That’s because the advertisements have been so seamlessly integrated into the viewing experience of the Super Bowl that we’ve come to think of them as being just another part of the game.
This is similar to how microinteractions should work in your design: Your users really shouldn’t really notice them; they should be integrated so flawlessly into your design – like Amazon’s 1-Click ordering – that they don’t even think about them. They’re a part of the overall experience.
“The goal is to bridge the gap between the user and a product in ways that feel intuitive and natural, so avoid strange animations that take too long to load or may distract the user,” as the designer Ondřej Dostál explains. “Instead, create designs that seamlessly flow with the product. Subtlety is key in microinteractions. Don’t leave the user puzzled and thinking, ‘What was that?’”
And so, your microinteractions will create a bridge between the user and your product. When done right, they won’t even notice that bridge they just crossed.