Stanford University we gonna have two lists one for each side of the room and also make sure you keep it circulating so if you’re not in the class make sure to keep passing around some people come in late so go ahead and pass that around keep it going it’s on it’ll give you a thumbs up back there if it’s on yeah so the mics are actually for the video cameras not for miking us up in the room so you’ll still have to speak loud so next week we have Gregory a baaad who is a distinguished professor of in the College of Computing at Georgia Tech and he’s the force behind projects such as classroom 2000 and the aware home and most recently he’s been doing work on technology for autism it promises to be a really excellent talk I hope to see you all there next week this he’s a distinguished professor that’s what they call him I think they yeah his students call him yeah dear distinguished professor Gregory he’s also a really nice guy too so if you get a chance to chat with them this week we have Jeff Johnson Jeff is a the principal consultant at UI Wizards and we’ll be talking today about his he’s also an alum of Stanford and today we’ll be talking about his new book designing with the mind in mind and Jeff do you want these pasta well sure why not it looks like there’s enough around here with some brochures oh yeah if you want one take one they’re going around and has some really excellent insights on how our our abilities as human beings our perceptual and social abilities affect the design of user interfaces so please welcome our speaker thank you okay just let me move this other way so don’t trip on it okay so over the years since human-computer interaction became a discipline many different practitioners in the field have offered user interface design guidelines so you know one of the earliest set of guidelines came from a ben shneiderman and it was first published in his book designing the user interface in 1987 and it’s been reproduced in various forms in all subsequent editions of his book I think he’s up to the fifth edition of it now so I don’t need to read you the list of guidelines it’s it’s fairly common set you’ll see it in many different places in fact if we go and look at a set of guidelines that Nielsen and Moloch came out with in 1993 for mostly for evaluating websites but also for evaluating other kinds of software systems there’s a lot of overlap between them so the point is that developers software developers and user interface designers are faced with the situation of having to apply these kinds of guidelines when they are designing or when they are evaluating software systems and and so that’s what these are for to to help people who are either designing or evaluating soft software systems you reference some some guidelines and figure out our is the system I’m looking at right now or is a system I’m designing does it meet that goal does it meet that guideline well the problem is that many of these guidelines are kind of vague visibility of systems status what does that mean match between system and real world these have to be interpreted they can’t just be applied as of recipe and and interpreting them it requires some knowledge some background knowledge and although the field when the field began in the early 80s many of the people in the field of human-computer interaction had a

background in cognitive psychology I was one of them you know I got a PhD in cognitive psychology from here from this University and then went into the field and there were lots of people like me who had that background nowadays that’s not so true because people who do user interface design come from a variety of disciplines including graphic design print design technical writing software testing many disciplines in which they did not come to the discipline with a background in cognitive and perceptual psychology so when they are put in the situation of applying these kind of guidelines of either the Schneiderman guidelines the mullet Nielsen and mullet guidelines or these more modern ones from Stone at all they people without a background in cognitive psychology I find are at often at a loss to figure out well what does this mean what what is first step to goal should be clear what is clear mean what what makes something clear ok and so so so I so I want to point out a couple of things about these guidelines that I’m showing you is first of all it should be fairly obvious when I click between them that there’s actually a lot of overlap between them and you know why is there so much overlap between them is it it’s not that these people who are coming out with these guidelines were seeking to show how much they know about design and seeking to impose their own will on the design of future systems they weren’t just trying to be sort of controlling as to how designers would work they they came up with these guidelines for a reason these guidelines are similar to each other for a reason and the reason is that they are all based on human psychology how it works how people see how people learn how people think and so that’s the reason for the the commonality here in these in these guidelines and so it’s best if when you apply guidelines since they are based on how people perceive think learn and act that that you understand the reasons and I found also that many designers in the field by the way there are plenty seats there are plenty of seats scattered in the audience and so if you you don’t have to sit on the floor if you don’t want to user interface designers often balk at being told you know for example I want the content ordered sensibly okay tell me what that means okay so so so user interface designers often balk at being told to apply a rule without knowing why it’s a rule where did this rule come from what’s the basis of it so so with that understanding I just decided to sort of put together what started as a series of lectures I was teaching at the University of Canterbury a couple years ago HCI and I realized that many of my students didn’t have a background in psychology so I came up with a set of lectures on what is the psychology you need to know if you’re a computer geek and then that eventually turned into this book so so if you have that understanding of where these rules came from the idea is that you would then be able to better understand when two rules appear to contradict each other which one takes precedence in this situation or if you if you’re going to have to make some trade-offs in your design which rules are more important so the the book has a large number of it covers a large number of topics and I’m not going to cover them all and just in this this talk but I’ll just give you a sort of an overview of which which topics are covered so these are some of them we perceive what we expect our vision is optimized to see structure we you seek and use visual structure reading is unnatural our color vision is limited our peripheral vision is poor our attention is limited our memories imperfect etc limits on attention shape our thoughts in action recognition is easy recall as hard and blah blah blah okay so I don’t need to

