In The Dead Of Night: Why We Are Drawn To Dark Interfaces

There are contexts where dark UIs are the shit. And then there are life situations where they do nothing but irritate. We have had our eyes blackened a bunch of times by our dark UI experiments which made me wonder about the mechanisms of perception for dark themes.
This might be useful for designers looking for the basis for their gut feeling, as well as anyone making decisions about theme colors. We’ll throw in some evolutionary biology, niche development, and disruption. All coupled with some kick-ass examples of dark interfaces and life context of their usage.

We are daylight creatures

One of the fundamental constants of our existence is the alternation of day and night. This has us registering as either diurnal or nocturnal creatures. Or both. Feeling comfortable in the daylight or in the night time involves a bunch of weird natural mechanisms triggering different types of behavior.
Since this article will be tagged as design, we are specifically interested in the visual perception of this division. We’ll see the ways it impacts decision making and delight when using a digital interface.
The sources of natural light on Earth are celestial objects like The Sun, stars, and atmospheric lighting. It is the sunlight that made life on Earth possible. Most plants are autotrophs which means they convert the energy of light and water into simple sugars of which they build themselves. Most animals are heterotrophs which means they consume the autotrophs or other heterotrophs that consume autotrophs ?

In short, light is the core of our existence. A robust ecosystem of plants and animals consuming those plants resulted in the rise of predators. A theory known in evolutionary biology as the “bottleneck theory” has it so that the amount of diurnal or daytime predators pushed some of the ancestors of modern-day mammals into the nocturnal behavior so that they could avoid the danger of being attacked. Some of the predators followed the prey into nocturnality. The long evolutionary process and niche differentiation created a balance between the day and night creatures. Tilting this balance often meant death.   
For the most part, we are diurnal but the night does not throw us off. Instead, it’s the time for a different activity. Observation. Reflection. Even though our eyesight is severely impaired in the dark hours, there is light pollution making us perceive the same things differently. Sky brightness is instrumental in the development of human intelligence.
Celestial bodies became a reference point for our early ancestors to start measuring, recording and predicting changes. Through these researches, we started our long journey to define who we are and where we came from. We started attributing darkness to a mental state of introspection and curiosity. Night time is a gym for our imagination.       

“There is a romance about all those who are abroad in the black hours.” – Robert Louis Stevenson

The rise of visual art eclipsed observation for a significant period in time. For the first time, we could produce things rather than just watch them. Technologically, a cave required a surface to leave marks on. Given the darkness within the cave and an artificial source of light, the object drawn had to be dark to stand out. This was the earliest usage of contrast writing for legibility. Because it involved simple physics, it was simple and intuitive.
This approach translated to our times in forms of most newspapers, books, and text-heavy websites. Legibility studies suggest that white text on dark background is better because the white color stimulates all three types of color-sensitive visual receptors in the eye in equal amounts.

This legibility principle translated into book printing and became the primary textual information delivery method. As science and engineering progressed, people required more knowledge to be recorded and illustrated. The same principles were used for that. This is how the discipline of technical drawing came into play.
Having so much media content rendered in the light background, solidified graphic design in this paradigm. This color scheme has us reacting to the content in Pavlov’s reflex. Dark text, light background – important information, pay attention.

But the dark is watchful

There was always a place for the dark scheme though. Right where it started. In the dead of night, where all our fears, dreams, and fantasies are in full bloom. We’re talking fiction. If the light color scheme of documents and books means practicality, the dark one is the opposite. Something intimidating enough for people to think up the significance of the dark scale.

Star Wars. A huge portion of the effect the epic has produced is that it took the viewers out of the realm of our world and reevaluated the ways we interact with advanced technology.

The unknown and mesmerizing ideas began to appear wrapped in the dark themes. Just like the ancient night skies.

The first performance-based computers or terminals had what they called “graphic renditions” of white text on dark background. Being a digitalized typewriter, the VT100 went with a reverse color scheme of an analog typewriter. If I had to take a guess, this was done in an attempt to emphasize the difference that the new terminal was bringing. Not only was it different in construction and maintenance, but it was also the future. And the future had to be futuristic.

