Die Website der Agentur dreibein im Dark Mode auf einem Linux Rechner

Wie der Dark Mode das Design von Websites beeinflussen wird

・verfasst von Florian Werner


Der Dark Mode - was nach Science-Fiction oder Star Wars klingt, ist eine seit rund einem Jahr sehr populäre Smartphone Funktion, die sowohl auf Apple iPhones, als auch auf vielen Android Geräten bereits Einzug gehalten hat. Auch auf vielen Desktop Rechnern ist der Modus mittlerweile zu finden. Was sich dahinter verbirgt, ist schnell erklärt: Beim Dark Mode wird die Software abgedunkelt. Vorher weiße Flächen erscheinen schwarz. Damit die Lesbarkeit erhalten bleibt, werden Texte invertiert dargestellt. Der Dark Mode bringt gleich drei Vorteile mit sich.

1. Vorteil: Energie sparen

Der Dark Mode spart bei technischen Geräten, die über sogenannte OLED Displays verfügen, Energie. Bei dieser Displaytechnik leuchten die Pixel selbst und es ist keine Hintergrundbeleuchtung notwendig. Aus diesem Grund verbraucht der Dark Mode auf diesen Geräten weniger Energie, da weniger Pixel weniger oft leuchten müssen. Auf Geräten ohne OLED Technik spart der Dark Mode keine Energie, da hier eine Hintergrundbeleuchtung hinter den Pixeln für die Strahlkraft des Displays verantwortlich ist und nicht die Pixel selbst. Wichtig ist dies vor allem beim Design, denn auf diesen Geräten kann technisch bedingt der Dark Mode maximal in einem sehr dunklen Grau erscheinen, aber niemals in einem tiefen Schwarz.

2. Vorteil: Nachts besser lesbar

Nachts im Dunkeln ein Smartphone zu betrachten ist für unsere Augen eine echte Herausforderung. Die Dunkelheit lässt unsere Pupillen größer werden, um maximal viel Licht einzufangen. Beim Blick auf ein helles Display müssen sich diese dann in Sekundenbruchteilen sofort wieder zusammenziehen. Das strengt an und macht das Betrachten von Displays in dunklen Umgebungen zu einer anstrengenden Angelegenheit.

3. Vorteil: Abwechslung im User Interface Design

Viele Nutzer freuen sich gerade aufgrund des dunklen Designs über den Dark Mode. Dunkle Designs waren schon immer für bestimmte Zielgruppen attraktiver. Gerade im Gaming Bereich trifft man immer wieder auf dunkle User Interface Designs. Bei vielen Smartphones kann der Dark Mode auch automatisch z.B. mit Sonnenauf- und Sonnenuntergang gesteuert werden. Das sorgt für eine willkommene Abwechslung auf dem sonst immer gleichen Smartphone Interface.

Die Frage, die sich für uns nun stellt: Wie wirkt sich diese Funktion auf die Gestaltung von Websites aus? Muss man in Zukunft beim Design speziell die oft genutzten Tageszeiten auswerten, um zu betrachten, ob dies vor oder nach dem Sonnenuntergang am jeweiligen Standort war? 

Der Browser und der Dark Mode

In den meisten Browsern gibt es einen sogenannten Media"Query ("prefers-color-scheme"). Dieser kann die Eigenschaft "light", "dark" oder "no-preference" annehmen. In der Theorie geht es nun ganz einfach. Wenn der Nutzer hier eine dunkle Einstellung gewählt hat, nutzt man einen dunklen Hintergrund und eine helle Textfarbe. Ist dies nicht der Fall, lässt man alles beim Alten. Klingt einfach oder? Ist es aber nicht, denn hier starten die Probleme erst richtig.

Ihr Websitedesign ist kein zufälliges Produkt, es entstand in stundenlanger Konzeption. Einzelne Elemente sind genau aufeinander abgestimmt. Die Website spiegelt Ihre Unternehmensidentität wider und erzeugt eine definierte Wirkung, die Sie beim Besucher erreichen möchten. Drehen Sie nun die Farben um, werden zwangsläufig viele Probleme auftauchen. Ihre Farben könnten im dunklen Layout zu wenig herausstechen oder zu viel. Die Wirkung von Elementen, die vorher hervorgehoben waren, könnte plötzlich verloren gehen. Fotos könnten zu hell wirken, da sich auch die Hintergrundfarbe auf die Wahrnehmung von Elementen auswirkt. Ein heller Holztisch wirkt auf einem dunklen Teppich schließlich auch heller als auf einem weißen Teppich. Wir empfehlen sogar, Bilder bei einem dunklen Design abzudunkeln. Unterschätzen Sie die Farbwirkungen nicht! Die dunkle Version Ihrer Website soll eine eigens gestaltete Version Ihrer Seite sein und keine zufällig aus einer Invertierung entstandene Version.

In Sachen Kompatibilität wird es immer besser. Wie man bei Caniuse.com sieht, ist das Feature mittlerweile in einer Vielzahl von aktuellen Browsern verfügbar. Beachten Sie aber bitte unbedingt, dass dieser "Schalter" bei vielen Browsern erst seit der vorherigen Version funktioniert, was heißt, dass bereits ein minimal veralteter Browser diesen MediaQuery noch nicht kennt. Aufgrund der automatischen Update-Funktion vieler neuer Browser wird sich dieses Problem zwar von selbst erledigen, sollte aber bei der Realisierung eines Projekts beachtet werden, da es viele Zielgruppen gibt, die ihre Browser nicht selbst updaten dürfen (Banken, Behörden, Versicherungen, etc.)

