Back in August 2016 Google made some significant changes to the Android Software and introduced the Dark Mode. Apple was slightly behind and followed in 2018 with the introduction of iOS13. From this point on, our mobile devices established 2 types of users. The ones who use the dark mode and the ones who don’t. This seems to be insignificant, but as the same evolution also took place in the design process of many webpages, it might be interesting to take a look at the statics regarding to the mode your users prefer.

So, who uses the dark mode. Traditionally, the dark mode comes from the developer side of the moon. So nearly all IDEs have a Dark Mode and developers got used to it.

As humans see things in color, contrast is essential to distinguish between, for example, back- and foreground or bottom and top. Focusing on certain images or a line of code or text is supported by the contrast our eyes assimilates. The perception of the content differs from the point of view. Looking up is normally looking into a bright sky, users want to reach something and try to evolve. This seems to support the Ecommerce side and the implementation of a Light Mode for the Add to cart buttons. Let the user imagine something, to grab this from the sky and to own it afterward.

The Dark Mode instead is looking down at your feet. To figure out what lays in front of you or which direction to go. So focusing on informational content might be supported by the Dark Mode. By the way, you can often see this when visiting websites. The so-called footer is typically supported by a darker background than the rest of the page. So a higher contrast might help the user focusing certain parts of your website and might help you to specify your offers and services.

So let’s have a strange idea. What if you can adopt this to your conversion funnel and retarget users that are in a desire or action state. You can attract them, for example, with a brighter landing page or conversion path layout and lesser information so that the whole page looks lighter.

When your user is just searching for the benefits of your product, you can present a layout which is more contrasting. In general, my recommendation is to add a darker background to the essential text parts of the products’ description page and set a focus to enable a comparison in a nice and easy way.

If you want to adapt to the user’s preferred mode, there is also a Media Query which listens to the user’s device setting. But be aware of messing up with the CSS.

If you like to get more recommendations for your website, please get in contact.

Featured image comes from pexels.