Schwarz und weiß – oder: Light Theme First

Windows Phone bietet zwei Möglichkeiten, das Aussehen von Betriebssystem und Apps anzupassen: Die Akzentfarbe und den Hintergrund. Bei letzterem kann der Benutzer zwischen dem dunklen und hellen Hintergrundschema wählen. Aber während wir Windows-Phone-Entwickler eigentlich angehalten sind, die Wahl unseres Benutzers zu berücksichtigen und bestmöglich in unseren Apps umzusetzen, so siegt schlussendlich doch die Macht der Gewohnheit: Die unserer eigenen.

Windows-Phone-Themes im Vergleich
Windows-Phone-Themes im Vergleich

Stein des Anstoßes ist das Nichtbestehen der Zertifizierung einer Windows-Phone-App wegen des hellen Hintergrundschemas, dem Light Theme. Da half es auch nichts, dass die App richtig schön aufgezogen war: Mit MVVM, grünen Tests und durchgecheckt mit der Performanceanalyse. Gemangelt hat es dann aber an der Unterstützung des Light-Theme. Problem war, dass auf einem dunklen Hintergrundbild ein Text lag. Denn die Vordergrundfarbe von Textblöcken ist im dunklen Hintergrundschema, dem Dark Theme, standardmäßig weiß – beim hellen Schema hingegen schwarz und damit auf einem dunklen Hintergrund nicht gut lesbar. Dieser Umstand ist während der kompletten Entwicklung nicht aufgefallen: Nirgends war das Light-Theme aktiv, weder im Emulator (Dark-Theme ist hier Standard) noch auf Testgeräten (Dark-Theme nach persönlichem Gusto gewählt).

Welche Lehren sind daraus zu ziehen? Nun, im Prinzip sind es die folgenden zwei:

  1. Apps müssen von Beginn an so entworfen werden, dass sowohl Light- als auch Dark-Theme angemessen unterstützt werden. Optimalerweise ändert man an den Farbeinstellungen gar nichts oder wählt, wo nötig, die Akzentfarbe (sparsam!). Bei sehr hellen oder dunklen Farben sollten die Alarmglocken läuten – diese sind bei einem Themewechsel potenziell zertfizierungsgefährdend.
  2. Muss man die Hintergrund- und/oder Vordergrundfarben doch ändern (z. B. wegen CI-Vorschriften), so hat man zwei Möglichkeiten:
    1. Das vom Benutzer gewählte Theme komplett ignorieren (hier hilft der PhoneThemeManager) oder beim Setzen eines Hintergrundes immer gleich auch die gewünschte Vordergrund- oder Füllfarbe setzen. Diese Methode würde man wohl anwenden, wenn die Veröffentlichung einer App nur noch an der Themeunterstützung hängt. Die Wahl des Benutzers wird dabei jedoch geflissentlich ignoriert.
    2. Das Design so anpassen, dass beide Schemata gut angesprochen werden. Wieso nicht statt einem dunklen Hintergrundbild auch ein helles im gleichen Stil? Oder mithilfe von OpacityMasks mit einem Bild gleich beide Themes abdecken, wie es auch die ApplicationBar tut? Der Benutzer hat sich aus einem bestimmten Grund für das Theme entschieden (er muss es bei der Installation einstellen) und sollte auf Basis seiner Wahl bestmöglich bedient werden.

Als Reaktion möchte ich nun das folgende Paradigma ausrufen: Light Theme First. Darin enthalten sind zwei einfach zu merkende Regeln:

  1. Eine App sollte zunächst für das Light-Theme konzipiert und zuerst mit diesem getestet werden.
  2. Die App muss in mindestens zwei getrennten Systemen getestet werden. In mindestens einer davon muss dauerhaft das Light-Theme aktiviert sein und in mindestens einer weiteren das Dark-Theme.

Die erste Regel von Light-Theme-First ist nicht als Dogma zu verstehen: Ausnahmen sind beispielsweise Spiele oder Apps, bei denen ein bestimmtes Design durch Kundenvorgabe unbedingt eingehalten werden muss. Bei allen anderen Apps ist die erste Regel aber Pflichtprogramm und die zweite ist jederzeit und unabhängig vom App-Typ einzuhalten.

WhatsApp mit Light Theme: Tippen im Nirgendwo
WhatsApp mit Light-Theme: Tippen im Nirgendwo

Ein kleiner Trost für alle, die die gleichen Erfahrungen mit dem Light-Theme gemacht haben: Selbst WhatsApp nimmt es mit dem hellen Schema nicht ganz so genau. Die Sprechblase am unteren Bildschirmrand wird im Bearbeitungsmodus mit einer (scheinbar hartkodierten) weißen Hintergrundfarbe dargestellt. Auf dem weißen Hintergrund sieht es dann so aus, als würde man seine Nachrichten mitten ins weiße Nirgendwo tippen.

Was nehmen wir also mit? Das Light-Theme wird gerne belächelt oder ganz vergessen, muss von einer guten App aber dennoch unterstützt werden. Mithilfe von Light-Theme-First begegnen wir diesem Problem, indem wir voller Absicht gegen unsere eigenen Gewohnheiten vorgehen. Dark-Theme-Anhänger müssen sich auf das weiße Schema einlassen und umgekehrt. Dies ist im ersten Moment zwar unangenehm, aber gut so, denn schlussendlich verdienen alle Benutzer eine optimale User-Experience, egal ob in schwarz oder in weiß.

Published by

Christian Liebel

Hey there! I am Christian Liebel from Leimersheim, Germany. I work as a consultant at Thinktecture and I am their representative at W3C. PWA development with Angular and .NET Core is our day-to-day business. Feel free to contact me anytime.

Leave a Reply

Your email address will not be published. Required fields are marked *