Why the Best UX Comes with Microinteractions

Here at 12Rockets, we are huge fans of microinteractions – they come as a cherry on top of great UX/UI design. Sure, the world can exist without these details, but it’s microinteractions that make us go wow, giggle, raise our eyebrows or just think – I wish that was my idea!

Microinteractions can easily get overlooked because of their subtlety and the lack of an obvious purpose, but their importance is undeniable. They hold the entire experience together bridging the gap between the user and technology, evoking emotions, starting conversations and most importantly, bringing back users.

The end of last year was all about the latest Star Wars episode. It was so big that it spawned the greatest close button of all times. Check out the pair of crossed lightsabers in the following picture:

microinteractions

Neat, huh?

There are many great examples like this one, so lets explore some of our favorites.

We all know Twitter’s blue bird logo, right?

Have you ever noticed Twitter’s home icon looks like a bird house? What can be more appropriate than that? Lovely.

microinteractions 1

Another nice touch coming from the crew at Twitter, is their new “like” button.

After extensive research, Twitter decided to replace their well-known star with a heart icon. Their main reason for this change was to attract new users by using the heart icon that most users were familiar with.

microinteractions 2

Some microinteractions are effectively changed for particular holidays.

For example, GitHub changes the colors on the contribution graph to reflect a Halloween theme.

microinteractions 3

Another great example of a Halloween themed UI, is the Uber app which shows witches instead of cars.

microinteractions 4

Or rainbows coming out of their cars during Pride.

microinteractions 5

Google, of course, is number one when it comes to being your friendly assistant. Typing “woohoo!!!” in hangouts triggers an animation that celebrates with you!

microinteractions GIF

The same company also makes sure that naughty words don’t stay in your history and asks you to confirm if you want to send your message.

microinteractions 6

Are you a Spotify user? Well, in case you ever decide to cancel this service, you’ll get a “Goodbye” playlist that will tear your heart apart.

Is this going to stop you from leaving Spotify? I doubt it, but it’s a nice touch that will make those who stay giggle and – what’s even more important – talk and write about it. Thumbs up for the good humor!

microinteractions 7

If you pay close attention to details, you’ve probably noticed how the reflections on camera lenses, buttons and apple logos change when you scroll through Apple’s website.

microinteractions 11

Or did you know that the icon for the Voice Memo app is a representation of the word “Apple”?

microinteractions 8

This following one really made us laugh. Pocketcasts turns the pay button into “Shut up and take my money” meme when you hover over it.

microinteractions 9

Finally, Craiglist has some pretty neat buttons for sorting items by price

microinteractions 10

For more examples to inspire you to come up with your own, take a look at Little Big Details. Microinteractions are one of the million reasons why being designer is such a great job.