read them all but these are these are essentially the chapters of the book and so let’s go into some of these now that’s the substance of this talk is covering covering some of them okay so our perceptions our perception is by it’s biased by our experience by the context and by our goals another way of saying the same thing is that our perception is biased by the past the present and the future so our speery insist the past the context is the present and our goals help define the future okay so let’s look at some examples of each one of those so this is a famous image if I told you that it was a splatter painting by Jackson Pollock how many of you would believe me not any okay so the so let me take it away and it now let me ask how many of you saw the dog a lot of you okay how many of you seen the picture before okay that’s why a lot of you saw the dog but so when I show just two audiences who have never seen it before most of them don’t see the dog but there’s a dog there it’s if this is this what this is is a degraded photograph you know take a take a photograph Xerox it Xerox that Xerox that or photocopy of that photo company at twenty five times and then you’ll get something degraded like this so this is a famous image trying to remember the the source are see James it’s tributed 2rc James so you perceive what you expect that is to say if you’ve seen this before and knew that it was a dog and your brain had organized it into the dog sniffing a Dalmatian dog sniffing the ground next to a tree right does everybody see that now that you your brain actually will retain that almost forever and you know for all practical purposes forever and so if you ever see it again you’ll see the same thing here’s an example from the realm of computers so the user is on a multi-page dialog box otherwise known as a wizard they’re clicking next to go to the next page so they click next go to the next page they click next goes to the next page they click the next it goes to the next page and they click and it goes back it goes back to the previous page and the in the user tests where this kind of thing is done essentially what would happen is the moderator would say why did you go back and the user would say what do you mean I click the next button and it took me back by mistake there must be a bug and the moderator will say no you didn’t you clicked the back button and the user will say what oh gee it looks like the back button is in a different place well the thing is users don’t they don’t pay attention to the details of the screen at all really they’re not paying too much attention to what’s on the screen there they’re clicking things based on position and memory position and finger memory and all that sort of stuff and so so the past the past has not only had the first the first three pages of this thing that constitutes part of the past that has led the person up to this point and causes them to see the next and the back buttons in the opposite positions that they actually are but all other all other wizards that they’ve encountered up to this point have also contributed to that past all right okay so so expecting the next button to be here where the where the back button in fact is is just human nature that’s the way people are going to see it because not only were the last three pages that way but all previous wizards they’ve seen have been that way okay so here now let’s talk about the context how the context can affect perception there’s two identical symbols in fact this is a copy of the same symbol but what it what your eye sees it as depends on the context in which it appears so it’s either a strange act H or a strange a

depending on what other letters surround it so the current context affects your perception as well as the past the third one has to do with goals our perception focus is almost totally on our goals and we tend not to notice things unrelated to our goal this is this is say I’m talking about adult adult humans we tend not to notice things unrelated to our goal so if I show you this and say find the fine let me just ask you I want you to find the scissors okay where they’re scissors in there okay was there a screwdriver okay so some of you saw the screwdriver okay that’s good very observant okay so there is a screwdriver now actually there’s a game you can play it’s a part of parlor trick game which shows an interesting difference between adults and children which is that everyone most people have in their house somewhere a drawer that just contains miscellaneous stuff like for example in our kitchen at home we have you know we have knives in one drawer and we have silverware in another drawer and kitchen towels in another drawer but there’s is one drawer that just has a pile of all sorts of different kinds of utensils because you know it’s just miscellaneous and so or maybe somewhere in your house you have a tool drawer that has you know like woodworking tools of many different kinds I don’t know but the game is this so you’re sitting in the living room up in a different room from whatever wherever that drawer is and you tell someone go into the room get me open the drawer and get me the wrench or if it’s the kitchen drawer you say get me the turkey baster and then come back with the turkey baster and then you say what else did you see in the drawer most adults will have no idea what else was in the drawer because it wasn’t their goal to see what else was in the drawer with children you know young children four five six years old first of all if you can get them to come back because they’ll have found all this cool stuff that will completely have taken their mind away from whatever it is that you ask them to do but you know if they can get them to come back they can tell you a lot of things about what what else was in the drawer that that adults won’t be able to tell you so you know in in the case of web design for example if we land someone on the homepage of the University of Canterbury and we say I want you to find me I want you to I’m going to start you on the homepage of this of this website and I want you to print me a map of the campus that shows the computer science department well what will happen is extremely predictable what will happen is people’s eyes will start scanning this page very quickly extremely quickly their eyes will scan the page and they’ll focus on the word department wherever it is or the word map wherever it is on the page and most of the other rest of the page will be ignored or perhaps it perhaps the person is a search person so there I will immediately go to the search box because they’ll say well this is one way I can accomplish that goal of finding a map of the computer science department but they probably will actually end up going away from the page without ever noticing that they’ve been randomly chosen to win a hundred dollars because that wasn’t their goal they weren’t assigned the goal of they didn’t have in their heads the goal of looking for that all right so that’s the past the present and the future affecting perception and you know where this comes up in in you HCI or user interface design practice is you know I can’t tell you how many times I’ve been sitting in the observation room of a usability test with the developers sitting next to me and the users clicking around the screen and can’t find the way to get to the goal that they want and the programmers are sitting there you know you usually sometimes have to put my hand over their mouth because they’re sort of screaming no can’t you see it it’s right there it’s in front of your face no they don’t see it because either the past the present or their goals are guiding their perception in a completely different place then where this thing that there’s the button they’re supposed to be clicking on is

