 Emotion drives us to actions. It makes us feel connected. And emotion is an essential part of being human. In one day, we can laugh, we can cry, and we can sigh. Our range of emotions is incredible, and our face and our body show these emotions despite often us trying to not do that. We need emotional responses. We need those connections. I often like to think of us as a primate needing a hug. The world is kind of scary when it comes down to it. And we need those connections because we feel these wide range of emotions. And by recognizing these emotions in other people, we recognize them as human, as same, as connected. And the world of robots actually recognizes this. It recognizes our need for emotional feedback, for that connection. This is actually PEPA, and it's a creation designed to be the first humanoid robot to live with humans. The thing is, PEPA isn't actually task based though. It's a social robot that's able to live autonomously, converse, recognize, and react to your emotions. And beyond being super cute, and we have to admit PEPA is incredibly cute. PEPA is actually an illustration of how we connect through emotion. An emotional companion is actually our perfect companion. Unfortunately, the web has never been very good at being human. It's given us that connection we crave. Interactions are cold. They're clinical. And it has in the past felt like the digital and the web has been created for robots rather than actually the humans that created it ironically. We've created this world where we don't actually thrive and where our interactions are encouraged to be the worst that we could ever make, and that's not good. Creating an interface that has compassion, that cares for the human using it. This is how we go beyond those robotic interfaces that just leave us cold and frustrated. If love and compassion in the real world aren't luxuries, then we have to ask ourselves why are they online? As we live more and more of our life interfaced, we need to create experiences that are just as empathic, just as connected to being human. And it's really important before I go too much further to take a kind of pause and talk about ethics. When you start diving into emotions and how people work, you have to be really, really careful and remember you are dealing with humans. Handle with care, dealing with humans. That should be your motto. A lot of this comes down to any interface in general, but it's even more important when you're trying to make these connected interfaces. The fact is, and we have to be real about this, I'm not gonna be selling you a magic bullet today that is known instant solution to this. People see through manipulation and then they never trust a game. That's just part of human nature. It's about being empathic to all that it means to be human in all cases. We're a small subset of humanity, but look around the room and look at the variety in this room. Look at the variety in this word camp and then pan out and consider all humans. We're a messy varied lot and that's the brilliant part about the human race. When you are creating emotional interfaces, you should be creating ones that work for as many people as possible. It's about graceful empathy and that's about ensuring that all users possible get a great experience, an emotional experience, a human experience. Animation has for years touched the heart of us. Studio Ghibli to me show mastery in each of their films as far as being a sense of delight goes. This is an advert they did. This cat we can relate to, it's beyond cute, right? There's a sense of delight in its playful batting of the butterfly and movement. It's delightful to watch and it fills you with joy. And there's a lot we can learn from animation and whilst all our interfaces aren't and shouldn't be animated, it's a powerful tool and it teaches us things we can even apply to the static. So Disney actually created a book which I'd encourage you to look at called The Illusion of Life Disney Animation. And in there, they set down the 12 basic principles of animation. And these are principles designed to produce an illusion that characters adhere to laws of physics. But it goes beyond that to emotional timing and to character appeal. And I feel when dealing with emotion, we can probably boil this down to just four. And you can also apply these to animation but you can apply these to static elements as well. The first of these is anticipation. This prepares for an action and focuses attention on an object which you can also do with static. This could be useful to indicate the start of an emotional response or even arresting emotion. And then you have timing. This is kind of the top one, I would say. It's a critical for conveying emotion and creating a mood. And it can also convey a character's personality. It can also affect the flow of a website, how you move through the interface, the timing, it gives a different mood and a different feel. And then you have exaggeration. The reality is there's a lot of emotions that are exaggerated. This is gonna be one that you need to be very careful with to play with, particularly even in static elements. But if you want to convey certain things or make attention, then you need to be doing exaggeration. And then finally, you have appeal. In order for us to relate, we have to actually find something appealing as part of human nature. You could see this if you did like role-playing games as the charisma role of your character. We have less of this if you don't want that kind of appeal. If you think of it in Disney terms, maybe the villain with the twirling moustache, you don't want to have appeal to that. But it can also be seen as captivation. And captivation is incredibly important when we're creating interfaces. So I'd like to share today some literal experiments I did. And I did the experiment to see if I could have three buttons have emotion. I tried to have an angry, a happy, and a sad button. Kind of the setup I did for this was super, super simple. I had some really basic CS animation and I asked only five people because I wanted a kind of small test. What emotion the button was actually experiencing. And I gave them a selection of emotions. The reason I did this is I didn't want 10 different words for happy, for example. So what I did is I did a gift search because all good things start with gift searches, I feel. And from that gift search, I felt that it was gonna give a common language for the words happy, angry, and sad. And for happy, I found the minions because to me there's nothing so happy as much as a minion. I don't know about anybody else. And what I did, I started to think of the key frames and how it would actually look in a graph. Where would it start, where would it peak, where would it trough? And I thought the happy button would be so keen to be used, that kind of in a minion, that kind of bursting with happiness, they just kind of everywhere. I wanted this button to react on load. I didn't want it to wait for an interaction. I imagined it would be just so happy that it just couldn't help itself but to do an animation. And this is a happy button. The good news is that five out of five people without even asking them any pauses really, got that it was happy. So happy button was a complete success. And the feedback I got was interesting considering I based it on a minion. People said that it seemed rushed, excited, or anxious too. Bit like a minion, right? And then this was the angry button. So for the angry button, I drawed on the language of anime. Anime has a very particular language, so different, so you can even have something called a cat mouth to express whether someone's feeling catty, for example. And I drew on that language and I found this gif and I wanted to kind of mimic that with the button. I wanted there to be this first kind of grr with the button and this kind of then more violent shaking. And I thought it would look something like this. The angry button I thought would be a bit more like when you poke someone awake. I wanted that kind of feeling, so like it was interacted with. So I wanted it to be fine on its own, in its own kind of grumpy corner, and then when it was reacted with to kind of have that reaction. And it would hopefully give you that feedback of anger. That was what I was going for. And then this is the angry button. Again, this went pretty well, so we're two down, it's going pretty well. And the feedback was this that also it was annoyed, which was kind of what I was going for with that kind of grr get off. And this is great. Things went a bit funny when I went to the third one, which I will now share with you. So the final test was a sad button. Oh, I found this animation of Pikachu and I decided that you couldn't really get much more sad than this. And after I finished making all noises, I decided to look at the graph for this. This is what the sad graph would look like. I wanted to mimic that sobbing cry of Pikachu. I thought that sad would be fairly consistent. Sadness is, it was just going there. And I saw this would be a reluctant button. I started thinking of how it would almost appear to sigh. And it would be on click, but it would be reluctant and it would be this kind of definite time delay. And here is a sad button. Now, unfortunately, this is where it got a little bit tricky and I learned an awful lot about emotion and conveying it. The feedback I got was that people were kind of very reluctant to say that it was sad. I didn't get that kind of instant feedback that I got at the other emotions. And people said it was stoned. Sleepy, reluctant and bored. So it's kind of sad turned out to be really hard, but it taught me an awful lot in doing this experiment and I would always encourage people to do experiments like this. I've also done some experiments on copen that I'm kind of going to flit over today, but I'd encourage you to check out of a coughing button, which is basically a button going and trying to be noticed. And also about how I can add, calling them zen inputs to have a feeling of calm on a website. And all these kind of things are great because it's teaching me how to then take into my interfaces. But little experiments like this are fun, but how do I then take them into my interfaces? How can you apply that? It's not just about being cute and cute's great in all contexts. Disney final, the UI things, really isn't a great approach to design. You don't need anime eyes or bouncing animation to make real connections. It's about balance and it's about learning from those experiments. There's this thing that happens to us as a human when we see a smile. There's these mirror neurons that kick off and the simple act of smiling makes you smile and feel happier. As you smile, endorphins are released in your brain and we also notice a smile more than we notice any other emotion, which is kind of a pretty cool fact about humans. We seek out these emotional feedbacks, even more so in that flat and responsive digital world. And we can learn how to do that with our interfaces. For example, Slack. Slack shows in a way, icon, so you get more information about that person. And it's good for both users. You're going to recognize that they're away and the user doesn't feel they have to respond. Things like this and Delight are a powerful force. Delight leads us to an emotional connection. I tend to think of this as a moment of squeed because quite frankly, that's the noise I make when I see these lovely little things. There's what I'm talking about, these little UI touches and experiences that make you feel cared for, that make you feel someone's crafted the experience. But the problem is with Delight. It's what I actually think of Delight, someone else might not do. And that's where we have to be incredibly careful to create experiences for all of our users and not make a moment of facepalm. Being compassionate is a big part of being human and when an interface does this, that's incredible. Seeing the errors before they're kind of there and making sure it creates a better experience. So MailChimp has this really great safety message that really shows that extra care. It's fun but it also serves a great purpose. And then as you go through, it celebrates each stage because MailChimp's your friend. They've got your back, they're there with you and they're going to celebrate. And that's the kind of interfaces we should be creating. I like to think of this as helping UI, thinking of your site as a cheery, friendly character rather than kind of a robot spitting out those error messages. Just like Vimeo here, as users use the website more, they can level up, they can learn tool tips and they become better at using your interface. When an interface is more human, it allows us to be more human. Often our interactions aren't really great online as I said earlier. And when it comes to communication, the reality is the web isn't the best place for us. When we do give people the ability to communicate and express, we usually give them this, an input field and potentially and often a button that just says the word submit, quite often in capital letters. I don't know about you but I wonder how anyone ever has a positive communication online when faced with this. If they're not this, we simply give a like button or a thumbs up. Now if you talk to me at this word camp, that's not how I'm gonna interact with you. If I agree with something you say, I don't just do that in front of your face. If I don't agree with something that you say, I don't just walk off. That's not what happens as humans. We're better than that. Facebook reactions is one recent exploration into stepping towards more real communication and I say that word very culturally step is only the start of what we should be doing. It conveys a spectrum of human emotion and a way for users to express themselves. The way this was done is really interesting as it does feel natural. It kind of works. It doesn't feel that it's a new interface at all and it allows people to communicate as humans and this means they communicate more effectively and this means we have more positive emotional experiences online which really we have to all admit is something the web needs. Emotional interfaces, it's not just about cute mascots, adorable logos and animated showcases. The real connection happens when you look at even the smallest interaction from an impatient button to an eager input field. Emotion is a powerful thing that you can use to connect to a user and it's important in every aspect of the experience. Just like we do, our interface is needed to react in a human way. We're humans creating for humans and we need to remember that a lot more. More and more time is spent for an interface and we need it to therefore be more empathic, less robot, so we can be the best humans we can be. By having empathy and interface, it can actually avoid negative feelings, nurture and create a positive interaction rather than the opposite which often happens. And this amazing thing happens when you actually create an emotional experience, you create a powerful experience. So thank you, my slide deck's up here.