O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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
Próximos SlideShares
Carregando em…5
×

Mircointeractions

228 visualizações

Publicada em

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

Publicada em: Design
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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!

×