Back to blog

Dark mode, UX tool fad

Thomas Huber

September 27, 2020

8 min of reading

Tech

As we know, all the big guys have gone into Dark Mode: Android, Twitter, Apple since version 13 of its iOS, the Adobe suite… We could then be content to think that if such services have taken the plunge, it is that necessarily the game is worth the candle. But that would be a bit quick because, as always, it is first and foremost the observation of users that will guide us to assess the interest - or not - of adopting this mode. of nobility through the filter of the UX. To make the right choice, let's discuss the why, when and how; in summary all the aspects to take into consideration when talking about Dark mode.


Dark mode isn't just green


We very often report the energy gain achievable thanks to the implementation of Dark mode. This is indeed the case, particularly on smartphones equipped with OLED / AMOLED. Google released a study in 2018 that shows energy savings of over 60% when Dark Mode is activated. But beware, let's not get carried away: we are only talking about screen consumption, which is obviously not the only reason why we will opt for Dark mode.

First on the list should be our health and well-being at work. The users that we are spending more and more time on the screens and the dark mode allows a real reduction in eye fatigue. It would also promote the preservation of 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.

This cognitive function seems to be favored by the reduction of disruptive elements more often present in light mode. The user focuses on substance and less on form.


The context always the context

How and when does the user use your service? As always, the UX vision should guide the choice. Visual well-being for the user is a matter 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 much as possible with its surroundings. For example, most entertainment services tend to have only dark themes. Whether developed in mobile or dekstop, in the form of applications or websites, these services are used in an often dark environment and / or at night. The interfaces have therefore been adapted to the context of use. In addition, colored media (film, album covers, photos and videos) stand out more easily when presented against a black background. This is the case of Netflix, Spotify, Apple TV among others ...

It is therefore essential to carry out a thorough UX Research in order to identify the modes of use of your services: company with deliberately poorly lit premises, working hours out of step with an international structure ...

After the do's, the don’t

There are several warnings to keep in mind when talking about Dark Mode. The first is accessibility. Some visual deficits do not cope well with Dark Mode. However, one cannot be Manichean on this point. There are many deficits and so are the ways of compensating for them. The only imperative will then be: have the choice.

Another aspect to take into account is the branding of the company. Is it compatible with Dark Mode or not? If the brand image is based on notions of light, lightness or immaculate purity, it will be more difficult to adapt.

The color palette used can also be a pitfall. Dark mode does not allow all the multiplicity and subtlety of color treatment that light mode allows.


Finally, special attention must be paid to the management of contrasts. This will concern, for example, micro-interactions such as hovers, active tabs, etc.

Dark Tips

The first recommendation is to avoid using a 100% black background but opt ​​for an anthracite gray. Just as in light mode you are never on #ffffff white, using dark gray allows for more color combination possibilities and to create depth. Shadows will be noticeable on gray but not at all on black. Components continue to be governed by the classic principles of shading and lighting.

Taller objects should be lighter than shadow, in order to distinguish the different components and their hierarchy. The use of color, however, requires special care. If the contrast is sufficient and the space occupied on the screen is not too large, we can keep the same primary color as in light mode.

However, it is necessary to limit the saturated colors which tend to vibrate on the dark and which limit the reading. A good way to preserve contrast is to overlay a white slap at 40% opacity.

The Material Design created by Google offers a wealth of recommendations on Dark Mode. Ultimately Dark Mode should be considered as a new tool in the UX / UI box. It will allow it to provide the user with a suitable experience. This last word is essential, and must commit to proposing the double mode Light / Dark. Ultimate recommendation: build a solid Design System to better manage the dual mode !! What you should remember about Dark Mode:

  • It reduces the energy consumption of screens
  • The use of Dark Mode, increases concentration and reduces eye fatigue
  • To use dark mode effectively, adapt to your users' expectations
  • Check the compatibility of Dark Mode with your interfaces and your company's branding
  • Do not hesitate to shade the color black, so as not to hinder readability
  • Allow your users to choose a Dark Mode or a Light Mode
Share
You may be interesed by