Download to read offline
Uploaded byStefan Ivanov
Emotion and usability
This document discusses how emotion impacts user experience and design. It describes two types of information processing - affective and cognitive. It outlines Norman's three levels of design - visceral, behavioral, and reflective. Emotion is defined as a distinct feeling state in response to stimuli. The document explores how emotions can be elicited, detected, and transferred through user interfaces. It argues that positive and negative emotions depend on context. Examples are given of how different companies convey emotions through animation styles.
More Related Content
Similar to Emotion and usability
![[BROCHURE] Italy Tour Project | @SlideON](https://cdn.slidesharecdn.com/ss_thumbnails/brochure8-251215152319-2805af68-thumbnail.jpg?width=640&height=640&fit=bounds)
Emotion and usability
- 1.
- 2. 2 Hi I’m Stefan UX Architect at Infragistics IDF local leader
- 3.
- 4.
- 5.
- 6.
- 7. 7 For ushumans they work together Two types of information processing Affective processing Cognitive processing Stimulus Stimulus Perceive React Relate Imagine
- 8. 8 Norman’s three levelsof design Visceral – unconscious perception of appeal Behavioral Reflective
- 9. 9 Norman’s three levelsof design Visceral Behavioral – unconscious perception of task appropriateness Reflective
- 10. 10 Mental model Themodel each user creates for the utilization of the product Mental modelConceptual model Product appearance
- 11. 11 Norman’s three levelsof design Visceral Behavioral Reflective – conscious envisioning thinking
- 12. 12 Illustrating the levelswhen buying shoes Visceral Behavioral Reflective
- 13. 13 Illustrating the levelswith a smartphone purchase Visceral Behavioral Reflective
- 14. 14 Emotion Distinct andsubjective feeling state in response to external stimuli or a mental process
- 15.
- 16. 16 Experience over andover again
- 17.
- 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 asense 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 thespring 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 slighteasing 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 givesa 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 calmnessand predictability by mimicking acceleration and deceleration as in nature. Anemotions Image credits: http://www.davidmcgavern.com/ company-animation-styles/
- 30. 30 In short Informationprocessing Norman’s three levels of design Emotion Emotion in digital products Anemotions
- 31.
Editor's Notes
- #2 Hello everyone and thank you for attending this webinar. I have accounted plenty of time at the end for answering your questions so please feel free to ask anything that comes to your mind in the chat and I will make sure to provide the answers at the end of the session. Today I want to talk about Emotion and Usability. And how accounting for positive emotions through careful design can result in an increased system usability.
- #3 My name is Stefan and I work as a UX Architect for Infragistics. I work restlessly to improve the usability of our developer tools but my passion for UX also led to the local facilitation of Uxify a conference about UX design taking place in Cranbury USA in early April and in Sofia, Bulgaria in mid-June. I got my university degree from rwth-aachen in Germany in HCI and UX design and have been professionally working in the field fo a few years now. I am also a local leader of the IDF community in Sofia and Bulgaria and organize monthly meetups to discuss hot topics in interaction and UX design.
- #4 So first of all I would like to ask the first row to give me a virtual high five. But why was that because there are five key topics that I would like to address today. And without further ado let me talk about information perception.
- #5 So in the context of how we perceive visual information I have this one question: What makes us human? How is Josh on this image as a human different from his dog or any other animal? Exactly, animals react and humans beside reacting also have a conscious thinking process. You just won a free pass for UXify. Congratulations!
- #6 This is dog. Dog reacts. It sees a bird that is interpreted as prey or a buddy to play with and the dog rushes towards it. This is an instinct and there is no conscious process happening in the dog brain.
- #7 Humans are different because we can consciously think, envision and imagine things. We have memories that we can recall and imagination that can be employed at certain times.
- #8 And if we look into these two types of perception-action cycles this is how they compare with each other. In both cases we start with a stimulus. When we affectively process information there stimulus are external, we perceive them and this leads to some sort of reaction. The cat sees a bird and her brain switches to catch-the-prey mode. A kid puts his hand on the burning stove and then pulls is back immediately. With cognitive information processing the stimulus can be both external and internal (product of our imagination) however we compare it to a previous experience or a familiar and similar event and try to employ an update version of action sequence in our brain. With us humans affective processing kicks in as a reaction to external stimuli first but then also the cognitive processing takes place relating the same stimuli of further ones to something that we have previously encountered/experienced. And then we imagine and envision.
- #9 This complete loop for the human mind and how it is affected by design was first established and defined by Don Norman and his definition of the three levels of design. Levels that employ the way we process information to create designs that work better for us … on three levels. First is the visceral level, or the perception of appeal. We perceive materials, shapes and colors through our aesthetical eye and judge the objects in sight as good or bad looking. Actually it is not about the visual appeal of things but how their properties affect just about any of our senses. The cookie jar would be really desired by any kid and at the same time even a grown up would not be able to resist the smell of freshly baked cookies coming out of it. The juicer to the right, that I borrowed from Don Norman’s book on the topic is a perfect example as well. It is such an appealing thing that we will want it in our kitchen even if we never have juice at home. The visceral level means that we crave certain things that own specific qualities that appeal to us.
- #10 The behavioral level is about how useful a tool might be for a certain task that we want to employ it in. Just like the visceral level, here all happens unconsciously and is triggered by stimuli such as shape and form also knows from Norman as affordances. For each of the three tools in the image it is really straightforward to say how we handle them and what actions they are appropriate for. Despite the different affordances that each object uses we build a very good mental model about each. The knife has the curves for the fingers, the axe this contrasting string around the handle and the shovel has a handle at its end.
- #11 And speaking of mental models let’s look into why are they so important in the design of a good user experience. We as designers live happily with our conceptual model and design some product in a certain way that we think is best. However, when the user encounters this product, he judges by its appearance and relates it to familiar things to create a mental model that is then put to the test. Will that mental model match the conceptual model and the two will converge into the appearance of the product? If the designer did the necessary test to assure this, the answer will most likely be yes. If he assumed about the users and never tried, it is a game of numbers and chance? Usability, however does not happen by chance, it has to be accounted for.
- #12 The last level of design is about the way we see ourselves. What status does that product give us? How do we see ourselves with that product in our hands. The surfboard on the image below is appealing, the patterns of the wood, the treatment it is a masterpiece. At the same time the stability spike and the ring at the rear probably serve to make it much more stable and easy to control. But then imagine that you owned it. Imagine walking on the beach with it, or catching that huge wave and making that really high jump. Yes that is you in your imagination despite the fact that you never tried to surf in your life. The overall experience of the customer however is an interplay of the three levels. And thus, every designer should account for all three levels: the appeal that the user desires, the usability that comes when conceptual and mental models converge, and the attitude and status which the product brings along if it were to be ours.
- #13 I recently bought a new pair of shoes, and reflecting to my experience then, here is how the three levels of design impacted my decision process back then. First I scanned the universe of shoe models displayed in the store… and picked about 5 pairs that visually appealed to me. I then tried those 5 pairs to come to the conclusion that only two fitted me well because some were too wide and others too narrow. And being left with the last two options, I started to imagine how I would look like if we owned each pair… how I would walk the street and the confidence they would gives me for looking good. Or how they would fit the dark suit that am planning to wear them with. Then I took one pair to the counter and happily left the store.
- #14 Or something more familiar such as the purchase of a smartphone. The visceral level kicks in the moment we enter the Apple store. Unfortunately, here in Bulgaria we have only resellers but a real Apple store is a must live it experience. The phone is like on a pedestal with so much empty space around, the phone is in the middle and it is all that we should care about, it is light, glossy and shiny. Then when we take it in our hand the behavioral level comes to the foreground as we unlock it and play around for a while. Yes it will serve the purpose it is intended for and we can cope with it. And on the reflective level we just want to be seen as the rebel, the crazy one, the one who does not accept the status quo, got it? We want the status of an iPhone user and that is the most precious thing. And ads know this too so pay attention to which level does the next ad you see appeal the most. And if you argue that these don’t happen in the order that I mentioned them, you would be absolutely right. The there levels of design impact us in random order and combination and also this happens multiple times for each level. What is common on each occasion is that we have this seemingly random mixture with the same three ingredients in various proprotions.
- #15 Halfway in my slides I think it is time to mention emotion. What is emotion? This text here is not trying to define it because emotion cannot be defined with words, it is something that one has to feel to be familiar with. And that is why emotions are the hardest things to explain to someone with words, because it is a feeling on the inside. However, a few key things about emotions are outlined. First they are distinct joy is joy and anger is anger, there is no chance that you confuse one with the other – you either feel joy or anger. However, they are also subjective because what gives you joy may hurt somebody else or make him angry. There is so much joy for my girlfriend when she wins a game against me, but I really get angry for losing especially if she has no idea how to play the game but got very lucky. The last important thing about emotions is that they may be response to something that happens just now and serves as a stimulus, or a memory from the distant past that triggers a specific emotion, which probably reflects the same emotion that we experienced when it initially happened.
- #16 So let’s make a small experiment. What is the first emotion provoked by the following scenario. What if I gave you a free fastpass for Disneyland for your whole family? Joy and excitement for the opportunity go there even if you are afraid of the rides or have no one to go with. The joy of winning something is the emotion that definitely takes over all else.
- #17 I told you that emotions can be triggered not only by external stimuli but also by a mental process. So I decided to go through the photos of an album dating back to 2008. And emotions took over upon reaching to this photo. It is the photo that I took just before scoring my first birdie. I had an year in my life when I got to play a lot of golf and for the ones not familiar with the terminology here is what a birdie is. Each hole in golf has a norm of shots, called par, that you have to play it with. This was after my first shot on a par three hole and just before I took the shot to sink the ball for my first and only birdie. My palms were sweaty, the knees were restless and shaking with fear that I missed the shot, but when I heard the ball hitting the bottom of the hole, joy and exhilaration… the very same emotions that I experienced when seeing this photo 7 years later.
- #18 Emotions stick, they become part of the memory. And the strong emotion that a German experienced last summer when their team lifted the world cup in Brazil would take place over and over again when a product triggers that memory in a German mind. Emotions are a powerful tool for strengthening memories and positive emotions that a good user experience create can stick just as well as a precious memory to improve a learning process, or increase our productivity with repetitive task. Emotions make even a boring process fun because of the bonding they create between the system and the user.
- #19 Now that we explained emotions and mentioned systems, you may wonder how does an interactive system employ emotion. First, there are systems that elicit emotions, such as computer games or gaming consoles. Actually the whole entertainment business rotates around the eliciting of emotions and they are its primary offer to the customer. Second come the systems that detect emotion. System that employ data from various cameras and process the image stream to qualify the emotional state of the user. Kinect is a technology that can be employed in such a scenario. And third are the systems that transfer emotions. Emotions elicited by one person and transferred through the system to influence another person at the other end of the network. And the most familiar example of this are the emoticons that we use when messaging.
- #20 So if we take two mobile experiences, a racing game and the Nike fuel band plus app training, there is emotion in both. But while eliciting emotion is the primary target of the game where we celebrate the win and progress to the next track and hate the world for being beaten with a second to have to replay the whole race, it is a different case with Nike. The emotion comes secondary to the training, which is a repetitive hard work, but as a secondary tool it enhances this cumbersome thing making it fun and giving us a competitive feeling to be better than our friends.
- #21 So emotions can be used as a primary tool and that is the case for computer games, when killing the boss brings you joy and feeling of reward and being killed spikes your anger in the short term and motivates you to go and look for revenge. In IMAX cinema it is the same, the 3D experience of a shark coming at us gives us an adrenaline rush and some anxiety but then is the joy and relief when the imaginary danger is gone to culminate with a lot of joy when sharing you experiences and emotions with the rest of your friends.
- #22 And here is how the IDF website uses emotion to enhance my learning experience and stimulate me to complete my profile. There is an interesting case study that you can look for explaining hot the addition of a progress bar for profile completeness as a gamification element on linked in resulted in vast increase of the information that people had in their professional profiles. Here the certificate section uses the concept of badges, that gives me pride for having competed a training and progress on my currently undertaken courses to motivate me to complete it.
- #23 It is crucial to mention that there are positive and negative emotions but it is of no lesser importance to say that the perception of an emotion as positive or negative depends on the context we experience the emotion in. Crashing your car in real life will be a pretty sad experience, but doing so in a game to prevent a friend you are racing with from winning is fun.
- #24 And a slap on the face from your loved one is definitely not a positive thing in real life, but exchanging fists and kick in a game of Mortal Kombat on your console is a fun and jolly experience. What is really important here is that positive emotions in a specific context serve to increase the user satisfaction and improve the usability of the system, or at least the subjectively perceived one, but even if that is the case happy users are more productive users so this sense of positivity indirectly impacts user performance.
- #25 And here are a few animations that a friend shared with me last week when I was preparing the talk and they will be the final topic of my discussion. The animations got me thinking as of what emotions they create and I came up with the term “anemotions”. In this particular sample you can sense the stability and security that Microsoft creates through the use of such animation dynamics in their Uis. A sense inspired by the predictability of there the dot will spot when the animation starts to slow down.
- #26 And animations in Disney are another example. They create this playful emotion by stretching, squeezing and bouncing elements which seems to give life even to inanimate objects.
- #27 Facebook is another universe lying somewhere in-between. There is the predictability of Microsoft on one hand and the playfulness of the spring effect. Emotions that give us a sense of something to rely on that will bring us joy at the same time.
- #28 And mentioning these giants we cannot ignore Google. The animation here is similar to Microsoft’s because of the accuracy and predictability but it is much faster in every aspect. Easing out and in is much shorter and the speed throughout is increased because the want to create an emotion of speed. After all Google’s main business is search and there even a millionth of a second matters. Giving the accurate results as fast as possible is their competitive advantage.
- #29 And here is another joyful example from Looney Tunes that also creates an emotion of something familiar, something that we can trust as we already know. The roadrunner movement. It is specific for that cartoon character and gives us the sense of knowing what it is all about.
- #30 And for completeness let’s not forget about Apple. They have a longer ease in and ease out effect which gives us an emotion of calmness and at the same time security through a way to predict where the dot will stop. As a company inspired by how things happen in our daily life and in nature it is no wonder that we have this gradual increase and decrease in speed, just as it happens when we run slower and faster. With this example I would like to conclude my talk and wrap it up.
- #31 We spoke about the different ways we process information and how we are different from animals. Then we stopped on Norman’s three levels of design as a deeper dive into that processing and after the foundations were established we spoke about emotion and how it is used in digital products. At the end we looked into a few examples showing different emotions elicited by animations that impact us on a subconscious level.
- #32 I would like to thank you all for attending this webinar and will dedicate