positioned or or maybe their their mind is causing them to reinterpret the label of it in a different way than what the programmer thought it would be interpreted okay so let’s talk about the next fact about perception which is our vision is optimized to see structure back in the 30s and 40s there were psychologists in Germany that were called the gestalt psychologists and they came up with these principles of visuals perception today they they were the gestalt psychologists regarded themselves as coming up with theories that explained visuals perception today cognitive psych psychologists and cognitive scientists don’t regard the gestalt principles of visual perception as explanations they regard them as descriptions today when people offer explanations they want them to be sort of based on the brain and neurons and how those function and so the gestalt principles were thought of more thought of today mostly as descriptions of how the visual system works but they’re still quite useful they’re useful for designers too it’s good for designers to understand them in order to get get an understanding of some of the ways in which they can do to design things to take advantage of the fact that the human visual system operates in this particular way so there’s a whole list of Gestalt principles and I’m not I don’t have time to go through them now but let’s just cover two that I happen to like a lot I like these two principles they’re very interesting to me one of them is closure they’re related to each other these two principles closure and symmetry the closure principle is that we tend to see whole closed objects not collections of fragments so this is two triangles and three circles it’s not see actually what here really what what is here in this image all that’s really here is three V’s and three Pakman nothing else is there right but that’s not what your eye sees your eye sees three triangles and two sorry two triangles overlapping each other and three circles because your visual system is hardwired to see a whole object including each other that’s it’s hardwired to see that so you know in system design so for example when we put a stack of envelopes on somebody’s desktop computer desktop they’re going to see it as a stack of envelopes and not as some strange little rectangles with a little thing sticking out from it that you know is only only a little sliver of an object they’ll see a stack of envelopes symmetry is even cooler as a principle the principle of symmetry it’s that the brain parses whatever scene is in front of it in the in the in such a way to extract the smallest number of mostly highly symmetric objects let the smallest number of objects with the most symmetry that they that it can automatically okay it’s almost instantaneously okay so for example this figure here is perceived as two overlapping diamonds like that and not as two V structures that are kind of stuck next to each other because because the oh two overlapping diamonds has more symmetry it has not only vertical symmetry which this also has but it also has symmetry in each of the figures in this in the horizontal direction okay whereas whereas that symmetry is lacking horizontally in the in the in the two V’s sitting on top of each other his experience contingent as well for example if you had me spend the previous half hour playing with l-shaped blocks but I see this as a pair of l-shaped blocks or is the claim that somehow it’s wired in the claim is that it’s wired in and I’m going to actually come to that come to that a little bit later but basically see what well I’ll just I’ll just give a pre pre view of what I’m going to say later which is we have we

don’t have one brain you know we have this thing in our head and we call it the brain but that’s actually just a sort of a convenience there are three things there at least three things in there that evolved hundreds of millions of years apart and operate at different clock rates that are in there and we call them all the brain but there are these three things in there that that that up that operate differently and one of them is going to see this as two overlapping rectitude overlapping diamonds forever and there’s nothing you can do about it and the one what the one that you can train which is your new brain essentially is you could probably train it to see these these corner pieces corner tiles or whatever you want to call them but remember that it’s operating a hundred times slower than the other one so it will come we’ll come back to that and you change the go they count how many symmetries you see I actually so many more Roger the two elves and yes you know the double diamond but many many more and so you use you start to scan very differently the image that you present right right you you know what can happen is basically you present this to a person and you know their reptilian brain will see see something and then then the the other brain can come in and say okay well if I analyze this I will see you know many different many different symmetries and here’s another set right which is you know a strange HIO sided thing with a square in the middle you know your these are all this thing on the left sorry this thing on the left is could be any of those but but the brain sees first the two overlapping triangles and then it can sort of it can kind of deconstruct it into whatever it wants so for example I love this cover from Fagor its book coherence and thought in action which there is no cube right there is no cube there are only some strange shaded parts of circles there are some strange discs but your brain sees a cube so two four minutes sorry people this mathematics background will obviously agree with you but if you like crybabies maybe have another another idea how this fits together right and so the question says the question is or she showed this to a Masai in central Kenya who didn’t have an education or at least didn’t have our kind of education what what would the Masai see and the gestalt psychologists would say that the Masai would see the same thing but of course then there would be a problem of language and how did how to get from him what he saw yeah yeah right okay anyway I mean there have been there have been some studies where you take somebody who’s lived in the forest all their life and you take them out into the plains and you ask them to interpret what they see and they’re at a loss because they’ve never seen things that at more than a distance of about 50 feet right so when they see things that are five miles away they don’t know how to interpret it well here two points the best I could say if I see six arrows – ten so whatever yeah okay now that was about the the gestalt Gestalt principles now how can we apply them in an user interface design well we seek and use visual structure as one of the one of the chapters in the book and if you since the brain is actually set up to the brain I include the eyes in the brain actually you know neuro neuroscientists more and more include the eyes and the retina as part of the brain you know it’s just it’s just sort of an extension of it that happened to pushed itself out and it’s on the front of our face structured information is easier to perceive so for example if you present somebody with information like this about a flight if you structure it they can their eyes can dance over it and they can extract the useful information from it much more quickly than if they actually have to read it as prose

