Während sie vor einigen Jahren noch als marginal galten, breitet sich die dunkle Mode allmählich aus. Nach Twitter, Messenger, Google Chrome und neuerdings Instagram kann ich, glaube ich, sagen, ohne zu viel Risiko einzugehen, dass sie bald überall sein werden.
Warum hören wir immer mehr vom Dark Mode? Welche Auswirkungen hat dieser Farbwechsel auf die Benutzererfahrung? Wie können wir es nutzen, um unseren Designs noch mehr Wert zu verleihen? Können Dark Modes (Hilfe) die Welt retten?
Versuchen wir, diese Fragen zu beantworten und zu verstehen, was hinter der Idee steckt, einer Mobil- oder Webanwendung ein dunkles Thema hinzuzufügen. Ich hoffe, Sie davon zu überzeugen, sich mir auf der dunklen Seite anzuschließen, nachdem Sie diesen Artikel gelesen haben.

1 – Warum verwenden wir den Dunkelmodus

Wir hören seit einigen Jahren davon, hat Google definiert Best Practices im Materialdesign, Apple hat es in seinem neuesten iOS 13-Update eingeführt und wir sehen, wie es sich nach und nach in unserem täglichen Leben verbreitet. Aber bevor die Gründe für diese Begeisterung erklärt werden, sollte daran erinnert werden, dass die Verwendung von dunklen Schnittstellen ist überhaupt keine neue Praxis.
Tatsächlich waren Monitore in den "alten" Tagen der Computer grün und schwarz, aber das lag daran eine technische Einschränkung. Wir können daher sagen, dass die ersten auf einem Computer entworfenen Schnittstellen … dunkel waren

Einige Jahre nach der Einführung von Farbmonitoren existierten dunkle Schnittstellen weiterhin in vielen Schnittstellen, jedoch für sehr spezifische Anwendungen in der Entwicklung, im CAD oder sogar in GPS-Navigationsschnittstellen. 

Doch heute scheint dieser Modus ein Revival zu erleben, das Einsatzspektrum hat sich erweitert und es gibt mehrere Gründe, warum wir sehen, dass immer mehr dunkle Themen zu verschiedenen Websites und Anwendungen hinzugefügt werden.
 

Augenermüdung

Zunächst einmal sind wir heute immer mehr Schnittstellen ausgesetzt oder Bildschirme jeglicher Art. Wir benutzen unsere Smartphones von morgens bis abends. In den Haushalten nimmt die Zahl der Geräte mit integrierten Bildschirmen stetig zu und auch am Arbeitsplatz sind wir oft mehrere Stunden mit Bildschirmen konfrontiert. Hier kommt einer der ersten Vorteile des Dunkelmodus ins Spiel Seine Aktivierung reduziert die Ermüdung der Augen.

„[Dunkle Themen] tragen zur Verbesserung der visuellen Ergonomie bei, indem sie die Belastung der Augen verringern, die Helligkeit an die aktuellen Lichtverhältnisse anpassen und die Verwendung des Bildschirms in dunklen Umgebungen erleichtern.“

– material.io
Das Betrachten eines weißen Bildschirms über einen längeren Zeitraum ist zweifellos unangenehm, und die wissenschaftliche Forschung hat die vollen Folgen dieses Unbehagens noch nicht gemessen.
Folgendes wissen wir bisher:

• Dunkle Schnittstellen reduzieren die Belastung der Augen in dunklen oder dämmrigen Umgebungen.
• Ein hoher Kontrast zwischen Hintergrund und Text reduziert die Belastung der Augen.
• Die Verwendung von Soft-Touch-Farben ermöglicht eine bessere Unterscheidung vor einem dunklen Hintergrund, z. B. bei Anwendungen, die eine Syntaxhervorhebung erfordern (wie Code-Software), können Farben die Erkennung von Begriffen erleichtern.

Andere Untersuchungen deuten jedoch darauf hin, dass:

• Eine dunkle Oberfläche kann in hellen Umgebungen mehr Aufwand erfordern.
• Die Verwendung von 100 % Kontrast (weißer Text auf schwarzem Hintergrund und sogar schwarzer Text auf weißem Hintergrund) ist schwieriger zu lesen und kann die Augen ermüden.
• Leseintensive Anwendungen sind auf dunklem Hintergrund schlechter lesbar und führen leichter zu Konzentrationsverlust.
  

 

