Slide 1
What did they think they were getting right with this image? It's easy to be a Critic rate yes yes

Adobe Creative Cloud, So they sell software for making visual designs of various levels of interactivity
for various platforms. They are showing off what they can do it all arguably they think they are
maybe right because it's like not a gradients like a fancy gray and I don't know I'm trying to put
myself in their heads

What do you think is wrong with it?

So these are experience might not be leading where they want

Great what other thoughts do you have? Are there any other issues?  I know I heard things that have
not been said

So I'm going to point out that the white the thin white text is very low contrast and comparison to
the background and this is now getting into accessibility issues as well as the finest shoes
because for some segments of the population that might just be illegible. So there's a range of
issues and they're all relevant to today's class because people rather than technology to a great
degree and how your physiology affect your ability to get output from the computer since
we make sure to have.

Slide 2
Slide 3

Slide 4
So today is called properties of people and our goals are to talk primarily
about visual properties of people but also to some degree memory because it has to do with
processing visual output and other cognitive properties of people.  I'm going to argue that
people's visual ability has a big impact on everything from how we the underlying model
that we use for color when we set a color inside the machine all the way up to how we
make a design accessible and how we make it easier for people to get what we hope they will get
from it of any type but we will talk of at least two degree about color blindness in
particular because it is a very large percentage of the world population that you're failing to
address of the world's population.

You know you might say well that's all but I don't know how you were picked up your phone late at
night when your glasses for an hour and try to look at it right I mean there are it's it's all
about making its you're making and presumably making it is usable by as many people as much of the
time as possible and so being aware of these things is important okay

Slide 5

Slide 6
So let's start with color I am showing here. what is this a picture of?

I'm just going to report some things I see on the screen right at clearly has a scale it's
labeled the colors mean something numeric that much we can get from this it is if you know a
little bit about visualization you might even think this looks like a heat map that's the
name for this kind of visualization but can you tell.
What it's a picture of yes please pick up a little please could be a possibility I'm going to
show you a different version of it where the colors have been assigned differently and then I want
 to see if you know what it is

Slide 7
Picture map of the United States and what you're saying there is Florida it was a blob when the
scale was wrong so this is what are some of the things that are changed between the left and the
right besides just the the scale itself?

What else do you notice about the Green in the blue anyone?

Yep and I must be wrong it can't be temperature because I'm looking at the way they did the
distribution and right at zero they switch from blue to green which means that it's not temperature
it's something else because at zero is where you switch from water to land right so that the border
of the water in the land is a hundred percent clear in this version of the end by making that
choice and you can see that like where they switch from blue to green instead of it being a
complete change sort of something that's that's not just an linear interpolation

But I think they're important to so I would say that they're using Hue less should I have fewer
queues right there fewer different colors and their emphasizing what we call saturation
invaluable talk about that in a little bit which is easier to differentiate for people in it
 Maps better to a scale so this sort of range between black and blue is not changing in humid is
 changing and other values that are easier to okay so this all drives from theories about how human
 see that are going to be something so that we we ask you to actually think about him learn to this
 class so in particular your eye has

Slide 8-9
So this will come up another HCI classes probably cuz it's such an important part of how we
perceive and in your eye are different cells so you have cells called rods which are primarily
used for night vision they help you perceive movement so I think about an evolutionary human who's
living in the spino in the open plain area and there need to be able to tell what a predator is
coming towards them and so changes that involve movement need to be possible to see even at dusk
right when you might be less able to see other things so it's very able to see changes and gray and movement but it can't they can't discriminate between color at all and if you've ever gone out at dusk Concerta felt like the world was black and white that could be because he's more sensitive cells are still seeing in the colors they can see just like the dog can't do this and you can see those cells can only see black and white

Slide 10 -11
that can see color mostly in the center of your I have many more of a cell's Etsy black and white
 then see color so you're much better at perceiving things like motion then differences in color for
 example this is what the cells look like

