- Le nouveau système de design Jetpack Compose Glimmer pour les écrans transparents de lunettes IA permet de créer des interfaces qui se superposent naturellement au monde réel
- Les surfaces opaques et les ombres du Material Design classique provoquent un halo lumineux (halation) et une baisse de lisibilité sur les écrans transparents, ce qui impose une nouvelle approche centrée sur des surfaces sombres et des contenus lumineux
- Le texte est conçu selon l’angle visuel (visual angle), avec une taille d’environ 0,6 degré ou plus et un ajustement de la taille optique de Google Sans Flex pour conserver une bonne lisibilité
- Les couleurs sont ajustées sur la base du ratio de contraste additif (additive contrast ratio) afin d’assurer une palette neutre stable et un contraste élevé malgré les variations de luminosité de l’arrière-plan réel
- Les mouvements sont conçus comme des transitions douces qui respectent la vision périphérique de l’utilisateur, pour offrir une expérience où la technologie s’intègre harmonieusement au réel au lieu d’exiger son attention
Jetpack Compose Glimmer et le contexte du design pour écrans transparents
- Jetpack Compose Glimmer est un nouveau système de design pour l’environnement Android XR (réalité étendue), utilisé pour le développement d’interfaces pour lunettes IA
- Contrairement au design traditionnel fondé sur l’écran, le monde réel devient ici directement la toile
- L’interface apparaît uniquement lorsque c’est nécessaire et disparaît lorsqu’elle ne l’est plus, dans une logique d’affichage ambient
- Sur les écrans transparents, les éléments de base comme la couleur, la typographie ou les ombres ne fonctionnent pas comme d’habitude
- Par exemple, le noir est perçu comme transparent et les couleurs claires disparaissent sur un fond bleu ciel
- Ces caractéristiques ont imposé une refonte fondamentale des principes de design existants
Une interface à distance de bras
- L’affichage n’apparaît pas sur la surface du verre, mais comme projeté à environ 1 mètre de distance (à portée de bras)
- L’utilisateur doit déplacer son regard depuis le monde réel vers ce plan focal, ce qui constitue un basculement de l’attention conscient et actif
- Ce changement de mise au point est l’enjeu central du design, et conduit à créer des interfaces suffisamment pertinentes pour mériter l’attention, même brièvement
La manière de traiter la lumière
- Un écran transparent peut seulement ajouter de la lumière, sans pouvoir assombrir
- Le noir fonctionne donc non comme une couleur, mais comme un espace sans lumière (zone transparente)
- Les surfaces claires et les ombres du Material Design traditionnel provoquent sur un écran transparent éblouissement et surconsommation de batterie
- Elles entraînent un phénomène de halation où les zones lumineuses bavent et rendent le texte flou
- La solution a consisté à redéfinir le noir comme “conteneur” et à placer des contenus lumineux sur des surfaces sombres
- Des ombres sombres avec profondeur sont utilisées pour exprimer la hiérarchie et la spatialité
- Les boutons, cartes et sliders système sont différenciés par des niveaux de profondeur hiérarchiques
Lisibilité du texte et angle visuel
- Le texte est conçu non pas en pixels, mais selon l’angle visuel (visual angle)
- Une taille de 0,6 degré ou plus est définie comme seuil minimal de lisibilité
- L’axe de taille optique (Optical Size) de la police Google Sans Flex est utilisé pour ajuster l’espace interne des lettres et leur espacement
- Il élargit l’espace interne de lettres comme
a et e, et augmente l’écart des points sur i et j, afin de faciliter une reconnaissance visuelle rapide
- Une optimisation visuelle automatique est ainsi obtenue dans le code, sans réglage manuel supplémentaire de l’interlettrage
- Recommandations : utiliser des polices épaisses et bien espacées, et éviter les textes fins et petits
Couleur et contraste
- Comme le monde réel sert d’arrière-plan, la luminosité et les couleurs varient en permanence
- L’équipe a mesuré le ratio de contraste additif (additive contrast ratio) pour garantir la visibilité du contenu
- Les couleurs très saturées peuvent disparaître ou paraître atténuées sur un arrière-plan réel
- Glimmer adopte donc comme structure de base des surfaces neutres et sombres + des contenus lumineux
- Une palette désaturée permet de maintenir un contraste stable malgré les variations de l’environnement
- Les couleurs sont surtout utilisées de manière limitée pour mettre en valeur des éléments d’attention, comme les boutons
Mouvement et équilibre de l’attention
- Sur un head-up display, le mouvement ne doit pas devenir une gêne
- Comme le contenu peut apparaître à tout moment dans le champ de vision, il faut des transitions douces et respectueuses
- Les transitions initiales de 500 ms étaient trop courtes pour être perçues, et ont été ajustées vers des transitions progressives d’environ 2 secondes
- Cela guide naturellement le regard depuis la vision périphérique (periphery) vers le centre
- Les entrées utilisateur (voix, gestes) exigent un retour immédiat
- Pour cela, des anneaux de focus et des surlignages sont utilisés afin d’assurer une réactivité à faible latence
L’harmonie entre réalité et technologie
- Le cœur du design pour écran transparent repose sur des facteurs humains comme l’attention et la concentration
- Jetpack Compose Glimmer vise une expérience où la technologie ne réclame pas l’attention, mais complète le réel
- Cette approche fait évoluer les lunettes IA au-delà d’un simple outil d’affichage d’informations, vers une amélioration de la perception même du réel
- Google fournit aux développeurs des guidelines de design pour lunettes IA ainsi qu’un Figma Design Kit
Aucun commentaire pour le moment.