and so similarly if I told you here that I wanted you to find the information about see here prominence well in this case you you would have to actually read through this excuse me to find the information whereas if I created what’s called in graphic design of clear visual hierarchy then someone can move stripe directly to the information about prominence and the the interesting thing about this is they can do that faster by ignoring everything else they can ignore whatever is on the page that has nothing to do with their goal their brain has the goal and it moves the eye to the word prominence that’s one of the things that the visual system is very good at is it it’s it the visual system is very good at the peripheral vision is bad it will get to that peripheral vision is very poor but one thing the periphery is good at is guiding the eye to move toward the most likely thing that’s related to the per current goal whatever that is makes that makes the the I move the fovea the high resolution part of the eye to that spot and so so if I told you to look for prominence on the right you would your eye could move very quickly to the information about prominence and ignore everything else and that’s what people are trying to do when they’re trying to navigate through a user interface or website that’s what they’re trying to do they’re trying to satisfy their goals and they’re trying to get to it as quickly as possible and they’re not reading all that wonderful text that you spent so much time writing I’m sorry to tell you okay let’s talk about color vision let’s compare the color sensitivity charts for a video for a color camera and the visual system the human visual system on the right we have a color camera so it has the familiar pattern of there’s some cell detector cells that on its on its visual element that detect blue blue green and red and since no detector cell is perfect these aren’t vertical spikes they’re sort of their sort of bell curves depending on how good those detectors are these curves can be very steep and can exclude cannot overlap very much but okay so so these these detectors the blue detectors are sensitive in this range the green detectors are sensitive in this range and the blue detectors red detectors are sensitive in this range and the pixels that are that constitute a photograph are the some summation of these so so basically it’s an RGB value okay now the human visual system has a has a chart that looks like this that’s pretty different from from this and notice the overlap here the the ones that we call see on our cones we have we have in the cones there are three kinds of cones and we call them red green and blue but actually that’s you know if you learned that in school that’s really not accurate what what the sensitivity ranges are as shown in this graph they overlap a lot in fact the red and the green overlap completely and the blue is much less sensitive to light levels than than the other two so how can a visual system that has this kind of this kind of color detectors in the retina how can it produce sensation of color how can it do that it well it can’t do it by our adding together red green and blue that wouldn’t work when you have curves that overlap this much and that differ in their overall amplitude this much so what it does is it works by subtraction not addition okay so you have essentially red – green blue – yellow there are three channels that come out of your color receptors red – green blue – yellow and I’m sort of a complicated complicated function of all three that essentially leads gives you brightness alright so there’s three

channels as I said red – green blue – yellow and brightness okay now you might say why are you talking about the cones with brightness because don’t we have rods rot don’t rods isn’t that where we get our brightness well sort of but usually not because because basically the rods you you you probably learned in school that we have rods and cones and the rods or brightness and the color cones or color but the rods were actually they’re designed to detect light at low levels very low levels now think about that think about it this way when did lighting lighted environments come about how long ago about 1900 right up until around 1900 he and every other organism lived in an environment that was dark most of the time except in you know if they’re in the day but you know at night think things were dark all the time and when you’re inside even if it was daylight outside it was dark right and you know Lincoln read his read didn’t did his homework using candle light okay so as it turns out that the the rods in in most of the environments in which we live the lighted environments that we spend most of our time inside or out today the rods are maxed out the rods are maxed out and not providing much useful information basically the rods on your retina right now are going ah all the time right they’re all doing that and so they’re not providing any useful information what what’s happening is that the cones are producing three channels one of them is brightness one of them is colors about blue yellow and one of them is red my screen all right okay so and because of this subtraction the other thing is that they’re not too sensitive your visual system is not sensitive to absolute light levels so if I were to tell them to drop the lighting in this room by five percent you wouldn’t notice it especially if I did it over an extended period of time you wouldn’t notice it or ten percent or 50 percent it has to be something like 60 or a 70 percent before you’d start to notice that’s what happens in a movie theater when they darken it after after they’ve darkened it about 50 percent then people start to go oh the movies about to start so so one of the things that that that that effects that that causes is an inability to see absolute shade so for example what if I told you do you see this checkerboard pattern there now one of the problems that we have that I always have when I give this presentation is that the projectors always show the image much darker than it shows on my screen on my screen it’s quite quite a bit brighter and then it is honest on the projector but in any case it doesn’t matter you see that one marked a square marked a it’s here see the one marked B what if I told you they’re the same shade they’re the same shade they’ll square the square both actually it doesn’t matter that they’re same shade so okay I’m going to prove it to you one way I’m going to take a piece of each one out with Photoshop I’m going to grab it and move it out put it over on the right okay now you still don’t believe me you don’t believe me so we’re going to do this we’re going to take that image and we’re going to cover that and look over that look over that look at that look over that cover that look over that let me do that again so as we cover up parts of the context see this was this this image was developed by friend of mine actually a school classmate of mine named Edward Adelson and it’s he’s a brain scientist and he wanted to come up with a way of showing that the visual system doesn’t see absolute levels and I think it’s a really good really good illustration of

