Microtalk: Usability Primer in 10 Minutes Flat

0 0

alright so this is usability primer and ten minutes flat my name is steve bourie I'm the principal at thought merchants I'm a user experience user interface in design consultant I specialize in working with startups and emerging companies here in New York and previously in Philadelphia fortunately or unfortunately you might recognize me as the designer of last year's t-shirt and if you turned it upside down it kind of looked like a gentleman sausage so I apologize it was totally inadvertent the things you get you get reckon recognized for so back to the topic so we're talked about usability and I'm going to talk about usability for web apps and web experiences and there's pretty much a fidelity chart there's low fidelity and high fidelity and the acronym an acronym to categorize these things I like to use this foot and that means functional usable emotional and persuasive so functional is something that really rails comes out of the box with when you put on bootstrap you have a functional web experience the next one over is usable and that's when you optimize for particular tasks emotional is is like Foursquare when you check in you have that experience you get rewarded for hey look I get this badge and you have an emotional attachment with the application then there's persuasive and I think everyone tries to aspire to have these persuasive web experiences that change behavior and modify behavior but I don't think we're quite there yet so when usability there's I kind of break this down into two different topics there's testing where you have a user you sit them down next to a computer you record them you ask some questions you see if they if they accomplish them or not but the one I'm going to focus on today is your wrist Ock's and heuristics are experience based techniques for problem solving and the example I like to give is if you want to work every day and all of a sudden a bum shows up at the harasses you every day you're not gonna like that so you're going to say okay I'm gonna go around take a long way to work that's your ristic i keep getting harassed I'm going to avoid that and so these are things i'm going to show here that web professionals have been sort of building you know building this Bible of information that hey these patterns work and the first one and most important one is is f patterns and this is how to lay out a web application or web form in the most effective way so how to is really simple and this is like as a designer tell you guys the developers if you line things up on the left and make it go straight down that goes a long way great then that's creating a clear left hand scan line now there's some technical terms in here but i'll try to like break it down and make it something pretty simple put important words first there's a vow to in the first in the first part of the sentence no no action words first and use a grid if you're sort of arbitrarily aligning things up or like mmm is this like five pixels or eight pixels or nine pixels no now you should have ok we have a grid is 20 pixels this is either 20 pixels or 40 pixels make it a multiple bet so why increased scan ability users can then look for the thing they looking for and the technical term is that is ambient findability you put things on a page and you're making essentially patterns that people can detect and then find the information they're looking for it's called known item searching don't really need to know that but decrease eye fixations this is something for like a marking website that doesn't really matter but for if you're creating an administration application or something that someone uses eight to ten hours a day decreasing eye fixations where you know their eyes look all day is makes a huge difference and when you get good at it you can sort of control where people look so let's get a real world example this is a simple sign up form your products see a million like it there's a logo a title and some web stuff here so I'm going to do is you know this is lined up optimized using the f pad you can almost see him here right but if I'm going to look so this is like sort of a pseudo tracking I users gays like I'm looking at the logo I kind of shoot across right then looking down the next item sign up cool and now I'm going to look here down here down here right and I almost get this this a little bit of F that shows up that means you create a successful layout right I know f means bad but that means good in this case this is another example this is concerned I owe a new interface we have a page title we have a regional navigation there's a collapse global navigation here but again you can almost see that there's this top little F guy and then the content for the page here you'll see there's a title go across as a button left hand scan line Boop right down here another title more information and so these are kind of things you can look for a day to day boom boom another big topic is labeling and labeling is essentially a fancy word this is what information architects are calling like the content of links right so home tour security monitor plants and pricing get started free 14 days those are labels the one I hate the most is read more I have no idea what more is without context I've no idea what I'm clicking on and my expectations it could I don't know what more is so if anybody ever says like I just throw read more on there that's a smell all right like you can find a better label for that here's some great ones square does great job get free car beer right action word first free card reader I know what a card reader is my click on that I'm sure should get in free card reader again build your list I click on this I'm gonna build a list view full size screen shot I'm probably gonna see a full size screen shot right yes that's awesome so the rule of thumb here is action words to the left put them to the left english language loves subject verb object but people don't read online kill the subject it's implied verb object go if you're interested in this there's a great resource yahoo has done something right they made this awesome book and they have an awesome web resource so style guide a yahoo com it's unbelievable another one that's often overlooked is line like I mean he's like really simple and there's really one answer it's 12 to 17 words and that ends up being 45 to 75 characters that's per line if you have more or less there's problems and it could fluctuate a little bit if it's a mobile device that's really close to your face it could be 12 it could be 10 right if it's something where the screens a lil bit farther away a desktop experience then it could be 17 22 may be right so these are guidelines they're not like you know set in stone rules another one and this is something you know people always say is like you know when things are closer together you normally related actually there's a whole field of of research and it's called proximity things that are closer together users will refer in for a pardon me relationship so here's an example of something that's not does it have a good proximity we have Joe tester and AIC academic internship canceled John University and Anna tester when these things are sort of just arbitrary a line you don't know what the relationships of these items are moving together I think Anna tester belongs to junk University that's kind of ridiculous or a sandbox here but put it in an interface and now it starts to make sense here we have inter exchanges index page for looking for their users that they have in the system and you look they're right here aunt Esther belongs to this university and if I shoot across to the right and says great f patterns I know that this information is related another one here here's button by now paypal if i click on by now i betcha i'm going to paypal proximity right and i'm setting expectations and if it goes to paypal a meeting those expectations that's making the user more comfortable the more likely to click and explore the rest of your website sort of just sort of drilling home the point my favorite i think this is the easiest one to accomplish here's the interface i have a global navigation top dashboard metrics docs the easiest way to set expectations and then meet them is when i click on metrics i go to that page I've metrics and metrics yes right I click on that thing I've been reward it it's literally that simple I see you this all builds a consistency the more consistent your web app is the more comfortable your users are it's like it's a nice friendly sofa right I get comfortable around not nervous about clicking it's like when you see like you're like my mom when I watched her like she's like oh I can't click on that and what's gonna go actually that's part of the web experience is fault they should feel comfortable in making that click decision and they use it and the more users explore the more after is to give right and a lot of times the longer someone is on your application of more value they derive most of them but in the end all the topics are talking about here and this is just the beginning of you know whole usability jobs they fit in this the top artist triangles as fancies going to make all these heuristics and and the flashy buttons and all that kind of stuff content is still the foundation of your web experience and please don't forget that content is king if your content is crap doesn't matter what else you do for further reading a couple things you said calm it's fantastic he has a article it comes out once every two weeks and it's very short it's easily it's really easy to read rosenfeld media there's this thing Luke w he's a book called web forms it's fantastic is really short thank you you