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

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.
Screenshot 2020 07 23 at 09.19.49 

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. 

Darkmode beispiel elster fehlende Automation

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. 

Zur Not kann man 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:

Screenshot 2020 07 23 at 14.01.34

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


Schritt 2:

Screenshot 2020 07 23 at 14.03.37

Abbildung 4: Klicke anschließend auf „Erweitert“


Schritt 3:

Screenshot 2020 07 23 at 14.04.37

Abbildung 5: Klicke auf der Höhe „Header HTML“ auf „HTML bearbeiten“.


Schritt 4:

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

Screenshot 2020 07 23 at 14.10.14

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


Schritt 5:

Screenshot 2020 07 23 at 14.13.12

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.

Screenshot 2020 07 23 at 14.46.56 
IMG C7A5E32E525E 1

Abbildung 7 & 8: Zwei mal die gleiche Seite. Unten ist der Darkmode in den Systemeinstellungen deaktiviert, oben ist er aktiviert. Deine Seite wird den Darkmode nur auf  die User anwenden, die den Darmode aktiviert haben!


Takeaway

Ich empfehle dir, bei einem nächsten Redesign deiner Website, einen Darkmode integrieren zu lassen. Mit meiner obigen Anleitung kannst du auf deiner Chimpify Website ganz einfach einen Dark Mode integrieren. 

Jede Woche zwei Artikel über UX

Trage dich in meine persönliche E-Mail Liste ein:

Noch keine Kommentare vorhanden.

Was denkst du?

Jede Woche zwei Artikel über UX

Trage dich in meine persönliche E-Mail Liste ein:

Ich entwickle Internetauftritte für Unternehmen und andere Freelancer! Frage ganz unverbindlich an:

Geschäftsanfrage starten

Beliebteste Beiträge