it there some people who said you’re still changing the colors of those as you as you cover the thing up but see absolute levels or that we don’t perceive the absolute levels that’s isn’t that is this the same you just said the same thing twice okay because it seems like this is another example of what you were showing me for about you know what we were picking out the simplest symmetries like this is like we’re trying to pick out the description or explanation of this scene that is simplest as it can be represented with like the least information right and like for us like the explanation that this is a 3d cylinder with a shadow and that that checker is in shade and therefore actually lighter uh-huh is simpler because we’re like living in a 3d environment well that I guess that’s one way of saying I mean what one could one could say one could could could ask the question why did Edward ailes Allison have to put a 3-d cylinder in the on the checkerboard and that if it’s casting a shadow in order for it in order to convey this image why couldn’t he have just left a checkerboard right well if he had left it a checkerboard then there wouldn’t be a shadow and therefore he’d have to have BB this color and there and B this is not the same shade as that so the the shadow is actually it’s an excuse to make this that same color and your brain you know you know since since you tend to see this as a 3d thing and you interpret the shadow yeah I guess I guess maybe there is something to your explanation so in other words this wouldn’t work that too well without this I’m wondering that the 3d how important is it the 3d element well there are there are other illustrations of the same principle that don’t use the 3d element if I’ll just if I just yeah this is a famous one that you’ve probably seen elsewhere right those two dots are the same color but one of them is inside a black background and one of them Sun side a gray background but they and so therefore they don’t look the same color but they in fact are the same color this this this is it this is the example you find in all the textbooks but but Edelson came up with that one so I put it in the talk it’s pretty good okay so let’s move on here so color vision is limited so people have trouble discriminating pale colors so when two colors are pale people have trouble telling them apart now the interesting thing is that again the projectors is darkening everything that that I display so you know on my screen looks like that so it’s harder to tell those two colors apart on my screen but when colors are pale basically people have trouble telling them apart when color patches are small they’re harder to tell apart than when they’re larger okay and when they’re far apart they’re harder to tell apart than when they’re close especially if I movement is involved because if I movement and is well involved in memory comes into play it also be harder sorry if you did not put a burden around and it would also be harder to discriminate yes right right so the interesting thing about these is that for those of you sitting close here probably I movement is involved between the two whereas the people in the back of the room they might not have to move their eyes between those two two separated patches because they have a visual angle is smaller so you know when we talk about design you know for example of websites we don’t want to have colors be too close to each other otherwise people may not be able to see the difference between them so for example on this page some of these links are visited and some aren’t which ones are visited which which links have been visited these you’re saying well as a matter of fact on this particular website these so they not only that they get did they get the two colors to be too close to each other so there’s some people aren’t going to be able to see them and also again it will depend on the display right will depend on characteristics of the display and even whether you’re standing in front of it or off to the side if I’m looking at the

side of mine they all look black as soon as I move to the middle then I can start to see the difference between between the two but not only that they use colors that were too close to each other but they used the wrong ones right they it’s supposed to be the less saturated one that is more it’s less saturated means it’s visited but they flipped it and so for example at ITN net which is a travel site they use color to determine tell you what stage of this getting your airline tickets you’re on can you can see that you’re on stage one is that right you can see that yellow but that’s pretty pale yellow and on my screen of my computer it’s so pale that it’s hard to see and if I again if I stand off to the side I can’t see it at all and if I had some kind of color vision deficiency I might not be able to see it so we moved the stage to stage 2 another characteristic about of the visual system is that some people have color blindness color blindness to me doesn’t mean you can’t see color it just means that there are some pairs of colors that you have trouble distinguishing about 8% of males have some kind of color vision deficiency and about half a percent of females just out of curiosity is there people here who know that they have some kind of color vision deficiency just raise your hand with you I just want to see if we’re where we are in the ten percent or the eight percent okay so a friend of mine who is who has red-green red-green color blindness tells me that these these two blinds he can’t tell the difference between he can’t see the difference between those two lines so if you had a graph a business graph in which this was the only way in which information was being conveyed he would not be able to see it you would have lost that person similarly he can’t tell the difference between these two lines to him they looked the same now the interesting thing is that he is diagnosed or he’s been said to be red-green color blind these one line I would call red and the other one I would call black but he’s called red-green color blindness yet he can’t see the difference between these two and similarly you can’t see the difference between these two but his his he’s called red-green color blind so there are certain pairs of colors that he can’t see the difference between dogs for example you know when I was growing up and going to school I was told that only primates have color vision and all other animals don’t that’s complete fabrication it’s it’s completely wrong they’re from shrimp that have six dimensions of color vision we have three okay there are scattered in teresting example they have three kinds of color receptors on their retina for reasons we don’t really understand cats behave as if they’re totally colorblind that you can’t you can’t really train a cat to be to respond to color there are some people who claim to be able to get cats to respond to the differences between yellow and red but other than that I mean most most people say that you can’t train a cat to become to respond to color even though they do have three kinds of color receptors on their retina just like we do not could because because that could be because cats are in the wild before they were domesticated by people they are primarily a nocturnal animal animals that animals that exist and live and do most of their activity at night tend to be color blind dogs are a kind of an interesting example because they have only two color receptors and so they are they are actually pretty much equivalent to a person who’s red-green color blind try you have great difficulty you basically won’t be able to get the dog to distinguish between red and green so especially if you have dogs reading your website make sure you don’t use red and green as a distinguishing conveyor of information basically what you want to do if you use color see I don’t want you to go out of here and say Jeff Johnson says don’t use color in your designs because of course that what the world would be very bland what you should do is you should use color redundantly with other cues so so if I were fixing itn net I would I would not only color use a more saturated yellow for the current step but I would also bold the box in

