 Welcome to Web Usability on a Budget. How's everyone's afternoon going? Well, decently? Great. All right, good to hear. My name is Tim Thomas. I'm a senior UI consultant with HeadSpring here in Austin. And you can tweet me at Tim G. Thomas and follow or read my blog and TimGThomas.com. And today I'm going to talk to you about Web Usability on a Budget. So I like to start off by trying to ask what usability is. And unless you're actually working in some sort of usability capacity, a UX designer or one of those other similar titles, it can be very difficult to define exactly what usability is. So what I like to do instead is try to ask what's not usable? What makes software not usable? And when you talk to people that use software that they find unusable, that I would say have poor usability, they use words like frustrating. The system's not doing what I expect. I think it's going to do X and it actually does Y. I am now frustrated as a result of this. Sometimes they'll use the term intimidating. It's giving me too many options. I don't know what I'm supposed to do next. There's just too much stuff there. Sometimes they might actually call it confusing. There's too many different things to do in my normal flow for me to be able to keep track mentally of how to get from thing one to thing two and so forth. And so all of these things kind of combine to make software unusable in some capacity. So I have a question for you guys. Anyone who would like to answer what have you used in the real world and this doesn't even have to be software. It could be anything whatsoever. You have found confusing, frustrating, difficult to use, unusable. Doors? What about doors? It makes them unusable. So you get like the push plate but it says pull on it or something? Okay, fair enough. Doors. Oh yeah? Class registration. You could probably have just said class registration. I don't know if ACC's is any better or worse than any others out there. They all seem pretty terrible. Dishwashers. Tell me about dishwashers. We actually have a dishwasher at the head spring office that if you don't completely close the door, it beeps every 10, 15 seconds nonstop but nobody actually stops to push it in. They just let it keep beeping. Dishwashers are very unusable. That's true. So we can take all those and say these are things that are unusable. These have very poor usability. And so usability then would be the antithesis of all of that stuff. So think about software or dishwashers or class registration systems or doors that aren't those things. And that actually is some semblance of usability. And so what we like to hear when people are discussing software or other systems that we like to think are usable are words like pleasing. So this isn't frustrating. This is pleasing. It's fun for me to use. I enjoy using this system. Instead of intimidating, the system is inviting. It's inviting me to do something very interesting and unique and experiment around. Instead of confusing, some of these systems are very clear. It's very obvious what you're supposed to do next. Now at first, it seems like this process would be very, very difficult. And in many cases, it is. But hopefully by the end of this talk, you'll find that it's not so much if you approach it from a certain direction. So if you look at some really large projects, you'll find people that belong to different design disciplines that help with this particular process. And so here you'll hear job titles like Information Architect or User Advocate or Human Factors Engineer. And then you get the designers of every possible variety. There's visual designers. There's UI designers. There's UX designers. There's so many different job titles that there's actually a job title generator that you can go online and just say, give me what my job title should be. And it'll come up with a really nice one like Principal Mobile Front-end Design Rockstar. And so these large projects have all these different disciplines working together so that they can achieve what they call usability. But what about small projects? Well, small projects can still be usable, obviously. We all use very simple software systems throughout the day that are quite usable. But they don't have the budget for these huge disciplines. You can't hire 30 different interaction designers and user advocates to do what you want. And so what we can pull, what we can glean from these disciplines are design principles. And these principles guide these larger disciplines and help produce usable software. And of course, if you are in a small project, instead of all of those myriad of job titles, you end up with job titles like developer, maybe software developer. If you're really, really focused, you might be a web developer. But everybody always has the same sort of title. Everybody can help with this process. And everyone can use these principles to build usable software. So how we do that is similar in the manner that we would put a jigsaw puzzle together. There are procedures in place. There are certain ways that you approach jigsaw puzzles that people have kind of agreed. This is kind of a decent way to build a jigsaw puzzle. Anybody want to take a guess at what one or two might be? Alright, find the corners and edges first. Maybe before that, what might happen before that? Just get a new puzzle from the store, dump it out on the table. Put all the colors together. That's a great one. Make sure they're all face up. So we have these procedures and we can use these to build puzzles more easily until they become less of a frustrating experience. If you tried to build a puzzle upside down, it's a very interesting exercise. And if you've got kids that you want to keep entertained for a long time, tell them to try to put this puzzle together with all the pieces upside down. But we can use similar procedures while we're trying to make software usable. And so we call these usability principles. So most of today is going to be devoted to talking to you guys about usability principles, how you can use them to make your software more usable without having to break the bank hiring all these other people that can help. So one of the first things that we try to talk about when we talk about usability are of course the users. The root word of usability. Users are the only reason why any of this software exists. And so what they want to do is very, very important. It's completely the most important thing that any software could possibly do. And so the first thing that we want to try to do is focus on users' goals. And here's an example of a site that I think does that quite well. This is a tool called ZenPen for writing blog posts or anything really. There's no UI here at all. It's just this. It's just text. I can't think of a better example of really, really focusing in on user goals than this. There's nothing to get in your way. Your goal when you come to this page is to write something. You're going to write a blog post or an email or anything else. There's nothing to get in your way. Now if you read the description, you can highlight some text and then you can choose some from a list of options that appears above it. You can make things bold. You can italicize them. That sort of thing. But if you're just using it, you're literally just using the text box and your keyboard. This is the best example like I said I could find out how to focus on your user's goal. All they're going to do is type here so don't give them any other options. It just makes things confusing. Secondly, learn and use the language that your users use. In software we call this ubiquitous language if anyone reads the domain-driven design book by Eric Evans. But the term is applicable everywhere. Use the language that your users are using. For this example, there's a little bit of a guilty pleasure that I have. It's a site called Neon Mob. You can go to NeonMob.com. It's an online trading card game basically. Game actually might be a little generous. You just collect these card things. Really cool. It's got some great art to it. It's obviously visually very pleasing. One of the first things that struck me when I used this is that they actually use the word display case. It's not like cool stuff that I found here. It's actually a physical object in the real world for many people where they display these cards that they've collected. Being that this site is a virtual representation of the real world activity of collecting trading cards, they use the real world equivalent. People who collect stamps or collect anything really that lends itself to being displayed they use display cases. So NeonMob uses the word display case. It's quite nice. I really like it. Perhaps to a lesser extent, but nonetheless still important, trades. You trade cards with your friends. Same words. You could use swap perhaps. Might be a better choice in their example from my experience of collecting and trading cards. But nonetheless, it's a word that the users are likely to use. The reason that this is so important is multiple fold. First of all, when you're communicating with your users, if you say the word display case they're going to know exactly what you're talking about. If you said, well, it's actually this collection of featured items that introduces a little bit of a mismatch there. There may be assuming one thing or thinking of it a certain way because you're not quite using the same terminology that they would throughout the day. Next is minimize the cost of failure for your users. And I love GitHub for this particular reason. What I mean by minimize the cost of failure is don't punish users for accidentally doing something wrong. They're going to do something wrong. This is bound to happen. It happens every day. Don't make it a negative experience. I'm not necessarily saying make it a positive experience that they fail or do something wrong, but at least don't make it negative because that will immediately turn them off to your system. So one of the things that GitHub does, this is actually done before the user does anything negative. It's just they've got red everywhere. If you look at the rest of the GitHub site, it's gray and blue. Very nice visual design again. But the only thing that's red on this entire page that you can see here is the danger zone. Things that need to be very careful with whatever you're doing in this particular area of the site because it could go very, very wrong for you if you do something wrong. And so they've got this large banner at the top indicated by danger zone. The most visually interesting thing on the page, as soon as you go to this page, your eye goes right to the danger zone and says, oh wait, something's important here. This is also emphasized by the fact that it's red. Societal conventions say that red things are bad or we need to show caution around them, that sort of thing. Beyond that, and a little more subtle, the buttons are actually red as well while the text is. And so not only do you have nice big banner that says danger zone, very red, very important that something bad could potentially happen here, you're reinforcing that by having red buttons as well. And so everyone's here who goes to this page says, this might actually be something I should think about before I go on and make a terrible mistake like deleting this entire repository that my team and I have spent six months working on. Next are conventions. And I think conventions are very, very important and often overlooked in usability design because everyone tries to defy stereotypes. I'm going to reinvent the whole experience for web users. For most people, that's just frustrating and infuriating. You expect to see things in one location. They're not there. You have to go looking around for them. It takes extra time for people to find UI elements on your page if they're not where users kind of expect them to be. Does anybody use Stripe in here? You guys like it? Pretty cool. I love Stripe. If you're doing any sort of e-commerce, obviously this guy is kind of sucking right now. He hasn't actually sold anything. But really, really great if you're looking for any sort of e-commerce. But what I really like about it is again, good visual design, but what backs up the visual design are some conventions. The logo is in the top left. Where many logos are. If you go to Microsoft's site, Apple's site, Logo's in the top left. People expect to see the brand identity for your company in the top left. Next, navigation in the top right. There's actually two parts to this. There's sort of the site navigation and then there's your little account information there. This is where you would be seeing the log in, log out type of button. All of that's right up there. Same place as it is in many sites. You've got a search button box in the top right where search is in a lot of cases. Again, Microsoft, Apple, many of these companies have this search box in the upper right hand part of the screen. These are conventions. People expect things to be in certain locations and if they don't find them there, they can cause frustration and confusion. To continue, there's navigation down the left side. This is sort of sub-navigation. It's more contextually relevant to the part of the page that you're, the part of the site that you're looking at, I should say. But it's sub-navigation there. And of course, most obviously, you have your main content area in the center. But if you look at a lot of websites, and I challenge you to go around just the next time you're surfing the internet, some of you may be doing that right now, just sort of look around at the sites that you're on and say, oh, okay, I noticed that maybe this logo is in the same place that most logos are. Maybe this search box is kind of in the same place that most search boxes are. And more importantly than that, notice if they're not there. See if you can find them very quickly. If the search box isn't in the top right, look around. Sort of mentally calculate how long did it take me to actually look around for this search box. Now put yourself in your user's shoes who are just trying to get their job done, trying to get through this whole process so they can go home at the end of the day or back to their kids or family or dinner or what have you, what might be waiting for them. And just think about how much time they might take trying to look around for these elements. Now some of them may be more important than others, logo debatable, but you know, I'm trying to log in. I'm trying to log out of this system to protect my security on a banking website. That sort of thing. Next is emphasize important parts of your site and de-emphasize things that are less frequently used. The technical term for this is actually called a nudge. So you're trying to nudge users into going a particular direction and away from something else. So I love the website Mint. I use it to do some of my financial management myself. This is actually just their home page, I believe. And it's very interesting to me the way that they have designed this. There's a lot going on, but what's one of the first things that you guys sort of focus on visually? All the devices. Okay. Very big image indicating obviously that Mint is available in a large number of form factors. Anything else that kind of catches your eye? I have a trick for you as well if you're... Nobody's going to respond. Ah, good. Free gets started. What jumps out at you about that? Funny though that maybe it's absolutely right. People are trained to say oh, free. Interesting. Or this is a different color. It must be more important. And so this is a way to emphasize certain things obviously Mint wants to emphasize the fact that you need to get started right away by clicking this nice yellow button. Now one of the neat ways, sort of tricks if you will, that I've found to sort of test this out and make sure that when I'm designing something and I want to emphasize certain parts and de-emphasize other parts, if you're just staring at the same screen all day it's impossible to tell what's emphasized and de-emphasized because you've just been looking at it for so long. And so what it can help to do, stare at the screen for a brief moment and then close your eyes. Keep them closed for 5 to 10 seconds or so and then open them and then just see what jumps out. See what the first thing is that you look at. And many times it's hopefully what I want the users to be looking at but not always. Sometimes I see oh, okay, I need to kind of adjust this a little bit. So in this particular case, absolutely right, free gets started. One of the first things that you notice and the reason is, as Jeffrey pointed out, it's colors it's got the word free in it. Free is always nice. People like seeing free. There are more subtle places in this design that have this particular approach as well. If you look at the main navigation up at the top there are two options that are just a little bit larger than the other two. What is meant and how it works. So obviously the developers of Mint.com feel that most people, more people I should say, are going to look for what is meant and how it works. A logical conclusion, that's kind of what I would want to know if I was coming to the site to begin with. Then things like find savings or community whatever that is, kind of an ambiguous term. And then finding out about the company. Maybe if you're an investor you might be interested in that. But clearly they feel that the vast majority of the people that are coming to their site are actually there to sign up first and foremost free get started. And then maybe find out what's this whole Mint thing about. I heard it from a friend or a relative. And then how does this work? How is this actually going to help me? So next I'd like to talk a little bit about symbology and icons. This is actually one of my favorite ways of adding some neat usability. I'm a very visual person. I have a pathetic memory. It's really, really bad with words and names and things like that. I can however remember most symbols. And so I have found that for my part symbols are a great way to help users identify with the system and just make it a little more usable. In this case, this is the Windows Azure management portal. If anyone signed up for a Windows Azure preview account, this may actually be the default now. Or playing around with it, this is actually what you'll see. There's some neat things here. There's a lot of visual stuff going on. But obviously what I focus on first is this group of icons down the left side. Now you could probably go around the room and try to identify what all of these are. You might get some of them. I think the gear is fairly ubiquitous that this means settings. But the important thing is not quite as much that they're instantly recognizable. The point is that after you've been using the system for a little bit, you don't need to read. You can just look at the icon and say, that's the section that I need. I don't need to spend those extra mental CPU cycles reading this word, trying to figure out what it means. And nothing necessarily against Microsoft, they tends to be a little verbose with their names. Just like Visual Studio, ServicePack and Release Candidate 3, Preview 5, something or other. And so their names for these things tend to be kind of long. And icons really, really help with that, because you don't have to remember the whole word for everything. Even larger than most of those icons are that icon, which I'm fairly sure that most of us can actually guess what that does. It goes back to the previous screen. But it's another excellent use of iconography in this particular example. Everyone sort of knows, hey, that's a back button. If I click that, I'm going to go back. So we've not only on this site seen an example of a convenient factor for frequent users, people that use the system often enough to learn the icons. But some simpler actions can be performed with relatively no experience with the tool at all. Almost everybody knows, oh, okay. That's obviously going to get me back to the previous screen that I came from. So next, and this is kind of related to the nudge factor. You need to do what's called providing affordance for certain parts of your application. Affordance is kind of a technical term, but it basically boils down to the fact that affordance means how much you can actually act on something. So it's your example of a door. A doorknob has a lot of affordance. It looks like you can grab it. It's about the right size to fit in your hand. Once you grab it, it's got a nice feel to it, hopefully most doorknobs do, really help you turn it once you've been, I don't know, washing your hands or something. So in this example, Firefox's button up here in the top right has a lot of affordance. It looks like you can click on it. Looks like something's going to happen when you click on it. And this sort of thing is very, very important when you're trying to, as I said, nudge users to do a particular action within your system. Affordance can be found in a number of different ways. Firefox uses color. In many cases, you can use texture. And this is especially important if you're doing one of those Apple-style scuomorphic displays or UIs where everything actually looks like it's a real thing. So the Find Your Friends app looks like it's got some tooled leather on it. Excuse me, the Notes app in OS 10 and iOS has an actual yellow notepad as many of us probably used many years ago. And so texture and color can all work together to create this affordance and make things obvious. Hey, I can click on this. Now what you don't see is affordance in a lot of other areas of the page. Perhaps too little affordance. The center group of links says browsing made easy, high performance, advanced security. That's a little too subtle. There's not quite enough affordance there. But it is very obvious that they want you to click on this button. Maybe they think that Firefox will speak for itself and you don't necessarily have to learn very more. Depending on your browser preferences, this may be true. But affordance again, very, very important part of trying to make some software useful. Any questions about the principles that we've covered so far? It's the perception, I feel. UX professionals feel free to argue with me on that. But I certainly feel it's the perception of an item being able to be manipulative. What did you say, Nolan? Manipulativity? Yeah. Yes, exactly. You see something and it looks like it can be manipulated. It is definitely perception in that regard. Great question. Yes. Sure. There have been some very interesting ways that I've seen that particular problem solve. Probably my favorite. I have no idea why this works. But it seems to. You see little circles next to each other. It looks like, oh, I can actually touch that with my finger and drag it up and down. I can't actually remember any real-world objects that seem that way. And most affordance for software comes from affordance in the real world. You see a button so you can push it and so buttons now look like buttons. But that is one of my favorite ways of indicating that. It's obviously. You know, I'm on two minds about help text. Obviously, I think in an ideal world we wouldn't need any help text. And certainly a lot of this can help with that. And specifically, I believe I actually know the example you're talking about with Google Plus where you're dragging and dropping people. I actually don't like their help text in that regard. I think it could have been, as you say, more easily represented with something with a little affordance and make it look like I can actually drag this person from one group to another. Any other questions? So now I'd like to move on to showing a few tools, specific examples of tools that you can use to provide these principles for your own applications. One is a tool that I use fairly frequently for wireframing called wireframe.cc. It's all online. I believe that it is free to do many things with, but it's sort of a freemium model. You can pay a little bit extra and get some more features. Crazy simple to use. It's really drag and drop. Just very, very nice. I use it a lot. What I do use it for mostly is put together a little wireframe, put some dummy text on it. I don't want to spend too much time on it especially for content writing and things like that. Add some colors to things and then try the little trick of close your eyes, look at it when you open your eyes briefly and make sure that I'm emphasizing the right things and de-emphasizing other things. I might show it around to some friends and say, hey, does it look like if I were to give this to you as a UI on a web page and I wanted you to go search for something, do your perceptions of convention tell me that this search box is in the correct place or do I need to move some things around? So it's really, really good for that. I'm a huge proponent of wireframing in general. This just happens to be one of my favorite tools of the moment. I'm sure a new one will come across next week. I'll be like, wireframe.cc, that thing sucked. But right now it's awesome. Is it a way to build a template for a page? This, only in visual terms, you wouldn't actually use the artifacts that you produced from wireframe.cc to build anything. It's more like just you can use it as a reference when you're laying some things out. So specifically involving symbology and iconography, I said I really like this particular part. There's a tool that I've come to love called fontella.com. How many of you have heard of font awesome? Quite a few? Okay, cool. What this site has are a collection of icon fonts very similar to font awesome. In fact it includes font awesome. The benefit here is there's a lot more of them and they're all in one place. The awesome thing that fontella does for you is it allows you to select individual icons and create your own custom little font file download that and then use that in your application. I really, really like font awesome. I really, really like this collection fontella.co but they've got too many icons. I don't need that many. From a more boots on the ground perspective, I don't want to download all of that information to a browser, especially a mobile one, that I'm not actually going to turn around and then use the icon. So with fontella you get this amazing collection of icons. There must be several hundred on this site but you can pick and choose the ones that you specifically want to use for your purposes and download them as one file. A little bit in the abstract arena. If anyone has seen or heard anything about Dribble, it's a really cool website where people, designers, can put up ideas, get some feedback, share what they're working on with the community. You can actually tag your shots as they call them. It's a big basketball theme and a lot of people have tagged their shots with UX, I mean user experience. So if you want to go to dribble.com slash tags slash UX, there are a number of many examples of really decent UX. Keep the principles that we discussed in mind when you're going through some of these. It'd be a good exercise in itself just to look at them and say oh wait a second, this guy's search box is in the bottom center of the page instead of the top right. That might break some conventions there. Still an amazing site. If you just want to feel inadequate as a designer, just go to the homepage and look at what other people have been putting up on Dribble. But specifically if you're looking for some good usability examples dribble.com slash tags slash UX. Next is a site that came out a couple of months ago I think called Creative Market. There have been a number of attempts many of whom are which are successful to sell WordPress themes and custom graphics and things like that. This is another one of those. I happen to think it's got some really good UX and good high usability so I tend to gravitate toward it. If you notice it's got a logo up the top left and search up in the top right and use your account management in the far top right so it meets my convention so I'm happy. But they've got a great collection of graphics and icons and typefaces and styles and themes for your WordPress sites that will automatically lay things out in a conventional manner. Very, very affordable. In the summer as low as $3 to $5 all the way up to $15 or $20. So if you're looking for anything, excellent, excellent resource for those. Smashing Magazine is an amazing place just in general but they've got a phenomenal UX design sort of subgroup of pages. So definitely check it out. They post fairly regularly on a number of different topics. They've got quite a few for UX design so go there see if you can find anything that strikes your fancy but it's certainly a place to watch. If you're looking for doing some sort of affordance for particular buttons, I'm in love with this site. It has a large variety of fantastic photographs but beyond that they actually pull out certain colors from the photographs and share them with you as hex values. I think you can also download them if you've got a Adobe Illustrator or something like that. Great way to find, see real world examples of places where you'll have contrasting colors and things like that that these guys have kind of curated for you. So it's really, really great site. I highly suggest it. Probably more than anything else though is a simple cup of coffee. Let me explain what I mean by this. What you can do, and I haven't actually tried this, heard of people that have done it and it's an incredible concept. I love it. Go to a coffee shop with your laptop that has a demo version of your software on it. Offer to buy people coffee. Say, hey I will pay for your latte. You'll sit down with me five, ten minutes and just tell me what you think of my software. Have them go through it, have them use it, ask them questions, maybe have a couple of scripts that they can follow and say, pretend like you need to go search for a particular topic. Tell me what you're doing while you're doing this. And for the price of a cup of coffee, so like $5 somewhere around here in Austin or like $50 if you go to Starbucks, you get 15 to 20 minutes of free usability consulting from an actual user. Obviously it helps if you can find people that mimic the type of user that's likely to be using your system, but any feedback is good feedback in many of these cases. So to kind of wrap up, we started off by not really knowing exactly what usability is and so I think we've discussed how to define that a little bit. We talked about some things that words people use to describe software that's not really usable and then how that translates into words people use to describe software that is relatively useful. We talked about how design disciplines which are used in large companies can be boiled down to design principles that almost everyone can use anytime throughout the day, whatever you're working on. And then we discussed some tools that will help in that process by giving you some icons to use and some resources to read blog posts and things like that. And hopefully you find usability maybe a little less confusing now, a little less frustrating and if you've definitely learned something, then you can even go to the UX job title generator and make a new job title for yourself so you don't have to worry about software developer or whatever. So thanks very much for your time. If you would be so kind as to go to speakerrate.com and let me know how I did. I think we've got a few minutes for questions but thanks for coming.