Dunkelmodus

Was ist der Dunkelmodus?

Sie greifen abends im Bett zum Handy, das Licht ist aus, und der weiße Bildschirm leuchtet Ihnen ins Gesicht wie eine Lampe. Genau für diesen Moment gibt es den Dunkelmodus.

Der Dunkelmodus (Dark Mode) ist eine Art, die Seiten einer Website oder App mit dunklem Hintergrund und heller Schrift und hellen Symbolen zu zeigen, statt mit der gewohnten schwarzen Schrift auf Weiß. Der Inhalt bleibt, wie er ist: dieselben Schaltflächen, dieselben Menüs, dieselben Wörter. Nur die Farben ändern sich, damit der Bildschirm die Augen schont, wenn es um Sie herum dunkel ist.

Man nennt ihn auch Nachtmodus oder dunkles Design. Heute steckt er in den Systemen von Handys und Computern und in den meisten Apps, die wir jeden Tag nutzen. Deshalb erwarten die Leute ihn auch von jeder neuen Website und jeder neuen App.

Wie funktioniert der Dunkelmodus?

Handy und Computer haben eine allgemeine Einstellung, in der der Nutzer zwischen heller und dunkler Darstellung wählt, und manche Geräte wechseln bei Sonnenuntergang von selbst. Eine gut gemachte Website oder App liest diese Einstellung und öffnet sich vom ersten Moment an in den passenden Farben.

Daneben gibt es einen zweiten Weg. Ein kleiner Knopf in der Website oder App, oft mit Sonne und Mond, lässt den Nutzer selbst zwischen den beiden Modi wechseln. Danach merkt sich das System die Wahl und springt nicht bei jedem Besuch zurück in den hellen Modus.

Im Hintergrund legt der Designer für alles auf dem Bildschirm zwei Farbsätze an: für den Hintergrund, die Schrift, die Schaltflächen, die Rahmen und die Tabellen. Das System nimmt dann je nach Modus den passenden Satz. Stellen Sie sich ein Zimmer mit zwei Beleuchtungen vor, eine für den Tag und eine für den Abend, während die Möbel an ihrem Platz bleiben.

Warum ist der Dunkelmodus für Sie wichtig?

Wenn Sie eine Website oder App betreiben, öffnen Ihre Besucher sie zu ganz verschiedenen Tageszeiten. Viele surfen abends. Der Dunkelmodus verändert ihr Erlebnis in diesen Stunden deutlich:

• Angenehm für die Augen bei wenig Licht: Ein dunkler Bildschirm blendet im dunklen Zimmer nicht. So kann der Leser den Artikel zu Ende lesen oder länger durch die Produkte stöbern, ohne dass es stört.
• Weniger Akkuverbrauch: Bei Handys mit OLED-Bildschirm ist jeder schwarze Bildpunkt fast aus und verbraucht keinen Strom. Deshalb braucht der Dunkelmodus auf diesen Bildschirmen weniger Akku.
• Weniger Müdigkeit bei langer Arbeit: Wer den ganzen Tag vor einem Dashboard oder einer Verwaltungssoftware sitzt, merkt den Unterschied am Abend, besonders in der Nachtschicht.
• Die Wahl des Nutzers wird beachtet: Wer auf dem Handy die dunkle Darstellung eingestellt hat und dann Ihre grell weiße Website öffnet, hat das Gefühl, dass die Seite nicht auf ihn achtet.

Ist der Dunkelmodus also immer besser? Nein. In der Sonne oder in einem hellen Büro lesen viele Menschen schwarze Schrift auf Weiß leichter. Das Ziel ist, dem Nutzer die Wahl zu lassen.

Heller Modus und Dunkelmodus im Vergleich

So gestalten Sie einen Dunkelmodus, der die Augen schont

Nur die Farben umzudrehen, führt meist zu einem schlechten Ergebnis. Ein Dunkelmodus, mit dem sich die Leute wohlfühlen, braucht viele kleine Entscheidungen:

1. Dunkelgrau statt reinem Schwarz: Reines Schwarz neben grellem Weiß ergibt einen harten Kontrast, der die Augen ermüdet. Ein dunkelgrauer oder marineblauer Hintergrund ist ruhiger.
2. Helle Schrift, aber nicht grell: Ein Weiß mit leichtem Grauton liest sich angenehmer als reines Weiß.
3. Genug Kontrast: Kontrast ist der Unterschied zwischen der Farbe der Schrift und der des Hintergrunds. Ist er zu klein, wird das Lesen schwer, vor allem für ältere Menschen und Menschen mit schwachen Augen. Der Barrierefreiheits-Standard WCAG legt dafür ein Mindestmaß fest.
4. Markenfarben etwas sanfter: Ein kräftiges Blau oder Rot wirkt auf dunklem Hintergrund schrill und braucht einen etwas ruhigeren Ton.
5. Logo und Bilder für beide Hintergründe: Ein schwarzes Logo verschwindet auf dunklem Grund und braucht eine helle Version. Sehr helle Fotos sollte man manchmal leicht abdunkeln.
6. Tabellen und Diagramme: In Dashboards muss man die Farben der Balken und Linien prüfen, damit sie in beiden Modi gut zu verstehen sind.

Häufige Fehler beim Einbau des Dunkelmodus

• Den Dunkelmodus auf der Startseite einschalten und andere Seiten vergessen, etwa die Bezahlseite oder das Anmeldefenster, die dann plötzlich weiß aufleuchten.
• Blasse graue Texte auf dunklem Hintergrund, die kaum jemand lesen kann.
• Die Wahl des Nutzers nicht speichern, sodass die Seite jedes Mal in den hellen Modus zurückfällt.
• Die Einstellung des Geräts übergehen und allen einen einzigen Modus aufzwingen.
• Den Dunkelmodus vor dem Start nicht auf echten Handys testen, obwohl Farben auf jedem Bildschirm anders aussehen.
• Ihn erst am Ende des Projekts einbauen, wenn das Design schon fertig ist. Dann wird er zum Flickwerk statt zu einem Teil der Oberfläche.

Der Dunkelmodus in unseren Websites und Apps

Bei Linkysoft planen wir den Dunkelmodus vom ersten Tag des Designs an, nicht erst danach. Jede Website, die wir im Rahmen unseres Angebots Webdesign und Webentwicklung bauen, hat einen eingebauten Dunkelmodus, Unterstützung für Arabisch und Schrift von rechts nach links (RTL) sowie den Barrierefreiheits-Standard WCAG 2.2. Vor dem Start testen wir sie auf echten Handys.

In der App-Entwicklung gestalten wir jede App von Grund auf mit hellem und dunklem Modus und barrierefreien Bildschirmen, für iPhone und Android. Dann veröffentlichen wir sie im App Store und bei Google Play und kümmern uns um die Updates.

Ist Ihr Projekt eine Verwaltungssoftware, mit der Ihr Team den ganzen Tag arbeitet, etwa für Verkauf, Lager oder Personal? Dann bauen wir sie im Rahmen unserer Webanwendungen und Verwaltungssysteme genau nach der Arbeitsweise Ihres Unternehmens, und sie läuft auf jedem Gerät. Hier gehört die Schonung der Augen mit in den Plan, denn derselbe Bildschirm ist acht Stunden oder länger vor dem Mitarbeiter geöffnet.

Denken Sie über eine neue Website oder App nach? Starten Sie mit einer kostenlosen Beratung bei uns, und wir klären gemeinsam, was Ihre Nutzer bei Tag und bei Nacht brauchen.