MicroInteractionsMicroInteractionsDian Gunawan

Web Frontend DeveloperMeridian.id

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.

Definition:

Microinteractions are the

contained product moments

that do one small task.

What Microinteractions Do?

1. Communicating feedback or the result of an action

2. Accomplishing an isolated, individual task (i.e., connecting one device to another, liking a friend’s post)

3. Manipulating a setting

4. Preventing user error

Then Why Microinteractions?

In a nutshell, microinteractions work

desire for acknowledgement.

Microinteractions fine-tune human-centered design by:

1. More control through immediate feedback

2. Instructions

3. Visual rewards

4. Meeting expectations

Steps of Microinteractions

Trigger

Rules

feedback

Loop & modes

Identifying Opportunities

Show System Status

Highlig-htchanges

Keep context

Visualize Input

Call to Action

Things to remember

1. Microinteractions act as facilitators for interactions, with feedback, notifications and instructions.

2. Microinteractions should save time by instantly communicating information in a way that doesn’t bore or distract the user. They should catch the user’s attention like a sly wink.

3. Knowing your users and the context behind the microinteractions will make them more precise and effective.

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

5. Add humanity to the microinteraction and focus on visual harmony. The motion should feel fluid to make the microinteraction come to life.

Conclusion:

Design with care.

haturnuhun

Sumber:

1. https://studio.uxpin.com/blog/ux-design-best-practices-refined-microinteractions/

2. https://uxplanet.org/microinteractions-the-secret-to-great-app-design-4cfe70fbaccf#.76vw9av9h

3. http://microinteractions.com/what-is-a-microinteraction/

4. http://microinteractions.com/

5. http://www.webdesignerdepot.com/2015/07/7-secrets-for-enhancing-ux-with-micro-interactions/

6. http://smartdesignworldwide.com/thinking/microinteractions-why-details-matter/