Emotional Design (ED)

As well as theories of emotion itself, raw emotion, there are also theories that come within the human-computer interaction area of the nature of experience. Based on experiences that are outside the digital domain and then used in order to understand the experiences that we design within digital products.

McCarthy and Wright, John McCarthy and Peter Wright, have written one of the more influential books about this. It’s certainly worth reading. And they talk, drawing on a lot of previous literature as well. They talk about four threads of experience. On one hand, the *sensual thread*, the sensual thread, which is that immediate visual, aural, tactile experience of something. The emotional impact of that, the way that changes the way you perceive things.

Then there's a sort of *deeper emotional level*, when you start to, that immediate response becomes something that you see in terms of relationships, in terms of your feelings about the world. Next, there's a point of – not necessarily next in series, but at a different level – is a sense of the way in which these integrate. And they call [them] the *compositional level* .

So that perhaps the thing that you've experienced is in some way sort of tying into past experiences. So you perhaps have smelt some cooking. You think, Oh, you know, this is lovely stuff, but it's going to be part of the meal we're about to have. But the meal we're about to have is because it's perhaps some anniversary or birthday, which ties into the whole sense of the family that goes around that.

So it becomes an integral part of something bigger. But then there’s also, there's a *spatio-temporal thread*. This is happening at a particular time in a particular place, and that also influences the nature of that experience. So the birthday party that's done in two places because you're remote and can't connect might be very different from the birthday party, perhaps held in the home you were brought up in or something like that.

So, where something happens, when it happens, also changes the nature of the experience. I will note too, quickly here, that when McCarthy and Wright talk about "emotional", they're of course, using "emotional" in the day-to-day sense, although they’re using it in their own specific sense. Not that use of "emotion" that psychologists use, which is the pure physical body reaction, which is closer to their sensual levels. So... you do have to realize that when you read literature,

these wordings do differ; be careful to understand what the person who's writing is actually using these words for. They then have a *sequential view* of an experience as well. So you can sort of think of a particular experience, like having that meal, in terms of stages. So there's an anticipation stage, “Oh, you know, we're going to have this meal together.” Perhaps you start to smell food and well, that’s part of the experience, part of anticipation.

You then have the experience itself. And there are these precognitive things like just being together, seeing the person, tasting it. And then the complex things that come with it. The sense of being community, perhaps a nostalgia if you’re perhaps remembering, perhaps somebody who used to be with you and is no longer with you. Then after the meal, you might look back at that and think, “Ah”.

It might have been a terrible meal, you might have had an argument, or you might look back and think, “Oh, that was a great experience.” And it becomes part of the stories you might tell in the future, the part of the way in which you see all those people, the people who were at that meal together. It connects into their past lives, the way you've seen them in the past and your whole experience of them. And then you might tell somebody else about, “Oh, I had this lovely meal.” Or you post onto Facebook and say, “We've had this fantastic meal.

It's nice to have been with X again.” And perhaps you talk about, "We were brought up together, we went to university together.” Something like that. So it suddenly becomes part of something bigger that may then feed into your future experiences.

Let's look at the mobile UX design checklist. This is a checklist that you want to internalize and keep in your head as you're designing. First of all is – are you making sure that your controls are *consistent*, to the operating system and to the application that you're developing? The second one is *proximity* – that closeness of items mean that those items are in relationship. So, the grouping, for example, like that means that these items are the same and the pattern there  

is the 'OK / Cancel', for example. The third one is *visual hierarchy*. So, visual hierarchy is a concept from graphic design that says put the most important thing at the top and bring it down to the bottom. Generally, visual hierarchy is a reminder to put the important tasks up front on your screens,

and so the user doesn't have to navigate, doesn't have to play and look for them. And the fourth thing on the mobile UX design  checklist is *contrast*. Contrast and emphasis – that's a graphic design issue. If you're using very light colors, if you're using light gray. I mean, go outside and test your design in the sun. Go out, go into a dark place and test your design – see what it looks like. Turn your brightness down. I've interviewed users who actually use their mobile phones with the brightness turned to the minimum – I could barely see the phone.

And I said to this user, "Can you turn your brightness up?" because I was actually videotaping and trying   to get the phone in. He said, "No, I normally keep it down there just to save battery." So, what does your design look like on a low lighting, you know, where the user has deliberately turned the lighting down? That's another thing to test and make sure that  it works for the eye but works for the lighting situation. And then, the fifth one on the checklist  is *intuitive icons*. To me, if icons are not intuitive, then there's a problem with them – they're not usable.

So, when we say 'intuitive', it means no understanding – a user should look at an icon and know what it does. Otherwise, the icon maybe shouldn't be there; it shouldn't be used. That's my general rule of icon usability. And that applies to desktop as well. And then, finally, on our checklist – not to be missed – is *making the main task apparent*. That is huge and crucial – that's our task-oriented design approach. If you take one thing away from this checklist, it's that sixth element there

