Dunkle Benutzeroberflächen. Das Gute und das Böse. Verhaltensregeln.

Dunkle Benutzeroberflächen sind dramatisch, stilvoll und elegant. Dennoch sollten Designer vorsichtig vorgehen, wenn sie sich entscheiden, auf der „dunklen Seite“ zu wandeln.

Die Gestaltung des Erscheinungsbildes eines Produkts ist eine der Hauptaufgaben eines Designers – die anfängliche Designentscheidung muss dem Zweck des Produkts, der jeweiligen Situation und seinem Publikum angemessen sein. Das Farbschema hat eine lang anhaltende Wirkung und muss sorgfältig ausgewählt werden – und alles beginnt mit der Auswahl eines Hintergrunds, auf dem die Designelemente platziert werden – der „Leinwand“. Die übliche Wahl, fast standardmäßig, ist ein weißer Hintergrund.

Es gibt gute Gründe, einen hellen Hintergrund zu wählen. Kontrast, Text und Lesbarkeit und die Fähigkeit, mit einer breiten Palette subtiler Farben zu arbeiten, sind einige davon. Laut vielen wissenschaftlichen Studien erfordert eine optimale Lesbarkeit schwarzen Text auf weißem Hintergrund. Branding kann die Entscheidung ebenfalls beeinflussen, da Firmenlogos und -farben nicht mit einer dunklen Farbpalette funktionieren.

Die meisten Studien haben gezeigt, dass dunkler Text auf hellem Hintergrund hellem Text auf dunklem Hintergrund überlegen, dh besser lesbar ist. In einer berühmten Studie war die „visuelle Ermüdung“ signifikant größer, wenn Probanden helle Zeichen auf dunklem Hintergrund lasen, im Vergleich zu dunklen Zeichen auf hellem Hintergrund (Bauer, D., Bonacker, M. und Cavonius, CR 1983).

Es gibt auch eine Erwartung : Menschen sind es gewohnt, eine Vielzahl von Inhalten zu sehen, die mit dunkler Tinte auf weißem Hintergrund zusammen mit Bildern dargestellt werden. Denken Sie an Zeitungen und Zeitschriften, die es seit über 350 Jahren gibt. Wenn wir noch weiter zurückgehen – 35.000 Jahre bis in die Altsteinzeit (die Höhlenmenschenzeit), finden wir Höhlenzeichnungen von Löwen und Mammuts, die im Allgemeinen auf einem hellen Hintergrund mit Kohle oder verbrannten Knochen platziert sind, um die Darstellungen zu zeichnen.

Wenn ein Projekt dies rechtfertigt, können sich die Designer digitaler Produkte von heute jedoch aus verschiedenen Gründen dafür entscheiden, mit einem dunklen Farbschema zu arbeiten. Wie oben angedeutet, handelt es sich oft um eine ästhetische Wahl, die Dramatik vermitteln und Emotionen hervorrufen soll – etwas Unerwartetes – oder vielleicht möchte ein Designer das Design mit dem Branding verschmelzen oder sicherstellen, dass visuelle Inhalte hervorstechen.

Entscheidet sich ein Designer jedoch für den Wechsel zur „dunklen Seite“, wird er mit einer Reihe von Herausforderungen konfrontiert. Alle Arten von Usability-Problemen kommen ins Spiel – hauptsächlich in Bezug auf Scanbarkeit, Lesbarkeit und Kontrast. Der Hauptaspekt ist ein ausreichender Kontrast zwischen Text und Hintergrund. Der Kontext (Anwendungsfall) und die Umgebung müssen ebenfalls berücksichtigt werden, ebenso wie das Gerät, auf dem die Benutzeroberfläche voraussichtlich angezeigt wird.

Einige dunkle Benutzeroberflächen wurden entwickelt, um die „digitale Augenbelastung“ zu minimieren. Mit zunehmender digitaler Technologie starren wir fast den ganzen Tag auf Bildschirme. Digitale Augenbelastung ist eine häufige Erkrankung, die täglich Millionen von Menschen betrifft. Verursacht durch alles, von übermäßiger Computernutzung bis hin zu regelmäßiger Einwirkung von hellem Licht, kann es Kopfschmerzen, Nackenschmerzen, verschwommenes Sehen und brennende/stechende Augen verursachen.

Es gibt sogar Dinge wie das Computer Vision Syndrome (CVS) und „Augenbeschwerden“. Laut einer Studie verwenden über 83 Prozent der Amerikaner digitale Geräte mehr als zwei Stunden am Tag, wobei 60,5 Prozent angeben, dass sie Symptome einer digitalen Augenbelastung verspüren. (Augen überbelichtet: Digital Device Dilemma.)

