- Das neue Designsystem Jetpack Compose Glimmer für transparente Displays in AI-Brillen ermöglicht Interfaces, die sich natürlich über die reale Welt legen
- Die opaken Flächen und Schatten des bisherigen Material Design verursachen auf transparenten Displays Lichthöfe (Halation) und schlechtere Lesbarkeit, weshalb ein neuer Ansatz mit dunklen Flächen und hellen Inhalten nötig ist
- Text wird anhand des Sehwinkels (visual angle) gestaltet, bleibt ab einer Größe von etwa 0,6 Grad gut lesbar und nutzt die optische Größenanpassung von Google Sans Flex
- Farben werden auf Basis des additiven Kontrastverhältnisses (additive contrast ratio) angepasst, um auch bei wechselnder Helligkeit realer Hintergründe eine stabile neutrale Palette und hohen Kontrast zu sichern
- Bewegungen sind als sanfte Übergänge mit Rücksicht auf das periphere Sehen der Nutzer gestaltet, sodass sich die Technik harmonisch in die Realität einfügt, statt Aufmerksamkeit einzufordern
Jetpack Compose Glimmer und der Hintergrund des Designs für transparente Displays
- Jetpack Compose Glimmer ist ein neues Designsystem für Android XR (Extended Reality) und wird für die Entwicklung von Interfaces für AI-Brillen verwendet
- Anders als beim bisherigen screenbasierten Design wird hier die reale Welt selbst zur Leinwand
- Das Interface erscheint nur bei Bedarf und verschwindet wieder, wenn es nicht gebraucht wird – im Sinne eines ambienten Displays
- Bei transparenten Displays funktionieren grundlegende Elemente wie Farben, Typografie und Schatten anders als bisher
- Zum Beispiel wird Schwarz als transparent wahrgenommen, und helle Farben verschwinden vor himmelblauem Hintergrund
- Aufgrund dieser Eigenschaften mussten bestehende Designprinzipien grundlegend neu definiert werden
Ein Interface auf Armlängen-Distanz
- Das Display wird nicht auf die Linsenoberfläche projiziert, sondern erscheint in einer Entfernung von etwa 1 Meter (Armlänge)
- Nutzer müssen ihren Blick von der realen Welt auf diese Fokusebene verlagern; das ist ein bewusster und aktiver Wechsel der Aufmerksamkeit
- Diese Fokusverlagerung ist eine zentrale Gestaltungsaufgabe und führte zu dem Ziel, Interfaces zu schaffen, die auch für kurze Momente Aufmerksamkeit wert sind
Der Umgang mit Licht
- Transparente Displays können nur Licht hinzufügen, aber nichts abdunkeln
- Deshalb funktioniert Schwarz nicht als Farbe, sondern als Bereich ohne Licht (transparenter Bereich)
- Die hellen Flächen und Schatten des bisherigen Material Design führen auf transparenten Bildschirmen zu Blendung und höherem Batterieverbrauch
- Helle Bereiche streuen und verursachen Halation, wodurch Text unscharf wird
- Als Lösung wurde Schwarz als „Container“ neu definiert und heller Inhalt auf dunklen Flächen platziert
- Tiefe dunkle Schatten vermitteln Hierarchie und Räumlichkeit
- Buttons, Karten und System-Slider werden über hierarchische Tiefenstufen unterschieden
Textlesbarkeit und Sehwinkel
- Text wird nicht in Pixeln, sondern über den Sehwinkel (visual angle) gestaltet
- Eine Größe von mindestens 0,6 Grad wurde als Untergrenze für Lesbarkeit festgelegt
- Über die Achse Optical Size der Schrift Google Sans Flex werden Innenräume und Abstände der Buchstaben angepasst
- Die Innenräume von „a“ und „e“ werden vergrößert, die Punktabstände bei „i“ und „j“ erweitert, um schnelle Blickerfassung zu unterstützen
- So erfolgt auch ohne separate Laufweiteneinstellung im Code eine automatische visuelle Optimierung
- Empfehlung: fette Schriften mit großzügigen Abständen verwenden; dünne und kleine Schrift ist zu vermeiden
Farbe und Kontrast
- Da die reale Welt zum Hintergrund wird, ändern sich Helligkeit und Farbe ständig
- Das Team maß das additive Kontrastverhältnis (additive contrast ratio), um die Sichtbarkeit von Inhalten sicherzustellen
- Hoch gesättigte Farben verschwinden vor realen Hintergründen oder wirken blass
- Deshalb setzt Glimmer grundsätzlich auf neutrale dunkle Flächen + helle Inhalte
- Eine entsättigte Palette sorgt unabhängig von Umgebungsänderungen für stabilen Kontrast
- Farben werden nur gezielt eingesetzt, vor allem zur Hervorhebung von Buttons und anderen aufmerksamkeitsstarken Elementen
Bewegung und das Gleichgewicht der Aufmerksamkeit
- In einem Head-up-Display darf Bewegung nicht störend wirken
- Inhalte können jederzeit im Sichtfeld erscheinen, daher sind sanfte und respektvolle Übergänge nötig
- Eine anfängliche Übergangszeit von 500 ms war zu kurz, um wahrgenommen zu werden, daher wurde sie auf etwa 2 Sekunden mit weichem Verlauf angepasst
- So wird der Blick auf natürliche Weise aus dem peripheren Sichtfeld (periphery) in die Mitte geführt
- Bei Nutzereingaben (Sprache, Gesten) ist unmittelbares Feedback erforderlich
- Dafür werden Fokus-Ringe und Hervorhebungen genutzt, um reaktionsschnelles Verhalten mit niedriger Latenz sicherzustellen
Harmonie zwischen Realität und Technik
- Im Zentrum des Designs für transparente Displays stehen menschliche Faktoren wie Aufmerksamkeit und Konzentration
- Jetpack Compose Glimmer zielt auf eine Erfahrung, bei der Technik keine Aufmerksamkeit verlangt, sondern die Realität ergänzt
- Dieser Ansatz entwickelt sich in Richtung AI-Brillen, die über das Anzeigen von Informationen hinaus die Wahrnehmung der Realität selbst verbessern
- Google stellt Entwicklern Designrichtlinien für AI-Brillen und ein Figma Design Kit zur Verfügung
Noch keine Kommentare.