as one of your most important ones. So, let's go through some examples of these, then – *the consistency of controls*. So, you see here in this example, you have all the options side by side there. The in-call screen is a good one in the sense that you have this action, it's occurring – you know – it's a live call,

so how do you present and display the information? And these guys have decided to go with consistency – all the controls and the icons are the same size and the same positioning. That does make it easier to see. But it's not necessarily the right answer from a layout perspective. You could exaggerate one of those items, for  example. Conference calls doesn't have the same priority as mute does for me.

To me, I'm muting more than I'm conferencing, for example. So, we can see some 'at a glance' data and call to actions as well in this example. So, the second one on the checklist is  *proximity of controls*. You'll see proximity being used here. This is an iPad app – it's an EMR system, Electronic Medical Record. And the proximity we're seeing here is that

the grouping of that clinical information as buttons is all together, the vitals at the top and the patient history down at the bottom. You also have use of the left channel. Notice the left channel. Those buttons are huge because they're used when the patient is being interviewed, so the physician or the nurse needs to tap those very quickly and enter that data as part of the intake so they can get on with the exam.

Here are some different examples of visual hierarchy at use. You have the Yelp app on the left. And notice the the reviews, really important, at the top, right, so you can see the name of the – I think it's a pub, and the reviews, and then more information further down the page. The second app is from Open Table. Again, content first, so the name of the location and then the call to action is actually further down the page,

from the perspective of being able to easily tap those in that tappable area. And, of course, on the third example we've got the task up front and the main important things – prices and performance being one of the key tasks. It's like right there. Some other features further down is they've decided to go with a strict visual hierarchy: the important stuff at the top and then further down. So, our fourth item on the checklist is *using  colors for emphasis*.

So, remember we talked about making navigation *pop*. So, you see some examples here of – the Fandango app is where you can see you're looking at the 'in theaters', and the other one here, the other app, you can see that you're on 'what's popular'. Even though the contrast is a little light there, the color is still highlighted nicely in the icon at the bottom on all three of these apps, so that at a glance you can tell where you are, what you're looking at,

and be able to pivot from there. So, our fifth one is *intuitive icons*. Some  examples here: GasBuddy is one of my favorite   ones because it's task-oriented and the icon is actually used as the starting point. So, 'find gas stations near me', which is almost what you would say to Siri on an iPhone as well. So, that's a nice clever interlink between the app and the command, the way you think about it linguistically, but notice it's like very clear: the icons are not overdone.

All these examples have really nice clean icons. The second screen is when you go into GasBuddy – that's a list of results. And then the gas stations that appear  again with a nice visual intuitive icon there. And then, finally, *make the task apparent*. And so, making the task apparent is – the challenge there is that you don't want navigation, so you want to keep the user focused

on the *content*, you want to keep them focused on the *flow* of their experience. And this is a case where a pie menu can be very helpful or those contextual menus to know what the task is. A pie menu, by the way, is a left-click item, so it's not a right-click – it's a left, a left tap, if you will. And it brings up your options, your task options on a wheel and allows the user to navigate.

I'm guessing the reason you're watching this video   now at this moment is because you've got  an interest in human-computer interaction.   However, that doesn't perhaps mean  you know exactly what it is. Maybe you   just guessed. Or you just think it sounds like a  good idea. So what is human-computer interaction?   Well, it's got two sides to it. On one side,  there's an academic discipline which is about   studying the way people interact with technology,  and in particular the computer technology.  

Nowadays, computers are in virtually everything.  It's quite hard sometimes to tell the difference.   But then there's another side to it, which is the  design discipline and I think probably quite a lot   of you watching this video will be from a design  side – you're interested in user experience design   and interaction design. One side of Human-Computer  Interaction is the academic discipline and the   other is the applied design discipline, which  is about how you create interventions with  

technology that make a difference to people. So,  one side is studying that computer technology   and how it has an impact on people  – so the way in which it works.   The other is more about saying that, how do  we practically change that academic study,   that interesting information we have  about the way people work, into action? The two of course interact, so on  one hand the professional experience  

informs the academic discipline. And you'll  probably notice that I use lots of examples,   some from my own experience, some from  stories I know about from elsewhere.   I use those from all sorts of times in order  to inform my general understanding. Because it works the other way around. The academic  understanding, that more generic understanding,   feeds back into the design discipline too. So, if  I understand how people interact with individual  

computers, how people interact together in a group  when they're using technology, how environments   change the way people are – if those environments  have technology in. Then I'll be in a better   position to be able to design things effectively  for them. So, these two are intermingled. So, if you want to understand Human-Computer  Interaction, if you want to be part of this, what   kind of things would I like you to know about?  What would I hope you would learn from studying HCI?