Vorteile des Dark Modes im Websitedesign

Nun aber genug der Schwarzmalerei (wie passend bei diesem Thema)! Der Dark Mode bietet natürlich auch einige Vorteile im Websitedesign. Aktuell ist er aus dem Grund besonders spannend, da er kaum verwendet wird. Im Web finden sich noch überraschend wenige Websites, die den Dark Mode bereits in ihrer Seite integriert haben. Was aufgrund der kurzen Zeitspanne, seit dem dies in fast allen Browsern funktioniert, auch verständlich ist. Mit einer umschaltbaren Website können Sie so aktuell auf jeden Fall aus der Masse herausstechen. Zeigen Sie dem Nutzer, dass Sie kundenzentriert denken und seine Vorlieben nicht nur respektieren, sondern auf diese eingehen. Nutzer und Zielgruppen, die sich bewusst für ein dunkles Design entschieden haben, werden dies auf Ihrer Website definitiv bemerken und wertschätzen. Aktuell würde ich sogar so weit gehen und dies dem User aktiv einblenden. Hierfür bietet sich eine Zeile im Fußbereich der Website an, in dem man den User z.B. über folgenden Satz darauf hinweist "Da Sie den Dark Mode Ihres Gerätes aktiviert haben, genießen Sie gerade auch unsere Website im Dark Mode". 

Die Betrachtung einer Website im Dark Mode, der von vielen Nutzern auch automatisch nach Sonnenuntergang aktiviert wird, ist für die Augen schonender. Blendungen werden vermieden und der Nutzer empfindet weniger "Probleme" beim Besuch Ihrer Website. Sie steigern effektiv die User Experience Ihrer Kunden und sorgen so für wiederkehrende Nutzer und längere Verweilzeiten auf Ihrer Website.

Was muss man beim Design im Dark Mode beachten

Dunkle Hintergründe mit weißen Texten bergen einige Probleme in sich. Wir sind das Lesen von schwarzen Texten auf weißem Grund gewöhnt. Alle Bücher und Zeitungen nutzen diese Druckart. Aus diesem Grund empfehlen wir Ihnen, im Dark Mode den Abstand der Zeilen zueinander etwas zu erhöhen. Eine Zeilenhöhe von 1,7 statt 1,5 wäre ideal. So kann das Auge leichter den Zeilen folgen. Auch der Abstand zwischen den Wörtern sollte vergrößert werden. Hier empfehlen wir einen Abstand von 0.05 em. Dieser minimal größere Abstand fällt den meisten Benutzer Ihrer Website nicht auf, aber es ist gerade so viel, dass der Text wesentlich besser zu lesen sein wird.

Wie gesagt, sollte auch bei der Verwendung von Bildern stark darauf geachtet werden, dass diese im Dark Mode wesentlich heller wirken werden. Dunkeln Sie diese aus diesem Grund idealerweise mithilfe des Browsers per CSS ab. Was bei Bildern noch leicht ist, ist bei Schatten und Schein nach außen eine echte Herausforderung. Ein Schatten auf einem dunklen Hintergrund wird einfach verschwinden. Dies kann zum Problem werden, wenn der Schatten für die Funktion und das Layout Ihrer Website eine entscheidende Rolle gespielt hat. Das kann zum Beispiel bei Online-Shops der Fall sein, bei denen das aktuell mit der Maus überfahrene Produkt einen Schlagschatten erhält, um dem Benutzer die Navigation zu erleichtern. Sorgen Sie deshalb im Dark Mode dafür, dass es andere optische Hilfsmittel gibt, die diese optische Benutzerführung ersetzen. Dies könnten beispielsweise Vergrößerungen oder Farbänderungen sein.

Auch bei der Farbwahl gibt es einiges zu beachten. Wie Ihre Unternehmensfarben auf weiß wirken, müssen wir Ihnen wohl kaum sagen. Das ist der gewohnte Farbeinsatz, den Sie aus Ihrem Alltag gewohnt sind. Wie aber die Farbe aussieht, wenn Sie auf einem schwarzen Hintergrund eingesetzt wird, ist für viele eine Überraschung. Der Anblick wirkt ungewohnt und oft auch, als hätte man die Farben geändert. Auch hier wirken Farben plötzlich heller. Farben mit starker Sättigung treten in Konkurrenz zum dunklen Hintergrund und sorgen für ein unruhiges Bild. Setzen Sie deshalb immer Farben mit einer geringeren Sättigung ein und planen Sie den Farbeinsatz auf Ihrer Website genau.

Website der Werbeagentur Dreibein aus Cham im Dark Mode

Fazit zum Dark Mode im Webdesign

Der Dark Mode ist gerade nachts eine enorme Erleichterung. Gerade Nutzer von OLED Displays wissen den Dark Mode sehr zu schätzen. Im Bereich Ihrer Website können Sie gerade jetzt noch den positiven Unterschied machen. Denken Sie kundenzentriert und fragen Sie sich, ob Ihre Kunden den Dark Mode verwenden könnten. Falls ja, ist es gerade bei einem Relaunch Ihrer Website auf jeden Fall mehr als eine Überlegung wert, diesen gleich zu integrieren.

Geschrieben von
Florian Werner