Cordelia McGee Tubb — “Designing for the Web for Senior Citizens”

Cordelia McGee Tubb — “Designing for the Web for Senior Citizens”


Hi.
So this mic… whoo, I’m miked! OK Hi everyone, so I’m Cordelia. I’m
@cordeliadillon on the Internet I am an accessibility engineer. I’ve been
an accessibility engineer at a few companies. Right now, I’m at Dropbox,
leading their web accessibility initiative, but what I wanted to talk
about today is computer tutoring at senior centers. I want to talk a lot
about designing with senior citizens in mind. So I’ve been tutoring in my free
time at computer labs around San Francisco for about four years now. These
are mostly senior centers for homeless or recently homeless seniors in SOMA and
the Tenderloin, and there are a lot of interesting access issues there, both
around financial access to technology but also around, as you age, your needs
for technology change. So I wanted to talk a little bit about that user group
today and some things that I’ve learned from working with them. So first, how many
people have seen this phrase: “So easy, your grandmother could do it.” Yeah, so the
way that I feel about this phrase is kind of the the skeptical thinking face
for a lot of reasons, one reason being that I think there’s this assumption
that older users are less advanced and that we need to dumb things down for
them, which really isn’t true. A lot of the seniors I work with in these, in the
senior centers used to be programming on punch cards like way back before I was
born, but they’re struggling with modern interfaces, and it’s not because they’re
dumb it’s because these interfaces haven’t really been designed with them
in mind, so I think we need to challenge this notion and challenge this idea of
“intuitive user experiences.” So I think a lot of us in the Bay Area are often
trying to design the perfect intuitive user experience, but the question becomes,
“Who is it intuitive for?” I think this is grammatically correct, right? A “whom” and
not a “who”? Yeah? OK, great. So the question is, when we’re designing things
who is it, for whom is it intuitive? [audience chuckles] Because honestly, we live in the Bay Area,
and a lot of UIs are designed and built by young, able-bodied people. I am a
young, able-bodied person, and I think what often kind of happens when you’re,
when you are a certain type of person and you’re building things for other
people, is you end up building things for people who are like you. So if we take
for example, Facebook, Facebook was built by and for college students. It started
out, even really small, for one single college, and now has since expanded to be
like, the main social network. So they’ve had to, I don’t know if anyone here works at Facebook, but
they’ve had to really change their whole user experience to now support multiple
different nationalities, multiple age groups. One of my favorite stats about
Facebook is on this graph here, which hopefully you can see, but this is
showing how Facebook demographics have changed from 2011 to 2014, so this data
is now a little bit out of date. I’d love to get new data, but basically what this
is showing is the percentage of teenagers and college students on
Facebook went down over a three year span, but the percentage of people 55 years
and older totally went up, so it grew by eighty percent. So senior citizens and
people over the age of 55 are the fastest-growing demographic of Facebook
users and actually in numbers surpass the number of teenagers on Facebook,
which is pretty wild. So that leads me to, how do we design with these users in
mind? Today I’m going to be talking about this in three different dimensions:
motor, visual, and cognitive. I am leaving out another really important dimension
which is audio accessibility, and Aya will be talking more about that later today,
but these are the three things that come up most often in the senior labs where I
volunteer, so I wanted to focus on these, and some specific moments that I’ve
learned, learned from throughout the way. So let’s start with motor accessibility.
So this is really important because as we age all of our senses start to
slow down a little bit and if we used to be very dexterous, you know, our dexterity
starts to go. It may be a little bit harder to do precision tasks, and I think
a really great example of that is the double-click. So in one of the computer
labs where I volunteer, I was teaching a woman how to open up a program on
Windows using double-click. So you double click on the icon to open up the program,
and so she clicked once and then she clicked a second time, and the computer
interpreted that as two separate clicks, but it was in fact two clicks, and it was
just a little bit challenging for her to do it twice in a row. So a lot of times
we talk about timing being everything, but it really shouldn’t be everything
because every user moves at their own speed. So something that I’ve learned
from this, which is a general accessibility
principle, is is to kind of give users some wiggle room, so making sure that
they have flexible multi-part interactions. For example if you’re
double clicking make sure that that, that they have enough time to do that action
and that it won’t be mistaken for something else. The same with like drag
and drop. Drag and drop can be really challenging for folks so maybe you want
to give them an alternate way to move something around the page, because that
requires a lot of precision. And in the same vein as as making some wiggle room,
making sure that you have large click and tap targets. Think about 48 pixels.
Last time I checked that’s a pretty good size for buttons. Especially as we move
more and more to touchscreens, a lot of times what will happen is, people will
try and tap on one thing and they accidentally tap on another thing, and
it’s a disaster. So making sure that, that buttons are kind of far apart from each
other so that people won’t accidentally tap on anything and then logically – so
this gets into probably the only code sample I’ll show today – logically linked
inputs and labels. And what I mean by that is, if we consider here one of my
seniors was filling out a, I think it was an iMessage to a friend of his,
and he kept trying to tap on the word “subject:” to type the subject, because here
it’s not clear necessarily where you need to tap to start writing. Maybe it’s
in the white space after subject maybe it’s not. Where does that white space end?
So when you’re writing HTML, it’s really important to use this `for` attribute on
the label to associate it with the input field, so that if someone taps on or
clicks on the label, they’re going to then focus the input field. If that were
just a sort of unassociated label, tapping on the word “subject” would do
nothing. So you want to make sure that people have these large tap targets that
they can know, okay, I can tap in this empty space, I can tap on the word, I can
basically tap on any of this and start typing. Moving on to visual, and again I’m
only sort of scratching the surface because it’s a lightning talk, but these
are a few things that I’ve seen come up time and time again that are things that
we can change in our UIs that will really, really help senior citizens, but
also just help everyone. So moving on to visual, again as we age, our our vision
starts to go a little bit. I definitely have experienced that already [Cordelia chuckles] and I’m
pretty young, so how can we make sure that we have great visual experiences
for all our users. And I’ll do a quick little side story here that also has to
do with cognitive ability which is probably the saddest day at the senior
lab, senior citizen lab, where a man was trying to type in his username and
password into Yahoo Mail. He typed in his username and he typed his password
incorrectly, and it failed. He typed his password again incorrectly, and
failed. I came over and I asked, “Hey, you know, is that” – because he was writing it
down from a piece of paper it had a zero, it had like a circle on his piece of
paper, and I said, “Is that a zero or an oh?” and he said, “Does it matter?” and I said,
“Yes it does matter,” so we finally got him to type in the correct password after
multiple, multiple attempts, and then he got CAPTCHA, and this was really, really
challenging for him to try and figure out
what does all this squiggly text mean, and I, being the tutor, was
conflicted about, should I fill it out for him, or should I let him fill it out?
And so visually this was really challenging, and finally after going
through like 10 different CAPTCHAs, the computer was like, “You’ve tried too many
times and failed, so I’m just going to log you out for a day. You can’t log in
for another day.” And that was really, really discouraging so make sure that
content is legible on the web. I think we can all agree that CAPTCHA is just a bad
pattern, but it, like it’s an anti-pattern, but it’s especially really, really bad
for people who can’t necessarily discern what the letters are. Make sure you’re
not using teeny-tiny fonts or thin fonts. This is actually probably too thin of a
font to use on the web, so make sure you’re not using this font on the web.
And really embrace color contrast. Color contrast can actually be a really, really
great thing. Embrace using responsive UIs. And again, action proximity, so you don’t
want buttons to be right up on each other so that people accidentally tap on
the wrong things, but you want them to be close enough that people don’t have to
scroll back and forth through the page trying to figure out where they’re
supposed to go, and then embrace text itself. So for example, there are a lot of
websites that use iconography like this, and like, who knows what this arrow means
out of context? Yeah, I like that expression back there. No, I have no idea.
So that can be really challenging for folks, so often just putting text next to
an icon makes it so much better for everyone, and usually on mobile, we, on
mobile it’s pretty easy to just add in that text, too. I know we like to save
space, but it really really helps. It especially helps in UIs where you
have, say, 10 different types of arrows that all mean different things. Again, I
was working with an iPad, and one of the seniors in the lab, and he had a lot of
trouble telling what all these different icons meant, especially when a lot of
them were light gray. They really didn’t make much sense. So making sure things
are high contrast, making sure you’re providing text, whether that be through a
tooltip on the web, or just putting the text in
there on mobile, can do a great deal, again, for senior citizens, but really for
all of your users. And this moves us into cognitive, which is actually super
related, is, how do you know what’s on, what’s on this page? So again, as we age
you know our, like our cognitive abilities start to kind of get a little
bit worse, but also like even more important than that, is a lot of
designers and developers as I mentioned earlier aren’t really thinking about
senior citizens when they’re designing their products, so even if you have the
brightest person who’s, you know, 80 years old and super bright, they might be using
an interface that’s just using terminology that they’re not familiar
with because they are not a millennial. So cognitive is all about making sure
that all users, regardless of their context, understand the UI that you’re
presenting to them, and understand what they can do. So this was pretty
fascinating to me and this goes back to the guy writing down his password. The
Nielsen Norman Group has done a lot of research around how senior citizens use
the web, and they have this quote here from one of their studies, that half of the
seniors in their study said they kept a list of steps and instructions about how
to use websites they need or often visit. So this means that if you do a redesign,
you might be leaving out a lot of users, you might be, you know, tripping up a lot
of users because even the simplest thing is moving, say, a pop-up from one side of
the screen to another side of the screen in a redesign, or maybe changing the
color scheme, can really throw a lot of people off. Not to be a downer, but
it can! So something to think about, and again this is just like a really great
UX principle, is making sure you have consistent navigation patterns. Another
example from an iPad is I was working with this senior who was getting really,
really familiar with how to use an iPad. He was zooming around using iMessaging
all the time. He was really, really an advanced iPad user, but he got to this
screen. So basically we were looking at the app store, and he tapped on an app,
and that opened up this little pop-up to show you more information about the app.
He was like, “OK, I’m done looking at the app how do I close, how do I close this
and go back to the list?” And he, and he couldn’t see a close button. Like, he
couldn’t figure out how to get out of it, and for me, I was like, “Oh yeah, you can
tap in this empty space,” but that, like tapping in the empty space, doesn’t seem
like the way to get rid of something is to just interact with anything else.
So really if there had just been, like a close button in the corner, which would
be consistent with the other UIs that he’d navigated, that would have been
really helpful to just be like, “Oh yeah, I can tap on ‘close’ and that will close
the UI.” Again, going back to this example we saw earlier with the Yahoo Mail,
making sure you have clear, always available labels is super important as
well for accessibility, so if I were to have these placeholder labels, and then I
write my name inside there, suddenly I don’t know what that first field is. If I
step away from my computer and step back, I might be like, “Was I supposed to write
my first name or was I starting to write my email address? What is, what am I
writing here?” So making sure you have your labels outside of the form field,
which again adds that benefit of, if I want to have a large tap or click target
I can tap on the word, “username,” or I can tap on that whole field to focus inside
of it. So really all of this is about reducing cognitive load for your users.
You can do that through a lot of different things. What we just talked
about was consistent navigational patterns – making sure you can close
things consistently, making sure side navigation is the same. Always having
very clear, always available labels, so people are never unsure about what
action they’re supposed to do next. Using instructions in plain language
which again gets back to this cognitive thing of if you’re a millennial you
might have certain jargon that you use all the time, but if you are in any
different generation, again it doesn’t have to be seniors, it could be if you
have a five-year-old using an app, which they increasingly are
doing, they’re going to navigate a lot differently and have a much different
vocabulary than a 20 year old, or a 40 year old, so just making sure that all
the different types of people who can use your apps understand how to use it.
And then, yeah, creating environments where users feel comfortable exploring.
Like, how could we, going back to that UI of this thing, like how could we make the
the guy feel comfortable tapping around to close this thing? What patterns could
we change to make it easy to explore without feeling like you might
accidentally ruin something or break something? So this has just been a quick
little overview of a few different ways to think about accessibility,
particularly in terms of the senior citizen experience, so people 65 and
older, but I would argue that all of this is good UX for everyone and I think
that’s all I’ve got today, because really what we’re trying to do is make products
that aren’t just intuitive for some, but intuitive for all users, of all ages, all
contexts, all different abilities. And that’s what I got for you. Thank you all.
I’m so happy to be here. Happy Global Accessibility Awareness Week! Woo! [applause]
[Cassandra Salisbury asks] Any questions? Anybody? Anybody? Anybody? I have one. Where the senior
lab is? Is that like a volunteer-based thing, or is it just like something you
found? Like do you have any resources where we might be able to volunteer?
[Cordelia] Yes! So there is a really wonderful organization called Community Technology
Network, and they are a nonprofit that sends computer tutors to a variety of
senior centers around San Francisco, I think around the whole Bay Area, so giant plug
for them. They’re great. I’ve been volunteering through them for four years
now, and they’re really great, so if you’re looking for, if
you have like an hour a day, or an hour every week, or more than that, you can go
to one of these senior centers and really like change someone’s life. Like,
there have been, I’ve cried a lot, like good, like good tears of like, “Wow, we
really made a lot of progress here!” Like one time I helped a guy get on Facebook
for the first time to find photos, he got to see photos of his grandchildren who
are in the Philippines, and like, just that, like facilitating that connection
was incredible. So I highly recommend it and you don’t have to be like a super
computer user to to volunteer there. You just need to be patient and kind to
folks. [Cassandra] Any other questions? All right, thank you
so much! Oh one, one more? [audience laughs] yeah yeah and there’s [inaudible audience question] [audience laughs] [Cordelia] Yeah. Yeah. And there’s
also like, there’s been a lot of work recently to make CAPTCHA more accessible
in general, like now it’s kind of a checkbox, and there’s also an audio
CAPTCHA, and a few other things, but it’s pretty bad and also on the cognitive
load end, for people who aren’t very familiar with computers – so for the guy
who is trying to login to Yahoo Mail – Yahoo knew everything about him. They
knew his age, they knew all his contacts, and yet they were asking him to prove
that he was human, and that was like a very intense cognitive disconnect of,
“I am human. Why do you think that I’m not?” Yeah. [audience member] I like that you emphasize the
higher contrast, the thicker fonts, because it is amazing how Google, which
goes ahead, supports to W3C’s accessibility criteria, still is putting
out lots of apps where you have pale gray on a white background with tiny
font, and they themselves would not pass their own test. [Cordelia] Yes. One thing that I will
say about that that’s really interesting is, so if you’ve read the
accessibility guide, the WCAG AA guidelines around color contrast, they
have two levels, for regular size text and large text, in terms of color
contrast, and large text is either large or a certain thickness, but I’ve noticed
that there aren’t any guidelines around how thin a font can be, and a lot of times
fonts like, depending on your screen, end up being like, less than a, you know, less
than a shrivel of a pixel, so you can’t really see them, so I think that’s like
some interesting work we can do in the accessibility community, is try to create
better guidelines around how to use text in a way that’s legible in general. Yeah,
but yeah, great point. Yeah? Oh do you? Yeah, OK.
[Cassandra] Sorry, I normally would walk faster. Those of you are just going to yell before I got there.
[audience member] Oh, yeah. Just a comment about color scale. Because people are color blind, the
true standard is one of contrast on a grayscale if you don’t see the color, and
and so even though color is a great add-on, [Cordiela] mm-hmm [audience member] you have to be careful not
to rely on color. You know, I mean that’s one of the old things that, that people
get the training on. One one other thing I’d mention – there’s so many great
topics you touched on here – is that it’s increasingly possible, I mean, you know,
the accessibility movement for, you know, web pages in the late-1990s. It’s not a new
idea, and a lot of these things have been percolating for a long time and to some
extent we have a problem with the technology and the capabilities move
ahead of the old standards. Yeah, but so the one thing I would say is that it’s
increasingly possible to have a whole continuum of things where you can
provide people exactly what they need and what they want and have them able to
switch to it, so that it’s really not, you know, we’ve, there’s been a huge
improvement in responsive programming, based on your device, but you also want
to have responsive accessibility based on what the person actually
prefers, and is comfortable with, so that’s all. [Cordelia] Yeah, that’s a really great
point. [Cassandra] Anyone else? All right, thank you so much, Cordelia.
[Applause]

Leave a Reply

Your email address will not be published. Required fields are marked *