Micro UX: the little details of delightful moments

Every little detail matters when you are trying to craft a product with delightful experience. It’s certainly becoming a trend for websites or apps to take the small, simple but inspiring interactions into their designs. Through those interactions, an emotional connection can be established between the product and users. And we say that’s the power of Micro UX.

Micro UX design is all about human touch. By applying small innovative elements into a product, the ultimate goal of Micro UX is to increase the efficiency of accomplishing a task while creating an humane experience that can help engaging users.

Numerous of examples can be found when we are talking about Micro UX. Some of them are aim at giving users a little bit of surprise so that finishing the task will no longer be that boring. However, the biggest chance lying in Micro UX is affecting users' expectation or even behaviour gradually through those subtle interaction designs. for instance, pull down to refresh gesture, or waterfall loading design, have become common-seen patterns in designs after being introduced. 

So far most of existing Micro UX elements can be divided into 3 categories: Task focused design, Fun approach and Add-on feature. In this article, some examples were collected for each category, part of them are from Little Big Details, a fantastic library of Micro UX elements across website and mobile apps which worth UX designers spending some time exploring it.


A. Task focused design

One of the main purposes that Micro UX trying to achieve is to focus on users’ goal and satisfy their needs through delightful little designs. These designs may or may not be noticed by users, however, they can practically help prevent users from wasting their time and effort, which can make the flow more fluent and efficient.


1) Korea Air Ticket Booking system

Korean Air is one of my favorite airline websites. The experience of booking tickets from Korean Air is quite smooth. The indications are clear, interactions are simple but engaging. Take selecting ticket combination process as an example, instead of boring forms and tables, Korean Air used the trendy card design. Users can either go for suggested package, or customize their own plan. By clicking or scrolling up and down among different options, the tabs been selected will expand accordingly for users to check the details.

Another interesting detail is, the background image changes based on the destination users chose. While waiting for the system loading information, the nice photo behind can really gave users an emotional touch. In this way, Korea Air showed their ambition of becoming an user-centered travel partner, instead of an airline company who sell tickets only.


2) URBIX: CAPCHA input design

As we might know, the pain of CAPCHA has been there for years, thus some websites have already replaced it with other methods like connecting users’ email or social network account to verify their identity. However, for a ticketing system like URBIX who might have users purchase tickets as guests, verify code is an essential barrier to prevent spam bots. Instead of manually inputting characters, URBIX is using selecting and match CAPCHA design, which can successfully stop the spams while letting real users quickly get through. Some other similar solutions for CAPCHA like matching images or even implement it as a funny little game are also being around, which made verify ID become less pain for users.


3) Gumroad: Log in & Sign up form design

Usually when users land on the login page but suddenly realize that they will have register first, then they will have to click on the sign up link and land on another page with none of the information that they may have inputted already. Apparently Gumroad considered situation like this, thus in their design, whenever users toggle between login and register forms, inputted content will stay in the fields. This design saved effort of inputting same content again while changing entry point. It’s undeniable that Gumroad has done a great job in designing Micro user experience, other than the login interaction, other form design like credit card and address input also worth exploring.  


B. Fun Approach

It's never going to be a bad idea to keep your users happy while they using your product. That’s why more and more websites or applications put a lot of effort into engaging their users through some fun approaches. The methods could be various, gamification design, entertaining interaction or speaking humorous nature language, etc. However, the objective always remains the same: to provide a positive experience for users. When this applies to Micro UX, it means that producing a playful or fun element which would bring positive feelings to your users.


1) Virgin Airline: Avatars selection

In the booking system of Virgin America, when users reach the step of selecting seats, they will be able to choose their own cartoon avatar, just like what usually happen before a game starts. Once they done with seat selection, their user ID images will be displayed on the accordingly seats. So far, it seems Virgin America is the only airline website that using this approach in the journey of booking tickets. However, as a game changer in this industry, apparently Virgin America is leading the trend, and hopefully in the near future, there will be an increasing number of similar companies to adopt this gamification way of thinking.  


2) Bellroy: interactive comparison

Instead of writing long paragraphs telling users how good their product is, Bellroy created this simple but interesting interaction, which allows user to move the sliders to see the performance between an ordinary wallet and their product. Compare to words or still images, an interactive animation will be much more persuasive and engaging. While being involved in the interaction, users can easily focus on the highlighted feature, chances of selling will increase at the same time.


3) 9GAG: ramdom generated profile picture

As a online platform of sharing humorous photos or videos, “Just for Fun” is 9GAG’s mentality. This spirit mostly presented in the content that they pushed, but at the same time, some details across the website is also found to be quite fun. One example is, when users register, the system will randomly assign a hilarious image as their profile pictures. It may not be something prominent, but create little details that can bring a joyful experience to the users, and that’s the value of Micro UX.



C. Add-on Feature

Add-on feature is all about going beyond users’ expectation. It usually refers to something not on the must-have list, or those which may not have a very close connection with a product’s key feature either. However, it would good to have these add-on features if it’s possible. You may surprise your users by showing how thoughtful you are, who knows.


