UX Design Fundamentals: What do your users really see - Billy Hollis

okay am i hot well no that's the wrong question it is my mic hot yeah I guess it is welcome folks you're probably a little bit tired of looking at code and things like that let's use the other side of your brain a little bit in this session those of you don't know me I started writing code in the 1970s if you can believe that before many of you were born and I have a lifelong interest in science going all the way back to as a kid and and through present day and about twelve years ago I started doing a lot more work in UX design I'm still code but I actually design software more than I write code these days now I look at design through the lens of science because of my experience and I find that most designers don't really look at it that way most designers have an intuitive approach to design and siano developers you don't go for that touchy-feely intuitive stuff do you know you have to have reasons for things and the reasons are typically based in the science of the visual and cognitive systems that all human beings shared and this session is about that science and explaining some of the design principles that come out of that some of those tech mistakes that developers somehow sometimes make ways to avoid those mistakes better options so I hope you'll enjoy this session as a little bit of a counterpoint to some of the other things that you've seen one of the reasons this is important is that people's expectations are rising I was at the reconstructed Globe Theater yesterday called an uber to take me back to my hotel beautiful piece of software the most of the value of the company uber is in that app right there and because of experience with things like that people's expectations have gone up how many of you have a screen that looks more or less like this somewhere in your app today yeah see and this is it this isn't good enough anymore and so to do better you need to understand what your users see that's the foundation of giving them better design you can talk about a/b testing why is a better than being why did they prefer B over a in some circumstances is there a C out there that's better well design principles inform us on that and you can get better designs faster if you understand some of those principles now I'm gonna bring the next thing up but first I need to ask a question to see whether I need to actually show this 30-second video how many of you have seen a video where there are two teams passing basketballs around how many of you have not seen that video oh gosh that's the overwhelming majority would those who have seen it indulge me a little bit yeah but you must be quiet and not give away the answer to the question that I'm gonna ask them okay so let's show that video then once with this I've got it I think right here I do okay let's make this fullscreen and play how many passes does the team in white make how many pastors did you see 13 there's a little bit of ambiguity but most people see 13 now for those of you had never seen this video my next question is actually the most important was there anything in that video that you saw that was unexpected that you that didn't seem to be in place with the rest of the video anybody yeah a monkey walked across who saw a monkey who saw nothing like that whatsoever well it wasn't really a monkey but let's play the rest of it he's 13 but did you see the moonwalking bear [Music] I've been in groups of developers I've been showing that video for a long time I was at micron technologies if you know them 15 people in the room not a single one saw the moonwalking bear so if you didn't see it don't feel as though you are defective in some way it has to do with the way your visual system works and I'm gonna explain a little bit about that but first I'll give you another quick test now I mean now you know you're supposed to be looking more attentively and yet and yet you'll still struggle in this test I'm gonna show three slides with drawings of household tools that you might find in your house or workshop I would like you to tell me how many of those slides contain a hammer I'm only going to leave the slides up for a couple three seconds each are you ready how many hammers most people seem to the hammers without too much trouble but then um how many pairs of pliers any pairs of scissors I mean wrenches you see you think you see all of the screens that you look at and you think your users do too but they don't really the human visual system simply does not work that way you only have a small portion of high resolution the part of the retina that gives you that is called the fovea if you want to see the amount of high resolution that you have hold a pound coin out at arm's length and that's the approximate amount of high resolution you have a design principle is something that describes how users interact with design things including computer software based on the way their brains and visual systems work you can't just train people out of it it's a part of our biology and that inattentional blindness is one of the design principles we're going to look at several Gestalt principles are up next we're going to look at color and hue how we perceive that to signal information we're going to look at other experience based visual things such as archetypes and familiarity that combine visual and cognition but then attentional blindness is the first one because I demonstrated to you that it exists in you and that's a way of helping you understand it exists in just about everybody so one of the things that means is your eyes are constantly darting around to pick out the part of the visual field that's important right now and as you saw that tendency is based on what you're trying to do the task at hand and what you expect to see you expected to see hammers you found them you didn't expect to see scissors so you filtered them right out you didn't expect to see a moonwalking bear you filtered it right out that's the way the visual system works and that's one of the reasons for example that we don't want crowded screens let's go back to this show this a few moments ago as an example the kind of screens that exist in many apps today let me black it out there were some demographic information in the upper left how many of you noticed who it was for Sherlock Holmes I didn't give you any priming so you didn't really look at that screen did you only a few people happen to notice that well in fact even if you look for something in particular what you really get this is a simulation that the part that you're looking at the fovea zeroes in on a small part of the screen that you're looking at the rest of it you don't really see it and I've simulated that with some blur here and that means that you didn't notice something about that particular screen that I'm going to show you now I have by the way I have several demos here they are written in WPF for desktops so if you if you are interested in that technology and you'd like to get these demonstrations I'm happy to give them to you Ellie did you do you think do I need to I guess I mean I think I need to start this over I was fooling around doing something okay so here is that screen and I've made it so that I can drag this thing around and again that's about the area you actually see closely what you probably did not notice is that the further to the right you get the more the screen turns into complete gibberish anybody notice that as you were looking at it alright let's let's take a look and see for example if you start to move over to here what's a Fuss Tumut what's in what's a frame ulam blastic inc fisher table that almost sounds reasonable what's a Dingle plump but a rest are possible you say you didn't you didn't really see those things so when your users tell you they want dry dead strings know that rope they really don't what they want are well-designed Springs that give them access to the information they need when they have a crowd to the screen if they don't need that some of the things that are on there they just filter it out in fact it kind of makes it more difficult for the fovea to zero in on what they need a screen with it's looser more white space with groups of things they might be interested in will work cognitively and visually far better so why do users beg for crowded screens if that if you are convinced about what I just said well that's because they don't trust you they assume if you don't put the information on the first screen they see that you will hide it somewhere and they'll never find it and they assume that because they've had experience with people doing just that to them developers that don't understand their job and don't understand what pieces of information they really need to see so it's a much higher level of responsibility to give them an uncrowded screen it means you have to understand their job and more about how they use information but the result is vastly improved productivity lower training and things like that and the patterns for dealing with too much information are well established you've got one of them on your smartphone right now you look at the Settings app for a typical phone this is for iPhone and first of all information is categorized and some kind of hierarchy to make it easier to find but that simply doesn't work in all cases does it especially when you start running into hundreds of different things people might do or hundreds of pieces of information so what do they do about that they put a search capability to zero in on the things that people are interested in that's one of several patterns for dealing with lots of information you should understand those patterns and be able to give you users points that aren't nearly so crowded so now we know what the phobia looks at what's the rest of the vision for well peripheral vision really doesn't do that much for you in software in real world it does it alerts you to dangers and things we see a little bit of that in software when we jiggle an error message or something because movement in the periphery draws people's attention to it so we can get their attention by vibrating things something a little bit animating it don't do that too much it gets to be annoying do it just a little bit and then stop as you saw what users see is heavily influenced about what they expect to see let me give you an example from my own personal experience in real life and by the way I often do real-life examples to drive the point home because design is everywhere and the principles in the real world apply to your software in most cases too so let's ask a question to start with first of all I'm going to the ground floor elevator in a parking garage how many elevator buttons do I expect to expect to see just one going up I can't go down there's there's no down ok what is the shape of a typical elevator button round by far the most common so I walk into this parking garage toward the elevator and this is what I see I see a round thing that looks like a button and I'll walk right up to it and press it and then the guy comes on and says yes this is security because I'm thinking about other things you see and my eyes just see that little thing that's a and just filters out that stuff on the side over there because that's what I press and he was used to this people must do this a dozen times a day he sounded bored certainly he certainly didn't think it was an emergency that I'd press the call button and you look over the full picture and you see that there is the elevator button it doesn't really stand out or anything so I press the wrong one that is unambiguous evidence of bad design and it illustrates some of these design principle design principles for example we're gonna talk a little bit about archetypes later an archetype is an expected form the most common elevator buttons that you see around that's an example of an archetype this could be fixed in a number of ways they could color this thing red I don't expect elevator buttons I press to be red they could put a little flap over it so that I had the lift of the flap to press it I don't expect all of either buttons to have flaps that would have jerked my mind back to all this is not an elevator button and I would have looked and found the one to the side of it other examples of expectation setting how people see things there's a concept called framing they've done research on this they lead people through a series of model kitchens and they pretended it was some kind of marketing research they did about ten of them in two of the kitchens they left out the stove when people got to the end and they were asked almost everyone assured the researchers that they saw a stove in every kitchen they filled in the stove that wasn't there because that was what they expected a kitchen to be like they expected a kitchen to have a stove in it so people's visual perception is extremely sensitive to what they expect even to the point that they will imagine things that aren't even there if Thanks but if they expect them to be there people's perceptions and actions are also subject to something called habituation they get in the groove in the habit of doing something let me show you a spoofed up software example I have two that see where is it it's another one of these that one don't wait but the example for that areas I have quite moved all my examples in that one central place yet but I'm going to do that so imagine you're in this typical situation of you're leading your users through some steps and you know you get down and you get ready to do you do some things you press the next button and you go over to the next screen do some things press the next button do some things press the next button do some things press the button you just click the back button you see because the person designing the screens me stupidly or viciously changed the back end next buttons and you think no developer would ever do that that's stupid I give you American Airlines this was a screen I captured trying to get a flight oh it's been about three years enacting this this example of doing things this way of doing things was up there for 18 months because I look to see let me set it for you I've got this is the fourth screen you bought a flight online you know what the story is you pick your date you do this you do that fill in your name all the bureaucratic stuff this is the fourth screen and every other screen has had a button in the lower right hand corner which was basically the continue button so I finished filling out this screen scroll to the bottom and press the button in the lower right and I don't even read it because what do I expect there to be that's to continue right well here's what what really what really happens is if you don't fill in the credit card information then it doesn't show you a continue button they decided that buttons that that you couldn't press should not be shown which seems reasonable and then they decided well our buttons for cosmetic effect are going to be right aligned those two things sound completely reasonable until you put them together and then you get this so that once I filled in all the credit card information it changed to this American Airlines was losing money every day their app worked this way because some percentage of people would hit that start over button and go well screw this I'm going to Delta I'm going to British Airways somebody actually flew over on British Airways from Nashville they have a direct flight here now so understand that part of the problem with that was the expectation of where the button was but also part of the problem was that shape and color signal better than text I didn't even bother to read the start over reading takes effort it takes a lot more cognitive effort than seeing shapes and colors and and your users in many cases probably are not as fast a reader as you are and they don't understand a lot of the words you use it's just jargon to them so let's let's see here this is the sort of screen that I've fudged up but is I hope I'm an example of the kind of thing you might put up to alert somebody to a security condition this sounds perfectly reasonable to you but this is how your users perceive it they don't know the words all they know is you've put up a step that keeps them from doing what it is they want to do and if you say clicking this will let you do what you want then they're going to click it the rest of it is irrelevant to them so don't put up a lot of text like that instead use color and shape to put meaning into your apps this is an app we did for a company in Minnesota in the USA they have a package that helps manage propane distribution well if you're in the propane business these two tanks make perfect sense to you based on your experience a propane tank is kind of Tylenol shaped capsule shaped and the color of propane is like green fuel oil kerosene tanks have a different shape more like an elongated cylinder and their fuel is red so you need no training or anything to understand what the type of the tanker is and how full it is because we've given that visualization to you you instantly know the information the critical information you need to know about that particular customer's particular tank because some people have more than one let's give a stool test here let's look at the third one over there and you see there's there's like little circles emitting from the top of it what do you suppose that means come on you're smart people somebody will get it it's it's a wireless gage so that tank is equipped with a means to constantly transmit how much fuel that it's got in it and that's a much better way of doing it than putting some check box that says has Wireless gauge checked or unchecked which is what unfortunately quite a lot of developers would do today probably in a cell of a data grid because the most common design I see in apps today is what's normally called the wall of data grids design and as you move forward people's expectations to get better you need to be able to do better with things like this also notice some some one the use of shape along the bottom down there that's the most recent interactions with that customer and interaction when the customer might be several things might be a service call might be a delivery might be payment of a bill which one on the bottom do you suppose denotes a service call I'm sorry the first one how could you know that I haven't trained you on this app because in the background is a wrench and it's it's dim enough that it doesn't interfere with reading the text at all but it is perceptible enough to guide the eye to the thing that somebody's looking for so using shape and color can be powerful indicators there are some others on here and by the way there's a smiley face in the upper left so this is a good customer or well I'm sorry a happy customer and then there's a CEO D over on the left that's America and Mehra that he's collect on delivery do you use that the same phrase used here and it's red because you want to know if somebody doesn't pay their bills I guess they're happy because they haven't had to pay for their their gas the visual system is also very influenced by context for example I'm going to show you a slide and and I'm gonna prime you for it but tell you that it's a campus map and you'll see roads and buildings you ready okay so you see roads and buildings but now what if I tell you there's a word in the buildings did you feel your visual systems shift based on what you were looking for and and expecting that's an example of a principle called figure-ground you've probably seen this famous diagram right here what do you see two faces of a's vaz that's yeah and now that you know that they're both there you can switch between them that again is an attribute of the way the visual system works it decides that certain portions of the visual field are important and others are not important and it focuses and on the part that it considers important the group the foreground and then filters out the rest the or background and you go what does this have to do with software well and one of our first modern apps that we wrote back in 2008 had a data entry screen that looked like this and you can see that it's it's kind of called out subtly against the background of the the shell with when in which it sits but now if you want to do an address that's an overlay that's a pop-up so that looks like this and we animated it actually so that the I don't if you notice the what was previously the ground right here shrinks when you go to here and we animated that and it has a great cast over it you can't click on it either so now we have told the visual system you have a new foreground that you need to focus on but we preserve the context here's where you were and here's where you're going back to so we keep the context but we guide the user's attention into the thing they need to work on and actually this became a fairly popular way of doing things on the web for a while some places still do it I when I first did this presentation about a year ago Twitter was doing this with a little bit darker background than ours however just knowing that a design principle exists doesn't necessarily mean you understand how to use it right let me give you a great example that a lot of you probably experienced how many of you used Visual Studio 2012 at some point yeah you remember the famous toolbar up at the top had no color whatsoever on it why did they do that well first of all understand that unlike most of the community people at Microsoft are very very code centric they think in terms of code so they said well figure-ground we need to draw people's attention to the most important part and to them what's the most important part code so the code window became at the foreground and they said we'll just do emphasize everything else to make it really easy to use the code window the problem they didn't understand is that what you need to be interested in shifts it's not static you saw the example I just had where the foreground needed to shift to a different view if they've made it so that when you put the mouse over it it lit up then that thing would have been fine but as it is I was doing a session about six months after this was released and I did the uncomment button and one guy in the audience said come looking for that button for six months it was that hard to see it and of course they've changed it since then the bottom is is a more is the more recent version I think that's 2017 by the way I still think this could be dramatically improved but it's not as bad as it was you can also be primed by past experience as you've saw the elevator example was a good example of that I'm going to show you another elevator example and I want you to take a look at it with the following in mind to see if there's anything about this elevator panel that you find worth calling out to someone if you got on the elevator just look at something when you have something put your hand up so that I'll see when most of the audience's found something mother away there are multiple things you might find and then I'm going to talk about the one that I found and why you ready okay what do you see here that you might mention to a companion when you got on the elevator now don't say it don't say it just put your hand up when you have something come on I'll get a few more that's not too bad what did you see there is no number 13 how many of you saw that as the first thing you noticed yes because see your developers you had that analytical portion of your brain working eight hours a day in your office or cubicle so immediately you look at this and went there is a missing number in the sequence between 12 and 14 okay but that's not why I took this picture it is true what else did you see the labels look like buttons the placards look like buttons and we know that that's a problem because of this that's what I saw and got my camera now by the way there's lots of this is a trainwreck of bad design so I'm not gonna go into deep analysis of all the things that are wrong but that's the first thing I notice unambiguous evidence of bad design because people are getting on the elevator seeing that placard thinking it's a button and hurting their finger pressing it many times a day and think about this when they do that they've already been up to their room once they're now on the elevator for at least the second time and they're still making the mistake we're gonna come back this elevator panel and point on another problem in a few minutes but that is an example of you see what you're looking for and remember that these principles kind of work in concert why don't I see the button right next to the G well we saw that didn't we that's the way our visual system works it sees small chunks at a time by the way this is not the only elevator to exhibit this problem I've made a hobby of collecting them this one is in Las Vegas and at a very upscale hotel by the way and I got on it and the guy the guy standing by the panel said what what for you on I said 25 and he pressed the button for 24 and he said oh I'm sorry don't worry don't worry about it let me explain to you the design of elevator no you you want things to be clear you want things to stand out in such a way that people want to have any trouble notice for example it's another example of the fuel tanks when they get low we put 0% we make that big but notice that there's still a little bit of propane in the tank so to speak now see my nine point of view when I wrote this control for the client was when it was zero there was nothing but your experience in that industry tells you now that tanks never really empty it gets so low that it can't get propane through but there's still some propane in the bottom of the tank so our visualization reflected that yeah I think I think I did what I was gonna do here a few moments ago so I'm gonna go on other ways that that design principles affected the way you and your users see things including computer screens let me show you a sign in a hotel in Texas I got off the old vet about 11 o'clock one night and I was tired bags etc and I see this sign I'm in room 207 so I see that and I tried off to the left get two doors down and realize oh I'm going the wrong way go back and look at the entire sign which looks like this now when I took this picture and put it in my presentation the next day my design training one of the people in the audience who come in from out of town said I did exactly the same thing why were we both misled well the problem here is that our mind our visual system automatically groups things based on how close they are to each other that's called the gestalt proximity principle so if I look at 201 2 2 2 3 that's the range of my room which one of the arrows is closest to it the one below this sign could be vastly improved by doing nothing more they're moving the arrows down about two inches five centimeters each and you think oh well software people don't do silly things like that I'll give you Amazon and which I'm on their specials of the day page one day a few years back and I see this 128 gigabit gigabyte USB man that's you know I'm on the road a lot that sounds great to me only thirty $29.99 good price at the time so I checked the box below it and then hit the thing to put things in the in the shopping cart go over to the shopping cart and that's not there but there's a random item that is that I didn't think I picked have you spotted what the problem is the upper check box is for this but there's no real visual indication of that and it's further away from the item then this is away from the text so it was a natural mistake again they're losing money every time they do that Gestalt principles were studied by German scientist about a century ago and they looked into how the human visual system tries to see the world in terms of structure and relationships so there are several principles of design that come from that called Gestalt principles and one of them is proximity as you just saw and the reason that they they work the way they do is that the human visual system actually goes through several stages in perceiving something the first stage happens in the retina itself the retina is optimized to boost certain signals like edges and dampen others so there's one stage of visual processing those on the retina you can't really do anything about that one it's just automatic Stage two is automatic - it turns out that we can do some alteration butBut but the first cut of what you see is in what's called pre-attentive processing small fraction of a second and that is unconscious at that point you assemble the things in your visual field into shapes and groups so when I saw that sign I assembled the group of this is my room range and this is the air my did that automatically and then an attention processing we use experience to layer on top of that to maybe alter the results of stage two we know what it is or we realize that we didn't that we were wrong about our interpretation so we go back and use cognitive efforts to reinterpret you see that son from from my hotel room I figured it out so in that respect the son maker probably thought he did his job but I had to expend additional cognitive effort to do it at a time that I was tired and if you do that consistently with your software you'll end up with some very frustrated and unproductive users your style principles do come from that stage too and it's unconscious with the ability to override it if you need to let's take a look at Gestalt proximity and a little bit a little bit more detail first of all if you put things together that aren't appropriate in some fashion there are problems with that because people have to number one reinterpret the results but number two if you put something too close to something else then that raises the the risk of picking the wrong thing by mistake I was working with a piece of software a product that had the equivalent of code behind and this is the button above which you would go edit the code behind a lot of code behind was automatically generated for you what this button did was wipe out your code behind without giving you any sort of warning that was going to do that that's bad design number one you shouldn't have a button that throws away hours of work without telling you but secondly notice how close it is to the edit button I didn't mean to hit it I was just in a hurry and went for the edit button and just to happen to be a little bit too far to the right so proximity also helps prevent errors the iconography is awful too that what about that chain link says I'm gonna delete your code and back to the elevator again one of the things that's wrong there is that the proximity principle is not respected one of the reasons you have trouble finding which floor that a button goes to is that buttons are equidistant between two pockets you have to look at the entire row to figure out what button goes with what placard and again that's possible but it requires extra cognitive effort so for example you know it those buttons have Braille on them by the way I'm not sure how much good it does because if you're a blind person you get on there you find four well which button do you press I didn't know when to get off now remember this works inside your mind you don't exactly control it because it's it's pretty conscious let me show you I'm gonna show you a couple of slides that have four pointed stars on them and I want you to immediately perceive whether you see rows of stars or columns of stars and just yell the answer out when you see it okay rows or columns everybody cell rows they're rows or columns almost everybody sees columns here well that's really interesting because that's those two are the same size grid of stars except for the fact that they're grouped differently there's padding between elements that helps promote Gestalt proximity so our eyes automatically group things because of the spacing do you see rows or columns in this one a little more ambiguous most people see rows and you just saw columns on it now but what that says is that the mind also groups things by other attributes including coloring and things like that color shape and size are the big things color and shape more so than size sizes a weak sort of grouping attribute so that we can group by color like this will see rows we can group by shape most people see rows there too and those principles bother have been used in things like charting software all the time proximity draws together a particular period but similarity by color helps us follow a category over time so Gestalt principles and use if you violate Gestalt principles you can help make things stand out very quickly so for example I don't have to you don't have to search if I tell you to find the triangle on the next slide you don't have to scan around for it your visual system finds it automatically and if I tell you to find the green pointed star same thing your visual system zeros on it very quickly and we can use these kinds of capabilities to help people find the thing they're looking for let me show you another one of my little sample programs okay so here is a bunch of letters suppose I tell you find the Z in this bunch of letters well you kind of have to scan around a whole bunch don't use anybody found it yet but if I make it bold how much easier is it to find it much much easier how about the B have you found the B here well it might help if I would shift it over a little bit from all the others those are the kinds of signals that our visual system is tuned to pick up to pick out something that's of interest and we don't use those kinds of signals in software very often as far as I can see in particular shifting something over to draw attention to it I see it in some well-designed apps but I rarely see it in routine business apps I'm going to show an example later before we used it and look for one of our clients down there proximity could also be misused or bad signaling about proximity causes confusion when I had an Android phone this was the Southwest app and I won the boarding pass and I I see the thing up at the top and G pay I don't want to pay for anything I've already bought my ticket do you understand what it's trying to do it wants to put the image in the wallet but it's not being clear about that and furthermore I've saved two phone ok yeah but is that one button or is that two buttons that that divider in the middle makes that distinctly ambiguous don't do things like that to confuse your users Gestalt continuity says that people tend to follow something a consistent structure until something interrupts it so you can lead people's attention to things using Gestalt continuity or you can make something stand out by violating and here for example is supposed to be the timeline of a truck driver doing things and it's spoofed data I mean nobody takes three hour lunches in that business but notice that there's one of his daily tasks or appointments that's off from the others what do you suppose that offset means I'm sorry collision yes it overlaps with another thing that he has to do so that was a very convenient way to very quickly signal that and that's an example of something that number one isn't too hard to figure out and number two is a very sticky design once you've figured it out you're never going to forget it you'll scan and realize that you've got something off set and therefore that you are double-booked let's go through another example that combines a lot of these things and introduces a few new ones I'm going to put up a set of data records cards for sports equipment and what I want you to do is count the number of American football items that you see I mean I know you guys don't use those here but you know what they look like right there The Oval things alright ok how many American footballs there were three must miss point okay but notice that you had to do quite a bit of scanning around to find that and as before of course you know army basketballs that were or soccer balls because your eyes filtered those out and I don't need to discuss that in detail that's just another example of an intentional blindness so how do we get around this how do we make things easier for people to see and understand well one of the principles I haven't talked about yet is mapping and I'm going to get to a couple of other examples later mapping that design principle refers to matching things on a computer interface or some other interface to the real world object that is being affected something about the real world because people intuitively then will understand the interface based on their experience in the real world it will make it better for example we could make the pieces of sports equipment to have sizes that correspond to their real-world sizes you see this doesn't do that does it a baseball is the same size as a basketball that cognitively kind of makes it difficult it's one of the reasons this thing was hard to interpret even just to find footballs so why don't we make the items mapped in some fashion their size on the screen should be associated in some fashion with their size in the real world now tennis balls and baseballs are smaller and much easier to pick out soccer balls are somewhat smaller than basketballs and we can leverage a lot of design principles to make displays like this better mapping was just one example I picked out we already know for example things close together or visually grouped we know that color helps in grouping let's see let's put that together and see what we get suppose we get something like this now how much easier is that to interpret then the first thing that you saw now I don't have to work very hard to three footballs man hard could that be and by the way this isn't made to have beautiful aesthetics or whatever this is a fudged example simply to illustrate principles so there are various principles being used here we're using size shape color and proximity all to do groups that's four of the Gestalt principles all wrapped up in one example we also should call out information importance more than we do and we could have done this back in the 90s and I saw very many I mean we had a font size for a visual basic back then and it's gone its competitors but we just didn't do it very often because we weren't tuned into the fact that size different size can signal importance of information at the time a lot of us were coming out of character based applications where we couldn't change the design the size all we could do is affect boldness but color makes information stand out as well as being bigger red family colors of course like extra importance or danger or something green and blue are more safety and normal so back to this screen and we see the the the red calls out the C OD up there and the green up there tells us that we're okay so um I'll see what I want to get yeah I'm going to get through that al D information importance yeah if you look across the top there you'll see some of the most important things about this customer you can imagine someone picking up a telephone and a propane shop talking someone on the phone what do you want to know about them well how much morning do they only once last time I talked to him how much gas do they have those are the kinds of information that we'd be interested in the moment we find out who that person is and call them up on our screen we'd probably also want to know what are the last few interactions that we've had with that so we make things bigger to call them out and we use symbology to call out the different types of things that we do I talked about that before but that is an example of using these various things to emphasize the importance of information and this really isn't that hard to do you can see here red and green signaling we've got some red and green signalling up there I hate the yellow dashed line and I can't convince the client to remove it or to change me but the rest of this I'm pretty much okay with we notice the positioning up there that high priority items are lifted up a little bit the ones that aren't so important to have neutral backgrounds so all of those things color and size are very useful in helping people see the information they need very quickly because they're leveraging what's going on in the visual system it doesn't require cognitive effort you put a data grid in somebody they have to interpret a lot of sex text and numbers they have to use more cognitive effort to get the information out of the grid that they that they're looking for whereas if you visualize it in such a way that they can leverage the visual system the visual systems like the brains GPU in a sense it's optimized for something different than the cognitive reading portion and it's more efficient because it has a much longer evolutionary history visual systems go back to our noun alien ancestors and even before whereas how many species know how to read that's a comparatively recent evolutionary development we've seen that users prompt about goals usually when that go to yourself where they got some goal in mind and they look for things related to the goal and filter everything else out so you should understand their goal make it easy to to find the things that what to uh to do that are related to that go get the information that they need that means before you design a view in any technology at all you should understand what are the two or three most common actions they take on that view you should know their job well enough to know that and you should know the four or five six most important pieces of information they need to accomplish their goal now this is loose sometimes it's sometimes there's only one action sometimes it's four but two to three is typical four to six is typical for the most important pieces of information it could be a little lesser it could be more if you know those things you're ready to design that view much more effectively than if you don't if you just dump everything on there if you don't really understand what's important and what's not well no wonder you don't use size to call out what's important you don't know what it is so find out what it is before you get ready to uh to design of you and go back and talk to users if you need to about what they need now these principles can unfortunately be subverted this is a concept called evil by design to induce the users to do things that you want them to do but not or not necessarily in their best interest and it's highly unethical an example is here from the the Hilton honors app for Android when I went to install this on my Nokia phone this came up that their frequent stay app wants access to my contacts why they don't have any reason to want to talk to my contacts and that's a particular that's a potential security breach for their customers they should never have done it for the record by the way I've correspondent with them about this and they just don't care I mean I can show you the the Twitter stuff back and forth if you want the details and notice that the stuff having to do with permissions that you're giving them is kind of gray background not particularly bright or bold or easy you notice it they don't want you to notice it what they want you to do is click this big green install button down here and they make it big and green and make it stand out to influence you to do what they want don't do that sort of thing it's unethical by the way they even changed it they've made it even worse now that way it was my first one in nowadays when you go in they don't even show the security stuff unless you press a button I forget where the button is on here somewhere and the permissions view details there it is when you do that you get this you get that same stuff but now they hide it one layer deeper they're progressively becoming more evil in their UX design I don't stay in that that hotel chains by the way because of this Citibank really wants me to go paperless but I'm paranoid I don't open my paper statements but I do throw them in a box and there have been a few times in my life where I was really glad that I had those papers take me some box so I'm not going paperless I know they want me to so they put this thing up make all of your accounts paperless and now they've got accept and manage settings what does that mean is that going to lead me down the same path that there's no exit back to unpay palace I don't know what I want to do is go to my accounts where's the button for that well it's up there on the city icon so I did find a way to get to my accounts and bypass this screen but that's just that's just bad that's just a not ethical it suffers in other principles that prime or influence what users expect we've talked a bit about archetypes let me show you an example I was in a hotel in Pennsylvania and I'm going to get on the Internet so yeah I just want free internet do some browsing so I see the thing high-speed internet and I press it I don't get nothing why because it's not a button when I scroll down and see the whole screen it looks like this don't make things in your UI that look like buttons but aren't buttons I mean if the elevator example didn't already convince you I hope this does and I see this more commonly than you would think people put headers and they look like buttons don't do that I mean that's a button but it looks exactly the same as that except for a little bit of margin and now we've seen that example meant to remove that slide from there when you use colored you do need to be aware though that users don't actually see color the way you think that they do for example if I mask out a bunch of things here and get down to there see those two balls were actually the same color it's just that your eyes aren't tuned to that because you see color in relation to other color let me show you my own my my little app for that oops no it's wrong wrong one and that's it so let's take a look at this that bar going through the middle is all the same color it's monochrome your eye however does not perceive it that way because your eye perceives color in relation to the colors around it that was necessary in we were out worrying about leopards and such you want to be able to see that the leopard is a leopard whether it's in sunshine or whether it's in shade so your eyes are evolved to be able to automatically adjust to varying conditions and see things in relation to the other things around that thing to show you here I've got I got this guy's draggable so I can drag him okay I'm just gonna drag it I'll put in here I'm gonna drag him along the thing and you'll see and I promise you I'm not changing the color of him as I move him he's just gray and that works in any any color works in blue same sorry the the optical illusion that kicked a lot of this off done by the researchers is this one who's seen this yeah you didn't believe it did you that a and B are actually the same color here I'll show you you can mask it out and do it like I did with one of the other ones but I wrote a program to let me drag I did a little extract of the B so I can drag now watch carefully now there's B there's B there's B there's B until he gets into here and then I'm gonna put him in here and then when he gets to here he just fits right in so under understand use you want to use gradients because they feel natural to the user in many cases pure monochrome feels artificial but be careful about using colors that you don't get into trouble with people misinterpreting them how much time do I got left about five minutes something like that oh no I've got less than that dying I better get I better get going then because I've got a lot of a lot of interesting stuff I'd like to show you if I can I'm gonna skip this part then it's in something a little bit and get down to effective use of color keep your keep your overall theme subtle because you want things when you do use color for signaling you want it to stand out don't make things too bright even even for signaling I never use genuine red for any hardly anything I use instead a color called light salmon which is kind of a reddish orangish color and communicates very well but isn't so fatiguing to look at use subtle gradients I mention that check your culture in China good is actually signal with red and delegate this to visual specialist you can they're pretty good at it other factors combined with color to affect meaning for example smoothness connotes safety sharp edges connote danger that's called the contour bias principle I can prove this to you in the following sense that that that kind of information the sharpness etc is more important than words in some situations you need to be convinced you could send this to you know your significant other and not a beautiful font you'll always be my Valentine but if you do nothing but change the shapes now the the perceived meaning is dramatically different yeah am I out of town now I was going to talk about color blindness but I think I'm out of time somebody can somebody tipped me off on that officially yeah well then I will officially stop because I don't like to it's it's lunch time oh do you want to stay for a few more minutes in it being lunch time okay well great then we'll do a few more minutes thank you for indulging me that anybody that leaves I won't feel bad about it you may be hungry at this point colorblindness it doesn't mean a person you can't see color it means certain pairs of colors they find it hard to tell the difference and it's only less around 5% of the typical user population primarily male red-green color blindness is the most common if you take care of that you're down to a small fraction of 1% of people who are going to struggle and the most common way to deal with colorblindness in your apps is to have things I have a colorblind theme that's what we normally do these days dark theme light theme colorblind theme would typically be the three themes themes that you would want to implement so red-green colorblind users it's not just red-green they have its various shades of red from various shades of green they also can't tell dark red from black very well blue from purple or like it turns out light green from white is is a struggle so what you do typically if you've got something like this and you really don't know how that's going to to come across to colorblind people there are actually apps and you can paste a bitmap screenshot of your app into this app and it will kill it will show you what a colorblind person is going to precede it but you can do a quick and dirty way of doing that just by applying a grayscale filter and in this case you can see the great kind of fades away and you don't see it anymore whereas the orange still stands out pretty well so it's not just color it's also hue that matter to accommodate colorblind people vary by saturation and brightness as well as color and try to lean on shapes as well as color you don't have to just use color for signaling ideally you would use shapes as well and so that means that the colorblind folks are going to have some information to pick up on my general principle here is you should design so that the 95% of people who aren't colorblind have a great experience and the colorblind people have a good experience they simply can't perceive all the things you put into the app otherwise but you want to accommodate them by but by taking these principles into account there are as I said there are software simulators there but don't handicap the 95 percent do all kinds of variations I start just a bit about mental mapping and I will let you go to lunch I talked about it a little bit before but it's very important that I don't see used as often in software as I think it should be I'm going to illustrate by by showing a couple of examples from my life of the gas range I used for eight years back in the 80s and early 90s and the gas range I've used for the last 26 years the one that I used for eight years back in the 80s I never turned on the wrong burner not a single time the one I have now is gonna be the one there on the left I turned on a wrong burner about two months ago I'd do it up several times a year what the difference between these ranges this is what the buttons look like on the range I have today there are labels of course which of course I don't read most of the time this is what the buttons look the knobs look like on the range I used to have and I wish I had it back even though it was manufactured in the 50s notice the perspective of the burners matches the arrangement of the knobs so that's an example of mental map the mapping principle mental mapping of a control surface to what's going on in the real world here's another one I took this in my hotel room just down the street you've got big flush small flush so what did what do the control things look like they're big and they're small it's amazing to me that most developers don't even think about making buttons different sizes to communicate something about what they do in the real world this has no labels when I'm up in city like London with international visitors labels who would not be desirable would not be the best way to do it so how would you like to look at information well let's suppose we've got some I don't know customer interaction information there's the datagrid way there's the more modern at kind of thing you might put on your smartphone that's not too bad but what if we put it on timeline that we know when the thing happened roughly by mapping on a timeline that's another example of mental mapping people automatically do it we also get some leverage of the proximity principle because things that happen too close together are grouped close together and therefore it's they're probably related in some fashion we're going to okay all right well that's fortunately I had an example from Dropbox but that was my last one so I will put on the last slide and you folks can go have some lunch oh there is see they deceived me I said I could go on I'm sorry whoever the presenter is next time I beg your pardon I will get out right now thank you very much folks you're welcome to go and talk to me as I shared tear down a few with

Channel: NDC Conferences

Views: 11,885

Rating: 4.9130435 out of 5

Keywords: Billy Hollis, UX, UI, Design, NDC, London, 2020

Id: 80H-9caP7UM

Length: 65min 17sec (3917 seconds)

Published: Tue Feb 25 2020