Previously, we wrote about the importance of typography and how it can help you by affecting both the visual component of your design and the usable component. That brings us to the point of knowing the difference between those two and knowing how to improve one without necessarily affecting the other. This is where microinteractions kick in.

In my time as a designer, and even prior to that, I’ve encountered numerous examples of design (anything from a remote control to a Sudoku mobile application) where at first I was amazed by the looks of the product itself. But, when I tried to use it, I was confused when it didn’t respond the way I expected it to.

And that brings us to the following question: How do you know something, say a piece of technology, works well for you?

The logical answer would be: When you get what you need from it (obviously). If you can use it without thinking about the ways of using it, then you know it’s good for you. This is what user experience design promotes. Good user experience enables you to use a product or software without having to think about it too much. You can focus on why you are using it and not on how you are using it.

So once you get your product to look great, you need to make it feel great as well. There are numerous ways and various online tutorials for do-s and don’t-s when designing for good UX, but what I’m aiming at here is located on the micro level of design. So yes, it’s about the details. The details separate the products you use from all the others because you love to use them. Focusing on the small details reflects on the big picture! Microinteractions are what you may call “the fabric of good UX”.

Microinteractions are all around us. Microinteractions is the detail in the attractive curve, the sleek click, and the comprehensive mental model, the ease of use.

This is achieved by working from the bottom, not the other way around. Designers usually think big, think great, and out of the box. And this is what gets your attention, at first. But the thing that keeps your attention isn’t as grand as you think it is. Every time you set an alarm, pick a password, log in, like or favorite something, sync your data etc., you’re engaging in microinteractions. They are the functional and interactive details of a product. They are stand-alone use-cases which have only one purpose.

But be careful not to confuse them with features. Features are complex and time consuming as opposed to microinteractions, which are simple, brief and effortless.

Designing microinteractions

There’s a structure that applies to all microinteractions and it’s made of four parts. All microinteractions have triggers, meaning that something needs to happen in order to activate the microinteractions. This is usually something the user does manually. Let’s say turning the volume off on your phone, moving a file to a folder or adding an item to a cart while you’re shopping online. The idea is that the user wants to achieve something (turn off the sound, organize files, buy things..) and in order to do that, he or she needs to perform a certain action. By now you could’ve already figured out that it’s not really about what they want to do, but how it is they do it. Turning off the sound on your phone was once an action that took up to 10 seconds (depending on the phone) and today it takes less then a second (to activate the sound switch on your iPhone or iPad for example).

Once the microinteractions have been initiated, something happens. And users need to understand what happened and how it works. This is the part where rules come in, and designers can define rules.

With the growth of applications and electro-digital devices there is a lot of space for a great number of rules, but try to keep them simple so that users can catch up on them easily. And try to make them as intuitive as possible; if you make users overthink a simple action, you’ll lose them.

Let’s move on. Every time something happens in the system, you want to notify the users about it. Feedback is the place where you add your cool and fun ideas. It’s the perfect time to show off. It can take many forms such as visual, haptic (vibrations) or aural. It can be subtle or prominent, it’s up to you to decide. Think about those small badges that show up when you have unread mail, or the led light that turns on when you have new messages or missed calls on your phone. These are all design choices, and there are many to choose from. Feedback is the place to express the personality of your product, to give it a style. It’s not only graphics, sounds or vibrations, it’s also animation. How microinteractions appears and disappears can earn you a great deal of users just by using some cool effect.

The last part of microinteractions are loops and modes that make up meta rules. How microinteractions behave over time, do they remain on until manually turned off, do they expire after a certain period, reappear on your screen etc. How does interruption of let’s say calls or messages affect it and so on. A good example of a loop is on eBay. Say you bought some item in the past and now you want to buy another; the first time you bought something the label on the button said ‘Buy it now’, but has now switched to ‘Buy another’.

As far as mode go, in some apps, like weather apps, the user can check the weather info in the main mode, but if they want to receive data about other locations they need to enter different modes to get that information.

How microinteractions actually work?

