Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Design For Users, Not Yourself: UX Lessons My Mom Taught Me41:19 with Justin Young
As UX designers, we love to dive right into new technology, from navigating through a new UI or parsing jargon-filled instructions. But to many of our users especially the less tech-savvy ones adopting new tools and changing workflows can be a stressful experience. It's important to remember to design for the users not for ourselves. Users like Justin's mom, Donna, who's been running creative businesses online since 1995. In this session, Justin will leverage his experience as his mom's webmaster and share his strategies for designing interactions and writing copy that will work for users of any skill level. He'll look at common pitfalls that less-than-savvy users fall into when learning new workflows as well as principles that empower all users.
[MUSIC] 0:00 [APPLAUSE] >> All right, thank you. 0:15 Can everyone hear me? 0:19 Perfect. 0:20 I'm Justin, I'm here to talk to you today about Designing For Users, Not Yourself. 0:22 I'm gonna be sharing with you some lessons that my mom taught me about UX. 0:28 So, first of all, who am I? 0:34 I'm a UX architect at Media Temple. 0:36 Media Temple is a web hosting and cloud management company 0:38 that puts a lot of emphasize on designing usability of our products. 0:42 I take a lot of pride in taking what is a pretty technical field, 0:45 which web hosting and domain registration, and 0:49 I take a lot of pride in trying to make that easy as possible for our users. 0:52 I do UX research, UI design, information architecture and in the past 0:57 I've done front-end dev, so I like to describe myself as a full-stack designer. 1:02 This is my third year attending Future Insights Live. 1:06 The first two years I just attended, and this year I decided it'd 1:09 be fun to stand up in [LAUGH] front of a hundred people and talk. 1:13 In addition to working for Media Temple, I've had a side gig for 1:17 the last 15 years as the Chief Technology Officer at my mom's house. 1:20 >> [LAUGH] >> So 1:24 you might all be wondering what exactly does my mom have to do with UX? 1:27 If you're here you're probably wondering that. 1:33 Well I like to think that my mom is patient zero for my UX practice. 1:36 I've been watching her and helping her run creative businesses online for 1:40 almost 20 years. 1:45 She uses a whole suite of technology and services. 1:46 She's had a lot of success with technology but 1:50 I've also seen a lot of the pitfalls and challenges that she can run into when 1:52 she's using a poorly designed interface or a poorly thought out user experience. 1:58 So I've learned a few lessons from her challenges that I incorporate into my UX 2:03 practices and I'm gonna be sharing those with you today. 2:08 So, I was lucky enough to grow up around computers. 2:14 I've been playing around on the Internet since I was ten. 2:18 I've been plain Oregon Trail here when I was [LAUGH] really young, and 2:21 fixing Mary's broken arm. 2:26 I've had a lifetime to internalize strategies to learn, navigate and 2:28 use new technology. 2:32 In fact, probably everyone here in the room can sympathise with me when I say 2:35 that, as professionals we spent about 8 hours a day on our computers or phones and 2:39 way too much time outside of work, playing around with our devices. 2:44 We love new technology, we love learning new interfaces, 2:48 adopting new tools, we like downloading the latest app that we hear about. 2:53 It's fun for us and that's why we've chosen it to do it professionally. 2:56 That's why we get so excited. 2:59 And that's why we're excited enough to come here, to a web design and 3:00 a development conference. 3:03 We are well versed in tech jargon. 3:04 We know what a hamburger menu is. 3:07 We know that a directory is the same thing as a folder. 3:09 We open up iTerm or Console, which is something most people never do on 3:12 the computer; but to us this is really fun. 3:17 We like this stuff; but to lots of users, especially less tech savvy users, 3:22 like my mom. 3:26 Adopting tools and workflows is a challenging and stressful experience and 3:27 it comes with a lot of anxiety. 3:30 So, with that, we need to remember to design for users and not ourselves. 3:33 We're not only designing for power users or tech pros, like everyone in this room, 3:40 our users can come from every skill level. 3:46 And I have to think about this everyday at a web hosting company. 3:49 Not only are tech professionals are our only customers, but 3:53 we have a huge, very diverse clientele. 3:57 We have agencies and 4:02 studios with their own clients who may not know technology that well. 4:03 We have, small businesses, restaurants, studios, like mom and pop shops. 4:06 So, they might not be as well versed in tech jargon or as tech literate as we are. 4:14 So I think about this idea every day. 4:21 So while web hosting is highly technical, technical 4:25 people aren't our only customers. 4:30 The lessons I've learned from my mom helped me think about these things, 4:32 I'm gonna be sharing those with you. 4:35 So, this is what we're gonna do today, this is what I'm gonna talk about. 4:40 First, I'm gonna talk about my mom, as a user. 4:43 I'm gonna give you a little of her background, 4:45 her background with technology and most importantly the challenges she runs into 4:48 when she adopts new workflows and new tools. 4:53 Then I'm going to be sharing the UX principles that she taught me. 4:56 And finally I will share a few case studies where I put these into practice. 4:59 So this is my mom, Donna. 5:04 She is a creative professional, online business owner, and 5:09 self-described Luddite. 5:12 She uses a lot of technology but she says she's afraid of it. 5:14 This is some of her work. 5:18 She is a trained and award-winning fine artist. 5:20 Oils, pastels, ceramics, watercolors, graphic design, interior design, 5:23 rendering, silk painting, whatever that is. 5:28 She's done all of it. 5:31 She's a professional artist in the true sense of the word. 5:32 She, as long as I can remember she's also been a self-employed business owner. 5:37 She's worked freelance for 5:42 commercial clients like Boeing, she worked as an interior design consultant. 5:43 She had a business hand-painting custom tiles and sinks for clients. 5:48 Currently she's an oil and pastel artist. 5:53 She has painting with multiple private collectors and galleries nationwide. 5:55 So this is her life, her business is art. 6:00 Since the mid-90s she's had a number of businesses online. 6:04 She was was prescient enough to own her own domain name back in the mid-90s, 6:08 which still blows my mind to this day. 6:12 Not a lot of people own their own domain name or can even buy it. 6:14 It's already taken. 6:17 So I'll keep hitting this point, but she is an early adopter. 6:20 She sees the value in technology. 6:24 She saw that it would be valuable to own her own domain name, and 6:26 set up online presence for her businesses. 6:29 This is her first website. 6:33 That not bad for like 1997 or 1998. 6:36 It's a pretty sweet table based layout. 6:39 And she's got, I don't know if you can read that text there, but 6:42 she's got like a FAQ, she's got an about page, a gallery. 6:46 And she even has a page for order and pricing, because she had to facilitate 6:50 primitive version of ecommerce. 6:55 She's been taking orders online since she had to use one of these guys, and 6:58 that's a credit card slider for anyone who doesn't remember those. 7:02 So before PayPal, before Amazon reselling, before 7:06 there were tools to easily facilitate that, my mom was taking payments online. 7:09 People were emailing her their credit cards, their CVV number and 7:14 she was sliding it into a little carbon copy with this machine. 7:17 So, she's been doing ecommerce [LAUGH] a lot longer than 7:20 some of the people in this room. 7:23 Her entire business relies on technology. 7:26 We recognized most of this icons. 7:28 She uses Google Drive, Dropbox Evernote, 7:31 Gmail, and then one password, which I'll tell you about in a few seconds. 7:36 She uses these services to manage her online web presence. 7:40 She's used whole host of pretty technical tools. 7:47 She hosts a site at Media Temple, domain registration with Go Daddy. 7:51 She's built her own site with Virb. 7:54 She has a WordPress site. 7:56 She's used Network Solutions to first get her up and running in the mid-90's and 7:58 she uses Facebook for all of her social networking. 8:01 These are the devices she lies to use. 8:06 So with all that in mind, I like to think of my mom as a user persona 8:10 that I think about actively when I'm designing. 8:13 She's a great subject in usability tests. 8:17 Every time she picks up a new workflow, or tries out a new tool, I sit with her, and 8:19 I observe her using it. 8:24 And I see the trouble she runs into. 8:25 The successes she has. 8:27 And I like to think that she really reveals what works and 8:30 what doesn't work with an app. 8:33 Importantly, she thinks it's her fault for not getting it. 8:35 If there's a poor user experience, she thinks somehow she's deficient for 8:37 not understanding how it works and I don't think that's fair. 8:40 And for that reason, I think she's a really good litmus test for 8:44 whether a product upholds its end of the bargain. 8:46 And by that I mean she's taking the time and the energy and 8:48 the resources to learn your app, or learn your product. 8:52 And if in return it's not easy to use, 8:55 the product is failing her, and it's not working out for her correctly. 8:59 So, she has a love/hate relationship with technology. 9:05 Like I said, she's always eager to adopt new technology. 9:09 She's an early adopter. 9:11 She's excited to set up all this apps that I just showed you and 9:14 most importantly she knows the value of incorporating new tech into her work flow. 9:17 She taught herself Photoshop, 9:21 which still impresses me because that looks crazy. 9:24 When she uses technology, this is what she wants to feel like, 9:29 she wants to feel like everything is under control. 9:32 That her business and her life online is working extremely well. 9:34 She wants to feel like Neo in the Matrix. 9:40 But way too often when she uses technology she feels like this. 9:41 >> [LAUGH] >> Despite her successes with technology 9:46 she says she still doesn't get technology and admittedly it scares her. 9:50 Adding new tech to her workflow is a stressful and 9:55 anxiety-inducing experience for her. 9:59 I get these questions all the time, and 10:02 I'm sure anyone who's done tech support for their parents get them as well. 10:04 What if I erase everything? 10:07 What if I get locked out? 10:09 What if my stuff disappears? 10:10 I don't know what stuff she's worried about disappearing, but 10:12 I always get this questions whether it's email or passwords or notes in Evernote. 10:15 And she's worried because for her the stakes are high, like I said, 10:20 her livelihood, her businesses, what she does for a living, 10:24 they all rely on these apps and all this technology that she's investing in. 10:28 To her the stakes feel incredibly high. 10:32 In order to feel comfortable in trusting her business with all these tools, 10:36 she needs to understand and get the tools. 10:40 So, how does this work in practice? 10:45 How does my mom adopt a new workflow? 10:47 Or a new app? 10:50 We have a really good example here with one password. 10:51 About a year ago on Christmas day, I helped my mom set up one password. 10:54 And this is what we're doing. 10:59 And so, I watched her, I sat with her, 11:01 and I basically treated like an user ability study. 11:06 I really wanted to learn what she found easy, what she found hard, 11:09 what she was worried about, what she Set up 1Password. 11:12 And for those of you who don't know, 1Password is a password management tool. 11:17 It's a lot like Dashlane or LastPass if you're familiar with those. 11:20 But basically, you just need to remember one password. 11:24 Super simple, and it encrypts a list of every other password and 11:27 online profile you have. 11:31 And you can sync it Through the cloud on all your devices. 11:32 It's a super simple tool, really, well, not simple, 11:35 you'll see in a second, it's a useful tool, I use it all the time. 11:37 So this is her process for adopting a new tool, she starts by identifying 11:44 the problem, and usually it's a problem critical to her business. 11:49 She'll say to me, Justin I'm having a hard time keeping track of all my passwords. 11:52 I tell her, ok well, I have a couple ideas, I personally use 1 password, 11:57 I really like 1 password, it, I can give it a ringing endorsement. 12:01 I can help you get set, I can help you get it set up and 12:05 they have a lot of documentation to help you out. 12:07 She says ok that sounds awesome, she's excited to try it. 12:10 She sees the value in incorporating that into her work flow. 12:13 So she eagerly adopts 1Password as her solution. 12:16 But the next step then, she has to understand how 1Password works in 12:21 theory before she will start trusting it. 12:25 So I show her this, in fact I drew a little diagram for her. 12:29 I said, okay here are all the elements you need to make one 1Password work. 12:32 You need a single strong password, you need Chrome, 12:35 which is her browser of choice. 12:37 You need Dropbox, and you need your devices, in this case it's her Macbook. 12:39 And of course you need the 1Password app on all your devices. 12:44 Now, I start explaining all this to her, 12:48 how everything's backed up, everything syncs. 12:51 And then she starts to get worried, she starts to get nervous. 12:54 This is where this question comes up. 12:57 She's worried, understandably, that somehow, 12:59 in the cloud, whatever that means, her passwords are going to disappear. 13:02 She's going to lose the list somehow. 13:05 I explain to her how it works I draw her a little diagram and 13:09 assure her nothing's gonna happen to her passwords. 13:13 And she feels a little better. 13:18 So the next step in her process is to actually learn 13:18 how to operate one password. 13:21 So I sit with her, she downloads it, she installs it. 13:25 And we pull up, we open up one password, and here it is. 13:28 This is the UI. 13:31 I start explaining to her, I say okay, so here on the left, 13:32 these are all your categories that your passwords can fall into. 13:36 Here are some folders, we have tags, that's scary. 13:40 We have security audits, that's really scary. 13:45 Here's a list of all your identities and then here's the actual identity for 13:48 Amazon. 13:52 You have your username, your password, here's how strong your password is. 13:53 You can change your password, you can edit it, you can generate a new one, 13:57 you can save a history of your passwords in, so 13:59 this is where she starts getting nervous again. 14:03 She worries, what if I erase everything, and what if I get locked out? 14:06 She's worried that, in operating the tool, and not understanding how the UI works, or 14:09 clicking a wrong button, or messing up something in her 1Password Chrome 14:13 extension, she's worried she's going to have a catastrophic failure. 14:17 So I explain to her. 14:23 Well, let me head to, I help her figure out how it works. 14:26 I sit with her and I walk her through the program. 14:29 I watch her experiment with the UI. 14:33 I answer any questions she has, but generally I watch her try and fail and 14:35 figure it out, and eventually she gets it and 14:39 then she uses it like a pro and even today I see her using it. 14:43 and that just comes to practice, so now she has hundreds of passwords in her 14:47 one password, which is pretty impressive to me. 14:51 So what can we learn from my mom's challenges as a user. 14:57 If you want to improve our UX thinking, we need to identify and 15:01 fix what challenged her. 15:05 She eventually got it, which is awesome, but we want the process to be easier and 15:07 I want the process. 15:11 Whenever I design anything and whenever my mom uses anything, 15:13 I don't want as much stress to be included. 15:15 So let's figure out where she was challenged. 15:18 She didn't have a problem identifying the problem. 15:20 She knew that she needed a password manager, she was excited, 15:26 she eagerly adopted, she was excited to Download 1Password and 15:29 use it to get started to learn how to use it. 15:33 But then when it came to understanding how it worked or 15:35 learning to operate 1Password, that's when she got nervous. 15:38 That's when these questions came up. 15:41 So I wanna focus on this section right here. 15:44 How do we take users from eagerly adopting our app and then getting it. 15:47 How do we make that process as seamless as possible. 15:51 How do we make it easy for them to understand how it works and 15:54 how it operates. 15:57 So another matrix slide. 15:58 This is how we want users to adopt our app or 16:03 product we want them to be excited about using it. 16:07 We want them to download it. 16:12 We want them to make it an integral part of their workflow. 16:15 We want to feel like Laurence Fishburne in giving them the red pill, saying, 16:18 this app will blow your mind and change your world. 16:21 And we want them to go to getting it. 16:24 We want them to pick up the app, use it, and then we want, hope our app or 16:26 product is so seamless and intuitive that they become a pro and 16:31 it becomes an integral part of their workflow. 16:35 But unfortunately for users like my mom fear gets in the way. 16:38 And I gave you few examples of that. 16:44 That's when she started asking these questions. 16:47 So, where does the fear come from? 16:50 I really think it comes from uncertainty. 16:55 So, for example, if an interface is been designed in a way that creates 16:59 uncertainty, ambiguity, or the possibility of negative outcomes, 17:02 it's gonna make it really hard for a user to fully adopt your products. 17:05 They're going to be afraid to use it, they're going to be hesitant, 17:11 they're going to be confused. 17:14 They are going to on board and then maybe never use it again. 17:15 And that is not what we want. 17:20 We want them to feel like this. 17:22 We need to design and write copy that creates certainty, predictability, 17:25 and control when our users of every skill level are using our products. 17:30 They need to know that everything's cool when they're using the UI and 17:35 they know exactly what's going to happen when they click the okay button in a wordy 17:37 dialogue box. 17:40 An example of a very poorly thought out dialogue box that 17:45 will create fear, uncertainty, unpredictability. 17:51 I got this example from Jared Spool, he tweeted this out. 17:54 And in case you can't read it, this is a dialogue box that 17:56 comes up in the new photo app for Mac, the latest update. 18:01 And this is from Apple. 18:05 It's, if you're trying to sync your iCloud Photo Library across multiple devices, 18:09 you might see this dialog box. 18:14 And it says, [LAUGH] verbatim, 18:16 this library contains items that need to download from iCloud Photo Library. 18:19 To download the complete library, delete the incomplete items. 18:23 The set this library as the system photo library in preferences and 18:27 enable iCloud photo library. 18:31 This will disable ICloud photo library on any other devices. 18:33 This hardly makes sense to me and the only reason I have any idea what 18:38 it's saying is because I'm intimately familiar with how the cloud works and 18:41 how file management works in the cloud and how Apple usually approaches these things. 18:44 But to a lot of users, my mom in particular, 18:49 this isn't gonna make sense and it's gonna freak people out. 18:52 This is exactly where this question's gonna come up. 18:55 And instead of stuff it's gonna be photos. 18:57 Photos are valuable to people, and they don't want to lose them. 19:00 So it's gonna stress them out. 19:05 Oh, okay. [LAUGH] It's going to stress the matter if 19:06 it doesn't work, or they are not sure what to do. 19:09 So there are few things wrong with this dialogue box here. 19:13 There is no button to immediately resolve the issue, there is no link for help and 19:17 it doesn't even try to define any of these terms that I am just seeing now for 19:21 the first time It really sounds like it was written by a tech expert for 19:25 another tech expert. 19:30 And only tech experts will be able to fully decipher what's going on here. 19:31 And ironically, this is an Apple product. 19:36 They're supposed to be the most user friendly product company out there, but 19:39 this isn't very user friendly to me. 19:43 Users of every skill level and every walk of life derive real value from 19:46 our products and experiences, and we need to be conscience of that. 19:51 We can't just say, they'll figure it out, they'll deal with it, 19:57 they'll Google search it. 20:00 They'll spend precious minutes in ten different Google 20:01 searches trying to figure out what any of those terms mean. 20:04 It's really and I really believe this, 20:08 it's honest to make technology's value obvious to users. 20:09 We need to do that through thoughtful user experience and thoughtful design. 20:15 And if you get one thing out of my talk, it's that we need to practice empathy and 20:20 fight disdain when we're designing products. 20:24 We really need to take the time and think about our users, put ourselves in our 20:25 users shoes and don't take for granted that they know what we're taking about or 20:30 they have the same background that we do or they have an expertise that you only 20:35 get by spending eight hours or more on a computer every day. 20:40 So how do we do this? 20:47 How do we actually design for users, not ourselves. 20:48 Well, I'm gonna share with you the actual principles my mom taught me. 20:52 These are the lessons that I've gained watching her using technology, 20:57 helping her out being her webmaster. 20:59 And these are pretty simple but I consciously think about 21:03 them whenever I design anything, actually, at work or in general. 21:08 I really, I think about them, 21:15 I'm conscious of them to make sure I'm designing for users of every skill level. 21:16 So the first principle is make instructions logical. 21:22 And I know that sounds simple or easy to do, but it's really not, you'll see. 21:26 So this is an actual example that I ran into with my mom. 21:31 I wanted to help her install Chrome. 21:37 Again, she was excited about downloading it. 21:39 She was eager to use it, so I helped her out. 21:42 She got on to the Chrome website and she hit the big Download button. 21:44 It starts downloading, and then she gets to this screen. 21:48 So I'm ready to get going, I'm ready to help her open it up and 21:52 set up all her extensions, but she pauses here, and I'm a little curious why. 21:54 And it's a little hard to see there, but I'll read it in a second. 22:01 I ask her, what's wrong Mom, what doesn't make sense about this? 22:05 And she says oh I thought I wasn't finished installing it yet. 22:12 I thought that's what we were doing. 22:17 And in fact yeah, the first thing it says here is, thank you for installing Chrome, 22:18 like the process is over. 22:22 It's not over. 22:24 So when I really start reading this text here, and 22:26 reading the instructions, I realized that they're actually out of order. 22:28 Everyone in this room probably looked at this and 22:31 figured out pretty quickly what it was trying to tell us. 22:35 But for someone literally reading these instructions, 22:37 they are not in the correct order. 22:40 This is the order they actually go in. 22:43 You'll see, down there, the first step, the step we're on, is download. 22:45 That's what we're doing right now. 22:50 Then install, then run. 22:52 But the first thing it's congratulating you on doing is 22:54 actually finishing the process, installing Chrome, which hasn't happened yet. 22:57 Then the next thing immediately after that, it says after installing, you can 23:01 right-click on the Chrome icon and select keep in dock to access Chrome easily. 23:04 The next thing it tells you on this very important page telling you how to install 23:09 their product, 23:13 is giving you an optional thing you can do after the whole process is complete. 23:14 And finally, if your download doesn't work or if your download does not begin, 23:19 please click here to retry. 23:23 So it's all out of order. 23:25 That's the order should go in in, and 23:26 didn't help her understand what's going on, it wasn't logical. 23:28 This is actually what it should say. 23:32 Thank you for downloading Chrome, because that's what you're doing right now. 23:33 If your download does not automatically begin, please click here to retry. 23:37 That is in a logical, linear order, in the order that it actually goes in. 23:42 And so users reading this will have a better idea of where they're at, and 23:46 what they need to do next. 23:50 There weren't any labels before, so 23:52 step one, step two, step three, that helps a lot. 23:54 Label things like move Chrome to applications folder. 24:00 There wasn't any text there before. 24:02 And finally open and run, 24:04 they told us to just run Chrome once we were done installing it. 24:07 But there is no run command in Mac OS X, it's actually open. 24:09 So if you're gonna tell a user to run, they're gonna look for, and 24:15 my mom will do this, she will look for the run command. 24:18 And she won't find it she'll get discouraged. 24:20 This is an example of a page a lot like this that I saw that worked really well. 24:25 This is Photoshop, I downloaded this recently and I was really happy to see 24:30 this page because it basically did exactly what I showed you in that previous slide. 24:34 Says now downloading, here's what to do next. 24:39 The thing I like about this is it labels every step, one, two, 24:41 three, and then it actually shows you an image, 24:46 explicitly of what the user's going to be doing. 24:49 So if they know they are on step two, they can see this little image and say okay, 24:53 I've got my Adobe Creative Cloud window opened up, I see this little red box here, 24:57 I know what to do next. 25:00 So instructions are for users that actually need instructions. 25:03 And you need to be linear and explicit when you're giving instructions. 25:07 That was the first principle, make instructions logical. 25:14 Second one is be direct. 25:17 Again, this is easier said than done. 25:20 After we installed Chrome, she doubled clicked on the little dot DMG 25:24 on her desktop and this window popped up. 25:30 And again, everyone in this room probably looked at this and said, okay, 25:33 I know exactly what's going on here, I know what we need to do. 25:36 But my mom paused and looked at it and said I'm not sure what to do next. 25:38 And I asked her, well what do you think it's telling you to do? 25:45 And she says I don't know. 25:46 There's the Chrome icon and then there's a folder with an A on it and 25:48 a light blue background behind it and that wasn't telling anything. 25:53 What would really make this work is if they were just more direct. 25:58 Add a simple label. 26:01 Move Chrome to your applications folder. 26:04 And then actually label the applications folder. 26:06 It kind of blew my mind that they removed a label to a critical part of this step. 26:08 And it was not helpful to the user and it was completely indirect. 26:13 So you should not be clever when you need to be specific. 26:19 And technical instructions should be technical. 26:22 And that's not to mean you need to be overly wordy or overly complex. 26:24 But if something has a name, you need to use that name, you need to reinforce 26:29 the technical term, so the user knows exactly what's going on at all times. 26:34 Finally, that was be direct. 26:41 Finally, last point, and I think it's the most important, is anticipate anxiety. 26:44 This dialog box did not anticipate the anxiety of the user. 26:52 It didn't, there's no button to immediately resolve the issue, 26:58 there's no link for help, and it doesn't define the terms. 27:02 If we just added those things, it would make it so much easier for 27:06 the user to figure out what's going on here. 27:09 Have a little, learn more link, give them a resource to help them figure out what's 27:11 going on here, because other people probably have the same problem. 27:14 The original version, Delete. 27:21 The two options they gave you were Quit or Delete incomplete items. 27:23 Quit is just giving up, so 27:26 let's just abandon everything they say in this dialog box. 27:27 But Delete incomplete items in only half of what the user needs to do. 27:30 This is almost like an engineer was on a deadline, and 27:36 he said, okay, well the user can figure it out. 27:41 Or let's just do half the step for the user. 27:45 But, you know, it might be easier and less work for 27:49 developers to actually make a button that does everything that the user needs to do. 27:54 To actually go through every step to update your system photo library and 27:59 preferences, and enable iCloud Photo Library. 28:03 But users don't wanna do extra work. 28:06 Users just want a button that says, do it for me. 28:07 So if the user has a question, you need to answer it, or offer a resource. 28:12 If you anticipate that the user's not gonna know. 28:16 What something means, define it for them. 28:18 And most importantly, if they need to do something important, just help them. 28:20 Give them a button that does it for them that just takes care of all the steps. 28:24 Because we have the power to do that as developers and designers, 28:28 we can make flows that are easy for people. 28:30 But let's do that extra work. 28:33 Let's not be disdainful of the user. 28:34 So these were the principles. 28:39 Make instructions logical, be direct and anticipate anxiety. 28:41 So I'm gonna show you a few case studies of how I actually put 28:48 these principles consciously into practice when I work. 28:51 So my first example is Media Temple has a WordPress hosting platform. 28:56 We have a product that makes it easy to install and 29:03 manage multiple WordPress blogs. 29:07 And while we have a lot of highly technical people who use this platform, 29:10 agencies freelancers, WordPress developers. 29:14 A lot of WordPress developers really like the platform. 29:21 We also have a lot of non-technical users. 29:25 My mom in particular, or a mom and 29:28 pop shop who wants to set up a WordPress to advertise their, 29:32 to have an online presence cuz they've heard WordPress is good. 29:36 So, we wanted to redesign. 29:40 What I'm going to show you is an on-boarding flow for 29:45 this WordPress platform. 29:48 Once they've purchased the server, 29:49 we make it easy to set up your WordPress blog, basically. 29:53 So I'm gonna show you, I'm going to walk you through that onboarding process. 29:59 And I'm going to tell you how I use these principles. 30:02 So this is the first page in the onboarding flow. 30:07 Basically this is where we ask users to set up their, what's called a WordPress 30:12 administrator account, because if you're not familiar with WordPress, 30:16 you need a WordPress username and a WordPress password to Log into your 30:19 WordPress blog and update it, make changes, add other users, add a blog post, 30:23 update galleries,stuff that users do all the time. 30:28 This is what it looks like after they've input all of their text and fields. 30:33 So I want to highlight a few pieces of what we do here, 30:41 the ways I've thought about my principles when I was helping to design this. 30:45 So first, at the top, the text there says, 30:53 first create your WordPress administrator account. 30:57 You need this to log in to your WordPress admin dashboard. 30:59 I like that because that's me being direct. 31:04 I'm explicit about what everything is called. 31:07 WordPress administrator is a concept that they need to know and that we constantly 31:10 need to reinforce, because it's separate than their Media Temple account, for 31:14 example, or any of the other, it's a very specific term that we want to reinforce. 31:18 And then the next sentence I say, but don't worry. 31:26 Once you create the account, 31:29 you'll always be able to access it quickly from your Premium Wordpress control panel. 31:30 Right there I'm trying to anticipate anxiety. 31:36 I'm saying hey, don't worry. 31:38 I know you're setting up a WordPress admin account. 31:39 This is another username and password combo you have to remember, don't worry, 31:44 we're taking care of all of this for you, we will remember it so 31:47 you don't have to worry about it. 31:50 We included check boxes after they filled out all the fields. 31:55 Super simple, but it's an easy way to be direct and anticipate anxiety, 31:59 to tell the user don't worry, this is correct, 32:03 you've inputted something that works, and you can move onto the next step. 32:05 Finally, the password requirements. 32:09 We are being direct and anticipating any 32:13 questions they have about what do they need to put in their password? 32:18 They're not gonna type in a password and then be told after the fact that they need 32:23 to include three exclamation marks, and two symbols, and two emojis. 32:27 We tell them straight up and 32:32 we highlight what they've completed as they're doing it. 32:33 And like I said, these are simple, but 32:37 a lot of times you'll see user interfaces that don't include just, 32:39 they don't take the extra time to do the little things like this that tell the user 32:42 that everything is okay and that everything's cool. 32:46 So the next page, once they hit the Continue button, 32:52 is we ask them do you want to use a custom theme with your WordPress panel? 32:56 And I really like this page because it's extremely direct. 33:01 It's just YES or NO, that's a Boolean question. 33:06 We give them two options, and we explain fully underneath each option 33:09 exactly what's gonna happen if they go down either of those paths. 33:13 So, underneath the YES button we tell them, 33:17 use a custom Media Temple design theme or upload your own. 33:21 And under the NO button, we tell them just use the default theme for now. 33:27 We tell them exactly what's gonna happen when they hit those buttons. 33:30 We're anticipating their anxiety. 33:33 We're trying to make it as clear as possible without being overly 33:35 complex or overly wordy what those options mean to them as a user. 33:41 So we're being direct there. 33:47 And then my favorite part is the text. 33:49 My little red laser isn't showing up. 33:52 My favorite part is the text underneath, the tiniest text, 33:53 and it says, you can always change this later from your WordPress dashboard. 33:58 I like this because we're anticipating their anxiety. 34:02 I always have a question when I'm setting stuff up in an onboarding. 34:05 I always wanna know if I'll be able to change the options I set up later. 34:07 I just wanted to let the user know that, yes, you do have the option of 34:12 changing your theme later, in case you're not too familiar with how WordPress works. 34:15 So when they get to this page, they shouldn't have any question about what 34:19 either of those two options means for them. 34:22 So this is the final page. 34:29 Let's imagine they hit the NO button, they want to use their default theme. 34:30 This is the confirmation page at the very end of the onboarding flow. 34:38 So the copy we use at the top here, I like that we say, they're almost there. 34:46 We're anticipating their anxiety, we're saying, hey, 34:52 don't worry, we don't have too many more steps to go, this is it. 34:54 And it's also very direct. 34:58 And we tell them straight up underneath, please review the information below and 35:03 click the Finish button to create your site. 35:06 We tell them exactly what's gonna happen, there's no anxiety there, they know 35:08 what's gonna happen when they hit that big blue Finish button at the bottom. 35:13 We also try to create a stress-free experience by adding edit information, 35:17 or the edit buttons at the bottom in case they do realize something's wrong. 35:22 We don't want them to feel anxious they mess something up and they don't know how 35:27 to get back so we put the, even though we have links at the top that take you 35:30 between all the steps, we give them another link right before they finish. 35:33 And finally, I think my favorite part of this page is the Finish button. 35:36 That is as direct as possible. 35:40 It tells you exactly what's gonna happen when you hit that button. 35:42 You're finished. 35:45 It doesn't say Continue. 35:46 It doesn't say Submit, because you're not really submitting anything. 35:47 To the user, they're finishing this process. 35:51 It's direct and logical. 35:55 So, here's one more example I wanna show you. 36:01 When users want to, 36:06 when Media Temple customers want to call in and talk to customer support, 36:09 they usually need to authenticate their ownership of the account. 36:15 Basically, we want to make sure if they're making changes to the account, 36:19 they have access to do that. 36:23 And that can be a time consuming process over the phone. 36:25 So we wanted to give users an easy way to authenticate. 36:28 If they go into their account center, which is our customer dashboard, 36:33 they have the opportunity to generate a support PIN. 36:37 And that's just a four-digit code that, once it's generated in the account center, 36:41 they can just call in, give that four-digit code, and 36:46 they're automatically authenticated as a user on the account. 36:49 It saves the user a lot of time and headache, and 36:53 it saves our customer support agents a lot of time and our customer 36:55 support department a lot of money in that lost time. 37:00 So this is a pretty simple example, but I put all of my principal sees here. 37:07 I say, I tell them exactly what a support PIN is. 37:16 I say, a support PIN is a four-digit number that you can use to verify 37:20 your identity when contacting support. 37:24 I'm as direct as possible there. 37:26 I don't want there to be any confusion about what a support PIN means. 37:27 I don't them to land on this page with just a title that says, 37:30 generate a support PIN and a button that says Submit. 37:35 That's not gonna do it for them. 37:38 If they are trying to contact customer support, 37:39 that means something's going wrong. 37:43 And we need to make sure that their experience is stress-free, and so I 37:45 want them to know exactly what's happening with their customer support experience. 37:50 After that I tell them, you can generate a support PIN below, it is valid only for 37:56 the account holder, and only for a maximum of 90 minutes once generated. 37:59 So there shouldn't be any question about 38:04 how long you can use the support PIN for, who it's valid for. 38:08 I'm trying to clear up all the questions in a couple sentences so 38:13 they're armed with all the tools they need in order to use this PIN correctly. 38:16 This whole paragraph is direct, it's logical, and most importantly, 38:24 it's technical without yeah, it's a paragraph but 38:29 I'm confident that they're getting all the information they need without being overly 38:32 complex or cryptic, or trying to be clever at the expense of being direct. 38:36 And finally, I tell them you can generate a new support PIN any time below. 38:44 So I'm anticipating their anxiety. 38:49 Saying, hey, 38:51 don't worry you have a chance to do this again, it's not a one-time thing. 38:52 Don't freak out about the time limit. 38:55 And finally, that call to action there that says Generate PIN. 38:58 Again, that's as direct as possible. 39:02 It doesn't say Submit, it just says generate PIN, 39:03 because that's what they are gonna do when they hit that button. 39:05 This is what it looks like after you've generated the support PIN. 39:11 And again, that thing is as direct as I could have been. 39:15 Your support PIN. 39:21 Bam. Four numbers right there, 39:22 and I remind them once more the PIN expires in 90 minutes, 39:24 it's only valid for this user, and this is the account number it's associated with. 39:27 So users shouldn't be calling up the support center with misinformation 39:32 about how the PIN works or how they should use it or what they can access with it. 39:37 We're telling them straight up all the limitations for this system. 39:41 And finally, again, you can generate a new PIN, because super direct, 39:47 that's what it is, you're generating a brand new PIN. 39:50 So those are my UX principles, and how I put them into practice. 39:56 Again there's takeaways. 40:00 They're make instructions logical, 40:03 be direct, and anticipate anxiety. 40:07 I have these principles in my head whenever I design anything. 40:18 I know they seem simple and straightforward, 40:22 but they've actually helped me make sure that what I'm creating is user-friendly. 40:25 I call it the mom test. 40:29 You should definitely think about people or 40:31 users in your life that you know are using a product or 40:33 you would like to use your product, not just highly technical user,s or 40:36 not just the 90% of users you think are your target audience, but 40:41 definitely be thoughtful about every skill level that might pick up your app or 40:45 might download your product and want to use it. 40:49 And that's it. 40:54 So I wanna say thanks to everyone. 40:56 Thanks to Future Insights and Sarah and Ellie for helping me get this set up. 40:57 And yeah, if you wanna contact me, contact me at Twitter, or that's my website. 41:02 Thanks! 41:07 [MUSIC] 41:09
You need to sign up for Treehouse in order to download course files.Sign up