Dark mode UI pros & cons, explained
Yes, No, I don’t know… Do you remember when you first saw an interface with a dark background? Depending on your experience with technology it might be iOS 13, Windows 10, Spotify, Winamp or… one of the first IBM computers?
Are you packed up?
I will take you on a trip on which I will explain the most important reasons behind the increased and declined popularity of Dark User Interfaces, taking into account 3 fields that had the biggest impact:
- Visual — trend, style, perception
- Technology — computers, virtual reality, capability
- Health — human, body, eyesight
Maybe in the future, history will repeat itself, and you will be the first — armed with proper knowledge — to make conscious, strategic decisions for your digital product.
Earlier than you have thought
Dark UI really is as old as computers. More than 40 years ago in 1981, the choice of dark background in the first IBM computers was dictated by technological constraints. The low persistence of the standard white colour used in old displays caused the appearance of black horizontal stripes on the screen. The number of black gaps was so high, hence to improve users’ reception and experience, it was decided to mask them by using a black background. On such system operated first computers with Command-Line Interface (CLI).
Pro: Dark colour can mask visual limitations (e.g. screen flickering).
Motive: Technological constraints.
For the same reason was used green colour for letters and signs, which had persistence long enough to shine continuously until the next screen scanning — reducing the effect of black stripes.
Taking computers closer to mortals
Technology has been continuously developing and thanks to new capabilities designers obtained more freedom in designing. They were aware that black screens felt alien to average amateurs of clicking at home…
…therefore to bring people closer to a virtual world, interfaces started imitating the real world and desk physicality.
It began the age of Light UI, which with its own look resembled white sheets of paper with printed-out dark letters — the more something new is familiar and understandable, the higher the chance for good sales.
Con: Dark UI does not reflect the known real world.
Motive: Marketing for average customers
The best example of reflecting real-world inside the virtual one is text editor WYSIWYG (What You See Is What You Get), which shows on a computer how exactly will look like the final outcome, in this case, a printed-out sheet of paper.
One industry survived
Because of this, a big decline in creating Dark UI was seen in almost every industry… except one! The Automotive Industry. If you have ever driven a car then you are well aware of how much attention you have to pay to what is happening behind the windows. Especially during bad weather conditions or rush hour. Have you ever wondered why almost every speedometer (analog or digital) has bright signs on a dark background?
Imagine yourself that you have forgotten to turn off the lights inside the car cabin. Instead of focusing on driving through a dark forest — you are reflecting in the windowpane, in the corner of your eye light is dazzling your sight — your focus is being distracted. And now imagine if inside cars were applied bright backlighting interface. For your luck, somebody has already deliberately chosen to backlight only signs and pointers.
Pro: Distracts to a lesser extent, when eyesight doesn’t have to be focused on the interface.
Motive: Safety and focusing attention on more important tasks.
Fraction of a second
This has one additional benefit. Eyesight finds information quicker because it immediately focuses on brighter elements standing out from the darker background. It was shown by agency Cuberto in a quick mini-eye tracking test. The undermentioned heatmaps reveal differences in the level of our sight distraction while looking at Light and Dark UI.
Pro: People find data and focus sight faster on brighter elements.
Motive: No time for looking at the interface.
OLED
The first software was using Dark UI because screens had a lot of limitations. But since that time technology has developed a lot of new benefits, which have a bigger and bigger impact on our surrounding environment.
It all started the moment when Sony released its first OLED (organic light-emitting diode) screens, which are characterised by the fact that each pixel shines on its own with different light intensity. In the case of the blackest of pixels (#000) — they are turned off completely. Perhaps one pixel is not too much, but if 80% of the screen is covered with black colour then that gives a significant area to turn off, which in reality translates into the biggest benefit — lesser waste of energy!
Just to depict the usage of energy, I will ask you a question. Imagine that you have got to a TV show and right now you are waiting for the final hot question for 1 million dollars. The host is smiling confidently because he knows that you have a lot in common with the topic of the question:
Official Ronaldo’s account on Instagram has 450 mln followers. If he posts a photo, then — in total — his followers wanting to check it, will consume energy equal to working for one hour:
A. 8 passenger airplanes
B. 360 passenger cars
C. 2400 motorboats with outboard engines
D. 720 000 gaming laptops
Think about it, take your time. And? Do you have your final answer? This time you made it, actually every answer is correct. His followers to see just one photo will consume energy equal to e.g. 360 cars with engines of 200 hp fully working for 1 hour. That is 54 000 000 watt-hours!
If you have thought that as a person creating applications you don’t have an influence on the reduction of such amount of energy, then with help comes to you Dark Mode and mentioned OLED screens. Of course, the exact percentage of energy drained by the sole display depends on many factors, like how the app is created and what brightness is being used.
More detailed data were provided by experts from Google, and results were presented during Android Dev Summit 2018, that is during the year when Android introduced Dark Mode. They conducted tests on used energy by different colour schemes. Here are the results:
When the screen was half bright, energy save for Dark Mode in regard to Light Mode reached 14%, and for max intensity this difference was 60%!
When they brought Dark Mode on Google Maps, energy save for half bright screen was 8% and for fully bright it reached 31%! In the case of maps it is probably more significant because imagine that you have just gone on a hike into an endless, unknown, dark jungle without access to a charger. Surely one of your highest priorities would be the durability of the navigation in your smartphone.
Think what it means for the environment. Thanks to the energy save, Dark UI is more Eco-friendly than its brighter counterparts.
Pro: Lesser usage of energy on OLED screens!!
Motive: Sustaining the environment.
We spend more and more time looking at the screen. Interfaces are with us all the time, thus batteries in mobile devices should last long enough to let us meet our needs. Probably due to this fact all the known smartwatches and their applications also use Dark Mode UI.
What about me?
Exactly, it’s interesting whether our eyes will say that they have enough. Everyone who analyses data on the screen for a long time during the night knows how badly eyes can be tired. Or can even occur Computer Vision Syndrome (CVS), which symptoms can be eye dryness, blurred vision or headaches. In this case, Dark Mode significantly reduces emitted light, diminishes eye strain, and hence improves eyesight comfort.
Pro: During poor lighting (e.g. night) Dark Mode UI diminishes eye strain.
Motive: Human health.
Clearly we are talking about conditions of very low, external, surrounding lighting and high brightness of the screen. Otherwise during e.g. very sunny day on the beach — the contrast of Dark Mode UI is so low that our eyes must make a significant additional effort to spot important for us information. This scenario is not healthy for our eyesight too.
Con: During very strong lighting (e.g. sunny day) contrast of Dark Mode UI is very low.
Motive: Human health.
Think about this while creating a digital product. You don’t have to choose one solution. A lot of apps leave the choice to their users, other ones are adapting to current light conditions, e.g. mentioned earlier Google Maps app adjusts its visual theme to the user’s environment. During a beautiful, sunny day maps are in a bright theme, in order to just in a second, after entering a dim tunnel, change the theme to dark.
Give a choice, care about a user, and if you know that during use he has to focus on more important tasks (like driving a car) consider settings being adjusted automatically.
But it’s trendy too
Did you know about all these pluses and minuses when you first encountered Dark Mode UI? Have you carelessly believed that this new dark theme is popular because someone said it looks cool? Actually… in every story there is a grain of truth and so it is here. Part of users will prefer Dark Mode because of its futuristic look. In this group, there are users for whom a smartphone has been the most casual daily thing forever, and creators of digital products wanting to get them interested, propose platforms in new colour schemes. In particular, Dark Mode is loved by many users of application types like Social Media (Facebook, Instagram, Twitter, Reddit), some creators’ software in which night work frequently occurs (Adobe CC, Microsoft Visual Studio Code, OBS Studio) and products for entertainment (Spotify, Netflix, Steam, Oculus VR).
Pro: Suits many industries and users’ tastes especially tech-savvy.
Motive: People use products they like and are inspiring.
However… there exist industries in which the dark colour might be associated with the worst. I bet you wouldn’t want to look for immediate medical help in a deadly-looking app, where contact with a doctor would be hidden behind a bright button resembling a light at the end of a tunnel?
“Design is really an act of communication, which means having a deep understanding of the person with whom the designer is communicating.”
Due to cultural differences people can have absolutely distinct feelings, so keep your mind open and dynamically react to the surrounding world.
Con: In some contexts can be badly associated.
Motive: Wrongly picked visual image can evoke undesirable emotions.
Summary
And that is how we come to today’s day. Every described aspect has had big influence on that in which industries Dark Mode UI was or is applied. We come full circle when technology dictates directions again. But this time it enables indisputable benefits, which will also affect those who haven’t had contact with it yet.
“Technology may change rapidly, but people change slowly. The principles of design come from understanding of people. They remain true forever.”
All Pros:
- Dark colour can mask visual limitations (e.g. screen flickering)
- Distracts to a lesser extent
- People find data and focus sight faster on brighter elements
- Lesser usage of energy on OLED screens
- During poor light conditions Dark Mode UI diminishes eye strain
- Suits many industries and users’ tastes especially tech-savvy
All Cons:
- Dark UI does not reflect the known real world
- During very strong light conditions contrast is very low
- In some contexts can be badly associated
Personal appreciation and bad associations, technological constraints and possibilities as well as the impact on our health and our planet — I think these areas to the greatest extent drive designers‘ decisions. When you next time join a meeting regarding the appearance of a new interface, you will be equipped with decisive arguments drawn upon real events.
With the given knowledge, you will be making more deliberate and bold decisions. It will be easier for you to talk with the modern client, team and argue for implementation of at least an optional Dark Mode UI.
