Magik BLOG
Stay updated with us
Getting Your Micro-Interactions Right
BYmarketing  |  14/02/2019

Making things simpler for your website visitors and app users increases engagement – that’s a given. Slow loading, a roundabout way to fill in a form, 404s … all of these, and much more, exasperate your public. Chances are the page or site will be closed and your opportunity to reach an interested party lost.

Micro-interactions are sometimes basic, sometimes intensely complicated additions we can integrate within our digital designs to make information, UX and calls to action as single-step and fluid as possible. Some of these interactions seem obvious, others much less so. As a group, micro-interactions have power. The perfect user experience or user interface is still far out on the horizon and constantly shifting forwards or backwards, at the same time changing its shape. However, implementing the basics from the word Go allows web designers to consistently integrate new trends without having to completely restructure existing sites or rebuild apps from the ground up.

How Does Micro-Interaction Work?

Micro-interactions work in pairs. A micro-interaction pair must be single-purpose and activated by a system or user trigger. However, a single micro-interaction pair has little power. The power of micro-interaction lies within the group; it comes from the interactions that are available on a single page, how well these can predict the steps taken by a completely new user, how quickly they can respond, and how they can learn from that user’s behaviours and habits and encourage a longer-term relationship. In short, a set of micro-interaction pairs works as a group of highly successful sales staff team. When hiring a new salesperson, savvy employers are on the lookout for:

1. A smart turnout

2. Charisma, and a friendly demeanour

3. Knowledge

4. The ability to understand what the potential customer wants and to respond accordingly

5. A feel for a situation and the skills to predict when a hard or a soft sell is required

6. Rapport with the still undecided customer that brings him or her back

7. Post-sales relationship skills that encourage existing customers to make further purchases

8. Lots of sales experience, and lots of sales

How Does Micro-Interaction Work?2

These points are exactly what any complete set of micro-interaction pairs should achieve. A sales office full of slobby, unkempt staff who never turn up on time, slap on the hard sell at every opportunity, couldn’t care less what happens to the customer or product after a contract has been signed, and are more than prepared to tell a few porkies in the process, will never work for a long-standing, trusted global brand. Equate this to a slow-loading app or website with broken links and ten-click CTAs without the predictive or feedback-producing powers of micro-interactions. Or sites that publish blatantly worthless content packed with keywords, concentrating solely on catching but not keeping visitors, and absent of trustworthy content that helps a visitor to gain knowledge. Without predicting your user’s next step or offering regular feedback to their actions or reactions, no relationship can be developed. The website or app lacks the experience, the charisma, the trustworthiness, and the rapport of the successful salesman.

1. Data Input

The first micro-interactions we should discuss are those that enable, accelerate and simplify data input. Forms are probably the most efficient method of user interaction and thousands of articles tell us how to integrate them for optimal success. Where forms are concerned, the unusual design does not guarantee increased interest. Quite the opposite – the best form is a logically constructed, recognisable and short universal box which features a guarantee of data security. In order to optimise a form, one should, therefore, concentrate on simplicity, speed, and storage. Consider the number of fields, for example; those looking for a specific item or price might be willing to fill in a few more than someone casually browsing a selection of sites. Keep optional fields to a minimum. Use smart defaults to predict a user’s answer, saving them time during the form-filling process. Auto-completion and field masking can also save your interested visitor precious time. The trick is to reduce user effort without slowing down your site or app’s response time. This is not as easy as it might sound.

Data Input Form

2. System Status

Any display of system status can be considered a micro-interaction. System status triggers can come from the user or from the system itself. In all cases of interaction a user should be able to see that their action has been taken note of. If no feedback is given after pressing ‘Send’, how does the user know that their message has gone through? This feedback loop can be the perfect opportunity to implement humour, sound, branding, high-end design or unusual creativity. Progress and page-loading indicators, changing field colours to show they have been selected, voice-only devices displaying a ring of light when a command has been heard, webshop listings which show how many items are in stock … all of these are ways to remove doubt and negative experiences as far as your visitors and users are concerned. Alternatively, receiving status feedback creates a sense of control and trust.

System Status Loading

3. Responsive Design

Implementing touchscreen or responsive web design is a no-brainer. That said, this particular type of micro-interaction is often rejected due to development costs. This is the equivalent of shooting one’s self in the foot. Or Brexit.

The definition of a positive user experience is constantly changing shape, moulding itself to fresh technology and social trends. However, one trend continues to gain momentum and that is the domination of the mobile device and the slow death of the desktop. Mobile devices are the primary source of website traffic; reject responsive design at your peril.

Responsive Design

Finding the right balance between speed and function is an art which any dedicated and experienced developer and/or programmer will understand; mobile versions of websites are, at present, notoriously lacking in features. Different operating systems, screen sizes, device capacities and speeds make the responsive website much more expensive than a static design. Creating one that offers a UX that outperforms its static version is the holy grail of web design – and has not yet been discovered. But technology is moving forward and will eventually turn the mythical, all-inclusive responsive site into reality. In the meantime, keeping up with the technology that is available while avoiding negative user experiences are the key.

4. Call To Action

Like system feedback status, CTA feedback is the ideal opportunity to get a positive reaction from your visitor. Nothing is more soul-destroying than a quiet and boring thank-you box when a fanfare and confetti are expected. Your company’s response to someone signing up to learn more should be a welcoming, celebratory affair which instigates at least a slight upward turn of the corners of your user’s mouth or, at minimum, a feeling of acknowledgement. If your business does not use the humorous approach, feedback that represents your business approach and brand should be slightly but perfectly animated and work seamlessly on any device. The micro-interaction pairing of signing up to a CTA and the following response should be customised to the hilt, without compromising on functionality.

Call To Action

5. Choice

Giving your user the opportunity to filter or indicate preferences is in itself data collection. A huge percentage of potential international clients are put off by the inability to sufficiently narrow down a search. Scrolling through irrelevant results is time-consuming and a complete turn-off. A site or app which offers users the opportunity to speed things up in the long-term has a much higher chance of success and bookmarked web addresses. While basic preferences such as language, geographical region, product categories and age group are expected in better quality designs, extending these preferences to a level which makes the user happy and pleasantly surprised can be equated to marketing gold. A positive reaction to an interesting digital response, whether this is a smile, physically showing the screen to someone else, or sharing on social media, can significantly affect brand exposure. So when it comes to preferences, make at least one or two unusual, extremely appropriate, and rather unexpected.


Don’t Let Micro-Interaction Slow You Down

The one word of warning when it comes to implementing your group of micro-interactions is to avoid slowing down the UX. Unless you are an experienced programmer or designer, adding a wide range of predictive and responsive widgets or code can end up having the opposite effect: slow loading times, buttons that need to be tapped multiple times before they respond, swipes that jerk across the screen like a rain-swollen patio door on a buckling runner … No micro-interaction should cause a lapse. And no micro-interaction should ever be categorised as a negative user experience.

Don’t Let Micro-Interaction Slow You Down