… Designing with Cognitive Differences in Mind / Elizabeth Schafer #ID24 2019

.>>Welcome back to inclusive
design. Brought to you in partnership with our gold
supporters. Barclays access. Don’t forget you can subscribe
on YouTube by visiting YouTube. com/inclusivedesign24. You can
follow on twitter and if you have questions for the
presenters tweet them using the ID 24 #we’re delighted to welcome
everyone from — I can tell you we have
London, Wales, we have New Hampshire,
Richmond, Virginia and I also believe that the AIGA upstate New York’s cast
watch party is kick off around nowish as well so welcome to you
as well.>>Next up we have Elizabeth and
their presentation improve user experience by designing with
cognitive differences in mind. Over to you, Elizabeth.
>>Great. Hi, thanks so much for the
opportunity to talk today. So I’m going to be talking about
how to improve user experience by designing with cognitive differences in
mind. So I am Elizabeth I am a senior
developer at vital source where I work on you are a book shelf
digital textbook platform and I also work on our internal design
system. I’ve had this job for a long
time now but have really focused on accessibility in the last
five years or so. In that time most of what I’ve been thinking about when I develop
accessible websites is how they can be used by people with
limitations in their vision, hearing and mobility. So that includes things like
having the right color contrast ratios, including captions on
videos and making sure interactive elements are large
enough to use without too much difficulty but there’s another
area I don’t think about as often which is when people have limitations in their cognition. Cognition effects how well you
can cons strait. Cognitive are the most common
among children and affect working age
adults more than others combined and they can also be invisible disabilities
which can make them less noticeable and a
bit more mysterious. Cognitive impairments include
things like intellectual disabilities,
developmental disabilities, autism, dementia, dyslexia and ADHD
among others. To narrow things down a bit. We’re going to be
talking — we’re going to be focusing on ADHD or
attention deficit hyper activity disorder. One of the reasons why I wanted
to talk about this is because I
have ADHD I just want to clarify that when I talk about my own
experience it’s just anecdotes that really only apply
s to me but I like learning from people with different
backgrounds so I figured it might be helpful to share how
things work for me so I’m going to start with an overview of what ADHD is and
how it effects people and then we’ll go over ways to make sure that the
websites and digital applications we build work for people with ADHD. So what is
ADHD? ADHD is a neurodevelopment
disorder that impairs executive function. Executive function is
responsible for things like paying attention, organizing and
planning, and starting tasks and staying focused on them. These
are things that everyone has difficulty with at some point. But people with ADHD experience
these thing to a much greater extent. They negatively impact multiple
aspects of life like school, work, social life, et cetera, on a
consistent basis. There are some people who think that it’s not a real disorder and
that it’s really just bad parenting, too much sugar, too many video games, but
research has shown that there are physical differences in brains
with ADHD and that it’s highly heritable. So if a parent with ADHD there’s
a 50% chance that you have it too. It is a lifelong
condition, not something that only kids have and it’s not something you can grow out
of. Boys are diagnosed much more
often than other genders but that’s likely just because symptoms in girls
can be harder to spot most research has been done on boys
which means that diagnostic criteria are biased towards the symptoms that boys typically
exhibit. People of color are also much less likely to be diagnosed with ADHD
even when they though the same symptoms. It’s funny because
it’s very common to hear that ADHD is overdiagnosed. But what’s actually happening is
that people that aren’t young, white
boys are most likely underdiagnosed
treatment can be very effective but if you don’t know that you have it, there’s
not much you can do about it. So that is basically what
happened to me. I never even considered the possibility of having ADHD
because basically the exact opposite of the stereotype I had
in my head I was relieved to be diagnosed a few years ago
because now I understand how I work and what I can do to make
things better. But before that, I had no idea
what my limitations were. So that means I never knew that
I could potentially ask for accommodations. And I never
looked through accessibility settings on the apps and websites that I used because
those settings weren’t “forme”. Because of this I’m a huge
advocate for not hiding useful ac things
under the accessibility LAB. A good example of this is anyone
that slowly acquires a disability over time. If you’re getting older and your hearing is slowly fading there
isn’t one clear point in time where you go
from not having a disability to becoming disabled and after
spending your entire life identifying as someone that
doesn’t have a disability it can be hard to recognize when that
change does happen in the case of cognitive imPIERMS it can sometimes be even more confusing
to see the line between what’s
considered neurotypical and what’s not . There are three sub types of
ADHD. Primarily hyperactive/impulsive.
Pray marly inattentive and combined the hyperactive/impulsive type
is probably what people usually think of when they hear ADHD. People that are predominantly hyperactive/impulsive might have
trouble sitting still they may talk
excessively, be impulsive. Interrupt or have trouble
waiting their turn. So they’re quick to do things
without thinking first and they feel the urge to physically move
all of the time. This used to be called ADD. So that would be
attention deficit disorder. Without any hyper activity. I’m not sure why this ended up
being renamed because I find it very
confusing. Anyway people that are
predominantly inattentive can look very different than those
who are hyperactive and impulsive. When someone is predominantly
inattentive they might appear shy or in their own thoughts,
have trouble finishing tasks, slow to SPO — process and respond, easily
distracted and there’s the combined type for people who are interactive
and inattentive. These subtypes have a wide range of symptoms
but they share a common set of limitations. The primary limitation is on
executive function. Like I mentioned before,
executive function is the set of cognitive processes that allow
you to prioritize list of tasks. Start working on the top
priority, and follow it through to completion. When executive function is working properly, it lets you
think things through, weigh the consequences and go forward with what you
should be doing each if it’s not what you want to be doing but
when this process is impaired the thought process is more along the lines of I know I have
a list of things that — to do that are important. But all of
them seem equally important so I don’t really know where to
start. And I don’t feel the need to start right now until
it’s an emergency and needs to be done like
immediately. And logically, know exactly what
I should be doing and I know of
and have tried many, many organizations and productivity
tools and techniques that help other people but there’s just
this disconnect between knowing what to do and actually doing it . Another limitation is
regulation of attention. ADHD has attention deficit in
the name which makes it sound like the problem is the lack of
attention. That’s very mislead ing and I wish it was named
something else. There are some who can focus
well on one thing. This is called hyper focus and it can
almost feel like a superpower being able to dive deep in
learning everything there is to know about something new so the problem isn’t not
being able to pay attention to things but having trouble what we pay attention
to. Finally ADHD can have a significant impact on working
memory. I just mentioned how it
negatively affects the ability to prioritize. When every piece
of information comes in at the same priority level, that means you have to kind of try to
hold onto everything at once. And
you can’t do that so that means you may hold onto something not
important when you forget something that is actually very
important. So application in web accessibility. Now that we
have a general understanding of what kind of limitations people with ADHD
have, what can we do to make sure that the
things that we build are accessible ? Here are three things we can
do. One, we can show important content. Two, use motion for clarity. And three, let people customize.
This obviously won’t cover everything but it’s a good
start. So let’s go through each of these things more in depth.
First, let’s talk about showing important content. What I mean
here is if there’s any content I need in order to
perform primary actions that should be visible to me at a
glance. So let’s talk about icons and text labels . We’re going to be looking at
the Google Play music home page. If you look along the left edge there’s a column of icons. There’s an
icon shaped like a house. There’s a clock with a
counterclockwise arrow around it. And a star among others. These
link to all the main areas you can go to. Things like your
music library, things you recently played, top charts, et
cetera. So when you have a design like this, you need to
make sure that each link has an accessible name so even though
we don’t see any text here, we need to at least include hidden
text for screen reader users. Which we can do
using an aria label or an off screen text. Once we
to that it’s technically fine at that point but only if we can
make sure that people will understand
what these icons actually mean it turns out that there are very few icons
that are universally recognizable. Most people will recognize icons
for home, search, and print but almost all other icons can end up being
ambiguous and confusing. The problem is that icons aren’t
used consistently across different
platforms. For example Firefox uses a star
icon on it’s bookmark button so in that case the star represents
something that the user has personally marked as
something important. But there Google Play music the star icon
is a link to the top charts page which instead is the overall favorites
of the general public. So if this lack of consistency means
that users won’t understand what the icons represent that means
at the very least we need to find a way to
show the accessible name of the link to
the users. One way to do that is by adding a tool tip . Unfortunately tool tips can
be complicated to code in an accessible way. You can’t just
add a title attribute to that HTML because that only
adds a tool tip for mouse users, not keyboard users. Even if you
write custom code to have a tool tip that appear in the right place on both hover and focus,
it’s still not clear how it should
work on touch screens. Sometime websites will make it
so the first tab will show the tool tip and the second tap will
show the action and other times you have to press and hold in
order to see the tool tip but since there’s no tarred — standard
there’s no way to know if you have the tool
tip or not. On top of these technical
issues, this kind of interface can be difficult to use or
people with poor working memory. Since there is no way to see all
the labels at once you’d have to view each tool tip individually
in order to see what your options are and keep them all in
mind before choosing which link you want to follow. So this might not seem like that big a deal, just
a few icons here and if you use it frequently enough it’s
something you just remember and use without thinking. But I can
tell you from personal experience, this never happened
to me after using this daily for
multiple years. I typically listen to music when
I want to start focusing for work.
And any little bit of friction like this can easily distract me
and make me completely forget that I was about the to start working
so an easy way to solve all these problems is just include
text labels next to the icons. It’s funny because these links
do actually have text labels but only at certain browser sizes.
I only found this view accidently when I zoomed out one
day so it’s kind of frustrating to see content being
removed because my desktop browser is
apparently too small showing labels like this is also
incredibly useful for people who use voice control. It’s almost
impossible to guess what the name of each link would be
without them so you’d have to use workarounds like tack — tabbing through an
interface to make a selection. Another thing we can do is to
make sure we wrap text instead of truncating it with an
ellipsis when possible. So here’s a screenshot of JIRA
on a page where you can browse through all your projects. There’s a table and each row
represents a single project. The first column shows the name
of the project. But instead of make room to show
the full name of the project either by increasing the width
of the column or allowing the text in the cell to
wrap is truncated with an ellipsis. I was looking for the project
called ATLASIAN product integration it would be hard to
find because there’s six projects that start with the
word ATLASIAN. There’s a tip you can see but you need to
check one row at a time in order to find what you’re looking for.
Quick side note, my complaint here is that being forced to
view things one at a time is taxing on working memory and it’s not fair to put people in
that position. But this is essentially what screen reader
users have to do all the time. It can be easy for sighted users
to take for granted that they have this ability to see things
on screen all at once so while I’m talking right now about how
this can effect people with cognitive issues that effect the
working memory, working memory is something to think about for
screen reader users as well. So back to ADHD. When I did things like this,
it’s just easy for me to get off track. I might spend a few seconds
hovering over each row until I find the one I need but I’m equally likely to
see this and get caught up with trying to figure out how to make
this work better for me in the future. My thought process
usually ends up something like this. Maybe I could use custom
CSS to let me see the full project name. I need a browser
extension for that. So which one should I use? Do any of
these extensions in data privacy, what else do I need for
better privacy? I should learn everything I can and see
everything on my calendar, to-do list, notes I think like this
all the time. It just takes a few seconds more
me to get off track. And it’s not like I think of
something more interesting and consciously decide to put off
what I was originally doing. More often than not I just
completely forget what I was originally doing. So an easy solution here is to
just get rid of the code that introduced the truncation
HTML will natively expand and wrap text to make it fit and just to be clear
truncating isn’t inherently bad it’s just that if the text the
important to see in order to perform primary
tasks then that text should be visible and not hidden. One
more thing we can do to ensure that important content is easy
to see is by making sure that the browsers find shortcut works
since it can be hard for me to scan for certain things
visually, I use command F as a primary
method of navigation. This is something that’s almost always
just worked without issue in the past. But I’ve been noticing
more and more sites either changing this functionality intentionally or accidently
breaking it . Here’s an example of a
website that has purposely changed what
happens when you use the CTRL F keyboard
shortcut. Here’s the landing page when you log into air
table. It shows all the link to the databases I’ve created so I
can see all of their names and choose one which one to open. If I wanted to open the database
named user research, I’d expect to be
able to use command F to open the
browser’s find bar which you can see here at the bottom of the
screen. Then I type in user and see it highlighted on the pages
I typed. But this web page overrides the
keyboard shortcut which means when I press command F I see this
instead . So what we see here is the
find bar doesn’t open as expected. Instead it goes to a search text
field within the page which unfortunately doesn’t have a
focus outline so I assume nothing happened at all until I
looked more carefully when you type within the tics field it
filters the projects you see listed on the page as you type
so what we see here is that the
find bar — the problem is that it’s taking away something I
relay on and replacing it with something that isn’t
equivalent. This search field only searches within the databases which means I
can’t search for anything else on the page. Ooh — if we go back and look
at the first button you can see how this design won’t let you
find anything by text. If I know that I want to find
the link for recently played but don’t know what the icon looks
like, there’s no way for me to search for it since
there’s no text. And if we look again at the
table of projects in JIRA with the
truncated project names this won’t let you find by text
either. In this case the full text is technically there but
visibly truncated using CSS. So if I try to search for text
that’s cut off, the search bar will let
me know that that it exists somewhere on the page
but doesn’t know where it is. I watched Erik’s talk earlier
today and he said when we throw out what
the browser gives us for free we don’t realize there’s important
things we sacrifice in doing so. This is a great reminder to if I
recall, check and see if what you want to do exists natively. And if it doesn’t, try to make
sure you understand exactly how browser defaults are expected to
work before making a — any customizations. The second thing is using motion
for clarity. Unnecessary motion can be
incredibly distracting. I’d probably see this most
commonly on news websites. Where I’m trying to read an
article but there’s a video of a news
broadcast that starts automatically and
follows me as I scroll down the page. Here is an example of a website
with a lot of motion going on. I’m going to describe it first, I show it because it’s
hard to do both at the same time. This is a page on the product
hunt website where we can see a list of products. Each item includes an image
thumbnail which may or may not be animated. When they are animated they loop
forever. So here is what this looks like . This is the most extreme
example I see in a website I use pretty regularly. Usually if
there’s something moving on the page that distracts me I try to
hide it. This can include scrolling until it’s out of site, covering it with my
hand or going into the browser dev tool to hide the offending
almost. None of these things really work
in this case since there are so many GIFs throughout the
website. I ended up learning that some browsers include a way
to control how animations are handled. I’d only used this in Firefox
and Chrome on Mac but both of those give you the option of
adjusting the global setting for how to handle animations they
can either be on all the time which is the default or you can
make it so that it plays just one time and
then it stops or the animations never play at all . On the other hand motion can
be useful for enhancing understanding. I have an
animation here from the design documentation which shows how
you can use animation to convey
things like hierarchy and order. So it starts out showing three
UI cards in a row. Filling the screen and includes more
details, swiping to the side makes the other card slide into
view one at a time and swiping down zooms back out
to show all the cards again. Using motion in this way makes
it easy to see where each card is in
relation to the others. While this can be really helpful
in this context, it unfortunately
isn’t the right solution for everyone. It’s possible that
motion like this can be disabling for people with
vestibular disorders so how do we deal with this when something
that’s helpful for one group of people ends up
being harmful for another? Here’s an idea. Let people
customize. Give them control over how
things look and behave. Going back to the idea of how
motion can be distracting, it’s
possible to use the preferred reduced motion
media query. This checks the user’s settings to see if they
checked that they prefer reduced motion. If they do, you can use this
media query to either tone down or completely remove any motion
within the site. I usually see this mentioned in the context of primarily helping
users with vestibular disorders and that it also happens to help
people who have trouble focusing their attention. The problem I have with this is
that from the single setting, there’s
no way of knowing why somebody has
turned it on. If they have a vestibular disorder where any motion at all might
cause symptoms like nausea and
migraines then they would probably want as much
motion as possible removed but if they have ADHD and just want
to remove distracting animations while keeping those
that help with understanding — to help understand where they
are in the page then we can’t really use this one setting to
help both groups of people. So one potential option could be having custom settings within
your website. For example, in twitter’s accessibility
settings, there’s a motion section which allows you to
separately control whether or not you want
to reduce motion or in-app an makes and if you want videos to
auto play. I can imagine breaking reduced motion into subsections for
example maybe you want to let users have control over turning
off extraneous animations but keep those that help show
hierarchy and context. Or maybe you’d want to let users turn off
animations that play independently but keep animations that are a
direct result of the user interaction. I’m not exactly
sure what the right solution is here. But I want people to see
how this isn’t a one size fits all
solution. Something that’s still in
development that I recently learned about is
personalizations semantics. The idea behind personalization is
to come up with a way to allow each user to modify the UI in a way that works best for them. This is a
work in progress but defines standard semantics which can be
used to customize how things are displayed. We talked earlier about how
icons can be confusing because they’re used inconsistently
across different applications. With personalization, it would
potentially be possible for each user to have the option of
choosing their own preferred symbols which would be mapped to
any elements using the expected semantics. Here’s an example
who have how this might work on buttons. There’s two buttons
here. One labeled help. And the other labeled reply. If there was a way to include se — semantic meaning to these
buttons users would be able to target these elements and add
symbols according to their own preferences. One person might prefer seeing a
lower case I symbol on help buttons while another might
prefer seeing a question mark. If this kind of semantic
information was made across websites users would be able to
maintain consistency and by not having to figure out the
underlying meaning on each website
cognitive load would decrease. Beyond symbols there’s a number
of other things that could
potentially be personalized. There could be semantics that
assign importance to different elements which could let users
hide less important details. There could be semantics that
let the author include additional information that
isn’t displayed by default but could be turned on for people
that need extra help. There could be a way of using
different language levels so that people could simplify the
text if needed. This is all pretty new to me so if you’re
interested in learning more you can look into the work that the
personalization task force is doing and if you haven’t watched
it already John just went other a lot of this in
his ID24 talk right before mine. So I’m really excited about
these ideas and I am looking forward to see how this
progresses. In the meantime it’s a good idea
to support custom user style sheets. Letting users override styles
gives them control over how they consume content and the best way
to support this is by using semantic HTML and
ideally using CSS class names that are
human readable. It’s pretty common to see class
names that are just random characters that will probably
change without warning and I think a lot of this comes with
the increasing popularity of CSS and JavaScript, here’s an
example of how I use user styles. This is what my twitter
home page looks like by default. You can see navigation links on
the left, the main content is the live twitter feed and on the right
are suggested trends I might want to look at. This whole page is super
distracting which I’m sure the point. Twitter wants me to stay
on twitter. The problem is that I use
twitter to learn about work-related topics. And sometimes I will want to
look up something I read about earlier. I almost always
completely forget what I was going to do as soon as I get to
the home page. I don’t even like browsing social media but this still happens. So what I had to do was install
this stylus extension in Firefox which lets me write custom
styles for specific websites the underlying HTML on
twitter uses classes and isn’t easy to come up with CSS
selectors in a way that will be resistant to breaking in the
future. But I was at least able to hide
what I need for the time being. Which is basically everything
except for search and a handful of links to things like notifications and
DMs. Okay. So let’s review. Let’s go over what we talked about. Here are
ways to improve cognitive accessibility. We can show
important content. Icons, should ideally have text
labels, wrap text instead of truncating and make sure that the browser
find shortcut works. It’s also important to use
motion for clarity. Unnecessary motion can be very distracting. But using motion to enhance
understanding can be really helpful. Finally, it’s important to let
people customize, you can look into
using prefers produced motion. I’m looking forward to see what
happens with personalization semantics and it’s important to make sure
that people can use custom style sheets in order to make things look the
way they want. And that is it. Thank you very
much. And I’d love to hear if there are any questions.
>>Thank you, Elizabeth, that was awesome. I appreciate that
entire session. I especially liked some of the
call backs that you made to the previous sessions which is a good
reminder that so many of the things that we talk about are interrelated that one tends
to build on the other and vice versa. Do we have any
questions?>>That was fantastic Elizabeth
and I felt seen. I want to share a comment that someone made which is that someone has
been experiencing some of the issues that you discussed and
thought it was just them. So they said that everyone so far
has been something that bothers me too but now that I know they
can cause bigger problems than others I will be
more vocal so thank you for sharing
those UX patterns. A lot of people still want to see motion
but can’t handle all motion. As developers, should we put all motions — or animations
under prefers reduced motion or how do you determine which possibly useful
animation such as an icon shaking, you know, because
that’s what the person’s supposed to fill out next,
should be put under the media query for
supports reduced motion? If that make sense.>>So I guess I’m not exactly —
I’m not sure. But I think it’s a good idea to
definitely look and see what the user has chosen for that setting
and if they prefer reduced motion by default probably turn off, as much as
you can. But if there’s anything that can be helpful
like I showed with like cards moving around and being able to
see where you are maybe adding additional options to turn those
specific things back on but I’m not really sure. I haven’t
built anything that way. It’s just something that I’ve noticed where I get excited
about turning motion off and I’m like wait a minute, it under the
off something I need and I have to turn it back on now because
it’s hard to use without it.>>Right. I feel the same way.
>>I also feel the same way so thank you, both, for saying
that.>>So everyone who has been
watching feels seen as well and heard. Well, thank you, that
was really fantastic. I don’t see any other questions. Let me refresh one more time to
see if anything else came through. And nope that was it for the
questions. So thank you so much.
>>All right. Thank you.>>Thank you. For our
viewers/listeners if you like this session, hit the big happy
shiny red YouTube like button. I think it’s red and don’t
forget that you can subscribe to us for future notifications. A reminder that inclusive design
24 is brought to you by our gold supporters. Our silver supporters, Adobe and
site improve and our bronze supporters Samsung internet, DQ systems and
is captioned by my clear text. We will be back on the hour with Courtney Cox Wakefield and their presentation for Folx sake,
designing inclusive content.

Tags:, ,

Add a Comment

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