Micro-Interactions for Mighty Gains
‘Micro-interactions’ – sounds like the latest digital buzzword to join an ocean of overused digital jargon destined for resentment and confusion, right?
But reserve your judgement for the time being, because what we’re actually talking about is something much more significant than the name suggests – something that deserves not just your attention, but also your continued investment.
Here are some examples:
Image: The six reactions from Facebook
1. Facebook ‘reactions’
You’ll likely recognise these little faces from their pop-up appearances in your news feed. The micro-interaction happens when you hover over one of these fellas and see the animation that represents the reaction. Adding more dimension to just the words and static images of ‘sad’ or ‘haha’ creates a more human interface.
Image: Animation from a Twitter ‘like’
2. Twitter ‘likes’
The ‘like’ button on Twitter, the web equivalent of edible glitter – no nutritional value, just there to make stuff pretty. When you tap the heart icon, a little halo of confetti appears as the icon fills to red. Very pretty. Very pointless. Or is it? The first time you noticed that, did it make you smile, think ‘ooo’ or double check by liking another tweet to see it again? These are all responses that build a brands relationship with its customers – definitely what Twitter wanted.
iMessage gif via idownloadbog.com
3. The ‘typing dots’ in a message
This immediate feedback in response to an action (albeit the action of another person) prompts user engagement and retains attention. Knowing that someone is typing back to you or about to respond, you’re less likely to swap apps or put your phone away, right?
But how much does this really matter?
All carrot, no stick?
We could get hung up here on phrases like ‘neuro-linguistic programming’ or ‘perceived value’, but essentially what we’re talking about are rewards.
Given that when a user is interacting with your brand online they are, more often than not, set to gain something from it (getting more information, making an enquiry, sharing updates) – it makes sense to incentivise these actions. Implementing positive user experience (UX) throughout your website or other points of contact has the potential to determine the success of your digital product.
The animation, sound or haptic feedback response to an interaction is a reward the user gains upon interaction. This gamification and incentivisation changes the behaviour of users – if your experience makes you happy you’re more likely to repeat it and/or gain a positive outlook on a brand.
The Labour Illusion
Feedback is confirmation of a process. When you save a file – if there’s no delay, response or indication of processing when you press save, do you believe anything has really happened? A visual indication that progress is being made can sometimes be more trustworthy than the instant completion of a task. This is called ‘The Labour Illusion’ – named so after it was discovered by Harvard researchers that:
People can actually prefer websites with longer waits to those that return instantaneous results—even when those results are identical.
Weird, huh?
A good example of this would be Facebook who, for a time, implemented a false progress bar within their security check-up. This reassured users that their data was checked; when in reality the process was instant. When this ‘perceived value’ is higher it obviously creates a better impression of your brand – a big win.
What’s the catch?
Dark Patterns
It’s definitely arguable that some micro-interactions cause us to take actions we didn’t necessarily intend on the web. Incentivising interaction is all well and good, but when it causes a user to do something they didn’t intend, then it slips into the realm of Dark Patterns. Creating curiosity in a user is one thing, but if there isn’t any explanation of the action being performed before it is completed, it becomes a bit more sinister.
A good example of this is the now-defunct method of giving kudos – on Alex Hillman’s blog:
Image: Inactive kudos button – hover state – completed kudos action
If a cursor rolls over the kudos button it triggers an animation and message, compelling the user to stay engaged with the micro-interaction, with no real indication as to the function of the process. A split-second later, the circle turns red, and the users kudos is added (whether intentional or not!). If this wasn’t initiated by the user, it can be expected they’ll be left feeling rather confused and, depending on the circumstance, tricked into giving their approval.
Obviously, this example is pretty harmless in the long run, but other examples such as auto-renewals for online subscriptions, or hidden costs at checkout, could find users out of pocket.
Time is Money
Finding the balance between making a user wait to evoke their trust and them waiting so long they bail, is a fine art. On the topic of common mistakes with micro-interactions, animation expert Issara Willenskomer of uxinmotion.net suggests:
Micro interactions need to be swift, lasting at most 300–400 milliseconds, with clean, eased velocity curves.
Finding the perfect duration for an animation or load effect can be make or break for a website or app.
It can be disrespectful to your user to make them wait. Fast Co Design sums this up well with their example of the Facebook fake progress bar:
If half of Facebook’s users spend 5 seconds waiting on this check, that’s 694,444 hours or 28,935 days of collective time lost.
This is a significant amount of time – I’d be frustrated!
So what’s next?
If the potential pitfalls and snagging points of micro-interactions are carefully considered and prevented, there is a clear benefit to implementing these finishing touches to your website. Not only can they incentivise interaction and conversions, they can add to your brand aesthetic and tone of voice, especially when paired alongside bespoke micro-copy (Sam will be tackling this topic in another blog post shortly).
If you’re ready to start looking at how to make your micro-interactions mighty, just give us a shout – it’s what we’re good at!
Listen to ZealTalk. Our podcast on startups and their Zeal.
