Have you ever thought about the first time you encountered an app or operating system design that was dominated by a dark background colour? Perhaps it was when you were using iOS 13, Windows 10, or apps like Spotify or Winamp, or maybe your first experience was even on one of the historic IBM computers.

Dark theme components by Marcin Krupiński, Dribbble

Are you ready?

I'd like to invite you on a fascinating journey where we'll explore the key points that have contributed to the change in the popularity of dark UI designs. We will focus on three main areas:

• Visual aspects, including fashion, styling, and the impact on perception.
• Technological aspects, from the first computers to the latest developments in virtual reality.
• Health, with a focus on the impact on humans, their physiology and visual perception.

This knowledge can be useful to you in making informed strategic decisions about the design of your digital products in the future.

UI/UX для Harman Kardon Citation від Cristian Lorca, Behance

Sooner than you thought

Dark interfaces are actually as old as computers themselves. More than four decades ago, in 1981, the choice of a dark background for the first IBM computers was driven by the need to work around technical limitations. Problems with the quality of white display on early monitors led to the decision to use a black background to reduce visual distortion. Thus, the first CLI (command line interfaces) computers were distinguished by this design.

The main advantage of the dark colour was its ability to hide visual imperfections, such as screen flicker, which was due to the technological limitations of the time.

IBM 3180 of Stranger Things, TJ HardyPRO, ArtStation

For this reason, green was chosen for the text and signs, as it ensured a stable glow until the screen refreshes, which reduces the visibility of black lines.

Making technology more accessible to a wider range of users

As technology has evolved, new horizons for creativity have opened up for designers. They took into account that dark screens can be off-putting to those who are not used to complex interfaces...

...so, in order to make the digital world more friendly, interfaces began to mimic familiar real-world objects and surfaces.

This paved the way for the era of Light UI, which resembled white sheets of paper with black text - the more a new product matches the usual perceptions, the more likely it is to be successful among consumers.

Microsoft Family Safety App by Microsoft Design, Dribbble

Disadvantage: The dark interface does not recreate the familiar environment for users

Reason: Marketing strategy aimed at the mass consumer

The best embodiment of the idea of recreating reality in the digital space is a WYSIWYG (What You See Is What You Get) word processor that allows you to preview on your monitor how the document will look after printing.

MacWrite (1984) is a WYSIWYG text editor

Only one area remained untouched

The downward trend in the use of dark interfaces has affected most industries, but there is an exceptional industry that has survived - the automotive industry. For anyone who has ever driven a car, it's no secret that a lot of attention needs to be paid to the road, especially during bad weather or rush hour. Have you ever wondered why most dashboards (whether analogue or digital) feature a dark background with contrasting icons?

It's because the designers have made a deliberate decision in the everyday details.

Automotive smart search HMI, Gleb Kuznetsov, Dribbble

Imagine the situation: you have not switched off the interior lights in your car. Instead of focusing on the road at night, you see your reflection in the glass, and the bright light distracts you. You can't concentrate on the road. Now imagine if the entire car interface glowed as brightly. Luckily, the wise decision was made to backlight only the icons and indicators.

Benefit: Reduced distraction by not having to fixate on the interface.

The main reason: Ensuring safety and focusing on the key aspects of driving.

Car interface, Vladimir Gnatovych, Dribbble

The decisive moment

There is another significant advantage of dark designs. They help to identify information faster, because our eyes are instinctively drawn to light details on a dark background. The effectiveness of this phenomenon was confirmed by an eye-tracking experiment conducted by Cuberto. The results, presented in the form of heat maps, clearly demonstrate how much more intensely we react to content in darker compared to light interfaces. The difference was striking!

Benefit: The ability of users to identify the information they need more quickly and focus on key elements.

The downside: Lack of ability to analyse the interface in detail.

Results of the iteration study: comparison of light and dark UI, Cuberto, Instagram

OLED

