8 Jun 2016
Macro UX vs. Micro UX
Reading time: 10 mins.
|
Difficulty:

Micro UX, or how to improve user experience with microinteractions

The power of microelements in the world of UX

What is micro UX? Why are microinteractions so important when it comes to optimizing my website?

power

Although many articles from the other side of the Pond present microinteractions as a new, all-powerful way of understanding user experience, micro UX actually offers a different perspective on how to improve website browsability.

How many times have you visited a page and a particular design element has stood out for its usefulness or originality? This is exactly what micro UX seeks to do: design unique details that make all the difference by creating a more personal and human experience for the user. In a digital world where websites are increasingly similar in many ways, and especially in terms of design, micro UX has become indispensable in order to differentiate our brand and make sure users come back to our website.

The aim of this new approach is to make the user “love” browsing your site. Thanks to microinteractions (a term coined by UX guru Dan Saffer), individual elements on your website can innovate, facilitate browsability and form connections with your users. Thus, the task we have assigned them – whether a click, a lead, a conversion, etc. – will not only be easier, but more pleasurable.

Of course, a micro UX is just a small element focusing on a single task within the overall design. However, if many of these small interactions are made to come together, the website takes on a new, more detail-oriented shape.

In summary, we can define micro UX as a new area of focus within the overall user experience; one that is based on the creation of small elements or microinteractions that integrate with one another like cogs to produce a unique, engagement-oriented browsing experience.

Microelements such as these can be applied to all kinds of websites and devices: from e-commerce, where their benefits are translated into more conversions, to blogs, where they make the site more unique. They are particularly useful on mobile devices, where design quality and optimization are fundamental in order to avoid alienating the user.

Macro UX vs Micro UX

Although the great majority of projects must be tackled from both perspectives, macro UX and micro UX can be very different.

Macro UX

Macro UX

This is the traditional conception of the user experience. It has a product-oriented focus, analyzes the user’s needs and generates a design based on the process that unites the user and the company’s conversion objective.

To date, macro UX is the most common approach and has allowed us to identify the user’s needs and build a design around them. So far, so good, and as a first step, we have no objections to it. However, we now have an alternative and/or complementary way to improve user experience: micro UX. It’s a more accessible method; one which simplifies the individual elements and characteristics of the website and allows us to discover or create new elements to optimize.

Micro UX

Micro UX
It is precisely the opposite of macro UX: a perspective that focuses on the smallest elements in order to create something big. To achieve this, micro UX concentrates on the website’s smallest details, which work together to create an outstanding and optimized experience that pays special attention to how users use the website.

This new approach takes into account the way in which users interact with the various functions of the website, taking into consideration which new elements they might need and which ones could be improved. The next step involves incorporating this new set of improvements so that these small details have a decisive effect on the website’s success.

Far from replacing the traditional approach, this new perspective should go hand in hand with it. Micro UX is particularly useful for new projects in which the usage levels and audience are yet to be determined, as well as for updating a website that needs refreshing without changing the essence of the brand.

In short, micro UX is about connecting brands to people, making it easier for users to browse the site and offering them a unique, satisfying experience that improves their relationship with the brand.

In the mobile arena, this new vision of UX has been the key to success for many apps, which have managed to offer and even create new trends in browsability. We’re sure you’ll have heard of this one!

tinder-microux

Types of microinteractions

Every little counts, and microinteractions can be applied to any type of element on the website, ranging from the main image to a microtext that improves the browsing experience.

When building a digital product it’s necessary to bear in mind the different technologies, gestures used and characteristics of each device. We need to analyze the way in which users interact with each element on the page in order to offer them the most comfortable and convenient form of digital access.

Any type of website can be improved through the use of micro UX. Although they’re mainly implemented in the fields of e-commerce and mobile devices, microelements of this type can also improve the browsability of blogs, social platforms, corporate websites, etc.

Gestural microinteractions

Very specific to the mobile arena, these are practically universal gestures that offer useful functions to users. Mobile usability quickly increases when certain gestures become generalized in relation to specific actions. It’s interesting to note how gestures tend to be similar across cultures in their relation to user experience, and how intuition plays a fundamental role in optimizing these types of interactions.

For example, swiping down with your finger has become the universal way of updating or refreshing the page to find new results. Not only is it common on the timelines of social networks, but on the mobile versions of any e-commerce platform, too.

Refresh icon microux

 

