Improve User Experience by Designing with Cognitive Differences in Mind

A presentation at ID24 by Elizabeth Schafer

I am Elizabeth Schafer.
I’m a senior front-end developer at VitalSource, where I work on our Bookshelf digital textbook platform and I also work on our internal design system.
I’ve had this job for long time now, but have really focused on accessibility in the last 5 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 that 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 affects how well you can concentrate, remember, and make decisions.
Cognitive disabilities are the most common type of disability among children, and effect more working-age adults than visual and hearing disabilities combined.
But they can also commonly 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 focusing on…

…ADHD, or attention deficit hyperactivity 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 to me.
But I really like learning from people with different backgrounds, so I figured it might be helpful to share how things work for me.
I’m going to start with an overview of what ADHD is and how it affects people, and then we’ll go over ways to make sure that the websites and digital applications we build work for people with ADHD.

What is ADHD?
ADHD is a neurodevelopmental disorder that impairs executive function.
Executive function is responsible for things like:
paying attention
organizing and planning
starting tasks and staying focused on them
These are things that everyone has difficulty with at some point, but people with ADHD experience these things to a much greater extent.
They negatively impact multiple aspects of life (like school, work, social life, etc) 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.
If you have a parent with ADHD, there’s a 57% chance that you have ADHD too!

ADHD subtypes
There are three subtypes of ADHD: primarily hyperactive/impulsive, primarily 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 might 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 a lot of the time.
The inattentive type of ADHD used to be called ADD. So that would be attention deficit disorder, without any hyperactivity.
I’m not sure why this ended up being renamed because it’s confusing…
People that are predominantly inattentive can actually end up looking very different than people that are hyperactive and impulsive.
When someone is predominantly inattentive, they might appear shy or in their own thoughts, have trouble finishing tasks, slow to process and respond, easily distracted, or forgetful in daily activities.
And finally there’s the combined type for people that are both hyperactive and inattentive.
These subtypes have a wide range of symptoms, but they share a common set of limitations.

limitation: executive function
The primary limitation is on executive function.
Like I mentioned before, executive function is the set of cognitive processes that allow you to prioritize a 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 consequences, and go forward with what you should be doing, even 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 to do that are important; all of them seem equally important so I don’t know where to start; and I don’t feel the need to start until it’s an emergency and needs to get done *right now*.
I logically know exactly what I *should* be doing, and I know of many, many organization and productivity tools and techniques that help other people, but there’s just a disconnect between knowing and doing.

limitation: regulation of attention
Another limitation we can think about is regulation of attention.
ADHD has “attention deficit” in the name, which makes it sound like the main problem is lack of attention.
But that’s very misleading, and I wish it was named something else.
It’s common for people with ADHD to actually be really good at focusing their attention on one thing.
This is called hyperfocus or flow, 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 it’s in having control over which things we pay attention to.

limitation: working memory
Finally, ADHD can have a significant impact on working memory.
I just mentioned how executive function 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 on to everything at once.

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 things that we build are accessible?

What can we do?
Here are three things we can do:
We can show important content
use motion for clarity
and let people customize
This obviously doesn’t cover everything, but it’s a good start.
Let’s go through each of these more in depth.

1. Show important content
First, let’s talk about showing important content.
What I mean here is that if there’s any content I need in order to perform primary actions, that should be visible to me at a glance.

Icons need text labels
So let’s talk about icons and text labels.

We’re going to look at the Google Play Music homepage so you can see what I’m talking about.
If you look along the left edge, there’s a column of icons.

There’s an icon shaped like a house, one that looks like two stacked squares with a music note on top, a clock with a counter-clockwise 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’ve recently played, top charts etc.
When you have a design like this, you need to make sure 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 off-screen text.
This is all technically fine at this point, but only if we can be sure that people will understand what these icons 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 its bookmark button. In that case, the star represents something that the user has personally marked as something important.
But in google play music, the star icon in the sidebar 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 sighted users.
One way to do that is by adding a tooltip.

Unfortunately, tooltips can be complicated to code in an accessible way.
You can’t just add a title attribute to the html, because that only adds a tooltip for mouse users, not keyboard users.
Even if you write custom code to have a tooltip appear in the right place on both hover and focus, it’s still not clear how it should work on touch screens.
Sometimes websites will make it so that the first tap will show the tooltip, then a second tap will perform the action.
Other times you have to press and hold in order to see the tooltip.
But since there’s no standard, there’s no way for touch screen users to know if they have the option of seeing a tooltip or not.
On top of these technical issues, this kind of interface can be difficult to use for people with poor working memory.
Since there’s no way to see all the labels at once, you’d have to view each tooltip individually in order to see what your options are, and keep them all in mind before choosing which link you want to follow.
This probably doesn’t seem like that big a deal - there’s just a few icons here, and if you use it frequently enough, it’s something you’d just remember and use without thinking.
I can tell you from personal experience, this never happened to me even 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 to start working.
An easy way to solve all these problems…