which it was and bold the words and the number you know as a designer I would do that so that color is not the only thing that’s conveying the information that makes sense now itn you know without any input for me I had no contact with them they didn’t hire me as a consultant or anything I just did this in Photoshop but they actually came out with more recently with a new version of their process which also follows the same principle using Color redundantly with other cues you cannot even if you were totally color blind you would have no trouble determining what step you were on here okay let’s talk about the peripheral vision peripheral vision is poor there’s an error message on this page do you see it see the error message right here this is an actual login page from a client’s web app and what would happen is what would happen is when we did the observed people using it they would log in here they would click this if they had an incorrect number here if they put in some incorrect information here what would happen as far as the user was concerned was the page would redisplay with the fields blank and the person would go huh I thought I I thought I put the number in there I thought I put my ID in there and password and I and I I think I hit the right button that he clicked cancel what what happened I clicked the wrong button so then they put in the same wrong information again and the page Reedus plays again and they can’t understand it so after about two or three loops they go what they’re really frustrated they sit back in their chair their eye scans the screen and they go oh there’s an error message there how long has that been there how come I didn’t notice that before and the course the programmers sitting behind the the glass in the observation room going you stupid idiot why don’t you see it it’s right there in front of your face here’s why they don’t see it this is the visual system this is the retina this is the center this is 70 degrees out which is about the edge of your visual field here’s the center let’s look at the distribution of of light-sensitive cells I want to pay mostly attention to the cones the rods are distributed mostly in the center but actually there they’re not in the diet they there are no rods in the absolute center but they they do kind of fall off as you go out but we can I said we can mostly ignore them because they’re mostly maxed out most of the time in Western industrialized Society so let’s pay mostly attention to the to the cones hold your arm out at arm’s length and look at your thumbnail that’s the size of your that that is the size of your phobia the center of your visual field high resolution everything else is low resolution low resolution everything else is low resolution okay so let’s talk about how high and how low the resolution on on your phobia at arm’s length is about 300 dots per inch so if you printed 300 dots per inch anything like images text whatever on your thumbnail which if you have good vision or like I have with glasses without glasses I’m not anywhere close to that but if I with my glasses have 300 dots per inch at arm’s length that’s what normal vision is for most people okay so you can distinguish the dots in a 300 dot per inch pattern on your thumbnail at arm’s length all right that’s the resolution of the fovea what do you think the resolution is at the edge of your visual field some would have somebody have an estimate like then what if I told you which measures in pixels per foot you the answer is three pixels per foot at the edge of your visual field is a pixels about the size of a melon at arm’s length okay now you don’t believe this right because you’re looking around the room and the room looks high-resolution everywhere you look right but your eye is moving constantly it’s moving about three times a second takes a tenth of a

