1. 1 Emotion & Usability 2. 2 Hi Im Stefan UX Architect at Infragistics IDF local leader 3. 3 4. 4 What makes us human? 5. 5 React 6. 6 Envision 7. 7 For us humans they work together Two types of information processing Affective processing Cognitive processing Stimulus Stimulus Perceive React Relate Imagine 8. 8 Normans three levels of design Visceral unconscious perception of appeal Behavioral Reflective 9. 9 Normans three levels of design Visceral Behavioral unconscious perception of task appropriateness Reflective 10. 10 Mental model The model each user creates for the utilization of the product Mental modelConceptual model Product appearance 11. 11 Normans three levels of design Visceral Behavioral Reflective conscious envisioning thinking 12. 12 Illustrating the levels when buying shoes Visceral Behavioral Reflective 13. 13 Illustrating the levels with a smartphone purchase Visceral Behavioral Reflective 14. 14 Emotion Distinct and subjective feeling state in response to external stimuli or a mental process 15. 15 16. 16 Experience over and over again 17. 17 Emotions stick 18. 18 Emotion in UIs Elicit Detect Transfer 19. 19 Emotion in UIs As a primary or a secondary expression tool 20. 20 Emotion in UIs As a primary or a secondary expression tool 21. 21 Emotion in UIs As a primary or a secondary expression tool 22. 22 Emotion in UIs Positive and negative emotions depend on context 23. 23 Emotion in UIs Positive and negative emotions depend on context 24. 24 Microsoft create a sense of stability and security with a pleasant snap at the end after gradually slowing down. Anemotions Image credits: http://www.davidmcgavern.com/ company-animation-styles/ 25. 25 Disney offers squeeze, stretch and bouncing to convey playfulness and give life to objects. Anemotions Image credits: http://www.davidmcgavern.com/ company-animation-styles/ 26. 26 Facebook uses the spring at the end to give comfort and predictability but at the same time playfulness. Anemotions Image credits: http://www.davidmcgavern.com/ company-animation-styles/ 27. 27 Google use slight easing at the end but moves faster to give a sense of speed. Anemotions Image credits: http://www.davidmcgavern.com/ company-animation-styles/ 28. 28 Looney Tunes gives a sense of familiarity and joy by replicating behaviors of specific cartoon characters. Anemotions Image credits: http://www.davidmcgavern.com/ company-animation-styles/ 29. 29 Apple offers calmness and predictability by mimicking acceleration and deceleration as in nature. Anemotions Image credits: http://www.davidmcgavern.com/ company-animation-styles/ 30. 30 In short Information processing Normans three levels of design Emotion Emotion in digital products Anemotions 31. 31 sivanov@infragistics.com stefanivanovux