An example of a microinteraction that we experience in daily life.

Microinteractions: The Secret of Great App Design

by Nick Babich

The best products do two things well: features and details. Features are what draw people to your product. Details are what keep them there. And details are what actually make our app stand out from our competition.

Microinteractions are one of the best techniques for providing delightful feedback.

Often considered secondary, microinteractions actually create a feeling of well-designed experience once they are discovered by users. As a designer, recognizing the importance of microinteractions is just as critical as designing them.

What is a Microinteraction Anyway?

Microinteractions are the contained product moments that do one small task.

As first described in Dan Saffer’s book Microinteractions, these tiny details typically serve these essential functions:

Communicate feedback or the result of an action.

Accomplish an individual task.

Enhance the sense of direct manipulation.

Help users visualize the results of their actions and prevent errors.

Some examples of specific microinteractions include:

The vibration notification together with silent mode icon on display when you switch an iPhone to mute.

Interface animation on user input (a button that changes color when you taps it).

Why Microinteractions Work

Microinteractions work because they appeal to the user’s natural desire for acknowledgement. When users interact with UI, they want to know that they system receives their actions. Also microinteractions can guide users on how to interact with the system.

Identifying Opportunities

Part of the beauty of microinteractions is that they can be inserted in a variety of places, around any potential action. In general, though, they tend to come up in the following areas:

Show System Status

The first usability heuristic principle by Jakob Nielsen states: keep your user informed about what is going on. When users trigger an operation, they expect to get immediate response. But there are situations when an app needs some time to complete an operation. So, the interface should keep the user enlightened about what is happening.

Progress Bar for uploading and downloading. Source: Dribbble.

Or where the user is:

Scrolling Bar Progress

Takeaway: Don’t let your wonder about what happens — keep the user informed and show them progress.

Highlight Changes

When any important event happens, we need to show notifications to inform users about that. Animation can help achieve this goal. It will attract users attention and won’t let users overlook what you think is important.

New incoming message. Source: Dribbble.

Takeaway: In many cases animation effects are used for attracting user’s attention to important details.

Keep Context

Use motion to smoothly transport users between navigational contexts, explain changes in the arrangement of elements on a screen. This is especially true for mobile devices and smart watches, because it’s simply impossible to fit a lot of information on one screen and any screen state change should be crystal clear for your users.

Material Design

Takeaway: Transitioning between two visual states should be clear and smooth.

Visualize Input

Data input is one of the most important elements of any application. And micro-interactions turn this process into something special. You can use existing visual elements to deliver feedback—just add nice visual details.

Takeaway: Microinteractions help reveal information and help user to reach their goal.

Call to Action

Microinteractions have the power to encourage users to actually interact. By bringing empathy in user experience, you have a better chances users will make a move. But make sure the visual cues and animations are appropriate for your users. And keep longevity in mind — will the microinteraction get annoying on the 100th use, or is it universally clear and unobtrusive?

Takeaway: Focus on user emotions because they play a huge role in user interactions. Draw from context & user research and design for repeated use.

Things to Remember

Microinteractions act as facilitators for interactions between a user and a system.

Microinteractions should save time by instantly communicating what is happening in a way that doesn’t bore or distract the user.

Knowing your users and the context behind the interaction will make microinteractions more effective.

Microinteractions must survive long-term use. What seems fun the first time might become annoying after the 100th use.

Conclusion

Design with care. Great design has to happen on all levels, from large functional part down to tiny microinteractions.

Follow UX Planet: Twitter | Facebook

Originally published at babich.biz