Focus in a distracting world

Jeremy Nagel at UXDX Community: How to Balance Focus, Inclusivity, and Brand Magic. Video: https://youtu.be/oTKAIcjYPjw

Readable transcript: edited from the recording's captions for readability (fillers and false starts removed, punctuation and section headings added). Wording is the speaker's own. Timestamps are positions in the video. Names marked [?] could not be verified against the audio.

Why design for people with ADHD

[00:00:00] I'm Jeremy, I'm the founder of Focus Bear, and one thing that has colored my perspective on design and development is that I've been diagnosed with ADHD and autism myself. I'm based in Australia, 35 years old, and I used to be a software developer. Now I don't write as much code; I'm more focused on building products. I'd like to talk to you about why it's worth designing for an audience that might include people with ADHD.

[00:00:26] One of the data points that you can see here is that the rates of diagnosis of ADHD in the adult community are going up quite rapidly. They doubled in the last two years, and a large part of that is that historically women weren't diagnosed very often, because the diagnostic criteria were very oriented towards men. That's now being adjusted, and we're seeing more even rates of diagnosis. We're at the point now where about 5 to 6% of the population have a formal diagnosis of adult ADHD.

[00:01:04] There are also common comorbidities with that. We see around 2.8% of the population have ADHD and autism, and that really affects how people view the world. There are other comorbidities too, including dyslexia, binocular vision disorder, anxiety, many things that often go along with ADHD. I think we need to start factoring this in to the way that we design products to help this segment, and a lot of the changes that we might make actually help everyone.

Three states of attention

[00:01:41] Some of the traits of ADHD: if we look at the name, attention deficit hyperactivity disorder, it includes this idea of deficit, which isn't always nice. But for me as someone with ADHD, I can certainly relate to at times having issues with staying focused, with being a bit impulsive and being hyperactive, and that has impacts on how I view the internet. If I'm in a distracted mode, I might end up having hundreds of tabs open. This is certainly something that I've done in the past. I'm a bit better these days, I limit myself to five tabs, but in the past my desktop would often look like this.

[00:02:35] The result of that is that I'd start work on one thing. A recent example was I was applying for a new retirement fund, or superannuation fund, and I was going through a form. At one point it asked me to provide my tax file number. I didn't have that handy, so I was switching to another app, and as I switched into that app I saw something that I hadn't finished yet in that app, and I switched to trying to finish the task in that app. I ran out of time to complete the task, as I had to go to dinner, and I never ended up finishing it.

[00:03:09] Compounding that, there was no way for me to save my progress, so the time that I had tried to spend was a complete waste of time, which felt a little bit frustrating. I did go back the next day with a little bit more time and a bit more focus, and I was able to sign up. But it was an example of something that could be improved, and I'll talk about that a bit later.

[00:03:35] The other state is getting into a state where I am so deep in focus that I lose track of the outside world, and I forget to take breaks, and I start having neck pain because I'm hunched over my computer a little bit like the guy in this video, and I might need a reminder to take a break. And the final state is more like a normal or a Zen mode, where I'm quite focused on what I'm doing but not so focused that I'm unaware of my surroundings. I'm still aware of my bodily sensations, but I'm not so distractible that I'll have 100 tabs open. I think our goal will be to try and help users to get closer to that Zen state while they're using our apps and websites.

What Focus Bear does

[00:04:36] That's something that we're trying to do specifically with Focus Bear, where we're building a tool to help manage distractions. We allow people to nominate which websites are distracting for them. For example, if you're focusing on your computer and then you have a moment of weakness and try and open Facebook on your phone, it'll catch you. We also let people be a bit more intentional with their use of sites that might be super distracting. I find LinkedIn can be a problem for me: if I go on the LinkedIn feed, I can very easily lose track of what I was there for. So we let people nominate an intention before they go onto the site, and we blur out the actual site until they've set an intention and a time limit for the site.

[00:05:22] We also have AI-powered distraction management, where if you go onto a site that isn't specifically allowed or disallowed, it will check for you. If you said that you're studying for calculus and you go to a Wikipedia page about calculus, it will allow it, but then if you navigate onto the history of calculus, it'll say that's probably not relevant. It's very easy to get into rabbit holes where the overall site might be productive, and Wikipedia may be a helpful resource, but specific pages there are not helpful.

[00:05:57] And finally, I mentioned that I struggle with having too many tabs open, so we built a feature to limit the number of tabs that you can have open. I have it set to five, which is quite a constrained limit. There are times where it makes it tricky, but the majority of the time that's much better for me, because I don't have unfinished work. I have to finish what I have open before I can open a new tab.

[00:06:25] The other thing we have is an awareness that the ability to focus is quite contextual, and that it's not just about having sites that are blocked. It's about starting the day right. I found that there's a big difference in my ability to focus if I do some meditation, aerobic exercise and yoga before I start work. I did my yoga before I gave this talk, and it definitely helps me. So that's another thing that we've built into the app.