At the dawn of software development, the black interface was chosen because of the limited capabilities of screens. Since then, OLED (organic light-emitting diode) technology, introduced by Sony, has opened up new perspectives. Its uniqueness lies in the ability of each pixel to emit light independently of the others, allowing the black pixels (#000) to remain off. This means that with the predominance of black on the screen, a significant portion of it does not consume power, providing savings.

To put energy efficiency into perspective, imagine you are a contestant on a quiz show with a million dollars at stake. The host smilingly asks you a question that you know the answer to as well as anyone:

Ronaldo's Instagram account is followed by 450 million people. The energy consumption of all his followers who view one photo of him is equivalent to working for one hour:

A. 8 passenger aircraft

B. 360 cars

C. 2400 motor boats

D. 720,000 gaming laptops

Think about it, don't rush to answer. So, have you made your decision? This time, your choice was right, because all the options were correct. The total energy consumption of subscribers viewing one photo is comparable to the operation of, say, 360 cars with 200 hp per hour, which is 54 million watt-hours!

If you think that as an app developer, you have no influence on this process, then this is where dark mode and the aforementioned OLED screens come into play. Of course, the actual power consumption of the screen depends on a number of factors, such as the design of the app and the brightness selected.

A more in-depth analysis was carried out by Google, whose findings were made public at the Android Dev Summit 2018, the very year Android received a dark mode. They compared the power consumption of different colour schemes, and here's what they found:

Display power consumption in Youtube - light mode vs dark mode, Android Dev Summit 2018

At 50% brightness, the energy savings for the dark mode compared to the light mode reached 14%, and at 100% brightness, this difference was as much as 60%!

With the introduction of the dark mode in Google Maps, we've seen an 8% reduction in power consumption at medium brightness and a 31% reduction at maximum brightness. This is especially critical for mapping services. Imagine you're on an adventure through an endless, mysterious jungle where a charger is a rarity. Saving your charge to access navigation becomes a priority.

Consider the environmental impact. Using dark mode helps to save energy, making it more environmentally friendly than bright settings.

Benefit: Efficient power consumption on OLED displays results in less environmental impact.

Reason: Conservation of natural resources.

watchOS 7, apple.com

Our lives are unthinkable without the constant use of screens, which requires long battery life. This forces smartwatch and mobile app developers to resort to dark design.

What about you?

Working with a screen for long periods of time in the dark causes eye fatigue. This can often lead to computer vision syndrome (CVS), which can manifest itself in dry eyes, blurred vision, or headaches. Dark mode significantly reduces light radiation and eyestrain, making it easier to use your devices in low-light conditions.

Benefit: Comfort for the eyes in low-light conditions, such as at night.

Reason: Prevent negative effects on user health.

Obviously, this applies when we are faced with very low ambient light and high brightness levels on our screen. On the contrary, on a bright sunny day at the seaside, the contrast of a dark design is so reduced that we have to make an effort to make out important information. Such conditions can negatively affect our eyesight.

Disadvantage: In strong sunlight, the contrast of dark designs becomes too low.

Objective: Reduce the risk of eye damage.

When designing a new digital product, you shouldn't be limited to a single choice. Many modern applications offer users a choice of modes or automatically adapt to the lighting conditions, such as Google Maps, where the interface changes depending on the environment. A light theme is activated on sunny days, and in a poorly lit tunnel, it switches to a dark theme.

Give the user a choice, cater to their needs, and if you know that they are focusing on critical tasks, such as driving, offer automatic changes to the settings.

CRM dashboard, dark design by Marcin Krupiński, Dribbble

In addition, it is a modern trend

Were you aware of all these advantages and disadvantages of a dark UI when you first encountered it? Or maybe you thought that this theme became popular because it looks stylish? This is partly true.

The dark mode attracts users with its innovative and modern look, especially among those for whom technology is a part of everyday life. Developers try to attract the attention of such users by updating the design of their products.

The dark mode is popular among users of social networks (Facebook, Instagram, Twitter, Reddit), nighttime applications (Adobe CC, Microsoft Visual Studio Code, OBS Studio), and entertainment platforms (Spotify, Netflix, Steam, Oculus VR).

Advantage: Suitable for a variety of industries and suits the tastes of many users, especially tech-savvy ones.

Reason: People use products that they like and inspire them.

However, there are sectors where the colour black can bring to mind something unpleasant. Imagine looking for medical advice in an app that resembles a funeral website, where you can only find a doctor's contact via a button that emits light like the end of a tunnel.

"Design is the art of communication, which requires an intuitive understanding of the person to whom it is directed."

Cultural differences can trigger different emotions in people, so you need to be prepared for change and open to new ideas.

Disadvantage: Associations with something undesirable in a particular context.

Cause: A poorly chosen design can evoke negative emotions.

Bottom line

So, we have reached our time. Every element has influenced the use of dark mode in certain industries. We're back to square one, but technology is already showing us a new path, offering obvious benefits that affect even those who have never experienced them before.

"Technology is evolving rapidly, while human nature remains more stable. Design principles are based on a deep understanding of human nature and always remain relevant."

All the benefits:

• Black hides technical limitations such as screen flicker
• Reduces distractibility of users
• Allows users to focus on important elements faster
• Reduces power consumption on OLED displays
• Reduces eye fatigue in dark environments
• Meets the needs of a variety of industries and user preferences, especially for tech-savvy users

All the disadvantages:

• Does not reproduce the familiar real world for users
• In bright light, contrast becomes insufficient
• May cause negative associations in certain situationsS

I believe that individual perceptions and associations, the limitations and benefits of technology, and its impact on human health and the environment play a key role in design choices. The next time you discuss a new interface concept with your colleagues, you'll have a powerful argument backed by evidence.

Equipped with this knowledge, you'll be able to make informed choices about solutions. Communicating with customers, your team, and justifying the need for a dark interface, at least as an alternative, will become easier.