here I'm working what these different cells can see if you actually have three different types of
cones one that sees blue one that sees green one that sees red and then you have brought lots and
lots of rods okay and when these cells are excited by incoming lights that sends a signal to your
brain which interpreted as colors you don't see here like purple because your brain is is doing the
interpolation it's going all I see this many red cones are excited and this many green cones are
excited what's red plus green a messy brown right so that's that's kind of how your brain actually
perceives colors through those wavelengths I mean it's a it's a bell curve with assaulting perceived
 but the center is in a specific wavelength that make sense so this has really interesting
 implications for how we. Design computer systems were matching the eyes model when we decide what to display

Slide 13-14
we can't actually see the other colors we interpret them so the RGB color model is actually
matching the way the eye works you have a bit for each of three colors which are the colors that
your eye perceives most easily so why why don't we instead why do we and we actually when we decided
to split we often have LEDs that show in those colors right so you have three LEDs that are turned on
to different degrees and we'll talk in a second about how you can make something brighter or less
bright in that context so any thoughts about you no way manufacturer and I think I could make
some money by adding yellow LEDs to my red green and blue ones you're the marketing
department you're all gung ho and a scientist who works in house comes on and says that's a really
dumb idea what argument would they make for that why is that a dumb idea right why would you why
wouldn't it be nice to go talk to your neighbor see if you can think about what is the biological
reason why we only need three colors

okay so I'm ready to launch a marketing campaign what are you going to tell me why not have yellow
LED use in our nice TVs yes is only three types of cones in the eyes so what what is a yellow LED
going to change in the experience of our users nothing right there they're just going to see yellow
is made up of other of colors right that they will see but those same colors can be produced by
the LEDs that we already have that makes sense however RGB is really unintuitive to design with it's
really hard to pick colors in three dimensions on a two-dimensional screen turned it
perceived how they like it looks disjointed on this representation at least right it doesn't match
the way we think about color.

slide 14
Wo when you design with color we often use it's called the HSV model which is a hue saturation value
model and this is a cylindrical model so the Hue is the value of round the outside or the angle so that's
just like this rainbow on the flat top of my cone okay and it value it varies between 0 and 360 angle
right in Rainbow order saturation is my value from the center to the edge so when I'm in the center
everything's white and then as I moved the adjectives pure and pure version of the color and value is
top-to-bottom so it's kind of how much black is mixed into the color that make sense so you should be
comfortable with this

Slide 15
Which is varying here between these two colors is it Hue saturation or value?
You should be able to recognize this you want to talk to your neighbor for a second come up with an
 answer and then we'll do a vote

oh it looks really similar there (on the screen)

Okay so anyone think it's hue good because it's alright right I'm guessing it's hard to
tell whether its saturation or value so what we've done is we've actually has less that's
rationed in the bottom one here and it's much more obvious that you can look at
this on a regular screen on the web here is a diagram only of value in saturation
changing off for the same queue so we were up here in this range we were changing the that race XX

Slide 16
CHS be rendered and he's like two dimensional example of saturation value for a given value of a
two-dimensional example of view I forget what I just said but you know what I mean

Slide 17:
okay so let's
pick a different problem you've been asked to create a digital paper compatible interface like
think about if you've seen a Kindle Paper ever and with digital paper the way that most digital
paper acid I think all is black and white okay so you need to pick colors that will be easily
 distinguishable in black and white when you're designing your color interface if you wanted to
 also look good on a Kindle or is it a hue saturation or value that you should use most in making
 sure that this display will look better

so if we very hue not going to change slick back here right we very Hugh but we keep saturation
in value fixed if we're in the center everything's going to be white from the outside it's all going
to look black that makes sense or dark how about if we very saturation

if we're burying saturation vs value which season is going to look better on a black and white display

