A well-designed website balances two apparently opposed qualities: consistency and variability. Both are needed to provide a great user experience. These qualities collide in microinteractions: a design’s functional, and often delightful, responses to user actions. Great microinteractions are essential for successful design. They’ve even been called design’s secret sauce.
Here are some classic microinteractions: liking on Facebook, “You’ve got mail!” from Yahoo, and the infinite scroll from Humanized.
One of the most famous—or at least one of the most useful—microinteractions, autocorrect, shows how consistency and variability come together to create great design.
Autocorrect has totally transformed how we communicate. Back in 2014, Gideon Lewis-Kraus at Wired described autocorrect as “the overlooked underwriter of our era of mobile prolixity” (itself a rather, uh, prolix statement). But he’s right. We use autocorrect non-stop. It’s so useful.
For example: the other day I accidentally typed “Sjd” into my phone.
Autocorrect then changed “Sjd” into the word I’d intended. This is,
unfortunately, not an uncommon occurrence.
But can you guess the word I meant?
It wasn’t “sad.”
It wasn’t “sud.”
It was “did.”
It’s amazing that autocorrect got that right.
But that’s the hallmark of a great microinteraction: autocorrect delivered on my exact intention, while only provided data from my inexact typing.
Here’s another way to phrase the above sentence: a great microinteraction consistently improves user experience by continually aligning a product’s function with its user’s intentions. Consistently is the key word, here. I type “Sjd” into my phone all the time. And every time I do, autocorrect swoops in like an algorithmic Batman to save me.
Now, okay. There’s some other stuff going on here, too. Because keyboards—on phones, typewriters, laptops, and terminals—all come equipped with the same QWERTY keyboard, autocorrect is able to guess with reasonable accuracy my intended word, despite my typing errors.
Here’s what I mean:
Each letter on a QWERTY keyboard is in a fixed, consistent position.
“Sad” is an improbable guess from “Sjd,” because, on the keyboard, ‘a’ is miles away from ‘j’—far enough that I have to use a separate finger to type each letter. The odds that, after typing ‘s’, I would mistakenly use my other hand to type ‘j’, when I meant to type ‘a’, are absolutely enormous.
Further: ‘A’ is also neighbor to ‘s’, which is neighbor to ‘d.’ So, if I meant to type “sad,” there’s a pretty low chance I’d have any reason to use my other hand.
(I may mess up while texting, but I won’t mess up that badly.)
“Sud,” though, is improbable for a different reason: it’s not as commonly used as “did.”
Even though the same hand movements are used, and each letter in “sud” is near to each corresponding letter in “did,” the balance of probability is such that “Sjd” will end up a misspelling of “did” more often than of “sud.”
Autocorrect is so useful because it’s able to process the various errors in my typing, and generate consistent, and accurate, responses.
Learn more about Autocorrect:
Let’s take something simple: a hover interaction for a button. That’s when you hover a cursor, or a finger, over a button, and the button responds by changing shape, or size, or color. Or all three. Doesn’t matter. You hover over a button and the button changes. That’s a hover interaction.
But, why design a hover interaction?
Well—because your user’s searching for something. That means the user wants a thing (let’s say a learning tool that provides you five minute lessons each morning), and they don’t know where to find it.
To guide the user well, the design has to demonstrate consistency. As in: the type won’t change when the user hovers over it. The visuals also won’t. But the design also has to demonstrate variability.
So when the user hovers over a button… Hey! It changes!
That tells the user the button is important. And if the button shoots out confetti, or transforms into a dragon, or does the cha-cha—all the better. Anything to help the user find that learning tool. The main point is: the user’s intentions dictate where the design must change.
In this case, the button uses variability of motion to direct the user’s eye away from other, consistently immobile, design elements.
Learn more about hover interactions:
iMessage typing bubbles
These demonstrate consistent iMessage design elements (shape, location), while varying their movement (the three jumping dots) to indicate action.
Gmail app inbox alerts
Consistent icon design provides space for the variable element, a red circle, to really pop at the icon’s top right corner. This variability is dependent on 1) whether the user has received any unopened email, and 2) on the number of unopened emails.
Google Search autocomplete
Autocomplete processes variable human input (letters), and produces consistent responses (words), based upon 1) an internal dictionary, and 2) probabilistic guesswork.
Want to learn more about microinteractions?
Check out these links:
So the next time you’re designing a microinteraction, think about these two qualities—consistency, and variability—and how you can bring them together to create delight, enhance function, and improve your user’s overall experience.
And if your design can transform some nonsense like “Sjd” into language… Congratulations.
You may have changed the world.
We're growing a design for non-designers community where we curate free 5 minute lessons to help you get smarter every day. For more design tips, case studies, and principles, join our community!