This is pre-GUI (graphical user interface) so the developers did not care about the embryonic UX as the terminal had a clear purpose – to outperform typewriting, not emulate it. As the result, the terminal did not stick around.

People responded better to the digital products resembling real things.

A folder had to look like a paper folder. A bin was supposed to look like a trash bin with things inside. This is where white interfaces established their dominance.

The life contexts for dark interfaces

With the majority of content coming as text, there was no dispute for which color scheme works best. It has all been proven by the newspapers and books. Occasionally, colored text would substitute the black one and there’s your personalization.
The idea of being in control of the digital input was crazy enough for us to think about the sublime mysteries of the darkness. So for decades, we’d recreate the diurnal reality in digital media, unaware of the nocturnal predators on the dark side. It took 30 years of progress for us to come to the conclusion that “the best interface is no interface”. This makes the most sense now because everything is content.
What is the best way to present content? Should it be wrapped in a special cover or it’s better to step back and let the user express themselves?

The UX industry sorted it all out on its own. It went to war with decision fatigue and sanitized the web of alienating design solutions and made all successful websites and apps look the same.

Turns out, both white and black background are capable of stepping back and letting the content shine. The low-hanging fruit is white though. If your platform combines image content and text, white background compliments both. It makes text legible and images stand out.

This approach relies 100% on performance. White is nothing. Blank. So it’s user content and nothing in between. As long the app is fast and does what it is supposed to do, it goes unnoticed. Not a bad policy at all. But it is not versatile. Relying on user content to represent your product means associating with what you don’t have control over.
If you are a product company, the product has to be the focus of the design. That means cutting all the extras and presenting the product in fine fashion.

Dark UI creates this distraction-free experience that you want from a user. Again, the night sky fascination. This works great for promotion. The amount of drama you can generate by showcasing a product in the dead of night is immense. Look at all the Apple announcements.

They are nowhere near the actual website that is more white backgrounds and yeah-yeah texts.

Another context is skimming and scanning the information. This is a Hollywood effect, where the quick change of focus gives no chance to actually read. As our eyes slide across the interface, we “snatch out” bits and pieces of it. This gives designers an additional leverage to accentuate certain parts of the UI.

This context works for the apps that run analytical tools and help users react fast.
A lot of our affair with dark interfaces has to do with the environment we are using the products in. Most of us consume entertaining content during the nighttime. In this case, dark UIs kill two birds with one stone. They immerse themselves into the environment putting the thoroughly picked content on the forefront of the UI.

It is important for a business to be acutely aware of the details and contexts users will come to their product in. This allows designers to emphasize the specific touchpoints and reach maximum bond with a customer.

User content-heavy websites are like a medieval market in the daylight. Everything is right there, in your face. Dark interface is like a theatre stage with a spotlight focus.

The second season of Making A Murderer is filled with this dismaying visual charts all using a dark background to keep us in the state of anxiety and hopelessness. It can be reversed though. This next example evokes a different feeling though using the same technique.

Darkness around amplifies everything.

Back to utility. Recently, we started our exploration of a smart home app UX. For that, we’ve done a fair bit of research of how and why people come to that. A smart home is supposed to bring nothing but comfort and delight. It has to know you better you know yourself. But it still requires some sort of controls. This is the weakest point of such an app.

The design solution we’ve come to so far is a balance between the intricate settings and pain-free quick “flip switch” options. Intuitively, we went with a dark interface for that and it turned just fine. We put out the controls and make them the most noticeable part of the interface. The bright contrast helps avoid the dark part being too heavy or badly visible in the sunlight. We are aware of the legibility problem for dark background texts so we decided to stick to headings and just minor bits of text.
We could have applied the same logic to the lighter interface but we decided to stick to what brings a more emotional response. Bigger risk – bigger award.
It doesn’t matter what color scheme you bring to your interface. It’s the understanding of the context that makes the difference. Let the real-life scenarios bring you to the selection of the palette, instead of adapting your users to the intricacies of your UI.

Ultimately, there is always a night alternative to everything.