second for it to execute an eye movement while your eye is moving vision is shut off but you’re not seeing all this blink blink blink blink blink blink blink of the world going off and on and off and on because your brain is filling all of that in your brain is also filling in the resolution around that that the rest that your eye is not noticing at the moment there you had a question what about things that are in motion is there a difference in the way you perceive things when they move is it strictly I’m going to get you later is it what I was going to get to later what I’ll get to now to answer your question is the vision of the periphery is doesn’t seem to be good for much since its resolution is so low but it actually is very good at detecting motion and we’ll come to that it’s it’s job is to move your it’s it’s job is to stimulate your brain to move your eye to whatever is moving so that you won’t be eaten by with that thing that’s moving was there a question in the back jacocks people put their hands here and they said to move it too seriously see the thing is you know it was a revelation for me to learn this because you know I studied cognitive psychology here right and and I didn’t know that there was I knew there was a disparity in in resolution but I didn’t know is that great is so what that basically says is if I’m at a party and somebody walks up up next to me and does not speak so that I don’t know who that person is and my if I do not move my eye and I’m staring straight ahead that person could easily be a cabbage and I couldn’t tell right you know so I don’t want it but I don’t want to tell my wife that she could be easily be a cabbage but as soon as she speaks my brain will fill in an image of my wife over on the right I’ll see my wife even if I don’t move my eye okay yes differently for people who can’t kill them since you know some sort of auditory input is probably helping you localize where that interesting things are happening so if you’re originally impaired as the vision system compensate for that sort of thing by increasing resolution or something no no it’s just you’re you have problems dogs run up to you and you’re deaf you’re going to the dog is going to get you basic ok so so so here’s here’s why here’s here’s why that that that disparity in resolution exists at the at the center of the fovea there are about a hundred and sixty thousand cones per square millimeter they’re packed in there and at the edges of the visual field actually not very far off the fovea there’s about 10,000 per square millimeter so that’s almost a factor of 20 less okay so that’s that’s that’s factor number one in determining this disparity and resolution there are three factors that’s factor number one disparity in density of a color of light detection cells number two the cells that come out of the center of the visual field that are in the fovea that are in that little area that corresponds to your thumbnail send fibers to the optic nerve that goes back to your brain that goes to your visual cortex one to one and the cells that are out here three or four of them will send one fiber to the visual cortex so basically the way you say it if your computer scientists is that information from here goes to the visual cortex uncompressed and out here it’s compressed with data laws okay that makes sense that’s factored number two Factory number three is that you’ve got it on the back of your brain you have something called a visual cortex where the optic nerve basically arrives it gets the signal and the brain starts to process it actually that’s not really true the eye is already processing it the image but anyway it’s get it undergoes a lot of processing when it gets it starts to undergo a lot more processing it when it gets to the visual cortex at the back your brain half of the area of the visual cortex is devoted to the fovea and the other half is devoted to the rest of the visual field okay so those three factors disparity in number of detectors or density of detectors in the center versus the periphery disparity in how much how much whether there’s data compression going to the brain and

disparen see and how much of its neuron surface is devoted to processing information from different areas of the visual field those all contribute to this disparity this is a huge disparity in the way our eyes work compared to let’s say how a camera works where the camera’s visual field is is constant across the whole wholes area so one way of showing our visual that disparities is this kind of a graph which sort of shows you know the center 300 dots per inch and the periphery the pixels are much larger or you could also create this graph which I like it’s a sort of a conventional reading chart but if you keep your eye focused and do not move your eye which is almost impossible that if you don’t move your eye from that dot in the middle then that’s this sort of shows how your visual this equates resolution at different places in your visual field and it in fact it is taller than it is wide that is the disparity disparity essentially is taller than it is wide I mean one of the things that we as people do is we can you know up and down is more important to us because when we were not people when we were rodents we actually had to look up a lot and see things that were coming down from above right yeah what does the people never look up in generally so I used to live under then showed up in the black room and nobody ever noticed me looking at them down the street below aha so is is that some sort of learned ignorant sir as interest well I mean I guess what I’ve read I don’t know how this particularly relates to that question but what I’ve read is that people if you’re walking down the street and a and a jetliner flies between you and the Sun and the shadow goes over you you will flinch there your reptilian brain will cause you to flinch and there’s nothing you can do about it because that might be a hawk coming to get you so so basically let’s let’s let’s look at this particular display which is this is an interesting one because you know in that one I showed you earlier the year it was Pere liebe Leighton deer was the error message was in the upper left it was in black it was in small font it was way far away from the from the login button here with this login at airborne com we see the same problem we see the same problem with people saying I didn’t see the error message now they they might not fail to see it as many times around the loop as with the other example I showed but it still happens why does it happen here does somebody have any thought color what do you mean you guys that the red login ID not found looks very similar to the text up on top yeah okay so that can have something to do with it uh yeah okay anybody else occasion they’re focused on yeah you’re focused on food they’re not focused on login ID yeah okay or they’re focused on the login time let’s say or you know their focus basically people in the Western world anyway move from upper left to lower right when they’re working through a form or a dialog box and so their eyes are going to be somewhere over here that’s where the retina is going to be and so let me show you if the eye does not move from let’s say let’s say the I was focused on the login button you moved the mouse to the pointer to the login button you click so for a moment at least your eye is there if the I did not move this is what I would see right and and so so there was stuff a red stuff up there before and there’s still red stuff up there there hasn’t had been any change as far as the eye is concerned so so in terms of our design principles basically there are some common methods of getting making sure an error message is seen one of them is put it where users are looking if you can predict that put it near the error that’s one of the things that people say at on the assumption that people will be looking there that’s not always true they won’t always be looking at the error you might have to actually draw their attention to it by maybe scrolling the arrow to the middle of the screen or something but this is one principle that’s often given put it where users are looking put it near the error use read for errors and