I would argue value is our best choice you can see that it works in a black and white area of the
saturation range right we could imagine mixing saturation and value to degree but and we can use
multiple colors as long as they also buried in value will be good right but if they are exactly the
same saturation value. Are there questions about this? So it just be a sign that you should feel
comfortable with

Slide 18
At the same time we are taught while we're talking about human biology and
Physiology in particular right we have to remember that color itself is culturally defined so the
link at the bottom here in this footnote is to a study where they actually showed that people who
were fluent in Russian were able to distinguish between blues that were both dark but had different
Hues faster than native speakers who didn't speak Russian and that's not the only study I seen
looks at differences in color perception in different groups and the reason that they believe this
distant distinguishability exist for the Russian speakers is that they have more words for blue in
their language than English speakers do and so they actually did a follow-up study where they had
them try to memorize 8 numbers while they were distinguishing and as soon as they got their brain
occupied that way their speed Advantage went away because they didn't have access to
The Language Center while they were doing the task so just an interesting side note that and we have
a faculty member here who studies what she calls weird populations where which is an acronym
for essentially people who are not in the sort of majority group that we usually designed for
Katerina Reineke and she studies things like these kind of cultural color differences among
many other things you should definitely go look at her work okay color is also a relative kind of
saying your perception of color depends on context

Slide 19
just going to show this video quickly cuz it's super cool. Keep your eyes on the center of the screen

forgive me for the sad are not to get it to go away

an explanation in the video by this works which I'm going to leave to the viewer for a future time
because I want to make sure we get through many other fun experiments today but a cool fact


Slide 20-21
So some design tips these are takeaways that you should use when you're building interfaces don't rely on
Blue for small objects hello web not a good idea okay but they're actually not distributed evenly
it turns out that not only do you have fewer cones than rods but you have mainly Reds Fu Blues
so you're less sensitive to blues and particularly like right in the center yeah bad choice

Slide 22
also  don't rely on Blue for older users because our lenses get yellow and their and absorb shorter
wavelengths as we get older so sensitive tivity to Blue becomes reduced as we age and I give this
example here because I'm on the editorial board for IEEE pervasive or I was until very recently
and they were sending out examples of how we could color the magazine and this was the Top Choice

Slide 23-24
so luckily I was able to speak up and say we really need to pay attention to contrast very strongly
here because on top of if you look at like the word feature article here right that's fairly
Thin Blue on white not a good choice not accessible and not accessible to people as they age okay
so designs hit number three is to make sure that your contrast is high this will take care of the
translation to black and white pretty well and so the there is by the way a wonderful set of
guidelines called the wcag guidelines that were put for us by the W the World Wide Web Consortium
and have been updated repeatedly over the years that have really really well written explanations
for how to make your sights website accessible and I applied it anyting many of them and they've
been fine because they are also the basis for all of the court cases about accessibility so
there's been a lot of effort put into making them clear specific and well described and
there's a really great website called web and where you can look things up as well so that the
requirement for websites that was a good one of these for your phone as well as at least 4.5 to 1
contrast and so these commonly used Shades of Grey or actually failing that contrast threshold
and there are websites where you can put two colors in and it will tell you if the contrast is
high enough to be exempt or not this kind of accessibility affect your ability to view a screen
effectively in low-light it again it's more than just a disability accommodation but it's also
just generally good practice to do you can also just use a black and white photo copier if you
already have a GUI and as soon as you do that you'll be able to see if the contract is good enough

Slide 25
okay another thing that you should really do is minimize saturate  colors so this image is
from a website that was actually talking about good design but I find it very difficult to read the
other text especially when it's tiny on my screen

it's not even just an accessibility issue but it's like more work for you to read if
you need something to really stand out like a stop sign yes use a saturated color cuz it will also
jump out at you but yeah don't follow this vibrant colors and web design advice there's some really
great websites that I liked you on the slide where you can start you can ask for color palettes
that you can use in a design and then cuz another really important thing as you want to try to be
consistent right see you when you use the same colors over and over again in your design and


