← Zurück zum Journal
SuryaUIDesigniOS

Ein Zifferblatt für Tageslicht gestalten

Die Gestaltungsentscheidungen hinter Surya: warum der Hauptbildschirm ein Kreis ist, warum er in Prozent spricht, warum Sonne und Mond Namen bekommen haben und wie viel ein Widget weglassen muss, um auf einen Blick lesbar zu sein.

Ein Zifferblatt für Tageslicht gestalten

Eine Sonnen-App könnte locker eine Liste sein. Sonnenaufgang, Sonnenuntergang, Sonnenmittag, Tageslänge, alles korrekt, alles in sauberen Zeilen. Sie würde jede Frage beantworten, und beim Hinschauen würdest du nichts fühlen. Das ist die Falle bei Daten-Apps: Die Zahlen stimmen, und der Screen ist tot.

Deshalb zeigt Surya keine Uhrzeiten. Surya zeigt einen Tag.

Ein Kreis, weil ein Tag sich dreht

Der Hauptbildschirm ist ein großer Ring. Die Sonne sitzt als kleiner leuchtender Punkt darauf und wandert vom Aufgang bis zum Untergang über den Bogen. In der Mitte steht eine einzige Zahl, groß und dünn: wie viel vom Sonnenbogen schon hinter dir liegt.

Ein iPhone vor dem Himmel, darauf das Zifferblatt von Surya mit einer großen Prozentzahl in der Mitte
Ein Ring, ein Punkt, eine Zahl. Alles andere steht darunter.

Eine waagrechte Zeitleiste sähe aus wie ein Fortschrittsbalken, und Fortschrittsbalken geben dir das Gefühl, zu spät dran zu sein. Ein Ring hat dieses Ende nicht. Du liest ihn wie ein Zifferblatt: Der Punkt ist irgendwo, und du weißt ungefähr, was das heißt, bevor du überhaupt etwas liest.

Prozent ist die ehrliche Einheit

Du kannst das Zifferblatt zwischen zwölf Sonnenstunden und einer einfachen Prozentzahl umschalten. Stunden fühlen sich nach Zeit an, deshalb wirken sie wie die naheliegende Wahl. Prozent liest sich aber schneller. Bei "noch sieben Stunden fünfundfünfzig" muss ich rechnen. "40 Prozent sind weg" verstehe ich einfach.

Surya-Screenshot mit dem Umschalter zwischen Sonnenstunden und Prozent des Tageslichts
Stunden für die Sonnenuhr-Romantiker, Prozent für alle, die nicht rechnen wollen.

Die genauen Zahlen gibt es trotzdem, eine Wischbewegung weiter unten: verstrichene Zeit, Restzeit, Sonnenzeit, Untergang und ein Balken für die Bilanz des Tages. Das Zifferblatt ist zum Spüren, wo du stehst. Die Tabelle ist zum Nachprüfen.

Sonne und Mond bekommen Namen

In der App heißt die Sonne Helios und der Mond Selene. Das ist zum Teil ein Beschriftungsproblem: "Sonne" und "Mond" in Kapitälchen auf einem Widget sehen aus wie eine Wetter-App. Zwei Namen aus der griechischen Mythologie haben jedem Himmelskörper eine Stimme und eine Farbe gegeben. Helios ist warm und golden, Selene kühl und blass. Nach einem Blick weißt du, wer wer ist, und die Widgets wirken plötzlich wie ein Paar.

Ein Tag dreht sich, also ist der Hauptbildschirm ein Ring. Fortschrittsbalken geben dir das Gefühl, zu spät zu sein.

Widgets müssen weglassen

Es gibt fünf Widget-Varianten. Die strengste Regel dafür: eine Zahl pro Widget, und die muss auf dem Sperrbildschirm auf Armlänge lesbar sein. Die kleinen zeigen eine Prozentzahl, einen dünnen Balken und darunter eine Zeile, etwa die Restzeit und den Untergang. Das breite stellt Sonne und Mond nebeneinander. Die runden für den Sperrbildschirm sind nur ein Ring und eine Zahl.

Surya-Widgets in mehreren Größen mit Prozentwerten für Sonne und Mond vor blauem Wolkenhimmel

Eine zweite Zahl macht jedes Widget schlechter. Auf dem Sperrbildschirm hast du ungefähr eine Sekunde Aufmerksamkeit, und in eine Sekunde passt genau eine Information.

Die Skyline als Hauptdarsteller

In der Horizont-Ansicht darf die App angeben. Sie zeichnet aus Höhendaten das echte Geländeprofil um dich herum, beschriftet die Gipfel und lässt die Sonne auf ihrer echten Bahn wandern, bis sie dahinter verschwindet. Die Farben folgen der Tageszeit, der Screen wird Richtung Sonnenuntergang wärmer.

Die Skyline-Ansicht von Surya mit Bergprofil, beschrifteten Gipfeln und der Bahn der Sonne

Linien dünn, Beschriftungen klein, damit die Form der Berge den Screen trägt. Im App Store steht jeder Screenshot aus demselben Grund auf einem Foto von echtem Himmel: Das ist eine App über Licht, also soll das Licht das Lauteste auf der Seite sein.

Die wichtigste Entscheidung bei einer Uhr ist am Ende nicht die Genauigkeit. Sondern ob du sie zweimal am Tag gern anschaust.