Microinteractions: The Secret of Great App Design

Posted 9 months ago 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 giving delightful feedback.

All roads lead to a human-centered design approach, where the user is the prime focus. Often considered accessory or secondary, microinteractions actually create a feeling of well-being once they are discovered by users. As a designer, recognizing the invisibility of microinteractions is just as important as designing them. You have to create something that feels human and accomplishes a task.

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:

Some examples of specific microinteractions include:

Source: Dribbble.

Why Microinteractions Work

Microinteractions work because they appeal to the user’s natural desire for acknowledgement. The user instantly knows their action was accepted and she wants be delighted by visual rewards. Also microinteractions can guide users in how to work 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. And users expect to get responses immediately. But there are situations when an app needs some time before an action is completed.

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 user get bored — keep the user informed and show them progress (e.g. a loading bar engages the user and prevents confusion).

Highlight Changes

Sometimes we have to show notifications to make sure the user sees it. Animation can help. It will attract users attention and not let them 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. You should use KISS principle — microinteraction is supposed to be small and simple.

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.

Material Design

Takeaway: Keep clear navigation between different pages; so the user understands what appeared from where. Transitioning between two visual states should be clear, smooth, and effortless. Unify in a theme — create a unifying theme to tie together all interactions.

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 elements to deliver feedback.

Source: Dribbble.

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. They can bring empathy in user experience. 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

Conclusion

Design with care. Think about how people work with and use their devices and mirror common patterns of thought as you design these small bits. Attention to each and every detail is key to your success making human-computer interaction easy to use. Great design has to happen “full-stack”, from functional part down to micro-interactions.

Originally published at babich.biz

I’m a software developer, tech enthusiast and UI/UX lover. http://babich.biz

Related Posts

There are lots of great tools for drawing wireframes today. However, I still prefer my good ol’ paper wireframing kit. In this post I’ll tell you why and explain how paper wireframing will make you a better designer. In 2012 I was planning on taking my wireframing skills to the next level. I had gotten the excellent app Paper by… Read More →

Your portfolio is a story about you and your work — your expression of growth through all the obstacles, surprises, successes and failures. This is your epic. Illuminate the arc of your career and why you matter. For the audience, your portfolio showcases your problem-solving superpowers, hard and soft skills, and your ability to reflect upon your successes and failures…. Read More →

Animation is a big part of user experience. When it comes to transitions in mobile apps, there are a lot of things you can communicate very subtly with animation. Send the message, open Settings, check the box, navigate to another page — these are all moments of change. Animating a transition is an excellent way to reinforce the user’s action…. Read More →