slide 26
These kinds of websites, Color Brewer pallete's, these kinds of color scheme were they have really
nice advice. Some of them you can give them a starting set of a small number of colors and they'll
generate a few additional ones that you can use with them so good place to start if you're doing the
design kind of thing we're going to do another experiment

Slide 27
This will tell you if you have any form of color blindness. So the idea is to see if you can see the
number in each of these circles.  If you can't see don't worry, for one thing it's hard to get these to match, the exact test is usually printed on paper and also many many of us have small color blindness. It's interesting to see which of these are hard and which are not and these are not things that you normally do and design these color mixtures cuz they're not easy to distinguish right

Two main types of color blindness there's people who respond differently to photo-pigments so they have the reduced capability to discern small color differences. And then the best-known one is what's called red green deficiency, where you lack either red or green photopigment distinguishability, so you can't discriminate colors on the red green scale. There are also blue yellow color blindness examples and people who have total color blindness. Some women have a fourth type of cone estimates are about 12% and can see colors that men can't see 

welcome to watch the rest of this video on your own

Slide 28
scientist use redundant cues what is redundant between these two signs I have it on the side light
 so they have a mixture of colors that is not likely to have a color blindness issue right white and
 red there is also a difference in something other than Hugh here they also have a different return
 it to you so that you can distinguish between them really easily what is it tarte shape

Slide 29
it's just the perspective of it thank you, okay great so we're going to switch tax and drop color
off our list now that we've covered so much of it and talk about just out psychology which is a
field of psychology that looks at among other things how to trick people which is kind of fun.

Slide 30-32
So first of all how do we actually create color we've already talked about 3 LCD cells per pixel
small your eye reconstructs so every time you look at a computer screen or a TV we're kind of
tricking your eye because what is actually there are little dots or squares depending on the
particular technology news and you don't see these you see the whole rice your brain does that
 automatically

Slide 33
how do we do grayscale

related to how we do animation

how to do grayscale

yes

so that's going to do saturation no it's fine it's a good idea and it's something we can do but to do
grayscale but we need to do is actually blinked them on and off so we're mixing darkness in your name
already today and I forgotten that sister Kevin thank you I'm going to work on learning your names
because I'd much rather learn them they're not going to make mistakes and I'm going to forget and
I'm going to ask your forgiveness for that I know we're doing an experiment with name tags but
lots of you don't have them so I'm just going to keep asking as well

Slide 34-36
Kevin thank you so it turns out that when you get to about a 50th of a second discrete images
merge into continuous perception and images that you were looking at that flicker don't look like
they're flickering anymore there are some differences and your prescription your peripheral vision

with this which relate back to those original humans and what was necessary for survival but that's
about what we're aiming for so you pretty much never have to be faster than this in order for users
to use your machine which is good very easy to hit the target cuz we got about a hundred and twenty
million instructions Precor and that was when I wrote the slides which was a few years ago hi tan
Jeep you theoretically can get to 26 billion instructions per second in the first GUIs like in the
80s right even that not a big deal to update thanks little bit of maybe they're right so easy to change the screen in a way that seems like it's instantaneous or continuous depending on if we want to do grayscale we have to remember 42 60 frames per second

Slide 37
we can also use this fact for animation so if you don't have if you if you have at least 10 frames
per second ideally 20-40 your animation will look smooth.

If you have a slow device that's not updating at that speed it might look like the u-dub goes from here to Here Without sliding how many people had to deal with that yeah okay not a big deal still working the issue is human perception

and the frames per second that you're getting because of the hardware make sense

