Dark Mode Design im UI/UX

Wie dunkle Interfaces Ästhetik, Usability, Energieverbrauch und visuelle Wahrnehmung beeinflussen

‍

Der “Dark Mode” ist ein fester Bestandteil von modernem Betriebssystem.  Vor allem auf Mobilen Geräten und speziell für tieferes schwarz ausgelegte OLED-Displays ist der Dark Mode nicht mehr weg zu denken. Und für alle die gerne in dunkler Umgebung arbeiten sowieso nicht.

Doch hat der Dark Mode weitere Nutzen Hinsichtlich zu UI/UX Design als lediglich ein Stilmittel zu sein? Wird die User Experience verbessert, wie wirkt es sich auf die Augen aus und spart der Dark Mode wirklich Strom?

‍

Im folgenden werden diese Fragen Eingeordnet, Vor- und Nachteile erläutert und Best Practices mit gegeben aus UI/UX sucht

Grundlagen des Darkmode Designs

Unter Dark Mode versteht man heller Text auf dunklem Hintergrund, das Gegenstück dazu ist der “Light Mode”, also dunkler Text auf hellem Grund.

Tatsächlich nutzten die ersten Computerarbeitsplätze Systembedingt ausschließlich helle Schrift auf dunklem Grund, anfangs jedoch mit grüner Schriftfarbe. Später wurde mit Leistungsfähigeren Monitoren jedoch versucht Papier nachzuahmen, deshalb kam der Wechsel zum Light Mode.

In den späten 2010er Jahren kam der Dark Mode dann richtig in Mode und wurde seitdem zu einer Standard Personalisierungs Einstellung.

‍

Wirkung und Vorteile des Dark Modes

‍

Ästhetik und Designwirkung

• Modern und Minimalistisch

• Farben, Bilder und Akzente wirken intensiver

Geeignet für

• Medienplatformen

• Entwickler- und Kreativsoftware

• Entertainment Anwendungen

Energieeffizienz

In einer Fortbildung wurde mitgeteilt, dass der Dark Mode Strom sparen würde, stimmt das?

Erst einmal zu den Unterschieden zwischen den Displaytypen. Zum einen gibt es LCD-Displays, welche eine komplette Hintergrundbeleuchtung verwenden, wo wiederum OLED-Displays aus selbstleuchtenden Dioden besteht und jeden Pixel ansteuern kann.

So kommt es zu einem satteren schwarz beim OLED, da die Schwarzen Pixel komplett abgeschaltet werden können.

Daraus kann man ableiten, dass der Dark Mode bei OLED-Displays tatsächlich Energie sparen kann, da die schwarzen Pixel nicht beleuchtet werden und dementsprechend keine Energie verwenden. Bei LCD ist hier kaum ein Effekt festzustellen, da die Hintergrundbeleuchtung dauerhaft aktiv ist.

Diese Einsparung ist besonders relevant für Smartphones und Wearables da das die Akkulaufzeit des Gerätes verlängern kann, sollte ein OLED-Display verbaut sein.

Augenbelastung

Wer gerne in dunkler Umgebung arbeitet weiß, Dark Mode blendet weniger. Demnach ist dieser von Vorteil bei Nachtarbeit, Gedimmtem Umgebungslicht und besonders für lichtempfindliche Nutzer.

Die Wirkung auf die Augen ist jedoch stark Kontext abhängig und ist auch nach Studien nicht grundsätzlich besser.

Zwei wichtige Studien zum Light und Dark Mode:

Piepenbrock et al. (2013) “Polarity Effekt”

Heller Grund mit dunklem Text führt zu  

• Besserer Lesbarkeit

• Höheren Lesegeschwindigkeit

• Geringerer Fehlerquote

Bauer & Cavonius (1980) “Ergonomic aspects of visual display terminals”

Dunkler Grund mit hellem Text bei hellem Umgebungslicht

• Augen stärker belastet

• Pupillen erweitern stärker  

• Kontrastwahrnehmung schlechter

Dunkler Grund mit hellem Text bei dunklem Umgebungslicht

• Höhere Genauigkeit beim lesen  

Hieraus lässt sich für UX also ableiten:

Light Mode:

• Vorteilhaft bei Tageslicht

• Besser für längere Texte

Dark Mode:

• Vorteilhaft bei Dunkelheit

• Reduziert Blendung

• Idealer für kurze Texte

Nachteile des Dark Mode

• Zu hoher Kontrast führt zu “Halation” (Lichtausbluten, wird eher in Filmen aus Videller Effekt verwendet)

• Dunkle Designs können Kühler bzw. Distanzierter wirken

• In den meisten Fällen werden zwei Farbsysteme notwendig sein, also Dark und Light Mode, da viele Nutzer den Light Mode weiterhin präferieren

Best Practices

• Kein reines Schwarz nutzen, für das Kontrast Verhältnis. Besser ist ein dunkles Grau z.B. #121212

• Kontraste nach WCAG, Mindestens 4,5:1 für Texte

• Für Typografie stärkere Schrift gewichte und größeren Zeilenabstand verwenden

• Subtile Schatten sorgen für safte Hervorhebung statt harter Linien

• Um dem Nutzer keine Flashbang ins Gesicht zu werfen, Verwendung von rein weißen Flächen vermeiden

• Nutzen von adaptiven Farben und Helligkeit

Auswirkung auf die User Experience

• Nutzer bevorzugen die Möglichkeit eine Wahl zu haben, weshalb das Anbieten von Dark und Light Mode die Erfahrung verbessert, einen Modus also nicht erzwingen

• Emotionale Wirkung Dark Mode: Ruhig, professionell und fokussiert

• Emotionale Wirkung Light Mode: Offen, freundlich und kommunikativ

• Eine Kombination aus Nutzerwahl und Adaptiver Anpassung nach z.B. Tageszeit wäre eine Best of Solution

Fazit

Der Dark Mode ist nun keine reine Design-spielerei mehr, sondern ein Mittel Emotionen rüberzubringen und Moderne Displays Effektiv zu nutzen. Ästhetik spielt weiterhin eine große Rolle, wer sich für einen Modus entschieden hat, ist meist schwer umzustimmen.

Persönlich arbeite ich lieber im Dark Mode, da ich mich in Leicht Beleuchteten Räumen wohler fühle und die verringerte visuelle Ablenkung mir hilft mich auf das wesentlich am Bildschirm zu fokussieren.

Man muss abwägen, ob man den Aufwand betreiben möchte ein doppeltes Farbschema anzubieten, aber wer sich die Mühe macht wird mit verbesserter User Experience belohnt.