Back to blog home

How to transform UX using micro interactions

In a previous blog post I explored why micro interactions are one of the most exciting developments in user interface (UI) design. Here I take a closer look at how they’re transforming user experiences (UX) – and why they’ll soon come as standard.

Micro interactions are seemingly small design choices used as cues to make the user perform a particular action. This could be as simple as animating a rollover or transitioning from one area to another.

Thanks to the advancement of HTML5 and CSS3 – and the growing number of devices capable of supporting those languages – there’s a compelling case to inject exciting transitions and movements into your UX.

When a user performs an action, micro interactions provide a visual, animated response, for a more fun and satisfying UX. Not only do these animations help give your website the ‘wow factor’, they’re fluid and human-centric, helping you to make the user the prime focus of the UX. 

Material design has taken this idea and produced a stunning UI kit which is widely used in many Google apps and third-party apps. But many frontend developers are now creating their own animation kits, which is great for adding excitement to digital design.

Let’s now take a look at some micro interactions in action.

Caspian Gold

Russian Caviar company Caspian Gold is a great example of how small interactions can make your content feel as if it’s telling a story. 

The parallax effect with the subtle background imagery gives the feeling of depth and rich layering, while animated panels help tell the story of the product. Animations on the page load help bring content to life – something that’s ideal in a transactional scenario. Meanwhile animations such as slow fade-ins and scroll transitions create a deliberate, considered UX that conveys the premium nature of this brand.

Paul Valentine

Paul Valentine sells iconic watches with a minimalistic design. It’s committed a lot of care to projecting that product design and style across its website, using micro interactions to enhance the UX without moving too far away from an ecommerce journey that’s familiar to its users.

The brand uses a nice rollover effect on its product listing page which helps highlight the selected product. A ‘buy now’ call-to-action is present on the product description page, but once a user has scrolled past the ‘buy now’ button, it animates and fixes itself to the top of the page. This allows the user to easily access that call-to-action at any scroll point on the page. 

Tympanus

Tympanus is a repository website for different types of functionality. In this example we see how the search form sits ‘underneath’ the main content. This gives the user a feeling of depth, but also focuses them on the task at hand: reacting to the click of the search button. In this way this website is very good for helping innovate basic functionality. 

Iconography and interfaces

UI animations in an iconography format are becoming a lot more popular as mobile devices become more powerful. Not only are these animations pleasurable to look at – they also serve a purpose. 

In the above example above you’ll see that, once the user clicks the ‘+’ button, they are presented with the different options available for uploading items.

In the following example we have an ‘upload’ button that animates the progression bar:

Examples like these may seem fairly advanced, and will take a little longer to create, but their impact is immediately felt by the user.

Breathe new life into your UX

Key questions you might ask are whether micro interactions and animations are really worth it, and whether they impact page load times. Since examples like the ones I’ve outlined above are created with HTML5, enhancing your UX with micro interactions doesn’t have to make your load times suffer.

And yes, animations do take time to produce, but they also allow the user to feel emotionally attached to a user interface. And with a more human approach to design, the process of engaging, converting, and retaining your users is a far easier one. 

Micro interactions will surely feature as standard across websites in the next few years, because they’re a must for any brand that values user experience.

Got questions? Want to connect with our design team? Drop us a line!