Im Rampenlicht: Die Prinzipien des Dark UI-Designs

Dunkle UI-Designs sind weit und breit zu sehen, von mobilen Bildschirmen bis hin zu riesigen Fernsehern. Ein dunkles Thema kann Kraft, Luxus, Raffinesse und Eleganz ausdrücken. Das Entwerfen für dunkle Benutzeroberflächen stellt jedoch mehrere Herausforderungen dar und wird die Erwartungen nicht erfüllen, wenn es schlecht implementiert wird. Bevor sie in die „dunkle Seite“ eintauchen, sollten Designer schauen, bevor sie springen.

Physiker sagen, dass Schwarz nicht wirklich eine Farbe ist; es ist die Abwesenheit von Licht . Bei seinen Experimenten, bei denen Sonnenlicht durch Prismen gestrahlt wurde, hat Sir Isaac Newton es nicht einmal in das Farbspektrum aufgenommen.

In der Farbpsychologie repräsentieren die meisten Farben verschiedene Dinge für verschiedene Menschen. In westlichen Kulturen wird Schwarz oft mit Tod, Mysterium und Bösem in Verbindung gebracht. Grün wird aufgrund der Natur oft mit Wachstum in Verbindung gebracht. Blau ist fast überall beruhigend, weil es mit Himmel und Wasser in Verbindung gebracht wird. Farbe ist emotional.

Andere Effekte sind kultureller Natur. Lila zum Beispiel wird immer noch mit Luxus in Verbindung gebracht, weil in vielen alten Kulturen lila Farbstoff teuer und selten war – nur Könige konnten ihn sich leisten. Es war lange genug ein bedeutender Teil des kulturellen Zeitgeistes, um ein Teil der menschlichen Psyche zu werden.

Digitale Produkte mit dunklen UIs – verbunden mit Kraft, Eleganz und Geheimnis – sind ein gewaltiger Trend. Während oft gesagt wird, dass der Dunkelmodus die Belastung der Augen verringern kann, gibt es keine Beweise dafür, dass dies wahr ist. Unter Umständen soll es auch Akkulaufzeit sparen. Dennoch sind dunkle Themen meistens eine ästhetische Wahl.

Dunkle UI vs. helle UI

Nicht alle Schnittstellen sind für ein dunkles Thema geeignet. Designer sollten sich mit Markenfit, kultureller Eignung und Farbpsychologie befassen und die emotionale Wirkung berücksichtigen, bevor sie sich für eine entscheiden. Es ist ein kniffliger Balanceakt.

Während eine auf Millennials ausgerichtete Finanz-App mit einem dunklen Thema den Coolness-Faktor erreichen kann, ist sie für die Website einer großen Bank, die sich an die allgemeine Bevölkerung richtet, möglicherweise ungeeignet. Zu reich, zu dunkel und zu stilvoll kann frustrierender werden, wenn die Menschen nur ihr Guthaben überprüfen und eine Rechnung bezahlen möchten.

Dunkle Benutzeroberflächen für B2B-SaaS-Anwendungen sind notorisch schwierig zu entwerfen. Standard-Web-UI-Komponenten wie Datentabellen, Widgets, Formulare und Dropdowns können auf einer dunklen UI seltsam aussehen. Da viele Farbschemata nicht gut mit dunklen Benutzeroberflächen funktionieren, passen bestimmte Marken und Produkte – je nach Art, Kontext und Umgebungsfaktoren – nicht gut und können sich als unüberwindbare Herausforderung erweisen.

Designer, die noch nie mit dunklem UI-Design gearbeitet haben und sich entscheiden, mit beiden Beinen einzusteigen, finden sich möglicherweise in rauen, unbekannten Gewässern wieder. In den Ozeanen dunkler UIs werden Normen gebeugt, Regeln geändert und Fallstricke in Hülle und Fülle.

Allerdings gibt es viele gute Gründe für die Verwendung von Dark UIs:

• 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 einen auffälligen, dramatischen Look zu kreieren

Und es gibt Szenarien, in denen es nicht empfohlen wird:

• Wenn viel Text vorhanden ist (das Lesen auf dunklem Hintergrund ist schwierig)
• Wenn es viele gemischte Inhaltstypen gibt
• Wenn das Design eine breite Farbpalette erfordert

Kontrast im dunklen UI-Design