Die Auswirkungen auf den Schlafzyklus und die allgemeine Gesundheit

Als Bonus dunkle Modi Entfernen Sie den größten Teil des blauen Lichts, das den Schlaf stört, weil blaues Licht im hellen Farbspektrum enthalten ist, aber nicht im dunklen Lichtspektrum vorhanden ist. Und Weniger blaues Licht bedeutet weniger Unterbrechung des Schlafzyklus.

„Nicht alle Lichtfarben wirken auf den Organismus gleich. Blaue Wellenlängen, die tagsüber von Vorteil sind, da sie die Aufmerksamkeit, Reaktionsfähigkeit und Stimmung steigern, scheinen nachts am störendsten zu sein.“

-   Harvard Medizinschule
Eine aktuelle Studie weist darauf hin, dass die tägliche Exposition gegenüber blauem Licht sogar die Langlebigkeit beeinträchtigen könnte, genauer gesagt würde es zu einer vorzeitigen Ausdünnung der Hirnrinde führen, was normalerweise als Alterungsprozess angesehen wird.

„Während die Wissenschaft nach Möglichkeiten sucht, Menschen zu helfen, länger gesünder zu bleiben, könnte es möglich sein, ein gesünderes Lichtspektrum zu entwickeln, nicht nur für besseren Schlaf, sondern auch für die allgemeine Gesundheit.“

– Eileen Chow, Co-Autorin dieser Studie an der Oregon State University
 

Energieverbrauch