[00:06:56] I'm mentioning these knowing that not everyone is building focus tools for people with ADHD, but there are some elements here that are applicable. If we think about some of the new additions to the Web Content Accessibility Guidelines, they really help us think about how we structure our apps and websites to support people who have ADHD. Maybe they're using a tool over the top to help them to stay focused, but we can still do things, even if someone is in a bit of a distractible state, to help them achieve the goals that they have.

Running low on spoons: explaining inputs

[00:07:34] The first one is a concept called spoon theory. It's quite common in the neurodivergent community to talk about running low on spoons, which means that our ability to concentrate is diminished because we might be physically tired or emotionally overwhelmed, or have just done a lot of focused work, and therefore our ability to pay attention is diminished. But we can still help people in that state.

[00:08:01] WCAG criterion 3.3.2 talks about input fields, for example. This is a pretty obvious thing: having form fields that don't have an explanation. For example, the Amazon website doesn't tell you what the password rules are, but there are rules. So if you can articulate what the rules are and give someone an indication of when they have completed them, that can help. The same thing with unusual form fields: if you're asking for someone's date of birth, they might be wondering why you need that, and explaining it with a tooltip can help.

[00:08:43] We found out with the Focus Bear app that we've got quite a complicated settings interface, so we've added the ability for people to see more information about a particular form field in context. If they hover over the tooltip, it will give them more information, but we don't overwhelm them all at once. The same thing on the website: there's often a tension with showing a very compressed version of the content, because we know people skim, especially if they have ADHD. I know I skim a lot. But there are also points where people want to see more information, and it can feel hard to satisfy both needs. I think you can do that by having expandable content. For example, someone clicks on read more, we show a little bit more information here, and we also have a link for even more information.

Working memory and autosave

[00:09:38] Another common challenge is working memory, which is the way that we keep tasks in our head. As I was going through that form process to sign up for the retirement fund, in my head I had, I need to go find my tax file number, but then I almost lost it as I was going into the other app and saw the other thing that I was working on. We can help people by doing some things to preserve their working memory.

[00:10:07] One of the things is to avoid redundant entry, which is Success Criterion 3.3.7. An obvious thing is not to ask for the same thing twice. If you need the shipping and billing address, I think it's not done very often anymore, but just make sure that you have a way of copying the information, for example. And more relevant for working memory is an autosave feature. We see it, for example, in Google Forms, where as I'm completing a form, if I get distracted halfway through, I haven't lost everything. Whereas with that retirement savings account, I did lose all my work because there wasn't a way to save halfway through.

[00:10:53] That can really help, because it's not just people who might get distracted. Their computer might crash, or they might have an appointment that starts and they have to go do something else. So making a way to save their data halfway through and allowing them to resume is really important.

Sensory difficulties: motion, contrast and fonts

[00:11:13] Another thing to bear in mind: I mentioned that there are comorbidities that come with ADHD, and one of them is sensory difficulties. People often struggle with animations. We saw in the previous talk how branding elements can be really powerful if we have animations, but we need to bear in mind that some people don't deal well with that. For example, in the early version of Focus Bear, as people were doing habits, we had some GIFs that would try and encourage them. I liked it, but we had some feedback that it was distracting. So we changed it so that it's a bit more subtle, and the GIFs go away after some time.

[00:12:00] We also have a setting where you can turn off the animations completely, and that will automatically turn on if they have the operating system preference for reduced motion. That's something that we have access to in CSS: you can pick up that operating system preference for reduced motion. You can show animations to people who like them but hide them for people who don't like them.

[00:12:27] Another common issue is color contrast, and particularly too much white on the screen. Dealing with the negative space by potentially having a dark mode instead: there tends to be a much greater preference for dark mode amongst the neurodivergent population, so making sure that your app works in both color schemes is important.

[00:12:55] Dyslexia is also a common comorbidity, and one thing that helps with that is using sans-serif fonts. There's not necessarily one font that works well for everyone. There's some research into this, because there are some specialist dyslexic fonts like OpenDyslexic and Intel One Mono, which were designed specifically for people with dyslexia, but the research is pretty ambivalent about which one works. It's not like there's one amazing font that works for all dyslexic people.

[00:13:29] But it's important to have a sensible default with a sans-serif font. Poppins is a really nice font, I think, or Arial [?]. Some people even like Comic Sans. Even though designers hate it, it can be quite good for some dyslexic people. Just let people have the choice. In a web app, often people can control that themselves through a Chrome extension, but if you're building a mobile or a desktop app, it can be necessary to let people choose the font, and that has impacts on the design of your app.

