 first pitch this talk, I was thinking it was going to be about accessibility, because that's usually what I talk about. As I wrote it, and rewrote it, and rewrote it, and rewrote it, it involved into being something bigger, higher level, and more important than just accessibility. Not that accessibility isn't important. It became about thinking of others and building experiences that we can all be proud of. Some of the slides that I've got have motion in them, and they may trigger motion sickness. This is actually mostly for myself. If you follow me on Twitter, you may have seen me use the hashtag BZY, you may have seen some stickers around. It's a hashtag I'm trying to get some momentum behind for trigger warnings on animations and things like that. If you'd like more information, I have written a blog post on it, and you can get the URL there, or see me later, or just go to my website. I also have a couple of slides in here that talk about some hard things. When we're doing empathetic work, sometimes there's some hard subjects to deal with. There are some references to divorce, death, and some trauma that a few people have experienced based on design decisions that others have made for them. Both of those things, you'll get an additional warning before they pop up. So designing with empathy. Technology should be a great equalizer. It should provide access to things that may never have been available to us before. True innovation raises the quality of life for all people, granting them increased independence socially, physically, mentally, and financially. But if we aren't diligent in our design, if we lack empathy when we build these tools, we leave all of that behind. So to get us started, I kind of want to talk about a couple of terms to get us on sort of the same page. A lot of times when people hear design, they think art. Art and design have a rectangle-square relationship. Design is art. Art is not design. Art is an expression of the creator that may communicate a message. Design must answer a question. Design should answer this question in the simplest and most elegant way possible. Design must communicate a message and solve a problem. Mariana Lopez says that design is a formal response to a strategic question. Design is not always visible. We design databases, algorithms, user experiences, as well as user interfaces. Hello? As designers, our goal is to empower all of our users to be better versions of themselves. We can do this by providing tools and experiences that make them more efficient, more engaged, and happier contributors to their communities. What is empathy? Empathy is listening to others, putting ourselves in their shoes, trying as hard as we can to see the world the way they see it. Empathy is the sharing of emotions, feelings, experiences with the goal of making us deeper, richer individuals and a better society. When we build solutions, 80% of the activity or revenue on things that we build will typically come from about 20% of our users. These are the power users. They know this system in and out. In all likelihood, they're the people you went to to get answers and help you design what it is that you're building. They know the system as well as you, and it becomes really tempting to continue building tools for them because it gives you a direct return on investment. This is a problem. By our nature, we surround ourselves with people who share things in common with us. It makes us feel safe and secure. It doesn't challenge us, and that feels good. It's okay to feel good. But empathetic design acknowledges this. It acknowledges that we have a bias, and then it pushes us to seek out people that will not be yes people so that we may break that bias. You may know her. In one of my talks that I used to give, I said something very similar to this, but she says it so much more eloquently, so I've got her on the screen. Empathetic design works to solve, it works with people to solve problems. It doesn't solve problems for people, but with them. We don't know what we don't know. We don't have all the answers. Let the people you're working with tell you what their problem is, and in return, they will help you find the solution. If your solution, your design, is not inclusive, it is not a complete or an empathetic solution. How do I go about trying to make sure that I am doing empathetic design? It starts with the interview. We need to interview our users, our target audiences, but we also need to make sure that we interview people that may know nothing about what it is that we're doing. We need to interview people that are going to give us push back, that don't understand what it is that we're doing, but they're going to give us insights as we try to answer some basic questions. We need to interview people that break our confirmation bias. Then we create our ideas to try to solve the problems based on these interviews. Empathetic design will then validate every idea that it puts forward. It's going to be done a number of ways. Mostly it's going to be done through user testing. You interviewed a person, came up with an idea that's a solution, you're going to show it to them, and they're going to try to use it. They're either going to succeed because you heard them correctly and processed the ideas right, or they're going to fail, and you need to go back and come up with a new idea. Empathetic design iterates constantly, continuing to refine our solutions. We are human, and we're not going to get things right 100% of the time out the door. Who do we interview? A lot of us will fall into one of these categories. This is not an inclusive list. This is how many I could actually get on the slide. There are some very distinct groups that are not on this list purposely. I often get recognized as being a large part of that. I cross off a few of these. When we're doing our design, we want to start and take a list like this, check off the people that our team already represents. Your stakeholders, you, the other people that are building on things, and people that you've already interviewed. Then take that list of the reduced group and go and find three people to interview that hit at least one of those other groups. You're spreading your knowledge by learning from more people. Every time you iterate, find new people that take up more groups. I say three, you can do 15. It all depends on your resources. Three is a really good number because usually you will find that you learn something from three. So these are the things that I try to think about when I'm working on a project. Content first. If you don't know the content that's going into your solution before you build it, you actually don't understand what you're making. You don't know what you're building. You need to compose the content before you begin working on your ideas because only through that language are you going to come up with a proper idea. And it's okay if your content isn't final. We don't have to wait for legal to actually produce all of the approvals. We can take drafts. We can take roughs and start piecing things together and start ideating. Books don't come out of their author's heads in a final version that's hardbound. They get edited. We can iterate on content as well as iterating on code and design. Empathetic design doesn't contain jokes. Only you and your bros find funny. This is a sure way to drive away your customers. I don't know how. Is it easy to read? Okay. Some of these I know are not going to be easy to read because they're very small images blown up very big. Empathetic design doesn't include completely irrelevant choices that could possibly come across as disturbing. I recently had a water softener installed in my home. And in order to get quotes, I went to a number of websites on people who provide them. This is Culligan's website. So at the bottom of the contact form, this is what's listed on it. And I was really kind of thrown. And it's interesting. I'm like, oh, this is a perfect example for my talk. We need to communicate clearly. Empathetic design makes your content easy to read. Is that easy to read? Okay. Light gray text on white backgrounds, low contrast. These are hard things to actually read. You try to read white text on a black background for long swaths, and your eyes will get tired unless there is no light in the room. But sometimes you can go too much of the contrast. Black text on a white background can cause some people with autism physical pain. So making sure that we're doing accessible contrast, but not over the top contrast becomes important. Empathetic design uses language that a 13-year-old can understand as this is the average reading level. This is from my library, email I got telling me that something that I had checked out was going to be back in two days. I actually don't even know what this means. Pre-overdue notice. I think they're trying to tell me that something is due. I'm not sure. I did get to email and took the book back that day. Empathetic design will also be internationalized so that each user can work in the language they are most comfortable in. This is important because second languages, third languages, fifth languages, are always harder to understand than native languages. Empathetic design doesn't send mixed messages of someone typing and session ended at the same time. I was trying to set up an appointment at the Apple genius bar and I was waiting for an answer and it looked like somebody was typing because we all know that three little dots in a bubble is now typing, right? And yet this was popped up at the same time and I didn't know what was going on. So I thought there were notes of one with this one. There are design choices can actually harm a user. Amy recently wrote an article on flat design and that's where this quote comes from and basically saying that we've gone too far. Empathetic design knows that if we provide small affordances the user will have an easier time understanding the product. Minimalism, for minimalism's sake, produces a higher cognitive load in a user experience and it becomes more difficult to use. Of these four options, all of which are very common and it's kind of hard to see but the first button has got a little bit of a gradient to it. We've got a flat button with a drop shadow. We've got a hollow button and then we've got the word edit. The last one is what we're seeing a lot of right now and yet it doesn't tell us what I can do with it other than the word itself. It's not intuitive. The first two buttons screen click me. The third one's kind of in between. It's like, hey I might do something if you look at me the right way. We want to use small affordances. We don't have to go to big glossy jelly type buttons again but giving us a little bit of an area to say this is where to click to do something that takes this action makes things easier to process. Empathetic design goes out of its way to think of the edge cases to make sure it doesn't harm the user. The next few slides do mention trauma, divorce, and deaths that the users in particular had experienced and how design affected those impacted them during those times suppressed it up that long. So Facebook often suggests my child's therapist to be a friend. I've gotten ads before 34 year old single dads with beards. It's oddly specific. I was 35 at the time. My friend Dave, his wife split this summer and they're gonna be getting divorced and he's had a rough time of it. If anybody's been through divorce, it's not an easy thing to go through. But all the Facebook ads that he gets now and all the Facebook news stories that he's getting fed now are all around divorce. Somebody designed a solution that is going to tag keywords in the things that you post and repost and is going to put more content related to that. This is obviously a negative feedback loop. We need to be careful about what we design. If we are going to design something that is going to bring more information into a person's life, make sure it's the right information. Empathetic design checks the language for a variety of use cases, especially for use cases where the user may enter non-standard or unexpected data. For those of you who may have a hard time reading this, I know it's a little blurry. This is the iTunes Connect portal. David Barnard had a brother Sam and when the first iPhone came out, they stood in line together to get the iPhone and they've stood in line for every iPhone afterwards. Then Sam would also help David with his iOS development and so he was one of his testers. Sam passed away on February 4th of 2015, unexpectedly, young man in his 30s. Recently David went in to go clean up his iTunes Connect portal with the new iPhones and new iOS coming out. It said, are you sure you want to delete Sam Barnard? Not this account, Sam's account, Sam Barnard. That obviously causes a bit of trauma for somebody who's still grieving. Empathetic design knows that a user may have had a bad year and don't want to be reminded about it. If you don't know who Eric Meyer is, he is a very prolific writer on CSS and an amazing designer and the last year he's been dealing with a daughter who was dying of cancer and this year Facebook decided to do a year in review and he kept ignoring it. When he'd see it on other people's he wouldn't engage in it and then one day he comes home, he logs in to Facebook and is still in the midst of his grieving. They actually used a picture of his daughter. So if anybody knows of the color Rebecca purple, this is Rebecca. And if you don't know what I'm talking about, you can do colors in hex values or you can use keywords. If you put in Rebecca purple, it is now a standard that you are going to get a purple that was this little girl's favorite color. They pushed this picture of Rebecca and he was very smart and he wasn't a smart idea. Subsequently he's gone to Facebook and given them talks about why they screwed up. But empathetic design would have figured out these use cases. Empathetic design doesn't assume anything about its user. Designers ask before building systems during the user setup or they leave it out and the icons don't mean the same thing to everyone. Icons are societal based skeuomorphic images that not all people have been exposed to. Empathetic design uses icons in conjunction with words to avoid confusion. People with autism will not get some of the social constructs around simple things like the male icon. One of these is reset and one of these is refresh. They're both in the top row. Can you tell me which one's which? I don't know and I put them in there. The one underneath the phone, that means your airplane seeking reclines. Who knew? Empathetic design does not care about the gender of your spouse. It's 2015, get with it, folks. Empathetic design does not ask for personally identifiable information if it is not absolutely required. More importantly, empathetic designers will challenge the stakeholders when the stakeholders ask for more demographic information about their users. Empathetic design lets the user specify their name without having to pay a penalty for it unless it is legally required. You're filling out passport information, you've got to go with your legal name. If you're filling out your tax information, you've got to go with your legal name. Social media shouldn't be asking what your legal name is. It should be asking what do you want people to call you. Empathetic design knows that gender, sexuality and race are vast and confusing. People may not be one thing versus another. They may be combinations. Empathetic design lets the user be themselves without adding or creating stress and anxiety. Empathetic design makes it extremely difficult to make mistakes. I know this one will be hard to see. Empathetic design knows that a user's name could be anything and therefore can't throw an error. Real user, Jared Ficklin, goes by Ficklin on Twitter, posted this of him trying to create an account in a Microsoft system. The error says, please choose a name that doesn't contain profanity. I went and bothered to figure out what could have possibly been the regex that was used. They basically were looking for anybody that was going to use the word that sounds a lot like Fick but uses other letters and might possibly throw in a special character or alternative letter so that it may be frack or something along that lines to try to get past the sensors. Obviously, they went a little too far. I think I said this before. Empathetic design lets your users use their native language to fill out forms. Please enter a first and last name using letters only. Tell that to Prince. And last time I checked, they may be Arabic but they're letters. Empathetic design knows that not all people in English-speaking countries speak English. Empathetic design gives the user control of their experience. It gets out of the way of users with the sysit technology and lets them have complete power over their solution. Empathetic design knows that not all users have mice or they may not even have touch devices. They could be using screen readers, Braille displays, closed captioning, eye tracking or natural language interfaces. The next couple slides have a little bit of motion in them telling you now they make me sick but I'm especially prone. Empathetic design learns the user. If the user doesn't need the navigation labels and they can get away with just the icons, let them have it. If the user collapses the navigation so that they only have the icons, next time they come in, it's automatically collapsed. One more motion. Who's gotten a 6S or S plus? How do you like a 3D touch? Okay. Empathetic design doesn't make the user ill with fancy animation just for animation's sake. It makes me extremely sick. Empathetic design lets the user control things. So if I want to turn off that animation, I should be able to turn off all of the animation. Apple with iOS 9 introduced new animations. I can no longer turn off and so using my phone makes me sick again. Empathetic design still works on the oldest technology and adds features as the technology gets better. Just last week, sitting in a distillery in Madison, a woman sat down next to me. She put her phone on the table. A lot of people do. And I happened to notice it was a pink razor phone. I don't know the last time I saw a flip phone, much less the razor. And so I struck up a conversation. Turns out she actually uses it to go online. We'll see checking movies, schedules, calendars, things like that. But she uses it to go online. JavaScript doesn't run on it. So now if you think about all those heavy frameworks that everything's being built in, we're leaving users behind. And empathetic design doesn't do that. Empathetic design works for anybody that chooses to use our systems and our solutions. Empathetic design makes badass users. And I don't know if there's any more badass than Charlie's there on Fury Road this year. So that's my talk. Thank you. I don't know if there's questions. I don't know if we have time for questions. But I will be around. So please find me. I'm happy to talk about it. I do have five minutes. Okay. All right. Let's see. We have a question over here. So the question is where's the boundary between opinionated design and not forcing users to make choices and allowing them to have some control? I think that comes in the guided workflows kind of concept. If you eliminate the ability for them to make mistakes in what they're doing, you eliminate, you force them through a workflow, but you don't force them to reveal something they're not comfortable revealing. So when you go and sign up for Twitter, it says, hey, you know, what's your user name going to be? It doesn't force you to say, give me your real name. You know, Facebook does. When you then, once you've done that part, you go in and it requests you to follow some people so it can fill up your Twitter feed pretty quickly. Facebook asks, you know, hey, can you tell me who some of your friends are? So that's sort of the opinionated, but at the same time, it's looking at taking two different things and figuring out that what does the person, you know, how does the person want to be called or talk to, what is that approach going to be, and it doesn't force them into doing something that they don't want to do, that's going to make them uncomfortable. Does that make sense? We can guide them, but we can still offer choice at the same time. Sorry. Yes. You're paying me $120 an hour. You could have gotten away paying somebody else to build you a UI for $90 an hour, so why are you throwing away the $30? Those are not my actual numbers, but you know, it's just an example. All right. Back to Utah. Thank you.