1) TEDX: Display the length of time for saved talks

There is a lot of good design details from TEDX website that we can talk about, including video filtering, floating video bar design, transcript function, etc. Other than that, there is one more little element for us to look at, which is on the Saved Talks page, instead of showing users the number of videos, they are displaying the total amount of time of all the saved talks. This makes it easier for user to judge how much time they are going to spend if they want to finish all these videos.


2) Google: Game for the offline mode

Imagine how frustrated you may get when there is no Internet connection. Google Chrome is trying to calm their users down by turns the offline page into a game. Not able to access the internet may not be something users would like to see, but at least Google is trying to decrease users’ frustration by offering something fun, like the game of a dinosaur, which was born way before internet was invented, running across the desert.


3) Invision: Browser tab displayed a remindier

As an excellent UX tool, Invision noticed the tab on the browser window and used it to create good experience. Instead of leaving a standard site name there, Invision used it as a reminder. Whenever users switch tabs while reading a blog, text on the tab will change to “Don’t forget to read this…”. It may not be something big and prominent, but all the little details are the little moments that may touch your users, and make emotional connection with them. 



Any good UX designer should care about every little details within their products, that’s why there are more and more excellent Micro UX works pop into our eyes. They can be functional focused, or aimed at creating emotional connection with users. Either way, the deep concept lying inside is about user-centered. Think from a user point of view, care more than what they care, this is what makes a good Micro UX.  


OMG I Love This Website | Gumroa

From this week on, I plan to recommend some websites with good experience or special designs from time to time. As we all know, nothing is perfect. Thus while talking about why I like the site, I would also like to point out where to improve. Hope you will enjoy the dish I’m going to serve!

I came through the Gumroad site while I was doing my research for another article, which you are going to read about on my blog soon. Gumroad is a platform of offering online selling service for creative people. Users can either put up their physical products, or upload digital format creations for sell. 


- What I like -

Login and Register form transformation

This is the first thing that impressed me when I started to explore Gumroad. Unlike most sites using two different pages for login and register, Gumroad combined those two together using an overlay, which makes the transition much smoother. Users may enter the login overlay first, but by clicking on the link at bottom, they can change the view to register without losing any of the information that they may have inputted already.


Connection with Physical World

One significant design concept in Gumroad is building a connection to the real world. Nowadays we see neat and clean flat design everywhere, but it doesn’t mean realism design is out of date. For me, I found it’s kind of fresh to see the realism designs came back to life and been made a perfect combination with flat design.

When you dive into the website and start to fill some forms, you will see the credit card form was actually designed like a physical credit card, address input fields were been displayed on an envelope, and when client check out, they will receive a slip which looks exactly the same as the one you may get from any physical stores. The advantage of adapting realism design is less time and effort in educating the users. Besides, compare to a normal form design, this is much more fun!


Educate Users through a 30 Day Challenge Campaign 

Gumroad offered a guidance for users to discover and build their audiences. The method is simple: getting them involved in a 30 Day Challenge Campaign. This reminds me of the app called Monny, in which users can choose to join a 7-day or 30-day challenge of accounting. It is a smart way of educating and engaging users, which would gradually help build their habit of using a product.

The calendar design within the 30 Day Challenge is also interesting. By clicking on any of the dates, the selected fields expand to show details and push the other fields to the side at the same time. This is an interesting interaction that can possibly be adopted into some similar designs, such as event calendar.


Experience Your Customers’ Journey

Another notable feature is, users will be able to go through their customers’ journey while decorating the product info page. Through step by step instruction, users can see what the customers will see, experience what the customers to experience. Good thing about this design is to provide a chance for users to think from their customers’ perspective, it is a helpful way of producing better content.


- What I dislike -

Unclear Navigation Indication

Though uploading products processes are quite fluent within the customer dashboard, I have to say, it's not easy to get around on their public website. This issue is mainly due the position of placing the website logo. Nowadays most users understand that the site logo can be used as a home button, thus it is totally understandable that fewer websites kept the home tab. However, even though the size and logo can be adaptive, I still believe that the position of home icon should always be consistent across the whole experience, otherwise your users may easily get lost while browsing your site.

One example about this issue is: On homepage the logo is on the left hand side with a gap to the edge, however, on the sample product page, the logo is very close to the edge of this page. While scrolling down, menu on the bottom moved up and floated on the top, which means if you want to go back to the homepage, you will have to scroll to the top to click on the logo icon from there. 


Two scrollable sections on one page

To be honest, I’m not a big fan of multiple scrollable sections within one visible areas on the screen, especially when this is been applied for a website. There is a high risk of breaking links between those scrollable sections, thus when design pages like this, we need to specifically think about what’s the purpose of creating a design like this, and how do those sections work together.


To sum up, Gumroad is a pretty simple and straight forward website, which made it easy to understand their goal and mission. After deeply studied it, I found there are lots of adorable little detail designs in the site that I would like to put into my library for future use. And the most highlighted take away I got from them is about designing forms in a more efficient and fun way.