Slide 38
even though we want to go that fast if you want continuous perception when it comes to cognitive
processing a hundred to two hundred milliseconds seems like instant response it's really it seems
instant because that's about the fastest that your eye moves around the screen so the way that your
eye works is that most of the time it doesn't hold still even when you're reading text if you do
and I tracking thing you'll see that the eyes full body is focus is moving all over the screen not
entirely randomly so you can do studies and see like which parts of the screen are more attractive
to the eye and marketing people do that for example very interesting you learn a lot from that but
it's still not still this is one of the reasons it's really hard to use the eyes because it's really
hard to tell unless you wait for one or two seconds or at least half a second you known wait and
see how many times he goes back to the same spot what somebody would want to select right or
where they want the cursor to go for example so there isn't a different kind of emotion called
Smooth Pursuit so if I move my finger and your eye is following that it will move smoothly
instead of jumping around because of that evolutionary need to follow motion ready to look away
from the saber-tooth tiger and it's now behind a tree you might not be able to find it again so
you have a natural tendency to follow things that are moving and there's been some really cool
research using this example to make watches so if you have if you have two dots moving at
different speeds around a circle you can tell exactly which. The eyes following because it's not
psychotic kind of. So we might look at that later in any case hundred to two hundred milliseconds
is about the fastest the icons the Cod and so things look like they're changing basically instantaneously
if you're doing that


Slide 39-45
Pre attentive processing

Now I need a victim with a stopwatch 3 volunteer anyone the phone with the stopwatch

somebody thank you okay great so we're going to study pre attentive processing

is say same if every object on the screen is the same and different if at least one is different I'm going to look at a series of images and you're going to time how long it takes for someone for everyone to respond in each image okay so get out of pencil and get your stopwatch ready this time around so let's say I'm going to say about to switch images you're going to start your stopwatch okay just started now everybody say same if these are all the same and different if they at least one is different I really have to speak damn good okay Stop & Shop right down your value okay now we're going to do it for real so get ready set go

Set Go

Set Go

what's your saying whether all the dots are the same or different sorry for not being clear about that anyting you're comparing only within this screen and not to previous screen okay Ready Set Go

Set Go Ready Set Go

so can you tell us what the time was for each of these

1.945 for this one the practice 1 9 4 yeah

that was faster what's different between these two

okay so color was faster than shape next one

longer to see that nothing was different than this right make sense how about this one so size also very easy to perceive right and this one

1 2 3 4 5 5

let's not try to debug this thank you so much for your service I think that you also have an intuitive sense
of which of these were easier so that should give you an idea as well okay

Slide 45
so the tip the design tip here is make things distinct and the order that should be you should find if
you redo the studies that value like color is fastest orientation then texture than position okay

Slide 46
so
next design tip use small multiples so we see this all the time on the web and I have picked this
example with the Stars as an example of that race is a way to visualize data it was originally one
of the original text on visualization that's most famous is by Tufty and he has a book that talks
about the value of small small multiples the things that that very using color or shape or something
that's easily distinguishable can really convey information and often also the aesthetically
interesting or have shapes that are relevant to what you want to talk about right that are not so
abstract and still convey information really well and stars is a great example of that all the time
online

Slide 47
Okay so the next time you want to talk about is a good response time so if you are thinking
about an end-user and you haven't had this to do more serious computation if you're still in that
one tutu II range people will typically not complain so I'm like right on the border that when I'm
working on my slides I shouldn't to count to five every time I save before Jack gets the whole
 website reloaded and then I can see an update I can hit reload and see how my slides look and
 that's like just a little bit painful right it slows me down in a way that I don't like when
 I'm working on developing slides for this course cuz they're right but if it's down below 1 to 2
 seconds it's fine and one of the ways in which you can sort of get an intuition for this is if
 you're having a back-and-forth conversation you pronounce your last name lamb

I'm glad I had it right that's 5 Second Gap is just a little bit uncomfortable right where is if I
had responded within 1 to 2 seconds it would have felt like a more normal conversation so that's
kind of an intuition for where that comes from

Slide 48
okay and then if we get up into the 10 to 15 second
range now we're really in bad response time the web has trained us except slower response Times. web
plus like Wireless. Plus all of the infrastructure that we use.