…is to just include text labels next to the icons!
It’s funny because these links actually do have text labels, but only at certain browser sizes.
I only found this view accidentally when I zoomed out one day, and it’s frustrating to see content being removed because my desktop browser is apparently too small.
Showing labels like this is also incredibly useful for people that use voice control.
It’d be almost impossible to guess what the accessible name of each link would be without them, so you’d have to use workarounds like tabbing through the interface to make a selection.

Wrap text instead of truncating
Another thing we can do is making sure to wrap text instead of truncating it with an ellipsis (when possible).

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, which seems pretty important to be able to see on this page.
But instead of making 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, it’s truncated with an ellipsis.

If I was looking for the project called “Atlassian Product Integrations”, it would be hard to find because there are six projects that start with the word “Atlassian”, and any text after that is cut off.
They do have a custom tooltip you can see on hover and on focus, but again, I’d need check each row one at a time in order to find what I’m looking for.
Quick sidenote: 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 some 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 everything on screen in an instant.
So while I’m talking right now about how this can affect people with cognitive issues that affect their working memory, working memory is something to think about for screen reader users as well.
Back to ADHD: when I run into things like this, it’s incredibly 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.
My thought process usually ends up sounding like this:
Maybe I could use custom CSS to let me see the full project name!
I need a browser extension for that… which one should I use?
Do any of these extensions invade my privacy?
What else do I need for better privacy?
I should look into switching my email, calendar, todo list, notes…
I think like this *all the time*.
It just takes a few seconds for 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 about what I was doing.

Anyway… an easy solution here is to just get rid of the code that introduced the truncation.
HTML tables will natively expand and wrap text to make it fit.
Just to be clear, truncating text isn’t inherently bad.
It’s just that if the text is important to see in order to perform primary tasks, then that text should be visible and not hidden.

Make sure browser find (Ctrl+F) works
One more thing we can do to make sure that important content is easy to see is by making sure that the browser’s 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 accidentally breaking it.

Here’s an example of a website that has purposely changed what happens when you use the Control-F keyboard shortcut.
This is the landing page when you log in to Airtable.
It shows a list of links to all the databases I’ve created, so I can see all of their names and choose 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’d type in ‘user’, and see it highlighted on the page as I typed.
But this webpage overrides that keyboard shortcut, which means that when I press command-f, I see this instead…

So what we see here is that the find bar doesn’t open as expected.
Instead, focus has moved to a search textfield within the page, which unfortunately doesn’t have a focus outline, so I assumed that nothing happened at all until I looked more carefully.
When you type within this textfield, it filters the projects you see listed on the page as you type.

The way this search field works is totally fine - the problem is that it’s taking away something I rely on, and replacing it with something that isn’t equivalent.
This search field only searches within the list of databases, which means I can’t search for anything else on the page.
For example, the word ‘help’ is something I frequently search for, and I wouldn’t be able to do that here, even though there is a help link in the upper right corner.

If we go back and look at the first example of icon buttons without visible text labels, you can see how this design won’t let you find anything by text.
If I know 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 a match exists somewhere on the page, but I won’t be able to see where it is.
I watched Eric Bailey’s #id24 talk earlier today, and he made a point that I really liked.
He said: “When we throw out what the browser gives us for free, we don’t realize there are very real and important things we sacrifice in doing so.”
This is a great reminder to, first of all, 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 any customizations.

2. Use motion for clarity
The second idea I want to talk about is using motion for clarity.

Unnecessary motion is distracting
Unnecessary motion can be incredibly distracting.
I probably see this most commonly on news sites, 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’s an example of a website with a LOT of motion going on - I’m going to describe it first then show what it looks like in motion because it’s hard to do both at once.
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.
Here’s what it looks like… (see producthunt.com/time-travel/2019/9)
This is the most extreme example I’ve seen in a website that I use pretty regularly.
Usually if there’s something moving on the page that distracts me, I’ll try to hide it.
That could include scrolling until it’s out of sight, covering it with my hand, or going into the browser dev tools to hide the offending element.
None of those 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’ve only used this on Firefox and Chrome for mac, but both of those give you the option of adjusting a global setting for how to handle animations.
They can either be on all the time (which is the default), play just one time then stop, or never play at all.

