Translating tech terms – what are micro-interactions?
The ever-evolving world of digital technology can be difficult to keep up with. Translating tech terms is our series of blogs that attempt to break through the jargon and highlight some of the latest digital marketing, technology and design trends.
We’ve already looked at omnichannel marketing and how it uses UX principles to improve the customer experience online.
In our recent website design trends blog, we highlighted interaction design as something to look out for in 2019 and beyond.
While the term interaction design is pretty self-explanatory, you may have also heard the phrase micro-interactions in relation to website design and development.
We thought we’d take a look at what they are and whether you can factor micro-interactions into your own website or online presence.
What are micro-interactions?
Micro-interactions are found wherever you access a website or web application.
They’re the small animated touches that encourage visitors to explore and engage with an online platform. Technically speaking, they are elements that fulfil a function and deliver it in a way that shows completion of this function.
Dan Saffer, the author of the book ‘Microinteractions’, defines them as “contained product moments that revolve around a single use case — they have one main task.”
He also suggests that the creation of a micro-interaction breaks down into four parts:
This is what kicks off the micro-interaction. Sometimes it will be initiated by the user and sometimes the system itself will detect that interaction is required.
Once triggered, this defines what happens during the interaction. It should look natural and match the general user experience within the website or app.
This is what the user sees, hears or feels when they interact. It lets them know that the interaction is occurring.
Loops & Modes
Once an interaction has been triggered and is in motion, this will determine how long it occurs and whether the user needs to repeat the function.
Why create micro-interactions?
As the name suggests, micro-interactions are only tiny parts of a website or app so why factor them into a website design?
These small animated interactions can make a big difference to a visitor’s experience of your online presence. Micro-interactions can help to:
- Improve navigation
- Demonstrate which sections of a site are interactive
- Encourage engagement with pages
- Allow visitors to explore further sections of the website
- Increase dwell time and reduce page bounces
- Give users instant feedback when interacting with the site
- Encourage sharing, liking and commenting on content
- Make your site look interesting and entertaining
Using interactions of any kind shows users that you care about how they engage with your business.
You’re making the process easy and enjoyable for them and they’ll appreciate the care and attention that’s been taken to do that.
But they need to be used sparingly. Too many and you’ll end up with a confusing page of constant chaotic movement. Use too few and they run the risk of getting lost.
When should you use micro-interactions?
Here are a few examples of the micro-interactions that we’ve used on some of our own web design and development projects.
We incorporated small interactive elements throughout the microsite that celebrated the Royal Mint’s 50th anniversary of its move from London to Llantrisant; from an animated burger nav to an icon that asks people to share their photos on the site.
The homepage of Quatro PR’s website includes a small animation that encourages people to scroll.
On the What Career Live and The Franchise Magazine websites for Venture Marketing, we created animated interactions for the blog articles and navigation tabs.
We also devised an animation style for the Dyfed Menswear website that matches the new brand identity we created for them.
What should micro-interactions look like?
First and foremost, the look and feel of any interaction or design element on your website should reflect your organisation’s brand identity.
For this reason, how they are designed will differ from business to business. However, there are a few best-practice principles that you should consider when designing micro-interactions.
Now that smartphones have evolved into our own mini mobile computers, people are experiencing micro-interactions on a daily basis.
Visitors will expect them to be simple and obvious to use. Avoid anything too gimmicky and use a visual language that users will recognise so that they know precisely what to expect when interacting.
Unexpected surprises aren’t your friend when it comes to UX. You might be tempted to create micro-interactions that stand out but it’s more beneficial to seamlessly integrate them into the design of your website or app.
Reuse them so that people can recognise a consistent logic to the way you want them to engage with the site.
Every micro-interaction needs a purpose. It exists to fulfil a function so you need to agree what that function is and why the device needs to exist in the first place.
What benefit is this providing to users? It’s not meant to look pretty, it’s there to serve a purpose and deliver something to the user.
Eventually, the elements that get designed will sit in the hands of a user on their smartphone, tablet or laptop, so you want to make it as easy as possible for them to interact with it.
It would be preferable to user-test a micro-interaction so that you can see how people engage with it and adapt it accordingly.
The Laws of UX and micro-interaction design
If we look back out our previous blog about the Laws of UX, all of the principles that we mentioned should be held to account when designing micro-interactions. But one is especially relevant.
Jakob’s Law states that; since users spend most of their time on other sites, they are likely to want your site to work in the same way as the ones they already know.
The ubiquitous nature of micro-interactions means that not including them in your website or app increases the risk of visitors seeking a better user experience on another site.
If you’d like to find out how we can incorporate UX principles like micro-interactions into your website or app, get in touch today.
Technology, Translating Tech Terms, Website Design & Development