Slide 49
but if you are able to get a even a
250ms Improvement by switching computers or networks typically you will so that's a sort of Market
goal that you have to think about if you're designing something

Slide 50
okay that was a Microsoft, by the
way so the last thing I would say those that you can also manage expectation so people are more
tolerant if you give them feedback about what to expect.

Slide 51
and here's a really fun example from a
faculty member at see me to where I used to also be of a study that was done that shows this
kind of management


so they did a comparative study of all of these different progress bars where they didn't show them
all at once

compare which was faster or slower

know if it's not obvious when that first image each of these is taking exactly the same amount of time
but perceptually it feels different interesting

okay

Slide 52-53
there's also something called change blindness and this is fun because it shows how you can actually
fail to perceive change entirely if it's designed either intentionally to do that or badly

don't know if we have the young man on the left is one of the experimenters he's approached the white
haired man and ask for directions what country has two people carrying a door passed between them and
the first experimenter is replaced by someone else

can I go in favour

great ones coming up

okay nevermind we have more to cover please

Slide 54-56
play subtle changes with obvious ones is a really good designs tip and a classic example of this is
when you fill out a form and it says you had an error and then you have to search through the whole thing to figure out where the air was cuz they like change the color of something that he wasn't just slightly more red or at a time a little star next to it and it's hard to see especially if it's a screen when the change happens you know so don't do that here is an example please fill in the required Fields really how about that right okay next

Slide 57-58
Connor it you don't know which one is associated which one this is not a Gestalt psychology
principle here's a grouping strategy that makes it super clear what's connected to what right clear
association between buttons and labels by the way a classic problem in web forms for blind people
is that the association is clear visually but it's not made in such a way that a screen reader can
extract it and actually give them the same information okay here's an example of this elevator button

Slide 59
problem on an old version of the Facebook site all right so unless you think these are theoretical
only they show up all the time in real-world interfaces that millions of people use

Slide 60-61
okay so there
are some well-tested visual grouping strategies that work

proximity is a really good one similarity
Works to connections work things that you can translate into good design at the same time reaction
time is logarithmically related to the number of options so you don't want to go to an excessive
number of different groups

if you have studied this what essentially is going on is that people
tend to use binary search when they're looking at a long list of things so that's just how we're
hardwired to do search and also tend to assume there's a logic to the ordering which can be worse
than random, if you're searching for something.

Slide 62
So minimize the number of options because with every
additional choice that you add it will take more time for people to select another interesting
facet of humans is how many things they can remember so there's heard of it but from hdi's for sex

Slide 63
7 plus or minus 2 that is a good number of things to expect people may be to memorize beyond that
you're asking too much of your user

Slide 64
of course here we have a grouping strategy much easier to
remember this number and I haven't updated it since Pittsburgh if that had a 206 it would be even
faster for you to memorize if you're used to the phone numbers around here

Slide 65
right here's an example
of chunking in practice from a Microsoft product so the idea is that it's easier to remember we
are many thousands of things are that you might want to use in your word document if they're grouped
in ways that are in a smaller number of groups he can see there's one two three four five six seven
eight nine ten groups

Slide 66-67
type what else are we going to have time I guess I just wanted to say that to short-term memory
so long term memory is essentially unbounded when something is learned you have a lot of space to
learn things so that's one of the reasons why experts do better than novices cuz they can draw on
their long-term memory


Slide 68
so the the Practical impact of this is that you can't count on memory to be

Slide 69
there it's better to rely on what we call recognition people are much more reliable and faster at
recognizing seen before then recalling it and this recognition rather than recall a sort of a basic
tenet of good HCI design


Slide 70
so we got to the mall just barely with 2 minutes left this is my summary
of all of them basically human physiology drives design and good design is not only reflects
you and Physiology but is also acceptable so I'm going to leave this up and ask if there are
any questions about any of these design tips or anything else before we close

it's not thank you for joining me for this little tour of experiments and please remember to leave
your neat text