use error symbols to make make it bigger because if the bigger it is also the the more the periphery will be able to see it now sometimes you can’t do some of these things why why can’t you do some of these things well for example I’ll give you an example your Stanford University all of your your college school colors are red everything on your website is red so you can’t show red and use red for error messages because everything is red right so you need to use orange or something for error messages something else so but I just want to show you this example of an error message that is you know basically what happens is you know you fill out the online registration form at aol.com I clipped it off but you know way down here at the bottom of the form there’s some there’s a submit button fill out the form use fifth hit submit what happens is there’s an error you didn’t have a password that was good enough so it’s grows back to that shows puts that in the middle of the page puts an error message right next to the thing gives you an error symbol and gives you you the password strength okay so you’re not going to miss that that that error message so that’s a good exact an example of a good well-placed error message another okay okay all right so another method that people use other methods if you can’t use these methods here there are some heavy artillery that you can use but it has to be used sparingly so one is that you can pop up messages and error dialog boxes in front of the users face but sometimes people especially in web applications sometimes people will turn off pop-ups in their browsers so unless you’re in a controlled environment in which you know that people are not doing that it’s probably dangerous to use pop-ups as in error error dialogues but if you know that you you know that people are you’re either developing desktop software or you know that you’re in an environment in which people are not turning off pop-up so you can get it you can get away with that that’s good audio beep you can beep that causes people’s eyes to start scanning and they think ok beep why and there I start moving and they find the error message and then flashing and wiggling briefly not continuously why do you want to flash because god the peripheries good at detecting motion your eye is going to move there if something flashes because that might be a leopard right 2 million years ago on this African savannah if something moved in your periphery your eyes had to move there or you were dead or maybe you starve to death because maybe that was your lunch and you missed it right so you’re so the periphery is actually very good at detecting motion so for example you can show the error message like this so all I did with that error message was move it up one pixel up one down one left and one right and stopped that’s important to stop and let me show you an example here I’m not the only one who does this for example if you log in at MobileMe apples online site and you give up you a bogus password and you say Sign In oops oh okay so as your sorry sorry just suck it here what is it doing okay so now yeah okay so here I am so I say Fred Flintstone and I try to login I give a password and it goes but does that basically which is going to was just going to yank your eye over there all right so I got to finish up here so let me just do that so so one one way to do that is to wiggle but of course you don’t want to wiggle constantly because if you do people will ignore you because they think you’re an ADD you can blink again that you don’t want to do that for a long period of time because people will think you’re an ADD okay so let me just figure out how many slides I have to go and then I can yeah where we are yeah there’s one a couple of questions here okay so so what I was going to do I was going to talk a little about short and long term memory but this is all in the book and I was

going to talk about recognition and recall but I think what I’ll do is I’ll leave that for now and refer you to the book and ask for questions person online available I think it’s at amazon.com I passed out flyers that you can get a discount from the publisher but I’ll give you a secret I think it’s more off at amazon.com than it is that so your point about the visual field being larger vertically then horizontally what implications does that have for portrait versus landscape layouts particularly you see a lot of websites these days have used to be ten years or five years ago all websites you’re scrolling vertically and that you’re seeing a lot of horizontal scrolling because that has duplication um I think well actually I don’t know if I I guess I would I would dispute the premise III think that originally you know web designers web groove design goes like Jakob Nielsen we’re saying don’t do either scroll holy Corazon scrolling or vertical scrolling let people put out all the information on the page if you have stuff down below or off to the right people won’t see it I think now the belief is people are very used to scrolling vertically they’re not so used to scrolling horizontally yet and so it’s dangerous to put stuff off to off to the right but I don’t think that really has anything to do with this this disparity between horizontal and vertical perception visual perception any other questions I had a question about sort of the default coloring for links I might have would you mention about your friend in colorblind and the blue and purple in particular opinion on why they would consider it as a default deflector colors to determine what is a link and what is it so why did the web come up with this why did web designers come up with this the standard now of blue for a link and other colors for for a visited link I don’t know where that came from originally but I do believe in conventions and so I think that as a web designer it’s better to follow the convention unless you have a very very good reason not to not to follow it now I believe the convention is mainly what is the color of an unvisited link there’s not so much of a convention about what is the color of a visited link but if you make your like for example one of the one of the transit bung web designers is oh we don’t like those underlines on the links so they don’t put the underlines there i when all the websites I design I’ve started because of that trend I’ve started taking the laundry lining off but it’s there when you mouse over the link because otherwise you’re floating convention too much and people are just not going to be able to know what’s a link and what’s not a link there any design friends other designs as you see today that if you go like design trends that I see that I don’t like well I there are a lot of design scent trends that I see today that I don’t like it’s so part of the problem is this I think a lot of history has been lost you know what for example we were talking at lunch before this talk about you know the history of the Xerox star and the Apple Macintosh and all of that stuff and the people who designed those systems were very they were almost obsessive compulsive about making sure every detail was correct and so for example if you click on a word on the left half of the word then then it had one effect if you clicked on the right half of the word and dragged it had a different effect you know and all that’s been lost basically and and so so one of the things that I find is I’m trying to use systems is that I get the wrong things selected I’m trying to select certain characters in a paragraph I can’t get them selected but you know in star it was easy but I can’t do it and then this or you know they’re there I mean Don Norman actually gives the example of the telephone you know the old telephones had had a little button that you press to sort of disconnect but that button was protected by little knobs so if you drop the phone on the floor the button couldn’t be pressed by mistake but new phones don’t have that so so when you drop it you know on the foot you know it can actually hang up on you so so basically there’s reasons for some of the way things are have been designed and and I think you know one of the

things that’s happening is that some of that’s being forgotten okay well we’re time for you Cass I’ve got a question guys yeah for more please visit us at stanford.edu