Our WorkAbout UsOur ApproachThe Journal
Contact »
« Back to the journal
Design + 

The Role of Microinteractions in Successful UX

By:

Morgan Plappert
Morgan Plappert

on 7/1/2019

Beautiful little hidden, contained product moments that revolve around a single use case. Micro-interactions may not always look the prettiest (the best of them may even go unnoticed) but they can be the difference between a user achieving a task or not.

Be consistent, purposeful, and guiding. These are the 3 things I always consider when adding animation to a site design or app.

Why?

Consistency: Multiple interactions or animations happening at once will detract the user from the goal at hand. Decrease the users mental load time. Create a system or a few rules or interaction types. This will reinforce a users understanding rather than confuse the situation.

Purpose: What is the goal for your user? How can the animation/interaction lend to that purpose? Communicate an intended purpose. If animation slows down an experience or increases the users mental effort, it isn’t helping.

Guiding: Make these experiences lend to the storytelling. What is your user doing and how can the UI help guide them? Purposeful and guiding animation can help draw the users attention to what is happening and compliment the understanding, while reducing confusion.

Let’s take a look at some examples and why they are successful:
1) Keep the user informed through feedback and validation. Increases engagement.

1_ItT2vE8LykICjyxGcyzprw.gif

feedback.gif

2) Provide the user with action/reaction. Delightful. Immediate feedback.

1_Bxnf0O0yRBYlzfrOM-SjXg.gif

1_aI5phv9hxVHtS-_EM-oscQ.gif

3) Keep the user informed through status. Creates user engagement. Builds trust and confidence in the process.

1_GD9iUbCouFIZpF-MHgNMhQ.gif

1_iznFuA67kK40hmlgrZ4V6A.gif

4) Communicate change. Draws the users attention to important details. Creates visual hierarchy.

1_872ngtrZTXe6e-4rfXOx-A-1.gif

bag60.gif

5) HAVE FUN. Explain a concept visually. Hone in on a users emotion. Be empathetic in your design while still complimenting user flow/storytelling.

giphy.gif1_CcA0g8SdxrVMawVw5ypWZQ.gif

In conclusion treat your user the way you want to be treated. Design with empathy and consideration of how people will interact with your product. Know your user and create facilitators for that specific audience that will save them time and resonate with them. Do so by creating opportunities to engage and by paying attention to the details … Your user and your product will thank you later.

Share to

Related Posts

UX / UI
Wireframing vs. Prototyping and Everything In-Between

By:Morgan Plappert on 7/14/2020

Prototyping demonstrates ideas, and baking prototyping into your workflow can begin to shift the way you think and approach design problems as a whole.

Read More »
The Internet's Bubble Wrap: Your 404 Page is More Important Than You Think

By:Morgan Plappert on 9/13/2017

Hand over that half-empty glass and let us show you a few examples of how to turn possible frustration into opportunity.

Read More »