UX/UI Design can help so much with mental health issues

Katrin Klink
Bootcamp
Published in
6 min readOct 28, 2022
Image source: Anthony Tran via Unsplash

Imagine that you’re completely stressed and your schedule for the next few hours freaks you out. No chance to deliver what you’re supposed to do.

Well, we all have those days; and usually, this is just when some unexpected things will happen to make life even more miserable. Now, exponentiate this with 10. Or even 100. And imagine experiencing this 24/7, for a long, long time. Welcome to a glimpse into the world of persons with mental health restraints …

The number of people with mental problems — from struggling with their daily tasks to serious, clinical symptoms — is increasing every year. It’s not an issue that just a few random people are confronted with, it’s a topic that affects more and more people out there. So it’s worth having a look at solutions, and how we can take accessibility to the next level by including some strategies that help with mental overload.

Two screens, one crowded and overloaded, the other one clearly structured

1. Make things simple

If you can implement only one thing, take this one. Generally, UI should focus on clarity and eliminate anything unnecessary anyway. Even the “normally” stressed-out person is overstrained by too much input. I don’t have to quote how much information we all have to digest every single day compared to the past (which is, 2, 5, or 10 years ago), we all experience it in our day-to-day life. But any form of information overload distracts, overwhelms, and seriously compromises the functionality of what we as UX/UI designers intend to deliver.

First step: Information Architecture — offering a clear structure that makes it easy for users to navigate from A to B or wherever they want to go (yes, that’s why user flows are such a great tool). Don’t make your users search, doubt, or even hesitate. Focus is difficult under stress or with many forms of mental problems. How often did you rely on a guidance system in a noisy and crowded foreign airport? It’s exactly the same as we can do with information. Guidance systems don’t have to be visible, but the idea should be included in any concept of site structure, navigation, search, or content.

Picture of two wireframes that show the difference between an overwhelming amount of text, and a screen with structured, easier to understand way to deliver content

2. Deliver structure and breaks

When our brain kind of freaks out, things get increasingly erratic. Anxiety leads to a feeling of losing control — which in turn enhances anxiety — a vicious cycle. Being confronted with a large amount of information (f. e. a large text volume you have to go through to find important information) can be extremely discouraging or even trigger a panic attack.

We can’t make those feelings disappear, but we can use our UX/UI magic to at least not increase them. And maybe we can deliver a small sense of achievement by helping to manage the tasks of our screens, and thus have a stabilizing effect on a burdened mind. Because everything that feels stable, trustworthy, familiar, and welcoming helps fight anxiety.

— consistency is key. It assists with understanding the functionality and with feeling in control when navigating or taking action.

— deliver structure by creating “content chunks”, images, bullet lists, etc. Small bits are always easier to digest, and this applies to our eyes, too.

— white space is your best friend when creating UI for mental health-challenged persons. Remember the airport metaphor? Crowds distract and make us feel insecure. Space always helps.

Two wireframes to show the difference between a crowded screen with contrasting colors, and a more sorted version that is clearer and easier to grasp

3. Avoid „loud“ design

Usually, our brain filters incoming signals. We notice only a fraction of the data that our senses are collecting at any given moment. We can sit in a café and don’t even hear the street noise. Likewise, we concentrate on our work and blend out what happens around us. Our brain shields us from too much, too loud, and too intense. In overstressed situations, or with conditions like ADHD or PTSD (Post-Traumatic Stress Disorder that people can develop after experiencing a trauma, an accident, or loss), our brain loses its ability to filter. Everything is perceived as extremely loud and intense. This includes f. e. colors, contrast, messy content, extremely sized text, or forms (rounded corners are preferred to sharp ones).

The same applies to analog situations, too. How often were you really annoyed by a “please hold the line” melody, frequently interrupted by all but helpful voice messages? Imagine that each sound makes your heart race and music is too intense and emotional to listen to. I recently found myself in a line that offered the option to wait in complete silence. It’s so easy to do, but could make such a difference for someone who struggles with mental stability!

4. Transform errors into a nice (user) experience

We all make mistakes. Good UX aims at eliminating most of the possible errors beforehand, but users will always find a way to choose the wrong direction, somewhere, sometime. We all hate making mistakes — and in a vulnerable state of mind, this could blow up into something big and hurtful. Or maybe something that adds to all the self-blame.

UX Writing and a nice way to display the message can make a wrong turn transform into something that can even add to a positive brand experience. Whenever we’re lost, don’t we wish there would be someone to save us? That’s why superheroes are so popular.

Not all who wander are lost, and not all who make an error must end up being distraught and abandoned. We can deliver superhero UX/UI that brings a little light note into someone’s day. Make help easily available, describe steps to solve any problem, and make your design the shoulder to lean on.

Two screens show that fewer choices make decisions a lot easier

5. Avoid the choice trap

Science has shown that the more choices we offer, the harder people do with a decision. More choices sell less — even with mentally stable people. Having a choice between two things basically means that you have a 50:50 chance to make a wrong decision! With three offers, it’s a 2:1 bet that you’ll do it wrong.

In a mental state where life per se seems to be dangerous or impossible to cope with, any decision you spare a person is a gift (this includes navigation menus, the number of links at the end of an article, etc.)

6. Flashy is not always cool

Moving things in UI designs are undoubtedly nice (and the fun part to do while creating high-fidelity prototypes, aren’t they?) They oftentimes even help with usability (like animations that indicate successful uploads or point out a hidden function). But movement can also trigger stress responses and mental problems. Can you imagine that mere scrolling can make affected persons feel “seasick” or like throwing up? Slow motion always is better than fast and flashy things, and doesn’t several movements at the same time sometimes can feel overwhelming even for most of us? Flashy is not cool by default. Animations can help and guide, but they can be a nuisance, too — so choose wisely.

close-up from a profile screen for mobile devices, with a “safe mode is on” switch selected

Just a thought

Maybe one day, we will live in a world where users will have the choice not only to choose a “dark mode” or “night mode” but a “mental support mode”, too. Silence — visual and auditive — became rare and precious in our today’s world. We can at least consider making the world a bit less strenuous — through mental health-friendly (UX/UI) design.

--

--

Katrin Klink
Bootcamp

studied graphic design/ illustration, started with all things internet when the internet started. Storyteller, traveler, UX enthusiast and confessing optimist.