Back to list
Dark mode, from fad to real tool for user experience
Thomas Huber
27/9/2020
8 min reading
Tech
27/9/2020
8 min reading
Tech
As we know, all the big names have adopted Dark Mode: Android, Twitter, Apple since version 13 of its iOS, the Adobe suite... We could be content to think that if such services have taken the plunge, it must be worth the risk. But that would be a little hasty, since, as always, it is first and foremost user observation that will guide us in assessing the interest - or otherwise - of adopting this mode.
In any case, it has unquestionably earned its letters of nobility by passing through the UX filter.
To make the right choice, let's take a look at the whys, wherefores and hows; in short, all the aspects to consider when talking about Dark mode.
We often hear about the energy savings that can be achieved by implementing Dark mode. This is indeed the case, particularly on OLED/AMOLED-equipped smartphones. Google released a study in 2018 that shows an energy saving of over 60% when Dark mode is enabled. But let's not get carried away: we're only talking about screen consumption here.
Of course, this is not the only reason to opt for Dark mode.
First on the list should be our health and well-being at work. As users, we're spending more and more time on our screens, and Dark Mode really does reduce eye strain. It also helps preserve our sleep rhythm by reducing the production of blue light.
A contrast of 100% (white on a black background) can be more difficult to read and cause more eye fatigue.
Another advantage: improved concentration. This cognitive function seems to be enhanced by the reduction in disruptive elements more often present in light mode. The user concentrates on content and less on form.
How and when does the user use your service? As always, it's the UX vision that must guide the choice.
Visual well-being for the user is a question of contrast, not only within the interface itself, but also in relation to its environment. The point of a dark mode is to match the screen as closely as possible to its environment.
For example, most entertainment services tend to have only dark themes. Whether developed for mobile or desktop, in the form of applications or websites, these services are often used in dark environments and/or at night. The interfaces have therefore been adapted to the context of use. What's more, colorful media (film and album covers, photos and videos) stand out more easily when presented on a black background. This is the case for Netflix, Spotify and Apple TV, among others.
It is therefore essential to carry out in-depth UX Research in order to identify the ways in which your services are used: a company with deliberately poorly lit premises, an international structure with staggered working hours...
There are several warnings to bear in mind when talking about Dark Mode.
The first is accessibility. Some visual deficits do not cope well with Dark Mode. However, we can't be Manichean on this point. There are many deficits, and many ways of compensating for them. The only imperative is to have a choice.
Another aspect to consider is corporate branding. Is it compatible with Dark Mode or not? If the brand's image is based on notions of light, lightness or immaculate purity, it will be more complicated to adapt.
The color palette used can also be a pitfall. Dark mode doesn't offer all the multiplicity and subtlety of color processing that light mode does.
Finally, particular attention must be paid to contrast management. This applies, for example, to micro-interactions such as hovers, active tabs...
The first recommendation is to avoid using a 100% black background, opting instead for a charcoal gray. Just as in light mode we're never on a white #ffffff, using a dark gray allows for more color combination possibilities and creates depth. Shadows will be perceptible on gray, but not at all on black.
Components continue to be governed by the classic principles of shading and lighting. The tallest objects must be lighter than the shadows, in order to distinguish the various components and their hierarchy.
The use of color, on the other hand, requires particular care. If contrast is sufficient and screen space is not too large, you can keep the same primary color as in light mode. However, saturated colors should be kept to a minimum, as they tend to vibrate on dark surfaces and restrict reading. A good way to preserve contrast is to superimpose a white claque at 40% opacity.
The Material Design created by Google offers a wealth of Dark Mode recommendations.
In short, Dark Mode should be seen as a new tool in the UX/UI box. It will enable him to offer the user an adapted experience. This last word is of the utmost importance, and should lead to the offer of the double Light/Dark Mode.
Ultimate recommendation: build a solid Design System to best manage the dual mode!
What you need to know about Dark Mode:
Follow our news
Our latest articles, REX, white papers, canvas, etc. in your mailbox once a month.
Promise 0% spamTo talk about innovation, digital transformation around a coffee, a tea or something stronger :
+33 (0)9 86 35 76 35
17 Bis Avenue Parmentier, 75011, Paris
Av. Paseo de la Reforma 390, Col. Juárez, C.P. 06600, Ciudad de México, CDMX.
+216 21 562 478
10Avenue Abbderahmen Azzem, Cité el Khadra , 1003, Tunis.
