Mircointeractions
•Download as PPTX, PDF•
0 likes•362 views
Microinteractions show that attention to small details can deliver big and powerful results.
Recommended
More Related Content
Similar to Mircointeractions
Similar to Mircointeractions (20)
Recently uploaded
Recently uploaded (20)
Mircointeractions
- 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)
- 6. Identifying Opportunities ■ Show System Status the interface should keep the user informed about what is happening
- 7. Identifying Opportunities ■ Show System Status Or where the user is
- 8. Identifying Opportunities ■ Highlight Changes Sometimes we have to show notifications to make sure the user sees it
- 9. Identifying Opportunities ■ Keep Context Use motion to smoothly transport users between navigational contexts, explain changes in the arrangement of elements on a screen
- 10. Identifying Opportunities ■ Visualize Input Microinteractions help reveal information and help user to reach their goal
- 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
- 13. Thank you!
Editor's Notes
- New UX trends,
- Iphone silent mood
- 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