Ein weiterer Grund kommt von einer Bildschirmtechnologie, die wir seit einigen Jahren auf dem Markt sehen. Die Flaggschiff-Modelle von Smartphones praktisch aller Marken sind heute mit OLED- (oder AMOLED-) Bildschirmen ausgestattet, die im Gegensatz zu LCD-Bildschirmen keine Hintergrundbeleuchtung benötigen. Vereinfacht gesagt ermöglicht diese Technologie es, jeden Pixel einzeln zu beleuchten, aber nur bei Bedarf. Die schwarzen Pixel (#00000) werden also einfach ausgeschaltet, und das bedeutet, dass sie überhaupt keinen Strom verbrauchen. Alle anderen Farben verbrauchen jedoch mehr Batterie, wobei Weiß die verbrauchsintensivste Farbe ist.
Bei manchen Tests Google hat es demonstriert dass die Verwendung eines dunklen Designs in der YouTube-Anwendung im Vergleich zum Standarddesign auf einem Smartphone mit OLED/AMOLED-Bildschirm 60 % Akku spart. 

Mit einer dunklen Oberfläche, der Benutzer erhöht somit die Lebensdauer seines Akkus erheblich. Ein Gerät, das weniger Energie verbraucht, ist ein Gerät, das weniger aufgeladen werden muss... was auch gut für den planeten ist !
 

Das Umfeld und der Nutzungskontext -> Auf dem Weg zu kontextualisierten Schnittstellen?

Der Dunkelmodus ist nicht die Lösung für alle Probleme … er ist etwas komplexer. Seine Auswirkungen auf Erfahrung und Gesundheit sind stark kontextabhängig. Tatsächlich ist die Umgebung, in der die Schnittstelle verwendet wird, ein wichtiger Entscheidungsfaktor.
Visuelles Wohlbefinden für den Benutzer ist eine Frage des Kontrasts, nicht nur innerhalb der Oberfläche selbst, sondern auch in Bezug auf seine Umgebung. Das Interesse eines Dunkelmodus besteht darin, den Bildschirm so gut wie möglich an seine Umgebung anzupassen und so zu vermeiden, dass ein heller Bildschirm zu stark hervorsticht.
Beispielsweise neigen die meisten Unterhaltungsdienste dazu, nur dunkle Themen zu haben. Diese Dienste/Anwendungen/Websites werden in einer Umgebung verwendet, die oft dunkel und/oder nachts ist. Die Schnittstellen wurden daher an den Nutzungskontext angepasst. Außerdem heben sich bunte Medien (Filmcover, Albumcover, Fotos und Videos) besser ab, wenn sie vor einem schwarzen Hintergrund präsentiert werden.

Aber im Gegensatz zu Foto- und Videoinhalten hat die Forschung auch wiederholt gezeigt, dass die Lesbarkeit und Erinnerung besser waren, wenn dunkler Text auf hellem Hintergrund im Vergleich zu hellem Text auf dunklem Hintergrund verwendet wurde. Das Gleiche gilt für große Textkörper, die Benutzer wahrscheinlich lange Zeit betrachten. Einige Studien (das Halle & Hanna zum Beispiel) bestätigen Sie diesen Punkt und geben Sie an, dass der Hauptaspekt darin besteht, einen ausreichenden Kontrast zwischen Text und Hintergrund zu haben.
 

2 – Wie und wann wird der Dunkelmodus verwendet?

Der Grund, warum all die Jahre dunkle Elemente auf hellem Hintergrund verwendet wurden, ist, dass es einfacher ist, Vorstellungen von Kontrast und Lesbarkeit zu handhaben. Dies bietet die Möglichkeit, ohne allzu große Probleme mit einer großen Farbpalette zu arbeiten….  Aber diese Schwierigkeit ist keine Entschuldigung dafür, nicht auf den Komfort und das Wohlbefinden des Benutzers zu reagieren, wir werden zusammen einige Tipps zum Entwerfen eines dunklen Modus sehen.

Einige Empfehlungen

Zuerst einigen wir uns: "dunkel" bedeutet nicht "schwarz". "! Es ist nicht notwendig (ich würde sogar sagen, dass es nicht empfohlen wird), reines Schwarz #000000 für die Hintergründe Ihrer Dunkelmodi zu verwenden. Hell erleuchtete dunkle Hintergründe lassen mehr Farbkombinationsmöglichkeiten zu und erzeugen Tiefe. Es scheint logisch, dass die Schatten auf Grau wahrnehmbar sind, während sie auf Schwarz überhaupt nicht auffallen.
Daher lautet die Material Design-Empfehlung, am dunkelsten #121212 für den Hintergrund und #000000 für den Schatten zu verwenden.

Bei den Komponenten ist es wichtig, die Grundlagen der Beschattung und Beleuchtung im Auge zu behalten.
Hier ist ein Erklärvideo von Material Design, das die Reaktion zweier Quadrate vergleicht, wenn sie an Höhe gewinnen:

Höchste Objekte sollten heller sein als der Schatten, um eine echte Beleuchtung zu simulieren. Dies erleichtert die Unterscheidung der verschiedenen Komponenten und ihrer Hierarchie.
Vom Interesse dieses Modus überzeugt? Entspricht es dem Bedarf für das Produkt und den Nutzungskontext? Bevor Sie Ihr ganzes Geld für #121212 ausgeben, denken Sie auch daran, dass die Identität einer Marke auch Palettenentscheidungen beeinflusst. Es ist auch möglich, dass viele Elemente auf einem dunklen Hintergrund nicht nativ funktionieren und nachbearbeitet werden müssen.
Zuallererst sollten Sie wissen, dass Sie dieselbe Primärfarbe beibehalten können, wenn der Kontrast ausreichend ist und sie nicht viel Platz auf dem Bildschirm einnimmt. Außerdem ist es so weit wie möglich zu vermeiden, mehrere Farben mit hoher Sättigung nahe beieinander zu haben.
Google gibt uns einen Trick, der ganz gut funktioniert und uns erlaubt, die notwendigen Kontraststandards zu erfüllen. Fügen Sie eine weiße Ebene mit einer Deckkraft von 40 % auf die Farbe hinzu, die Sie anpassen möchten:

 
Auch Textelemente mit hoher Sättigung sind unbedingt zu vermeiden, da deren Lesbarkeit auf dunklem Hintergrund stark beeinträchtigt wird. Es ist weniger einfach, die Kontrastregeln einzuhalten, die für Texte erforderlich sind, um Barrierefreiheitsstandards im Dunkelmodus zu erfüllen, aber es ist nicht unmöglich.
Material Design empfiehlt die Verwendung der folgenden Deckkraftstufen für hellen Text:
Wichtige Texte – 87 % Deckkraft
Mittlerer Text und Hilfetext – 60 % Deckkraft
Text mit deaktivierten Elementen – 38 % Deckkraft

Praktisch anwenden

Lassen Sie uns versuchen, zwei Bildschirme zusammen anzupassen, um das, was wir gelernt haben, in die Praxis umzusetzen, um die Standards zu erfüllen:

 

 

 
Nehmen wir ein zweites Szenario:

 

 

 

Denken Sie als Designer auch daran, dass die Gestaltung des Aussehens und der Haptik eines Produkts zu Ihren Hauptaufgaben gehört. Denken Sie daran, dass dunkle Hintergründe auch außerhalb der Dunkelmodi verwendet werden für:

• DVermitteln Sie einen starken Charakter und heben Sie die Optik hervor
• Pprojizieren ein Gefühl von Eleganz, Luxus und Prestige
• Cschaffen eine Atmosphäre voller Intrigen und Geheimnisse
• Ahelfen, die Aufmerksamkeit des Benutzers mit so wenig Ablenkung wie möglich zu lenken

Die Wahl der Farbmetrik ist äußerst wichtig, sie wirkt sich auf die Benutzererfahrung während der Verwendung einer Anwendung oder einer Website aus. Einige Farben beschwören Dinge herauf, und nur weil ein Benutzer den Dunkelmodus aktiviert, bedeutet das nicht, dass er das, was er sieht, vom Markenimage distanziert.
Schließlich ist es wichtig, dass unsere Designs so oft wie möglich in Situationen getestet werden, um den Nutzungskontext zu identifizieren, der es ermöglicht, das Interesse an einem dunklen Modus zu bestätigen oder nicht.
 

Wir fassen die Interessen des Dark Mode zusammen

Dadurch ist der Bildschirm in dunklen oder dämmrigen Umgebungen, wie morgens und abends, besser lesbar.
Dadurch hebt sich der Inhalt offener ab (insbesondere bei Foto- und Medieninhalten).
Es ermüdet die Augen weniger … wenn es nicht viel Text gibt und der Kontrast gut ausbalanciert ist.
Das verbraucht weniger Energie (und schont damit den Planeten ein wenig).
 

Wann Sie den Dunkelmodus nicht verwenden sollten

Wenn ein starkes Bedürfnis nach Lesbarkeit und Auswendiglernen besteht.
Wenn viele verschiedene Arten von Inhalten auf dem Bildschirm angezeigt werden
Bei B2B-Anwendungen, die nur tagsüber genutzt werden und viele Formulare, Widgets etc.
Wenn die Verwendung der Anwendung die Verwendung einer Vielzahl von Farben erfordert.
 
Nachdem wir verschiedene Fälle untersucht haben, in denen der Dunkelmodus ein mehr oder weniger wichtiges Interesse hat, empfiehlt es sich, dem Benutzer vorzuschlagen, einen automatischen Schalter dieser Option zu aktivieren und ihm diesen Stil nicht aufzuzwingen. Die Oberfläche passt sich also dem Benutzer an und nicht umgekehrt, was letzteren zulässt Entscheidungsträger und je nach Verwendung zu wählen.
Wir können jedoch eine Führungsrolle als Designer und Garant für bewährte Verfahren einnehmen und ihm raten, die besten Erfahrungen mit vordefinierten Einstellungen zu machen. Wir müssen für das Wohlbefinden unserer Nutzer sorgen und dafür sorgen, dass die Ermüdung der Augen so gering wie möglich ist.
 

Fazit

Unterschätzen Sie niemals kleine Aktionen, sie können einen Dominoeffekt auslösen. Der Dunkelmodus ist der Beweis dafür, da es sich um eine einfache Farbentscheidung handelt, die enorme Auswirkungen auf verschiedene Achsen hat.
Beachten Sie, dass, wenn alle größten Akteure auf dem Markt beginnen, einen dunklen Modus zu integrieren, dies hauptsächlich auf das Bewusstsein für den Einfluss der Technologie auf die körperliche und moralische Gesundheit, aber auch auf den übermäßigen Energieverbrauch jedes Einzelnen zurückzuführen ist. Für diese Schauspieler ist die Rettung des Planeten nicht nur eine Frage der Ökologie, sondern auch gut fürs Image 😉
Wenn Sie Ihre Designsoftware das nächste Mal öffnen und standardmäßig einen weißen Hintergrund verwenden, erinnern Sie sich an den Ruf der dunklen Seite … und denken Sie daran, dass ein völlig ausgeschalteter Bildschirm sogar noch gesünder und für den Planeten ist. #DigitalesWohlbefinden.

Eric Tadros, UI/UX-Designer @UX-Republic

---