[00:14:02] When we were adding in different font selections for Focus Bear, we had to test out all of these different fonts, because we found that we had text overflow issues with certain fonts, especially Intel One Mono, because it has a bit more spacing than other fonts. We had to change the layout of the screens accordingly. As an example, here's what it looks like in, I think this was OpenDyslexic. For some people it's preferable to have it in that mode.

Interruptions, font sizing and layout

[00:14:35] Another WCAG point is around interruptions. We see this quite commonly in the modern world: everyone wants to send a push notification. If you're not sending push notifications, you're probably sending emails and SMS, and that can be relevant in some cases if you're helping people achieve their goals, but it can also be very distracting for them. It's important to think about when you want to interrupt people and what type of interruptions you want to have.

[00:15:06] We have a feature within Focus Bear to help people be punctual, and for that it is necessary to be really in your face. The reason we built this is because I personally would often not see the notifications that came from my calendar, because they're very subtle in the top right. They don't move or change color at all. So we decided to build something that would be a little bit more obvious, where the notifications change: as it gets closer to the event, this emoji changes from a happy face into a scared face, and the text changes, and then as you're getting just to the time, it starts talking audibly. Sometimes I'm so hyperfocused that I won't even notice until my computer starts using the Siri voice to tell me, "Your meeting's about to start, get there quickly." That definitely helps me to see it.

[00:16:04] So it's worth bearing in mind that if you want to notify someone, actually notify them, and if you don't need to notify them, then don't do it. If your goal of getting more eyeballs on your product doesn't align with users' goals, really reflect on whether it's ethical for you to have an in-your-face notification.

[00:16:25] I mentioned binocular vision disorder as another comorbidity. One thing that helps with that is being able to have font sizing options, and again that has impacts on the design of your app, because it may look terrible if the font is made larger. You probably should test that. You should try out those Chrome extensions that allow you to change the font size and make sure that your design will reflow accordingly if the font is a lot larger or if someone has zoomed the site.

[00:16:59] There are some obvious things around color palette. I don't think anyone here would make a website like the one on the left, but in general a simple color palette is best, making sure that there's a bit of negative space and not too much visual clutter. Also making sure that the forms are laid out in a way that's going to support the way that people normally navigate visually, avoiding zigzagging.

Helping with impulsivity

[00:17:31] Another point that is maybe less obvious is helping with impulsivity, which is a common ADHD trait. One thing that I love: I have a bank in Australia called Up Bank, and they have this feature called Locked Savers. It's designed to help people to be less impulsive with their spending. The idea is that you put money into a sub-account and then you can lock it, which means that you can put money in but you can't take money out unless you wait four hours or call a friend to help.

[00:18:08] I think this is a really good example of how in some cases we want to create friction for users if they're doing things that may sabotage their goals. It may be that someone has seen an amazing product that they want to buy immediately, but if they had a couple of hours to think about it, they probably wouldn't go ahead. In this case they're slowing people down in a good way, and people really like this feature because they see how it can support their goals.

[00:18:42] In other cases, you want to make it so that if someone's a bit impulsive and they just click all the buttons, their actions are reversible, because it can be quite common to accidentally click on delete. There's a bit of a tension here: in some cases you might want to have a confirmation pop-up, are you sure you want to delete, but it can be better to just support the ability to undo that action.

[00:19:09] We also saw this with Focus Bear, where as part of our onboarding we go into a full-screen mode, and we noticed that people weren't reading the first dialog where we warn them. We had a dialog saying, "Do you have two minutes now to go through our onboarding? This will go into full screen," and people wouldn't really read that. They'd just click on next, because you're used to, when you're installing an app, just going next, next, next through the installer. You don't read the terms and conditions, at least if you have ADHD.

[00:19:38] So we added in a double confirmation at that point to break that pattern, because people are used to just proceeding through and skimming and not really reading it, and we found through user testing that it was very shocking for people that it would suddenly go into full-screen mode. I don't have a screenshot of it, but we essentially added a second confirmation dialog saying, are you sure, this is going to move you into full-screen mode, are you okay with that? And that avoided the surprises.

Load time, hyperfocus and assistive toolbars

[00:20:10] Obviously as well, there's tons of research about loading time being a killer for conversion rates. I think it's even worse for people with ADHD. I really find it intolerable, and I will give up on an app if it takes too long to load.

[00:20:28] One thing that we're seeing more of is supporting people if they get into hyperfocus on something that doesn't align with their goal. It's possible to use an app like Focus Bear to help with that, but it's also possible for your app to do it. We've seen that feature added into YouTube, for example, where you can change the switch here to be reminded to take a break while you're using YouTube. I think it's probably not enough, but something like that recognizes that people can become addicted to your product, and that people who have ADHD may get into hyperfocus on things that aren't relevant.

[00:21:13] If you're building something that might take people down a rabbit hole that they shouldn't be going down, it's important to give them some way of setting limits. I think it's an ethical requirement for designers to be thinking about this, to be thinking about how we support people to have time well spent rather than losing their attention down rabbit holes.