In order to fully explain how interactions work I’ll put together everything I’ve mentioned before in one example.

Let’s say you want to create a web app for sharing music. You want users to be able to create their own playlists, invite friends, send (suggest) songs, share songs etc. First you define all the actions and desired microinteractions that will be available. Let’s say you want users to be able to discover and share music with friends. This can be used to put in small but catchy microinteractions that say something about your mood or show how good your taste in music is. You can also add a feature that compares your musical taste to that of your friends etc. So as you can see, the number of interactions and possible wow effect details is endless, you just need to use your imagination.

So by now we’ve defined the basic rules for this app:

• When a new song arrives, it will be added to the playlist.
• Users can add songs to playlists
• Users can suggest songs to friends
• New songs are added to the top of the playlist (or bottom, whichever you prefer)

Let’s focus on the microinteraction of adding a song. It has two triggers: adding a song (manual trigger) or having a friend add it remotely (system trigger).

About the manual part, in order to let the user know they can add a song, you need to have an input field or some label that lets the user know he or she can add songs. Let’s assume that you can add songs from anywhere and that the system is smart enough to find a version that’s not copyright protected so that everyone can listen to it. You definitely need to enable drag and drop for adding a song, which means you need to define space somewhere that has a label attached to it saying something like ‘Drop a song here’ or ‘What do you feel like listening to‘… You can already see how your designer could help you make this field, button or section more attractive and visible to the user. Also, you could change the label every now and then so that it says ‘What’s your mood today?’ or something similar. These things will create those small moments that make the user smile when they realize how cool your app is.

You can add additional manual triggers like bars that say ‘Add to shared playlist’ or ‘Add to new playlist’ and then play with those for a little to make them stand out somehow.

Adding a song to the playlist (whichever one you want) is a great time for feedback. You could make small popovers or labels with the number of songs on that playlist. Maybe add some cool animation, change some color to make it stand out more. Once again, the possibilities here are endless and you can create tons of interesting eye-catching microinteractions. Or you could only create one super awesome and make it your signature moment. Whichever way you decide to go, make sure you don’t put too much microinteractions so that you don’t take it over the top.

Then there’s that system trigger when getting a song from your friends. If your browser tab is open you will see and hear a sound when you get a new song. And you could make the browser tab change when this happens, to make it more fun and visible. You could add a small badge or some other visual sign. Feedback is the place to add personality. You can use loaders or system sounds.

You might get stuck in the process of users adding songs via drag and drop. The system might get confused about the songs, so you might want to offer the users to match the name and artist of a song, or you could present them with a few options and let them choose the right one. Again, lots of room for improvisation and cool effects.

So now that we analyzed all this, we can look at our new set of rules:

• If a new song arrives, it gets added to the playlist and the tab bar changes.
• Users can add songs to the playlist via drag and drop or by selecting a song.
• When new songs are added, the system will search for a match, and if possible provide the user with several choices so that he or she can pick the right one.
• New songs are added to the end of the playlist and ordered by the date/time they were added.

Playlist duration and the number of items are all useful information that can be provided and shown to the user in some engaging and visually attractive way. You could enable users to contribute songs which would allow a long loop to encourage users to do so. After a certain time period, users could get a notification with something like ‘Feel like contributing?’ or something similar just to remind them of the action.

As you can see here, the number of combinations is endless, although I wouldn’t encourage you to apply them all. It’s better to design only a few but make them good then to have numerous microinteractions for just a few simple actions.

Ease of use may be invisible, but its absence sure isn’t (IBM)

We are surrounded by technology in all shapes and sizes. It’s necessary to have people who can design for both big and small systems, especially those who can work on both at the same time. Considering that all of this is built for us to use, it would be best if it were as human as possible. Details show that someone cares and that attention has been paid. Try to use them wisely and make your apps interesting and catchy.

Special thanks to Dan Saffer whose book “Microinteraction: Designing with Details” inspired me to write this article and provided a lot of useful insight about microinteractions overall. The book is a must read for everyone who wishes to know how it actually works. http://microinteractions.com/about-the-book/