Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
MICROINTERACTIONS
Tharaka Nilupul
What is Micro-interactions?
■ Feedback or the result of an action.
■ Accomplish an individual task.
■ Enhance the sense of...
Why Microinteractions?
■ More control through immediate feedback
■ Instructions - microinteractions can guide users in how...
Identifying Opportunities
■ Switching on/off (features, functions, or the entire UI itself)
■ Adjusting setting preference...
Identifying Opportunities
■ Show
System Status
the interface should keep
the user informed about
what is happening
Identifying Opportunities
■ Show
System Status
Or where the user is
Identifying Opportunities
■ Highlight
Changes
Sometimes we have to
show notifications to
make sure the user sees
it
Identifying Opportunities
■ Keep Context
Use motion to smoothly
transport users between
navigational contexts,
explain cha...
Identifying Opportunities
■ Visualize Input
Microinteractions help
reveal information and
help user to reach their
goal
Four Parts of Micro-Interactions
Trigger: Initiates an action
Rules: What happens in the interaction
Feedback: How you kno...
Best Practices for Microinteractions
■ Fast response time
■ Keep the user informed
■ User research
■ Use what’s available
...
Thank you!
Mircointeractions
Upcoming SlideShare
Loading in …5
×

Mircointeractions

227 views

Published on

Microinteractions show that attention to small details can deliver big and powerful results.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Mircointeractions

  1. 1. MICROINTERACTIONS Tharaka Nilupul
  2. 2. 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.
  3. 3. 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
  4. 4. 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)
  5. 5. Identifying Opportunities ■ Show System Status the interface should keep the user informed about what is happening
  6. 6. Identifying Opportunities ■ Show System Status Or where the user is
  7. 7. Identifying Opportunities ■ Highlight Changes Sometimes we have to show notifications to make sure the user sees it
  8. 8. Identifying Opportunities ■ Keep Context Use motion to smoothly transport users between navigational contexts, explain changes in the arrangement of elements on a screen
  9. 9. Identifying Opportunities ■ Visualize Input Microinteractions help reveal information and help user to reach their goal
  10. 10. 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
  11. 11. 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
  12. 12. Thank you!

×