Recommended
More Related Content
Viewers also liked
Viewers also liked (18)
Similar to Emotion and usability
Similar to Emotion and usability (20)
Recently uploaded
Recently uploaded (20)
Emotion and usability
- 1. Infragistics Propietary1 Emotion & Usability
- 2. Infragistics Propietary2 Hi I’m Stefan UX Architect at Infragistics IDF local leader
- 4. Infragistics Propietary4 What makes us human?
- 7. Infragistics Propietary7 For us humans they work together Two types of information processing Affective processing Cognitive processing Stimulus Stimulus Perceive React Relate Imagine
- 8. Infragistics Propietary8 Norman’s three levels of design Visceral – unconscious perception of appeal Behavioral Reflective
- 9. Infragistics Propietary9 Norman’s three levels of design Visceral Behavioral – unconscious perception of task appropriateness Reflective
- 10. Infragistics Propietary10 Mental model The model each user creates for the utilization of the product Mental modelConceptual model Product appearance
- 11. Infragistics Propietary11 Norman’s three levels of design Visceral Behavioral Reflective – conscious envisioning thinking
- 12. Infragistics Propietary12 Illustrating the levels when buying shoes Visceral Behavioral Reflective
- 13. Infragistics Propietary13 Illustrating the levels with a smartphone purchase Visceral Behavioral Reflective
- 14. Infragistics Propietary14 Emotion Distinct and subjective feeling state in response to external stimuli or a mental process
- 17. Infragistics Propietary18 Experience over and over again
- 19. Infragistics Propietary20 Emotion in UIs Elicit Detect Transfer
- 20. Infragistics Propietary21 Emotion in UIs As a primary or a secondary expression tool
- 21. Infragistics Propietary22 Emotion in UIs As a primary or a secondary expression tool
- 22. Infragistics Propietary23 Emotion in UIs As a primary or a secondary expression tool
- 23. Infragistics Propietary24 Emotion in UIs Positive and negative emotions depend on context
- 24. Infragistics Propietary25 Emotion in UIs Positive and negative emotions depend on context
- 25. Infragistics Propietary26 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/
- 26. Infragistics Propietary27 Disney offers squeeze, stretch and bouncing to convey playfulness and give life to objects. Anemotions Image credits: http://www.davidmcgavern.com/ company-animation-styles/
- 27. Infragistics Propietary28 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/
- 28. Infragistics Propietary29 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/
- 29. Infragistics Propietary30 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/
- 30. Infragistics Propietary31 Apple offers calmness and predictability by mimicking acceleration and deceleration as in nature. Anemotions Image credits: http://www.davidmcgavern.com/ company-animation-styles/
- 31. Infragistics Propietary32 In short Information processing Norman’s three levels of design Emotion Emotion in digital products Anemotions
Editor's Notes
- 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.
- My name is Stefan and I work as a UX Architect for Infragistics Bulgaria. At Infragistics I work restlessly to improve the usability of our interface element libraries but my passion for UX also led to the facilitation of UXify – the other big conference for UX Design in Bulgaria and the wonderful collaboration with Lucrat and UX Sofia that led to the first UX month in Sofia with four events this June starting with UX Sofia today. And also part of this UX month is our local IDF meetup where I serve as a local leader of the community in Sofia and Bulgaria.
- So first of all I would like to ask the first row to give me a 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.
- 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!
- 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.
- 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.
- 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.
- 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. This wooden board is appealing, and the olive wood that was used, and the nice curves make me want to buy it. And the smell that comes from the freshly baked biscotti in the jar tingles my appetite despite that I just had a huge lunch. The visceral level means that we crave certain things that own specific qualities that appeal to us.
- 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.
- 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.
- 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.
- Looking at a common (for the ladies) experience such as buying a new pair of shoes, here is how the three levels of design impact our decision process. First we scan the universe of shoe models displayed in the store… and pick 15 pairs that visually appeal to us. We try those 15 pairs to come to the conclusion that only a few fit us well because some are too wide and others too narrow. And being left with those few we imagine how we would look like if we owned each pair… how we would walk the street and the confidence they would gives us for looking good. Or how they would suit the blue dress that we got last week. Then the chosen pair of shoes is taken to the counter and we happily leave the store.
- 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.
- 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.
- So let’s make a small experiment by shouting out your emotion of the following scenario. How would you react if I gave you a free conference pass for UXify? There you go the quickest one to react got his free pass for the event.
- So let’s make a small experiment by shouting out your emotion of the following scenario. How would you react if I gave you a free conference pass for UXify? There you go the quickest one to react got his free pass for the event.
- But don’t be sad all of you can use this special discount of 20% for a purchase through the Eventbrite ticketing system, just use the uxsofia20off as a promotional code and the discount will be applied. Now let me share with you an emotion.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- I would like to thank you for being an amazing audience and hope that the rest of the conference elicits an emotion of joy and happiness in you. Hope to see you in two weeks at UXify.