[00:21:38] One final thing that might be an option is assistive toolbars. There are toolbars like Assist B [?] that you can put on your website, and they sometimes have ADHD-friendly profiles. I think this could be helpful, but it's certainly a Band-Aid fix. It's not really enough; you can't just do this. But it's potentially better than nothing. In this example you can see how it shows an overlay to help people just focus on part of the screen at a time. But I think there are more fundamental things that need to change in terms of really thinking about the text on the screen and making sure that it is ADHD friendly.

Personas, testing and hiring

[00:22:29] So if you want to design for ADHD, I think it's important first of all to think about it: to have some of the personas in the design process be neurodivergent, to have people who reflect your user base, and that will often include people with ADHD, autism, anxiety, bipolar disorder. If you can have that in mind, that's going to help. It's hard to really understand what it's like, and each neurodivergent person is a bit different. So it's not like you can have one tokenistic neurodivergent person and assume all neurodivergent people are going to be like them. You probably need to test with a few people with ADHD and maybe a few people with autism and get their feedback as part of the process.

[00:23:20] And finally, if you can have people on your team who reflect the neurological makeup of broader society, that's going to help you to design in a way that's going to align with the needs of people. There's a general lack of employment for people with autism in particular, an eight times lower rate of employment than the general population, and it's not much better for people who are dyslexic or have ADHD. But they have really powerful strengths to bring in the right environment. So consider what you can do to, for example, change the interview process so that you're not surprising people who need a bit more time to think with off-the-cuff questions. You can give people work tests rather than just asking them a bunch of questions, and you can share the interview questions beforehand.

[00:24:09] If you do those things, you're not only going to help people with ADHD to better use your app or website, you're going to help everyone. Like most things related to accessibility, it is very contextual. You can have people who have permanent vision impairments, and you can also have people who are just at the beach and they've got sun in their eyes, and it's very hard for them to see. If you have poor color contrast, that's going to impact them. The same thing from an ADHD perspective: we all have days where we're a little bit distractible. If you haven't slept much, or if you've just got a lot going on, it can be very hard to pay attention. So if you bear in mind some of the changes that would help people who have permanent impairments to their attention, you're going to help people who have temporary impairments as well.

[00:25:01] Happy to answer any questions, but thanks a lot for listening to these ideas on how you might support ADHD.

Q&A

[00:25:09] Host: Excellent, thank you very much, Jeremy. That was really interesting, because I wasn't aware of some of the topics that you brought up there. I hadn't thought of some of them either, so thank you for sharing that.

[00:25:23] Jeremy: No worries. Some of it's quite new from a WCAG perspective. The guidelines on accessibility have changed recently to include more of those cognitive aspects.

[00:25:35] Host: Excellent. I'll jump in with the first question, and I'm going to sound heartless here, and it was the same question I asked Ivan. He advocated for, okay, we want to spend an extra bit of time to get that delight into the product. I'm just being the heartless money guy here and saying, okay, we've got our functionality, and now you want to spend a few weeks making it delightful, and then you want to spend another few weeks making it accessible to 1%, 2%, 3% of the population. How do you try to get that across? Because the cold-hearted capitalist will say no.

[00:26:23] Jeremy: I think they should look at the research if they do that. As I was ending with, it's quite common for people to be distractible at certain points in time. We know that when people are buying things, they're probably in that distractible state, more or less. Some come with a mission that they're going to buy a particular thing, but there's a ton of research around loading time being really bad for conversion rate, and having any friction in the checkout process. I think you can basically assume that if your app or your conversion flow is optimized for someone with ADHD, you're also optimizing for someone who doesn't really like your product and is comparing a bunch of things, and maybe they're watching TV at the same time as they're using your site, so they are distracted.

[00:27:14] Host: That's a good point. I was just thinking, could you use that to your advantage? Could you take advantage of some of those impulsive parts, from a negative perspective? If you're an e-commerce store trying to sell things, it's, let's make it as impulsive as possible.

[00:27:31] Jeremy: Yeah, well, there are certainly some dark patterns that can be employed. Arguably the one-click checkout from Amazon could be a dark pattern for some people. It probably leads to people making impulse purchases that they regret.

[00:27:46] Host: Yeah, I've been caught out a couple of times on the way they make it recurring instead of one-off. They default it to you buying a recurring subscription to some products, instead of, no, I just want it once.

[00:28:00] Jeremy: Yeah, I don't think that's responsible. I think in that case it may be an example of where extra friction might be needed to make sure that people understand what they're actually signing up for.

[00:28:13] Host: Brilliant. All right, well, that brings us to time, so thank you very much, Jeremy, for sharing. I really enjoyed it, and I hope everybody out there did as well.

[00:28:21] Jeremy: No worries.