Designing for the Dark: The Science Behind Dark Mode

We have now become a generation of midnight scrollers, flexible workers, and early morning emailers. A shocking 61% of people who responded to a 2016 Deloitte survey admitted to checking their phone within the first five minutes of waking up in the morning, with some even doing so before saying “good morning” to their partners, laying beside them in bed!

Staring at glowing screens in low light has become commonplace. In this post, we examine why this is a problem, take a look at the effect it has on our brains, and ask what we, as digital designers and QA testers, can do about it.

The circadian rhythm

We, humans, have spent the majority of our existence on this planet living on the land as part of nature. As hunter-gatherers, we relied on natural light to help us forage for food, avoid predators, and track our own prey. Before our migration from the planes of Africa to settle around the world, and eventually create what we now call our modern civilizations, what we know as a circadian rhythm was developed within us. This is a deeply in-built cycle that tells our body when to wake, sleep, and eat; the biological and physiological processes that tick over in predictable patterns every day. This internal clock has evolved over millennia, and it responds to external cues such as sunlight and temperature, which help determine if and when you feel energized or exhausted at different times of the day.

These circadian rhythms regulating our internal clocks have served us well over the millennia, but now they are suffering because we are throwing a giant glowing spanner into the finely tuned clockwork of our brains.

The impact of blue light on the brain

We collectively look at more unnatural light than ever before in human history. The average person in the UK spends over 3 hours looking at a phone screen every day. Our brains – incredible as they are – are unable to comprehend that this blue light is not natural sunlight. They become confused when the internal clock says it is getting late, yet bright light is registered as entering directly into the eyes. It throws the whole system out of sync, which studies suggest is having a devastating effect.

We have learned that exposure to light suppresses the production of the hormone melatonin, whose job it is to signal to the body that it’s time to shut down and go to sleep. Blue light seems to be particularly effective at suppressing melatonin.

The 2017 Nobel Prize winners Jeffrey Hall, Michael Rosbash and Michael Young have studied the molecular mechanisms controlling circadian rhythm, and a growing body of research is revealing links between the disruption of these rhythms and sleep disorders, obesity, diabetes, heart problems and mental health conditions, such as depression and bipolar disorder.

If spending more time looking at individual screens is a concern, simultaneous multiple screen usage is also increasing, which means that our attention is divided across more than one screen at any one time. How often have you looked at your mobile phone when watching a show on Netflix? Well, you’re not alone. According to Statista, 46.7 million Americans use the internet while also watching TV. And after an evening of Netflix and scrolling, almost half (45%) of young people are still checking their phones once they are in bed.

With these statistics in mind, it is not surprising to learn that 30% of Americans suffer from the symptoms of insomnia, with these numbers showing little sign of decreasing any time soon.

What can be done to improve the situation?

We have recognized that devices that emit blue light are the core contributors to this growing problem, particularly mobile phone and screen usage at night time. Apple has taken a few measures to counter this issue, namely by introducing ‘Night Shift,’ a mode which effectively applies an orange filter to your screen. The theory behind this is to lessen the amount of damaging blue light that interrupts our patterns, by making the display “warmer” through the added red hues. This ‘Night Shift’ mode can be automatically activated during certain hours when the brain will naturally start to expect the light to be fading as night falls. Samsung Galaxy phones have their own version, a “Night Mode” darker screen, and a Blue Light filter button.

Apple also provides a handy iOS screen usage analytics report that gives you weekly stats on how many hours you’ve spent looking at your screen, and whether this number has increased or decreased since the previous week – useful for people who are actively trying to cut down on their iPhone and iPad screen time.

There are also many apps that have introduced a “dark mode” option to their interface to reduce bright white backgrounds. Most notably, Twitter introduced a “Lights out” mode a while ago, which essentially inverts the screen – white background goes black, and the black text becomes white. This extreme inversion of colors could still be problematic because blue light is still potentially emitted, even if the screen is not bright. Also, pure black backgrounds with white text can be challenging to read and can cause halation, or visual distortion, for many people. Despite good intentions, this simple approach to dark mode UI design may actually contribute to eye strain and other problems. It seems Twitter has realized this because they have been rolling out a “Dim” mode, which is a less extreme, lower contrast, version of “lights out,” mode which sets the background to a dark gray and the text to off-white. A recent update also appears to have tweaked the original “Lights out” mode to set the text as off-white also.

Twitter’s varying levels of dark mode

What can we do about it?

Given that the problems raised at the beginning of this article are becoming well known, and efforts are being implemented to try and tackle them, I would not be surprised if some form of ‘dark mode’ UI design or ‘night mode’ becomes a standard feature in most apps and even websites, in the coming years. Much like accessibility options that allow the user to increase the font size, dark modes may become expected, and those without may be seen as behind the times.

Incorporate a dark mode that works

As we now know, merely reducing the brightness of the screen might be good at combating glare when we look at our screens in a dark room, but it doesn’t tackle the blue light issue that can disrupt our sleep and contribute to various other health problems. So if you are planning to implement a dark mode, it is worth considering a more sophisticated approach like darkening the display as well as applying a warmer tone to your app.

Reduce blue light by default

When designing and testing your apps and interfaces, it might be worthwhile to begin with, the solution instead of bolting one on later. It could be a wise move to design your interface with warmer colors as a default, for example, select a slightly orange cream color background instead of a stark white, and go from there. However, when deciding on color schemes for your design, always keep accessibility and people with color blindness in mind.

Experiment and analyze, then test the results

As developers and QA testers, we need to consider not only whether our products actually work, but also how and in which situations our users interact with them. Based on your app usage analytics, you can work out what time generally, your customers use your products, then funnel those insights into your development planning. Move somewhere other than the usual well-lit office and try QA-ing your product a darkened room to feel the effects first hand. Try adapting the color schemes and warmth of the app while you are in these settings to find out what kind of effect they may have on your users and testers – you might be surprised!