But how and when should microinteraction be used? What rules should UX designers follow to delight users rather than frustrate them? We’re lucky to have our own in-house microinteraction expert, Jonathan Jauneau, to walk us through microinteractions, the best, the worst, and the ones to help you sell more.

From an expert to a novice, what are microinteractions?

Microinteractions are subtle moments that are centred on accomplishing a single task, with the emphasis is on subtle and single task. You want to provide the user with automatic feedback and a feeling of accomplishment per task to achieve an overall goal.

A famous example is the Facebook Like button. You click once, there is a state change and the user gets feedback. It’s fun and social and creates a delightful user flow from a small interaction that can be repeated without becoming tired or annoying.

How should brands use microinteractions?

There are two things brands should focus on when designing microinteractions:

The first is continuity. The transition or animation between different states should look smooth and be in keeping with the overall brand style and flow. If a user clicks on something and engages an animation that, for example, covers the screen, it can be distracting from the task at hand.

The second is predictability for the user. So make the next step clear. There are expectations, such as the 'x' in the top of the screen means close, a green check means progression, text highlighted in red means error.

A good example of this is Form Flow. This shows the predictability and guidance aspect of microinteractions. It guides you through every single little step, with ticks to let the user know that they can progress to the next step

A key thing for brands to remember is the KISS principle, which is Keep It Simple, Stupid. Don’t over clutter or complicate interactions and processes, it should complement the user journey rather than impede it.

Microinteractions encourage something called a habit loop. So this is the “Cue, Routine, Reward” methodology.

Again, Facebook is a great example of this and one of the first social platforms to encourage habitual behaviour. So the cue is the red notification that you have received a message, the routine is the user clicking to open messenger and the reward is a message from a friend. The next time this happens, users instinctively complete the journey. It’s simple yet effective.

Speaking of habitual actions, what habit loop do you engage with?

The Snapchat animations are really well done and in line with the brand and tone. When you pull down the screen to refresh, a ghost appears and flies off. It’s the perfect example of an animated microinteraction. The user knows they’ve completed an action, refreshing the content, and it’s fun and rewarding to watch.

This falls into the predictability rule. For mobile users, pulling down on the screen is a universal action, email providers such as Gmail have made it commonplace. So the Snapchat animation is in keeping with both continuity and predictability.

What opportunities are there for microinteractions for Shopify store owners?

Small yet effective is key here. In e-commerce design, the most important thing is product sales, designers can not impede the user flow. Small interactions, such as shrinking the navbar when a user scrolls, allows more space to view the products. and draws attention to the website body, reducing cognitive load

A really nice space saver is from Trunk Club. From the collection page, when a user clicks on an item, instead of directing to a separate product page or pop up, the item slides up from the bottom. It’s very fluid and non-intrusive and a strong example of how microinteractions can tie in with e-commerce.

Wishlist animation is a great engagement tool. It’s different to adding an item to the cart, where you want to show the cart. Users still want to see a reward or state change that the item has been successfully added to the wish list and it’s an opportunity for designers to have a little fun and engage the customer.

Mish Mash uses sleek microinteractions that slide out on their homepage. It’s a pullout node that allows customers to quickly select size, paper and colour with a quick add to cart. Using this, Mish Mash could potentially convert from the home page, there’s even a wishlist option.

A scroll reveal is a nice way to draw browsers attention to products. It creates a narrative and directs where users where to look and pushes them to reveal the full story. Ode Goods show this really nicely, it’s a subtle animation, fluid and engaging. It’s a good way of ensuring products are seen and stops speedy scrollers.

Do you think that the micro-interactions can drive conversions and help build trust in a brand?

By encouraging rather than impeding the user flow, checkout and registering will be a smoother process, thus increasing conversion rates. Well designed microinteractions make the customer feel like the brand is there to help them and this will build credibility and trust.

However they should be used sparingly, again brands don’t want to detract from their products, and users faced with a complicated journey or excessive pop-ups will simply exit.

Do not create pain and frustration for your users. Microinteractions should be seen as helping or elements of delight, they should support a feature rather than disrupt it. If users can’t understand the sign in process because there is no continuity or predictability, it will increase frustration and ultimately cause users to leave the page.

And finally, what is your favourite e-commerce store and why?

Everlane, it’s a popular choice amongst the team at We Make Websites. It’s easy to browse and really clear. There is a quick ad feature and you can access available sizes without having to leave the collection page. So certain sizes and colours can be selected from the collection page and automatically added to the cart. Customers with limited time can select and checkout really quickly.

Thanks to Jonathan for his insightful interview. Brands should be consistently striving to deliver their customers, and microinteractions are a great way to build trust and engagement, but only if they serve a purpose and do not impede the customer journey.

If you are looking to delight your customers with a new Shopify store, enquire now to see how Jonathan and the We Make Websites design team can help.