5 tips to help people with anxiety navigate your website
“It feels like I’m tied to train tracks, but there’s no train coming.”
That’s how I described my insomnia, hyperventilating, dizziness, and intangible, crippling fear to my childhood psychologist when I was 12 years old.
“It sounds like you have anxiety,” he said.
And here we are — some 20-plus years later — and I’ve learned to adapt to my unhappy fellow passenger called anxiety. The panic comes when it wants. I take deep breaths, I follow my mindfulness techniques to “let my thoughts pass by like clouds in the sky.”
But sometimes, I get online and look at… anything… to focus on something else. Maybe to explore a topic I’m curious about, or maybe it’s to watch a video on YouTube.
Navigating the web with anxiety is a unique experience for me and the 7.3% of people around the world who have the same diagnosis.
What is anxiety disorder?
Anxiety disorder is defined by Mayo Clinic as an “intense, excessive, and persistent worry and fear about everyday situations.” They can manifest as phobias and fears, or they can be triggered by stressful events or situations. And sometimes they can come out of nowhere.
People with anxiety experience an array of symptoms that can include:
- Feeling nervous, restless or tense
- Having a sense of fear, doom, or panic
- Experiencing increased heart rate or blood pressure
- Breathing rapidly or unevenly
- Sweating, trembling, and trouble concentrating
- Experiencing difficulty sleeping — falling or staying asleep
- Feeling the urge or need to avoid things that trigger anxiety
tl;dr if you don’t have anxiety: It’s the pits. It can encroach on good times with friends, vacations, work, or general health.
Making the web better for people with anxiety
In those panic moments when I’ll do anything to get my mind off whatever is causing it to race, I often turn to the web to find something to distract me. Sometimes it works, and sometimes it doesn’t.
But I have started to take note of the types of web experiences that help my anxiety, and those that can exacerbate it. So here we go!
1. Give your content room to breathe
Real walls and proverbial walls can feel like they’re closing in when you’re experiencing anxiety or a panic attack, so my advice to designers and web experts: Stop crowding!
White space is your friend. Give your content — from words to images — room to breathe on the page.
2. Make your call-to-action stand out
The rule of calls-to-action (CTA) is that they should exist only once on a page. As someone who navigates the web with anxiety, having three, four, or more options on the page as my “next step” is overwhelming. It results, usually, in me making no action at all.
Stick with one actionable next-step per page. Give that action some purpose and room to breathe! See tip #1.
Take the Calm app as an example. Yes, this app is geared specifically toward folks like me (and maybe you) who need mindfulness in their lives, but they do such a nice job of keeping design simple, easy to use, and with a clear CTA. They don’t get in your way. They don’t immediately try to get you to purchase a subscription. They just want you to take it easy and get started.
3. Use animations lightly (or not at all)
When animations are jumping off the screen, changing with every scroll or drag of the finger, it gets me anxious (and dizzy). Did I mention I also experience vertigo from time to time?
There was a time when animations were super cool. Remember those sexy “under construction” gates on your geocities website?
(I’m not going to lie, even those flickering construction lights in that gif are making me anxious.)
But I digress. Animations have a time and place. According to designer John Hughes at Elegant Themes, you’re best suited to use animations for:
- Microinteractions, like buttons
- Reveal hidden menus
- Display hidden information on hover
- Create sliding galleries or transitions (such as promotion carousels)
And that’s about it! Websites that have animations of content as I scroll, or even parallax scrolling, can be distracting and distressing to people with motion sensitivity or anxiety.
If you’re not sure if something should have animation or not, definitely check with real people. And if they can’t tell you, it’s probably best to leave it out.
4. Use colors that have good depth and contrast
Just like any other user, color contrast is important to my anxious mind. Trying to decipher white text on a light gray background isn’t my forte. In fact, I don’t have the best vision to begin with, but when I’m anxious or panicked, my vision gets worse — blurry, confused, my eyes jolting around the screen.
By using bold, deep colors with appropriate color contrast, you’ll make it easier for me to understand what you’re trying to say.
Don’t just do this for me. Color contrast is an important feature of Website Content Accessibility Guidelines, or WCAG. To make sure your site is accessible, keep your contrast top-of-mind in your design and development. Always check color contrast if you’re not sure.
Check out how Samsung uses a nice balance of white-text-on-black and black-text-on-white throughout their Galaxy Watch Active website. They also don’t crowd their design and make content easy to browse. Limited animations also don’t get in the way of my experience.
5. Make content easy to read: Scannable, friendly, and simple
I’ll tell you what’s most difficult when I’m experiencing anxiety and panic: Reading. I try, my goodness do I try, to pick up a book and focus on words. But walls of grey text make it hard for me to focus.
The same goes for the web. Too much small text, too many paragraphs, too complicated a story and I’m bound to go somewhere else with my time and attention.
My advice for writers out there who want to create an inclusive experience, please be friendly with simpler, more straightforward content. Break up your paragraphs. Kill your darlings. Cut, edit, and cut again. And use subheads to introduce new topics.
Media — images, video, maps, etc. — can also help break up the monotony of gray text, too.
Atlas Obscura is one of my favorite corners of the internet because they have such interesting stories to share. I always learn something new. But they also do a fine job at giving space to their stories — short paragraphs, lots of white space around the story, and bold, big imagery to break up the reading experience.
Featured articles, like “The Spirited Afterlife of Detroit’s Little Red Demon,” have a sepia tone to the background and darker brown text, which reminds me of my Kindle when I have it on night-mode. It’s soothing to my eyes.
At the end of the day, get out of the way
Those of us (myself included) who work in web user experience (UX) daily have a tendency to spin our wheels. We take user data, research, and insights very seriously and want to plan for every eventuality so people can do what they came here to do. The intentions are pure.
But sometimes those spinning wheels lead to more distraction: Competing colors. Long, scrolling content. Or just too much noise in general.
If I’m frustrated with a noisy website that’s getting in the way of my already-cloudy brain fog, I’ll simply log off or go elsewhere. For people who face cognitive disabilities, motion sensitivities, or literacy issues, these issues are probably even more complicated and frustrating.
You don’t have to plan for every situation, or every possible question someone might have. Make your contact information easy to reach. Put the navigation in words humans understand and make it clear. Build a design that focuses on a person on the other side of the screen before anything else.
Give people what they need when they need it. Then stop there and get out of the way.
