Many designers and developers struggle with creating a better User Experience (UX), both for their own websites and for their clients.
The trouble with UX is that there are many different elements involved – websites must be accessible, usable, valuable, and, above all, desirable.
There are thousands of ways that UX could go wrong. If the copy of the website is off, visitors won’t click. If the button they’re supposed to click doesn’t work, they can’t click. If the page the button leads to doesn’t load, that’s the end of the journey.
Every interaction on a website matters.
One of the most nuanced components of UX, however, is microinteractions – those tiny, pesky little actions that no one notices when they work correctly but that can significantly harm UX when they’re broken.
For WordPress designers, these microinteractions can cause a lot of trouble, but getting them right is essential.
What are Microinteractions?
Microinteractions are “single-case interactions that revolve around the use of a product or technology.”
One example of a familiar microinteraction is the hyperlink, or links that change when you hover over them, like the example below.
Everyone who has been on the Internet has clicked on a hyperlink at some point. It’s an action so micro that you wouldn’t consider it an action at all.
But what if that link doesn’t work? What if the link doesn’t change color when you think it would or the underline doesn’t show up? You might start to wonder if the link works at all.
Some other common microinteractions you might have experienced in WordPress include menu hovers:
Microinteractions also include things such as liking blog posts or posting a comment on the blog, logging in to a site, or even signing up for a newsletter.
While some might consider these “conversions,” the functionality of the action – the clicked link or button, for example – is a microinteraction.
Why Microinteractions Matter for UX
So how do microinteractions impact UX?
For one, they serve as sensory cues. They tell the user where to go, why to go there, and what they will get on the other side.
If the microinteraction is unsuccessful – the linked page is a 404 page, for instance – then the visitor is more likely to click away from the site instead of retrying the microinteraction.
The less a user interacts with a site, the less likely they are to convert on a larger scale. Think of it this way: If a user can’t get to your sign up page, how will they buy from you?
They also serve as a basis for judgment about the website (or business, or brand) itself.
Would you view the owner of the site as reputable? Or would you consider them “cheap” for not maintaining their site?
Microinteractions also provide direction.
If you were to click on an embedded video, for example, but no music was playing, what would you do? Most people might look for an audio symbol that indicates that the video is muted.
What Developers and Designers Should Know About Microinteractions
So what should you do about microinteractions as a designer or developer?
For one, it’s important to be aware of all the minute aspects of a site’s UX. While it sounds like a big task, consider that most of your job already revolves around the creation of microinteractions.
When you create a link, for example, double check to make sure it works properly. Easy, right?
Most microinteractions will take care of themselves in the design process, but that doesn’t mean you can turn off your brains. There’s a reason why they’re important, so it’s equally important to pay attention.
Here are a few things you can do in WordPress to ensure your microinteractions are not negatively impacting your UX.
1. Know your end user.
Microinteractions are all about the end user – who is interacting with the site and why?
Use the WordPress guidelines to make sure you understand why someone would click on your button (or interact with your site) and what they would expect from it. If someone expects a link to change in some way on a hover over, for example, make sure it does.
2. Double check for errors.
Errors are a death sentence for a microinteractions (and UX).
Do your best to ensure that that the process of a microinteraction doesn’t break the flow of an entire action. For instance, if someone clicks a button to “go to the next step” on a form, that “next step” button needs to work.
3. Avoid adding extra features or unnecessary elements.
The key to a good microinteraction is simplicity.
Elements like hover overs and scroll bars are expected to behave in a particular way, and while it might be cool or trendy to make things perform differently than expected, it can also ruin the interaction for the user. Consider getting feedback if you want to change a microinteraction to something a little different.
4. Use human-oriented language.
Along with simplicity, microinteractions and any associated text should be easily understandable to most people (particularly the end user). This means using short, clear words wherever possible and using visual cues, like arrows or symbols, to help specify an action.
6. Keep animation to a minimum.
Again, simplicity is key. Animation is great for certain microinteractions, but can be over the top for others. When it doubt, go with simplicity, and get feedback for more interactive elements. You don’t want the design to hinder the functionality of the action.
7. Prepare for microinteractions to evolve over time.
The functionality of the Internet continues to grow and change, and that won’t stop anytime soon.
Pay attention to how others are using microinteractions in creative ways, and watch how they develop over time. Update your WordPress sites to make sure they support any new features, too.
You don’t want to get stuck with a beautiful and innovative microinteraction that doesn’t work and tanks your UX.
Like all UX, the microinteractions on your site will be specific to your end user.
Some users might prefer a simple link (as long as it does what they expect), while others might appreciate something with a little animation.
When in doubt – or when designing for a picky client – it’s important to keep things functional. If you have to choose between innovation and functionality, choose the latter.
While the creation of most microinteractions might escape your notice (they are micro, after all), pay close attention to the ones that could affect UX the most, like links, images or visual cues.
The last thing you want is a simple link hover over to ruin the user experience.