Business-to-Business-SaaS-Produkte und Multimedia-Bearbeitungsanwendungen werden viele Stunden am Stück verwendet. Viele wurden in einer dunklen Benutzeroberfläche entworfen, um die Belastung der Augen zu reduzieren und gleichzeitig die visuelle Klarheit zu unterstützen. Ein solcher Ansatz erfordert jedoch eine sorgfältige Vorabbewertung der Designrichtung.

Die meisten Entwickler verwenden einen schwarzen Bildschirm mit farbcodierter Syntax, um die Belastung der Augen zu verringern. Wie Toptal-Entwickler Kevin Bloch es ausdrückt: „Ein schwarzer Hintergrund entlastet die Augen und macht die automatische Farbcodierung leichter lesbar, wodurch der Code auf einen Blick viel schneller zu verstehen ist.“

Toptal-Entwickler Amin Shah Gilani fügt hinzu: „Ich persönlich verwende das Solarized Dark Theme für meinen Code-Editor. Ich bevorzuge ein dunkles Thema, weil ein dunklerer Hintergrund angenehmer für die Augen ist, zumal ich es entweder mag, das Licht gedämpft zu halten oder nachts zu arbeiten.“

Benutzeroberflächen von Gaming-Apps tendieren auch zu dunkleren Themen. Der Spielkontext und die Umgebung, in der Spieler spielen, passen besser zu einer schwarzen Farbpalette. Ein schwarzes Hintergrunddesign verstärkt auffällige visuelle Elemente, vermittelt ein Gefühl von Mysterium, hat einen besseren Kontrast und unterstützt die visuelle Hierarchie.

Wenn dunkle Benutzeroberflächen gut funktionieren

Die Mehrheit der unterhaltungsbezogenen Benutzeroberflächen (Smart-TVs, Spielkonsolen und TV- und Film-Apps) haben aus gutem Grund tendenziell ein dunkles UI-Design. Die meisten unterhaltungsbezogenen Aktivitäten finden abends statt, werden aus einer Entfernung von 2 bis 3 Fuß betrachtet und in schwach beleuchteten Räumen betrachtet – mit anderen Worten, der Bildschirm passt sich der Umgebung an. Zusätzlich heben sich bunte Inhalte (z. B. Cover-Art und Promos) auf Benutzeroberflächen mit dunklem Thema dramatisch ab.

Ziel ist es, den Kontext der Aktivität abzustimmen: „Es wird dunkel, ich entspanne mich und ich möchte etwas fernsehen.“ Ähnlich wie Tausende von winzigen Glühbirnen leuchten digitale Bildschirme überall dort, wo ein helles Pixel vorhanden ist. Daher würde eine helle Benutzeroberfläche den Raum erhellen – angesichts der Aktivität ein unerwünschter Effekt. In diesem Szenario versucht das UI-Design, dem Kontext zu entsprechen: Gerät, Inhalt, Aktivität und Umgebung.

Im richtigen Kontext, in der richtigen Umgebung, Anwendung und Nutzung, sind UIs mit schwarzem Hintergrund sinnvoll. Berücksichtigen Sie immer den Kontext , in dem die Benutzeroberfläche wahrscheinlich verwendet wird. Aber es geht noch weiter – die Wahl sollte vom Inhalt und Kontext abhängen: was , wann , wo und auf welchem ​​​​Gerät .

• Um einen starken, dramatischen Look für auffällige Visuals zu erzielen
• Um ein Gefühl von Stil und Eleganz, Luxus und Prestige zu vermitteln
• Um ein Gefühl von Intrigen und Mysterien zu erzeugen
• Um die Aufmerksamkeit des Benutzers mit minimalen Ablenkungen zu fokussieren und zu lenken
• Zur Unterstützung der visuellen Hierarchie und Informationsarchitektur

Dunkle Benutzeroberflächen sollten nur mit spärlichem, minimalem Text und „chunked“ Informationen mit starkem Schwerpunkt auf visuellen Elementen verwendet werden – hell auf Text. Wenn Text verwendet wird, sollte er einen hohen Kontrast zum dunklen Hintergrund haben – vorzugsweise reines Weiß oder eine andere kräftige Farbe (nicht dunkelgrau) auf schwarzem Hintergrund.

Wenn dunkle Benutzeroberflächen nicht gut funktionieren

Wie bereits in diesem Artikel erwähnt, sind Benutzeroberflächen mit dunklen Themen eine schlechte Wahl für text- und datenintensive Inhalte oder bei der Verwendung einer Vielzahl von Inhaltstypen (Text, Bilder, Video, Datentabellen, Dropdowns, Felder usw.). ). Der allgemeine Konsens in der Design-Community ist, dass dunkle Benutzeroberflächen eine große Herausforderung für das Design darstellen, es sei denn, Sie haben es mit einfachen Inhalten und nur hier und da ein wenig Text zu tun.