Another gesture that has become universal is the way we zoom in on devices with smaller screens. To continue with the previous example of ZARA, we love seeing how the zooming gesture produces no loss of image quality.

zoom-imagenes-microux

Microinteractions for browsing

As we noted above, for mobile devices it’s essential to adapt the experience to new forms of browsing, and there are already generalized microinteractions to improve UX on devices with smaller screens. Here are some popular examples:

After you’ve viewed a lot of images on LeClubStyle, in the bottom right you’ll see an amazingly useful button that lets you return to the top of the page without having to scroll all the way back up.

Le Club Style

Another function that’s very useful on mobile devices is the sticky menu, which lets you access the menu at any moment. This improves the speed with which users can browse the different parts of the website. This example is taken from the mobile website of Piktochart:
micro-ux-menu-sticky

In an earlier posts we discussed the importance of filters in e-commerce. So what’s the story in mobile? Sadly, the majority of e-commerce platforms have a chaotic and inefficient filter system, particularly in terms of design. However, that’s not the case with Nike, which has managed to organize its filters based on the most popular interests and has created an intuitive, easy-to-use design that requires a minimal number of taps.

Nike filters

 

Microinteractions for reading

Do you have a blog or news portal? Bear in mind you can also improve the quality of your website with examples such as the ones below.

Both the mobile and desktop version of the Moz blog facilitate reading by providing an estimated read time, which – as you will have guessed – calculates the approximate amount of time it will take the user to read the article.

tiempo lectura estimado micro ux

Another classic example of micro UX is The Daily Beast’s reading meter, which indicates how much of the article you’ve read (and how much is left to read) as you go along.

procentaje-lectura-micro-ux

Microinteractions for engagement

Details make users feel special. Microcopy plays a particularly important role in making users feel special and creating a link between them and the brand. Think about when and how you want or are able to connect with your site’s visitors.

When you fill in the form on the ASOS website, you’ll be asked for your date of birth. As an incentive to provide this information, it offers you a small gift, and once you’ve added the information it’ll give you a countdown to your birthday. A nice touch, right?

Asos micro copy

Social microinteractions

Sometimes, the implementation of content-sharing on social networks just isn’t very useable. The “share” icons can take up a lot of space, disturb our reading, or (conversely) be too hard to find. At Aukera we’ve solved this problem by adding a floating button that expands if we want to share the article.

Aukera social interactions ux

Multimedia interactions

In order to highlight certain products, the Mango website replaces the typical photo of a model with a short video showing different details of the product. The video doesn’t affect load speed and, naturally, attracts our attention. It’s a very original way to highlight a product.

mango-imagen-producto-microux

Microinteractions in forms

The word “form” is given a broad meaning here. We’re referring to any type of element that the user has to fill in, whether to access information or complete a conversion process. On mobile sites, forms can often be a hassle, as they don’t tend to take into account the characteristics of mobile browsing (fewer taps, fewer fields to fill in, fewer elements to cause friction, etc.).

Booking, however, offers an example of a search form that’s been optimized to the max: you can enter all the data required on just a single screen and adjust the options to your heart’s content.

Booking form

Moving on to the checkout area, ZARA once again stands out. If the desktop version’s payment gateway is extremely simple, on the app it’s just perfect. Shopping made dangerously easy!

Zara Checkout

Microinteractions for browsability

Some websites require certain complex functions to be performed, which could present serious issues for mobile versions when it comes to simple, intuitive browsing. However, below is an example of a site that have resolved this issue particularly well.

We are talking about Nike’s sneaker customizer. The process is simple: you choose the product, followed by the color (presented visually via a small icon) for each part of the sneaker. Each element has been planned in detail to make creating your sneakers a very simple process.

Nike customization process

Persuasive microinteractions

If it’s already difficult to generate calls to action on the desktop, on mobile the persuasion process is even more complicated. We always want to say a lot in a small amount of space, and below are some examples that are particularly inspiring.

Booking plays on the psychology of pricing and haste in order to encourage conversion. Each element on the screen is there to persuade and is worthy of a closer look.

Booking persuassion

And one last example that’s probably not very obvious. Gmail has added certain functions to its inbox and offers direct links where it knows they will be of interest to the user, such as monitoring the progress of an order, online check-in for flights, etc. Google never misses a trick!

I think that’s enough examples for today. I’m sure you’ve thought of thousands more… are there any others we should add?