ADHD anti-patterns on the web

I’ve spent most of my life ignoring my untreated ADHD. Instead, I’ve devised personal hacks to work around it, such as:

  • Excessive caffeine consumption
  • Picking classes which highlight my skills
  • Gravitating towards a career that is compatible with my work habits
  • Etc.

My girlfriend was diagnosed with Autism earlier this year. I started learning more about Autism and the neurodiversity movement. That helped me explore my own neurodivergence; I thought more about how my ADHD effects me.

I have a lot of trouble reading (rather unfortunately — it’s one of my favorite hobbies). I lose focus easily. I lose my place. I find myself rereading the same sentences over and over again. I’ll get down to the end of a paragraph and realize I didn’t absorb anything. Usually I can push my way through, but reading on the web is full of distractions that break my attention. Paying attention to my symptoms helped me identify web patterns which inhibit my ability to process information.

Here are two patterns I find particularly difficult:

Collapsible headers

You know the kind: sticky headers that collapse upwards when you pause a page, or scroll down and read. But the second you start moving upward, they leap back into place. Designed to increase focus, this pattern instead jolts me out of whatever I’m reading. It often covers the content I scrolled back up to re-read. I find this particularly difficult to handle on Medium, especially on my phone or tablet. If you’re logged out, there are currently two bars that appears when you scroll upwards.

While reading, I often find myself having to go back and re-read a previous sentence to absorb the message. For me, collapsible headers reduce my focus, not enhance it.

Animation

Animation is distracting. Please use it with intention.

If there is something animating on the page, that is all I can focus on. I can’t keep my eyes from moving along with it. Sometimes an animation or gif is so distracting I have to hide it with my hand.

I can deal with animation when it’s an integral part of the article itself — for example, if I’m reading a post on animation techniques — but when animation is decorative or superfluous, it hinders my ability to read. (Worst of all are animated ads stuck in the middle of articles.)

If your site uses these two patterns, ask yourself: does it improve the user experience? Or is my content harder to engage with now?

Just food for thought.

Posted on

3 thoughts on “ADHD anti-patterns on the web

  1. I also find that a lot of sites on slow connections are totally unusable with my ADHD brain. Google Maps, for instance, is completely jarring when you zoom in and tiles take forever to load. It takes a lot of effort to retain the focus on what I was doing and to re-examine the map to find my place again.

  2. I, too, am an ADD dude. I was untreated until the age of 42 (18 months ago) — and man, I self-medicated like hell with caffeine. These days, I’m on time-release Adderall, and I usually wash down the morning dose with a Red Bull, just to give the morning an extra oomph.

    This post was great — because I can see myself in it. Same personal/professional coping mechanisms as you. And now I feel the urge to think about the patterns that really bug me.

    As a subset of animation, I find parallax pages particularly difficult to cope with. As soon as I hit one, my brain goes into Shiny Mode (regardless of whether or not I’m medicated), and I want to pick apart how they did it and then start sketching ideas for my own pages, etc. Parallax = fun, but oh so distracting.

    (Anyway, found your stuff while trying to track down the great typography talk from Minneapolis Wordcamp 2015. Hoping to find a video, or at least the slides.)

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.