Back

Design tips on going dark UI: How to use color to deliver value at every touchpoint?

Is ‘Dark UIs are trendy’ factor enough to prefer a dark appearance over the light one? If so, you’ll have to prepare a bunch of excuses for the users. And, be sure, if you ruin the whole experience with the wrong colors, they’ll just leave without even asking you for change. 

Let’s try to understand what stands behind the idea of adding a dark theme to the mobile or web app — all the insights come from Purrweb design team. We came up with very vivid use cases and indicators where the dark theme can work and fit best. Hope you won’t fall to the dark side after reading that 🙂

Session length matters

Time spent in apps mainly affects the way we perceive content. This includes our ability to see clearly things on the screen — be it headlines, menus or icons. To explain how session length influences content perception, let us share how painful it can be to work in Google docs for long hours.

A complete white background is totally fine to easily write texts — nighttime or daytime — no difference, right? Not so fast. If you’re writing for like an hour — that’s ok. Even a couple of hours won’t be that troublesome. Although, if you’re doing this for 5 hours at a stretch it turns into ‘Wait [eyes trying to figure out where to look] what?’ It does feel like someone tried to poke your eyes out —unsuccessfully but still hurts.

Google will introduce the dark-mode one day. And third-party walkarounds won’t be needed anymore

If your users do something for prolonged periods of time in your app — whether they write code or read content — just let them the option to turn on the dark mode. It doesn’t mean that a dark-colored background is a must for all apps with lots of texts — the main focus here is ONLY on how long the app is in front of users.

As the Google devs would make all writers’ working sessions more productive if added a real dark mode:)

Engaged time matters as well

When it comes to ‘dark on light vs light on dark’ debates, we don’t just refer to how long users interact with the app but also when. There’s no sense in overcomplicating things here, let’s just simplify it to day or night.

There is a clear correlation between light conditions and the best color scheme based on the severity of eye strain the interface can potentially bring. So, you understand why evenings, nights and mornings are the dark UI best friends, right?

We use Medium app throughout the day, although the black theme is our fave for the bedtime routine

As a good example of thinking about their audience, let’s take Apple. MacOS Mojave’s new theme darkens everything in a very smooth way. iOS has also stepped on this path — there’s a big chance the official dark mode feature will become an upcoming update for iOS 13. For now, they’ve released a new ‘Smart Invert colors’ feature that looks ALMOST like a dark mode.

By saying ‘Looks almost’ we mean that the smart part works only for certain stock apps.

Apple Music is totally fine, see? Watching profile pics in Slack is a total disaster though

The logic is stupidly simple. When the sun goes down or rises we do not want our screens to be the only source of light — it unbelievably hurts. When we lie in bed mindlessly scrolling the feed — we hardly wanna see the harsh bright light spoiling that sweet joy of doing nothing. So, to make sure users return over and over again, make the app easier on the eye.

You understand what content the app drives

This is all about what you actually plan to present. Videos, dropdowns or data tables — you name it. Plus what areas you wanna highlight.

In iOS, the Clock app helps us primarily focus on time. To understand what a black background brings here, imagine you’re watching a concert with a single performance artist on stage. All the lights are focused on a single area to magnify the image and completely fix our attention.

Nothing here would distract you from the numbers

For visually-driven interfaces, the dark mode will definitely do the trick. By ‘visually-driven interface’ we mean graphics, charts, and images — not texts. Don’t do this to bring a prestigious look but to make meaningful UI elements stand out.

‘Teens love dark UIs!’ is NOT on the list

We won’t tell you that all teenagers find dark modes stylish or sophisticated. Neither would we advocate for choosing a light-colored background for grown-ups if this article was about cases when such perform well. Stereotypes are fine to rely on, fact. Although no matter how old your user group is, get feedback and track competitors’ designs to better understand what they really like and make it all work.

P.S. About guys who want their products to support both color themes from day one. For god’s sake, not for MVPs. At this stage, the goal should be ‘Stay lean and test things out‘, not ‘Come up with something that changes color tones’.