Well, first of all is bare facts. Facts about  the nature of computers. There's facts about the   nature of human psychology, physiology – a whole  range of things – social interactions. There are facts that you can read in a book, and I've got  my own textbook that I produced on this. And there are many, many others. Also on the web there are  vast amounts of material. So, in some sense the  

facts are easy to get and then you will get some  of those. Now hopefully when I talk about   HCI you get some of those facts. However, perhaps  there are other things which are more important. The second thing I hope you learn from HCI  is about analysis. It's about looking at a   situation and trying to make sense of it:   what's going on there. Because if you understand   a situation then you can apply the facts to  the situation.

So, it's about analysis, about picking some things apart. Picking the problems  that you're having or picking the opportunities apart. And then of course, once you've done that  analysis, together with the facts and knowledge from that, you can then do a design job. So  you can bring these things together in order   to synthesize them, in order to create something  that will be a solution to somebody's problem. But perhaps more important almost  than all that: obviously you need  

the knowledge side and you need the skills to  do it. But perhaps the most important thing   within HCI, particularly if you think of it in  terms of moving on into design, is an attitude   of mind. An attitude that focuses on people that  sees real users, real situations as center place.   That is seeking to understand people  however different they are from you. And to do things which are good for them and  makes sense in their lives. So, that's sort of what  

our purpose is in a way, particularly as we move  from just studying people to actually saying, "How do we design something for them?" So, what kinds of things might you want to know about these? And the sort of things I'll often talk about in  this context? One set of things is about the basics of design, you know. So, this goes from sort of the processes that people use when they're doing design and you may be using yourself, to  methods of evaluation to understand the nature  

of human experience. However, undergirding that  is fundamental, undeniable, underlying knowledge and theories. Some of those, particularly  about the human, about human perception,   cognition, emotion – that also leaks into how  to understand the way computers work as well,   to the extent that it's important from the  point of view of their interactions with people. And then from a sort of practical point of view,  

you also need to think about and  be aware of the issues that happen   when systems are implemented. Again, that's partly  about the way they're implemented in the computer,   but also the way in which they get deployed into  the world. This will vary from place to place,   but some of the general principles of how you make  sure that this wonderful system that you designed   actually gets used by people in the real  world and makes a real difference to people.

Do you know this feeling? You have a plane to catch. You arrive at the airport. Well in advance. But you still get stressed. Why is that? Designed with empathy. Bad design versus good design. Let's look into an example of bad design. We can learn from one small screen.

Yes, it's easy to get an overview of one screen, but look close. The screen only shows one out of three schools. That means that the passengers have to wait for up to 4 minutes to find out where to check in. The airport has many small screenings, but they all show the same small bits of information. This is all because of a lack of empathy. Now, let's empathize with all users airport passengers,

their overall need to reach their destination. Their goal? Catch their plane in time. Do they have lots of time when they have a plane to catch? Can they get a quick overview of their flights? Do they feel calm and relaxed while waiting for the information which is relevant to them? And by the way, do they all speak Italian? You guessed it, No. Okay. This may sound hilarious to you, but some designers

actually designed it. Galileo Galilei, because it is the main airport in Tuscany, Italy. They designed an airport where it's difficult to achieve the goal to catch your planes. And it's a stressful experience, isn't it? By default. Stressful to board a plane? No. As a designer, you can empathize with your users needs and the context they're in.

Empathize to understand which goals they want to achieve. Help them achieve them in the best way by using the insights you've gained through empathy. That means that you can help your users airport passengers fulfill their need to travel to their desired destination, obtain their goal to catch their plane on time. They have a lot of steps to go through in order to catch that plane. Design the experience so each step is as quick and smooth as possible

so the passengers stay all become calm and relaxed. The well, the designers did their job in Dubai International Airport, despite being the world's busiest airport. The passenger experience here is miles better than in Galileo Galilei. One big screen gives the passengers instant access to the information they need. Passengers can continue to check in right away. This process is fast and creates a calm experience,

well-organized queues help passengers stay calm and once. Let's see how poorly they designed queues. It's. Dubai airport is efficient and stress free. But can you, as a designer, make it fun and relaxing as well? Yes.

In cheerful airport in Amsterdam, the designers turned parts of the airport into a relaxing living room with sofas and big piano chairs. The designers help passengers attain a calm and happy feeling by adding elements from nature. They give kids the opportunity to play. Adults can get some revitalizing massage. You can go outside to enjoy a bit of real nature.

You can help create green energy while you walk out the door. Charge your mobile, buy your own human power while getting some exercise. Use empathy in your design process to see the world through other people's eyes. To see what they see, feel what they feel and experience things as they do. This is not only about airport design. You can use these insights when you design

apps, websites, services, household machines, or whatever you're designing. Interaction Design Foundation.