Die Herausforderung besteht darin, einen ausreichenden Kontrast aufrechtzuerhalten, was sich auf die übergeordnete Herausforderung auswirkt: Lesbarkeit, die mit der Benutzerfreundlichkeit verbunden ist und sich auf die UX auswirkt. Im Allgemeinen funktionieren alle Farben auf einem weißen Hintergrund, während auf einem dunklen Hintergrund der nutzbare Farbbereich drastisch reduziert wird.

Hier ist ein reales Beispiel dafür, wann man keine Benutzeroberfläche mit dunklem Thema verwenden sollte: Ich war an einem B2B-SaaS-Projekt beteiligt, bei dem der CEO darauf bestand, dass er, um „anders zu sein“, ein dunkles Thema wählen wollte UI – die zum Branding des Unternehmens passte … für die gesamte Plattform. Für alles. Nach mehreren Meetings und indem wir das Designteam und die Produktmanager hinter der Sache versammelten, konnten wir ihn von einer solch potenziell katastrophalen Entscheidung abbringen.

Die Plattform verwendete einen Standardsatz von SaaS-Anwendungs-UI-Komponenten und war folglich voll von Formularen, Widgets, Dropdowns, Piktogrammen und Symbolen sowie Text und numerischen Daten in Tabellen. Navigation, Layout und Funktionalität wären unglaublich schwierig zu handhaben gewesen, während gleichzeitig ein ausreichender Kontrast und ein konsistentes Farbschema erreicht worden wären. Zusammenfassend wäre es fast unmöglich gewesen, alles mit einer dunklen Benutzeroberfläche zum Laufen zu bringen.

Abhängig von der Angemessenheit der Anwendung wäre es vielleicht die richtige Wahl gewesen, eine Mischung aus hellen und dunklen UIs vorzuschlagen. Zum Beispiel hätten Einstellungsseiten mit Widgets und Formularen und Datentabellen auf einem hellen Hintergrund gestaltet werden können, und Analyseseiten mit Diagrammen hätten mit einem dunkleren Farbschema gestaltet werden können.

Die Dos and Don'ts bei der Verwendung von Dark UIs

Abschließend muss die Entscheidung für eine dunkle Benutzeroberfläche mit Vorsicht angegangen werden. Designer sollten es nicht aus den falschen Gründen tun – um hip, anders oder das Design eines anderen zu kopieren. Es ist entscheidend, dass ein Designer Kontext, Inhalt (Kontrast und Lesbarkeit), das Gerät und den Anwendungsfall berücksichtigt und einen guten Grund für seine Wahl hat. Es ist ein heikler Balanceakt, da es potenziell viele Vorteile, aber auch viele Fallstricke gibt.

Wann es in Ordnung ist, dunkle UIs zu verwenden:

• Wenn ein Branding-Farbschema es rechtfertigt
• Wenn das Design spärlich und minimalistisch mit nur wenigen Inhaltstypen ist
• Wenn es für den Kontext und die Verwendung angemessen ist, z. B. Nachtunterhaltungs-Apps
• Um die Belastung der Augen zu verringern, z. B. Analyseseiten, die über einen längeren Zeitraum verwendet werden
• Um eine Emotion hervorzurufen – zum Beispiel ein Gefühl von Intrigen und Mysterien
• Um einen auffälligen, dramatischen Look zu kreieren
• Um ein Gefühl von Luxus und Prestige zu schaffen
• Zur Unterstützung der visuellen Hierarchie

Wann es am besten ist, sich von dunklen Benutzeroberflächen fernzuhalten:

• Bei viel Text (Lesen auf dunklem Hintergrund ist schwierig)
• Wenn viele gemischte Inhalte auf dem Bildschirm angezeigt werden
• Bei B2B-Anwendungen mit vielen Formularen, Komponenten und Widgets
• Wenn das Design eine breite Farbpalette erfordert

Der Übergang zur „dunklen Seite“ sollte mit Vorsicht angegangen werden. Tiefere, gründlichere Recherchen und Analysen werden empfohlen, bevor eine solche potenziell prekäre Entscheidung getroffen wird, die mit Fallstricken behaftet ist. Wenn ein Designer diesen Weg eingeschlagen hat, ist es sehr schwierig, umzukehren. Designer sind gut beraten, alle Aspekte zu berücksichtigen – die guten und die schlechten, die Gebote und Verbote, bevor sie mit beiden Beinen einsteigen.

• • •

Weiterführende Literatur im Toptal Design Blog:

• eCommerce UX – Best Practices im Überblick (mit Infografik)
• Die Bedeutung von Human-Centered Design im Produktdesign
• Die besten UX-Designer-Portfolios – inspirierende Fallstudien und Beispiele
• Heuristische Prinzipien für mobile Schnittstellen
• Antizipatorisches Design: Wie man magische Benutzererlebnisse schafft