3. What is Micro-interactions?
■ 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.
Microinteractions are the contained product moments that do one
small task.
4. Why Microinteractions?
■ More control through immediate feedback
■ Instructions - microinteractions can guide users in how to work the
system
■ Visual rewards - Small but satisfying effects enhance the UX
■ Meeting expectations
5. Identifying Opportunities
■ Switching on/off (features, functions, or the entire UI itself)
■ Adjusting setting preferences (i.e., volume)
■ Viewing or writing a small piece of content (i.e., status message, comment)
■ Connecting one device to another (i.e., computer to phone)
■ Uploading and downloading
■ Notifications
■ Social media sharing
■ Pull-down and hidden menus
■ Showing changes (i.e., play button changes to pause)
9. Identifying Opportunities
■ Keep Context
Use motion to smoothly
transport users between
navigational contexts,
explain changes in the
arrangement of
elements on a screen
11. Four Parts of Micro-Interactions
Trigger: Initiates an action
Rules: What happens in the interaction
Feedback: How you know what’s happening
Loops and Modes: Considerations about how the microinteraction is
reused
12. Best Practices for Microinteractions
■ Fast response time
■ Keep the user informed
■ User research
■ Use what’s available
■ Design for repeated use
■ Use a human voice
■ Keep It simple, stupid
■ Follow the rules of animations
There are 4 point we should consider when defining microinteractions
More control through immediate feedback — The user instantly knows their action was accepted, giving them more confidence in further usability.
Instructions — Also microinteractions can guide users in how to work the system.
Meeting expectations — In today’s web design landscape, microinteractions are the norm
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.
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).
Sometimes we have to show notifications to make sure the user sees it.
Animation can help
Takeaway: In many cases animation effects are used for getting user’s attention to important details. You should use KISS principle — microinteraction is supposed to be small and simple.
This is especially apply for mobile devices,
because it’s simply impossible to fit a lot of information on one screen.
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.
Trigger —The numbered floor button is a clear visual signifier. Pushing the button is the trigger.
Rules —— basically, what it does. In this case, when you push the button, the elevator will move to that floor.
Feedback —When the button lights up, people know the elevator will respond accordingly.
Loops & Modes For an elevator, the loop is that the button is recognizable enough that the user will understand the function immediately for different elevators, and that the pushing process is not very difficult.
Here, we’ve collected the top expert advice about using microinteractions:
Fast response time — A near-immediate response time, within 100 mili second ideally, keeps the user feeling in control.
Keep the user informed — A loading bar or status icon engages the user and prevents confusion.
user research — Knowing your users will make them more precise and effective. Make sure the visual cues and animations are appropriate.
Use what’s available — Don’t add more than necessary: use existing elements to deliver feedback if you can.
Design for repeated use
Use a human voice —less mechanical voice,
Keep It simple, stupid — Don’t turn your microinteraction into a macrointeraction. It’s supposed to be small and simple, so don’t get too clever.
Follow the rules of animations —
Finally,
Microinteractions show that attention to small details can deliver big and powerful results.
And it enhance the User Experience of an application