Ein dunkles Thema ist kein schwarzes Thema. Es wäre am besten als ein „Low-Light“-Thema zu betrachten. Eines der Hauptanliegen bei dunklen Benutzeroberflächen ist das Erreichen eines ausreichenden Kontrasts, damit visuelle Elemente voneinander getrennt und Text lesbar ist. Die meisten Designer würden denken, dass die Verwendung von Schwarz optimal wäre, um einen starken Kontrast zu erzielen. Verwenden Sie jedoch am besten kein echtes Schwarz (#000000) für Hintergründe oder Oberflächenfarben . Schwarz wird am besten für andere UI-Elemente reserviert und sparsam verwendet. True Black kann beispielsweise für kleine UI-Elemente oder einen umlaufenden Rahmen verwendet werden.

Das dunkle Design von Google Material Design empfiehlt die Verwendung von Dunkelgrau (#121212) als dunkle Oberflächenfarbe, „um Höhe und Raum in einer Umgebung mit einem größeren Tiefenbereich auszudrücken“. Darüber hinaus empfehlen viele Designer, bei der Definition des Farbschemas dunklen Grautönen einen subtilen dunkelblauen Farbton hinzuzufügen. Es erzeugt tendenziell einen besseren dunklen Ton für digitale Bildschirme und eine ansprechendere dunkle UI-Farbpalette.

Ein Vorteil der Verwendung einer Reihe von Grautönen besteht darin, dass Designern Spielraum gegeben wird, da eine breitere Palette von Farben ausgedrückt werden kann. Eine Graupalette hilft auch, Tiefe zu erzeugen, da Schlagschatten leichter gegen Grau als gegen Schwarz gesehen werden können.

Besonderes Augenmerk muss auf den Textkontrast in dunklen UIs gelegt werden.

Die Richtlinien für barrierefreie Webinhalte (WCAG) verlangen, dass „die visuelle Darstellung von Text ein Kontrastverhältnis von mindestens 4,5:1 hat“, mit Ausnahme von großformatigem Text, der ein Kontrastverhältnis von mindestens 3:1 haben sollte. Daher müssen Designer sicherstellen, dass Inhalte im Dunkelmodus gut lesbar bleiben.

Es ist auch eine gute Idee, den richtigen Kontrast zwischen anderen UI-Elementen wie Karten, Schaltflächen, Feldern und Symbolen auf verschiedenen Displays und Geräten zu testen. Wenn es eine unmerkliche Trennung zwischen UI-Elementen gibt, verschmilzt das Design zu sehr und läuft Gefahr, langweilig zu werden.

Aufmerksamkeit fokussieren: Farbe

Farbe hebt sich in dunklen UIs ab. Verwenden Sie am besten Schemata mit helleren, ungesättigten Akzentfarben. Vermeiden Sie gesättigte Farben in dunklen Benutzeroberflächen, da sie auf dunklen Oberflächen visuell vibrieren können. Darüber hinaus müssen Farben als Best Practice den AA-Standard der WCAG von mindestens 4,5:1 erfüllen, wenn sie mit Text verwendet werden.

Bei der Definition eines Farbschemas für eine dunkle Benutzeroberfläche empfiehlt Google eine begrenzte Anzahl von Farbakzenten, um den größten Teil des Platzes für dunkle Oberflächen verfügbar zu halten. Die Verwendung von geteilten Komplementärfarben kann hilfreich sein. Das Schema hat eine dominante Farbe und zwei Farben neben der Komplementärfarbe der dominanten Farbe. Dadurch wird der erforderliche Kontrast ohne die Spannung des komplementären Farbschemas erzielt.

Das richtige Farbschema kann dabei helfen, einen guten Kontrast zu schaffen. Colorable ist ein hilfreiches Tool zur Auswahl barrierefreier Farbkombinationen von Text- und Hintergrundfarben.

Text und wesentliche Elemente wie Schaltflächen und Symbole sollten Lesbarkeitsstandards erfüllen, wenn sie auf dunklem Hintergrund erscheinen. Wie oben in der Jabra Sound+ App zu sehen ist, können andere Farben als Weiß für Text und Symbole verwendet werden.

Die Material Design-Website von Google verfügt über einen nützlichen Farbpalettengenerator (unter „Tools zum Auswählen von Farben“), mit dem Designer Farbpaletten erstellen und auf eine Benutzeroberfläche anwenden können. Der Zugänglichkeitsgrad von Farbkombinationen kann auch mit einem begleitenden Color Tool gemessen werden.

„Verwende stark kontrastierende Farben, um die Lesbarkeit zu verbessern. Viele Faktoren beeinflussen die Farbwahrnehmung, darunter Schriftgröße und -stärke, Farbhelligkeit, Bildschirmauflösung und Lichtverhältnisse.“ Apple-Richtlinien für die Benutzeroberfläche

Weniger ist mehr: Negativraum nutzen

Eines der grundlegenden Elemente eines erfolgreichen Dark-UI-Designs ist die geschickte Nutzung von negativem Raum. Bei schlechtem Design können dunkle UIs digitale Produkte schwer und überheblich erscheinen lassen. Als Gegengewicht können Designer dunkle UIs leichter gestalten, indem sie den negativen Raum in spärlichen, minimalistischen Designs nutzen. Beim minimalistischen Design geht es genauso um das, was nicht da ist, wie um das, was ist. Bei geschickter Verwendung macht Negativraum eine dunkle Benutzeroberfläche besser scanbar und ermöglicht es den Menschen, Informationen leichter aufzunehmen.

Der französische Komponist Claude Debussy hat einmal gesagt: „ Musik ist der Raum zwischen den Noten “. Dasselbe gilt für die Scanbarkeit – negativer Abstand zwischen Elementen ist es, was ein Layout funktionieren lässt. Eine großzügige Menge an negativem Raum um UI-Elemente gibt ihnen Definition. Es hebt wichtige Inhalte hervor und bietet den nötigen Freiraum, damit sich das Design nicht dicht und überladen anfühlt. Ohne Atempause wird das menschliche Gehirn weniger wahrscheinlich Punkte von Interesse scannen und eher wandern.

Schnittstellen, die mit zu vielen Elementen und Texten vollgestopft sind, sind der Fluch eines hochwertigen dunklen UI-Designs. Durch sorgfältige Berücksichtigung der visuellen Hierarchie in dunklen Benutzeroberflächen können Designer ihre Kreationen leichter scanbar machen und so die Benutzererfahrung verbessern.

Styling-Wörter: Typografie

Jeder Text in dunklen UIs muss genau geprüft werden. Es geht um zweierlei: Lesbarkeit und Kontrast. Zunächst geht es um die Größe. Der Text muss groß genug sein, um gut lesbar zu sein (kleiner Text auf dunklem Hintergrund ist schwerer zu lesen). Zweitens muss zwischen Text und Hintergrund ein ausreichender Kontrast bestehen.

Die Verfügbarkeit von Tausenden von digitalen Schriftarten macht es einfach, Botschaften mit Wirkung für Kopfzeilen und Heldenbotschaften anzuzeigen. Designer können Lesbarkeitsprobleme mindern, indem sie den Kontrast erhöhen und die Schriftgröße, den Zeichenabstand und die Zeilenhöhe für kleineren Text anpassen.

Die AAA-Empfehlung des W3C für normalgroßen Text (weniger als 18 Punkt, wenn nicht fett) ist ein Kontrastverhältnis von mindestens 7:1 . Dies gilt auch für andere UI-Elemente: Symbole, Bilder von Text und Textbeschriftungen wie Schaltflächenbeschriftungen. Es obliegt den Designern sicherzustellen, dass alle digitalen Produkte für alle zugänglich sind. Es verbessert nicht nur die Benutzerfreundlichkeit und damit UX, es ist in den meisten Ländern Gesetz .

Designern stehen unzählige Optionen zur Verfügung, um hervorragende Schriftarten zu finden, die in dunklen Benutzeroberflächen gut funktionieren. Google Fonts, Font Library und Adobe Typekit sind einige, die eine einfache App- oder Website-Integration und eine große Auswahl bieten.

Kommunizierende Tiefe: Erhebung

Ein dunkles Thema bedeutet nicht flach. Bei Lichtthemen erzeugen Beleuchtung, Schattierung und Schatten ein Gefühl von Tiefe. Bei dunklen UIs ist es schwieriger, da sie überwiegend dunkle Oberflächen mit spärlichen Farbakzenten enthalten. Dennoch können Designer drei oder vier Höhenstufen mit entsprechenden Farbschemata für Text verwenden, um Tiefe zu vermitteln.

Warum Tiefe? Die meisten modernen Designsysteme verwenden ein System von Höhenstufen, um die Tiefe zu kommunizieren. Ein Gefühl von Tiefe entspricht der natürlichen Welt. Unsere Vision hat Tiefenwahrnehmung, und wir leben in einer 3D-Welt. Tiefe hilft, die visuelle Hierarchie einer Schnittstelle hervorzuheben. Elemente im Vordergrund machen beispielsweise auf sich aufmerksam, etwa ein Warndialog.

Die Oberflächen werden unterschiedlich beleuchtet, um unterschiedliche Höhenniveaus anzuzeigen. Je höher die Position einer Oberfläche im Höhenstapel (näher an einer implizierten Lichtquelle), desto heller ist die Oberfläche. Eine hellere Oberfläche macht es einfacher, Höhen zwischen Komponenten zu unterscheiden, und es hilft, Schatten zu sehen, wodurch die Kanten jeder Oberfläche deutlicher werden.

Die Gestaltung der Oberflächenfarbe jeder Ebene erfordert Sorgfalt. Es ist am besten, nicht mehr als vier oder fünf Ebenen zu haben. Designer müssen den Textkontrast berücksichtigen, wenn die Oberflächen im Stapel höher und heller werden. Wenn die Hintergrundfarbe nicht dunkel genug ist, um einen Kontrast von mindestens 15,8:1 zwischen weißem Text und der Oberfläche zu erreichen, wird Text auf der höchsten (und hellsten) erhöhten Oberfläche den 4,5:1-Standard nicht erfüllen. In einigen Fällen ist es möglicherweise am besten, die Textfarbe eines Elements im Designsystem als echtes Schwarz (#000000) anzugeben, um einen guten Kontrast auf einem hellgrauen Hintergrund zu erzielen.

Inspiration für dunkles UI-Design

In Anlehnung an die oben skizzierten Prinzipien sind hier einige hervorragende Beispiele für das Design dunkler Benutzeroberflächen:

Atom Finance nutzt ein dunkles Thema für einen raffinierten Look und beschränkt seine Akzentfarben auf drei. Das Layout verwendet Negativraum und ein spärliches, minimalistisches Design für eine komplexe Finanzwebsite. Die Website verwendet eine subtile Schattierung, um unterschiedliche Komponentenhöhen in der Benutzeroberfläche anzuzeigen.

Diese beiden minimalistischen Websites mit dunklen Themen verwenden fette Typografie. Sorgfältige Schattierung mit einer einzelnen Akzentfarbe wird in Übereinstimmung mit Best Practices für das dunkle UI-Design verwendet.

Trotz der Herausforderungen bei der Arbeit mit dunklen Themen für SaaS-Anwendungen ist dieses Datenvisualisierungs-Dashboard für IBM vorbildlich. Die Anzahl der Akzentfarben ist auf ein Minimum beschränkt, und die Website verwendet subtile Schattierungen, um verschiedene Höhen der Benutzeroberfläche anzuzeigen.

Diese mobilen Apps halten sich an Best Practices für das Design dunkler Benutzeroberflächen, indem sie echtes Schwarz nur für Einfassungen, die richtige Schattierung von Elementen für verschiedene Höhenstufen und eine begrenzte Anzahl von Akzentfarben verwenden.

Zusammenfassung

Die Entscheidung, ein dunkles UI-Design gegenüber einem traditionellen zu verwenden, muss mit Diskretion angegangen werden. Es sollte nicht aus den falschen Gründen ausgewählt werden – um hip, anders oder das Design eines anderen nachzuahmen. Designer sollten eine starke Begründung für ihre Wahl haben und den Inhalt, den Nutzungskontext und das Gerät berücksichtigen, auf dem das Design erscheinen wird.

Dunkle Themen sind für einige digitale Produkte geeignet, für andere jedoch ein echtes Problem bei der Implementierung. Einfachheit ist der Schlüssel. Sie eignen sich hervorragend für die Präsentation minimalistischer Inhalte, Datenvisualisierungen, Medienseiten und Unterhaltungsplattformen. Sie eignen sich schlecht für komplexe, datenlastige B2B-Plattformen, textlastige Seiten und viele abwechslungsreiche Inhalte.

Für mutige Designer, die bereit sind, neue stilistische Grenzen zu überschreiten und dunkle Benutzeroberflächen durch eine emotionale und ästhetische Linse zu erkunden, bieten sie einen aufregenden Spielplatz unendlicher Möglichkeiten – auf der „dunklen Seite“.

Lassen Sie uns wissen, was Sie denken! Bitte hinterlassen Sie unten Ihre Gedanken, Kommentare und Ihr Feedback.

• • •

Weiterführende Literatur im Toptal Design Blog:

• Dunkle Benutzeroberflächen. Das Gute und das Böse. Verhaltensregeln.
• Die Gestaltungsprinzipien und ihre Bedeutung
• Erforschung der Gestaltungsprinzipien des Designs
• Überzeugend und bewegend – Ein Leitfaden zu Motion Design-Prinzipien
• Steigern Sie Ihre UX mit diesen erfolgreichen Prinzipien des Interaktionsdesigns