On the other hand, motion can be really useful for enhancing understanding.
I have an animation here from Google’s Material Design documentation, which shows how you can use animation to convey things like hierarchy and order (see material.io/design/motion
It starts out showing three UI cards in a row.
Tapping the first card zooms it in to fill the screen, and includes more details.
Swiping to the side makes the other cards 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…

3. Let people customize
Let people customize!
Give them control over how things look and behave.

Using the `prefers-reduced-motion` media query
Going back to the idea of how motion can be distracting, it’s possible to use the prefers-reduced-motion media query.
This checks the user’s settings at the operating-system-level to see if they’ve 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 with have trouble focusing their attention.
The problem I have with this is that from this single setting, there’s no way of knowing why someone has turned it on.
If they have a vestibular disorder, where any motion at all causes 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 where they are on the page, then we can’t really use this one setting to help both people.
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 for in-app animations, and if you want videos to autoplay.
I could imagine breaking “reduce motion” into subsections.
For example, maybe you’d 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 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.

Personalization semantics
Something that’s still in development that I recently learned about is personalization 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 ideally there will be a specification that 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 of how this might work on buttons.
There’s two buttons here, one labelled “help”, and the other labelled “reply”.
If there was a way to include semantic meaning to these buttons, via something similar to an aria attribute, users would be able to target these elements and add symbols according to their on preferences.
One person might prefer seeing a lowercase i symbol on help buttons, while another might prefer seeing a question mark.
If this kind of semantic information was made available 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 the personalization task force is doing.
And if you haven’t watched it already, John Foliot’s #id24 talk right before mine went over a lot of this.
I love these ideas, and I’m excited to see how this progresses.

User styles
In the meantime, it’s generally a good idea to support custom user stylesheets.
Letting users override styles gives them control over how they consume content.
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 from the increasing popularity of css in javascript.

Here’s an example of how I use user styles.
This is what my Twitter homepage 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 is the point. Twitter wants me to stay on Twitter.
The problem is that I use Twitter to learn about work-related topics, and I’ll sometimes want to look up something I had read about earlier.
I almost always completely forget what I was going to look up as soon as I see this page.
I don’t even like browsing social media, but it still happens.
So what I had to do was install the Firefox Stylus add-on, which lets me write custom styles for specific websites.
The underlying HTML uses obfuscated 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 needed for the time being…

…which is basically everything except for search, and a handful of links to things like notifications and DMs.

Ways to improve cognitive accessibility
Here are some ways in which we can improve cognitive accessibility.
Show important content
Icons need text labels
Wrap text instead of truncating
Make sure browser find (Ctrl+F) works

Elizabeth Schafer
@elizabethschafer

1 / 49

Cognitive disabilities are the most common type of disability but are often the hardest to understand. What do we need to consider to make sure we’re not inadvertently excluding people? We’ll look through the lens of attention-deficit/hyperactivity disorder (ADHD) to explore how differences in cognitive functions can affect usability on websites, and what we can do to improve the user experience for everyone.

Video

Resources

The following resources were mentioned during the presentation or are useful additional information.

W3C: Cognitive Accessibility User Research (Editor’s Draft)

Research by disability
W3C: Cognitive Accessibility Issue Papers (Editor’s Draft)

Issue papers on topics such as security, safety and how they are affected by cognitive disabilities.
W3C: Cognitive Accessibility Roadmap and Gap Analysis (Working Draft)

This is for W3C groups and standard makers looking to understand where the issues lay and how technology could help.
W3C: Making content usable for people with cognitive and learning disabilities (Editor’s Draft)

Gives advice on how to make websites and web applications work for people with learning and cognitive disabilities.
WAI: Cognitive Accessibility

An introduction to cognitive accessibility from The W3C Web Accessibility Initiative (WAI)
WebAIM: Cognitive Disabilities

An introduction to cognitive disabilities
AUI Personalisation Semantics
CDC: Attention-Deficit / Hyperactivity Disorder (ADHD)
Children and Adults with Attention-Deficit/Hyperactivity Disorder (CHADD)
#id24: The intersection of performance and accessibility / Eric Bailey
#id24: SC 1.3.5 - More than just autocomplete / John Foliot

Buzz and feedback

Here’s what was said about this presentation on social media.

Did you know that if one of your parents has ADHD, there's a 50% chance you'll have ADHD too? ~ @elizschafer #id24
— inclusivedesign24.org (@id24conf) October 10, 2019
At #ID24, @elizschafer just defined and described ADHD.

Diagnostics are based on symptoms displayed by white boys. But she just described me to a T.
— Estelle Weyl (@estellevw) October 10, 2019
Watching an #id24 talk from @elizschafer, who explains how certain UX patterns cause problems for people with cognitive differences like ADHD. Every one so far has been something which bothers me too, but now that I know they cause bigger problems for others I'll be more vocal!
— Bart Nagel (@bjnagel) October 10, 2019
Really appreciated @elizschafer's talk on improving user experience and cognitive accessibility for #id24. It's super interesting seeing how what some would consider to be such a simple solution like truncating text can inadvertently exclude users.
— Lana Hedley (@lanahedley) October 10, 2019
@elizschafer Brilliant session for #id24conf - thank you!
— Sarah Bourne (@sarahebourne) October 10, 2019
Cognitive disabilities are the most common disability type, but are often the most difficult to understand and consider in design. Thank you @elizschafer for sharing your insights on how to improve user experience. #id24TO #id24
— Fable Tech Labs (@FableTechLabs) October 10, 2019

Improve User Experience by Designing with Cognitive Differences in Mind

What is ADHD?

What is ADHD?

ADHD subtypes

limitation: executive function

limitation: regulation of attention

limitation: working memory

Application in web accessibility

What can we do?

1. Show important content

Icons need text labels

Wrap text instead of truncating

Make sure browser find (Ctrl+F) works

2. Use motion for clarity

Unnecessary motion is distracting

3. Let people customize

Using the `prefers-reduced-motion` media query

Personalization semantics

User styles

Let's review!

Ways to improve cognitive accessibility

Ways to improve cognitive accessibility

Ways to improve cognitive accessibility

Thank you!

Link for this presentation:

HTML code for embedding:

Share on social media:

Video