Wieso ein Darkmode die User Experience deiner Site verbessert + Anleitung für Chimpify!

Der Darkmode (dt. Dunkelmodus) hat in den letzten 1,5 Jahren stark an Popularität gewonnen. Gemeint sind Designs, die zwischen der hellen und einer dunklen Version wechseln können. Apple, Google und Microsoft haben bereits auf ihren Betriebssystemen einen Dunkelmodus implementiert. Apps für die jeweiligen Betriebssysteme stellen zuverlässig einen dunkle Version bereit. Nur im Web stagniert die Entwicklung.

Dabei gibt es zahlreiche Gründe, wieso du einen Darkmode auf deiner Website einsetzen solltest:

• Es erhöht die Accessibility für Menschen, die sensible auf helle Displays reagieren.
  
• Es ist angesagt einen Darkmode einzusetzen.
• Es ermöglicht Nutzern, deinen Content so komfortabel wie möglich zu konsumieren.
• Es erhöht die User Experience, da reguläre Darkmode-Nutzer erwarten, dass Sites den Dunkelmodus implementiert haben. Es ist sehr unangenehm, wenn Nutzer von dunklen Themes auf einmal auf helle Themes wechseln.
• Es spart Akku auf Geräten mit OLED Display. Helle Farben verbrauchen mehr Strom.
• Textbasierte Seiten profitieren von Dark Themes, da es für das Auge einfacher ist lange zu lesen.
• Du verbesserst deine Website.

Abbildung 1: Man sollte meinen, dass bei großen Sites der Darkmode mittlerweile angekommen ist. Spiegel.de scheint sich dagegen zu entscheiden. User verbringen normalerweise viel Zeit auf Textbasierten Sites, da wäre ein Dunkelmodus eine Überlegung wert.

Zwischenfazit: Lass bei deinem nächsten Redesign einen Dunkelmodus einbauen

Es sollte nun also relativ klar sein, dass du einen Dunkelmodus auf deiner Site haben solltest.  Wenn du also einen Designer oder Front-End Entwickler engagierst, achte darauf, dass er einen Darkmode implementiert.

Wenn du selber über die Fähigkeiten verfügst, kannst du es natürlich auch selber machen.

Worauf musst du achten?

Ein Darkmode macht natürlich nur Sinn, wenn er korrekt umgesetzt wird. Ich meine speziell die Aktivierung des Dunkelmodus:

• Manuelle Aktivierung über einen Toggle/Button
  
• Automatische Aktivierung auf Basis der Betriebssystemeinstellungen
• Speicherung der präferierten Einstellung durch einen Cookie 

Achte darauf, dass dein Designer oder Entwickler jeder dieser drei Punkte umsetzt. Nur dann spielt der Darkmode seine ganzen Vorteile aus. 

Abbildung 2: Elster hat einen Dunkelmodus, der jedoch nicht automatisch wechselt. Ich habe auf bei meinen Systemeinstellungen Darkmode als Standard eingestellt, die Elster Seite bleibt jedoch beim betreten der Seite hell. Ich muss den Toggle betätigen, sodass er in den Dark Mode wechselt. Schlechte User Experience, da initial trotzdem meine Netzhaut „weggebrannt“ wird. Positiv anzumerken: die getätigte Einstellung wird gespeichert!

Natürlich müssen bei der gestalterischen Umsetzung auch Dinge beachtet werden. Ich gehe aber davon aus, dass dein Designer weiß wie man einen Dark Theme korrekt gestaltet. 

Man kann sich immer an den Designsprachen der großen Ökosysteme wie Google, Apple und co. orientieren. Googles Material Design gibt beispielsweise Richtlinien vor, wie ein Dark Mode auszusehen hat. Apples Human Interface Guidelines definieren ebenso Richtlinien dafür. Ich empfehle allen, sich daran zu orientieren!

Bonus: Darkmode für deine Chimpify Website

Du kannst deiner bestehenden Chimpify Website ziemlich einfach einen Dunkelmodus verpassen. Deine Website wird automatisch erkennen, ob der User Darkmode in den Betriebssystem Einstellungen aktiviert hat. Anhand dieser Einstellungen schaltet er dann den Darkmode zu.

5 Schritte zum Darkmode auf deiner Chimpify Website:

1. Klicke auf das Zahnrad des Themes, bei welchem du den Dunkel Modus implementieren möchtest
   
2. Klicke auf „Erweitert“
3. Klicke auf der Höhe „Header HTML“ auf „HTML bearbeiten“.
   
4. Füge folgenden Code ein und klicke auf „Speichern“:
   <link rel="stylesheet" href="https://cdn.chimpify.net/5ec91202a85872e5318b457d/2020/07/Dunkelmodus.css">
<meta name="color-scheme" content="dark light">
5. Klicke abschließend auf „Speichern“

Schritt 1:

Abbildung 3: Klicke auf das Zahnrad bei einem Theme, wo du den Darkmode implementieren möchtest

Schritt 2:

Abbildung 4: Klicke anschließend auf „Erweitert“

Schritt 3:

<link rel="stylesheet" href="https://cdn.chimpify.net/5ec91202a85872e5318b457d/2020/07/Dunkelmodus.css">
<meta name="color-scheme" content="dark light">

Abbildung 5: Füge den Code ein (siehe über dieser Abbildung). Klicke anschließend auf „Speichern“

Schritt 5:

Abbildung 6: Klicke als abschließenden Schritt auf „Speichern“

Das Ergebnis

Exemplarisch habe ich dieses Beispiel an dem vorgefertigten Theme „Minimallisso“ durchgespielt. Hier das Beispiel.