Concevoir des interactions de survol pour visionOS

Bonjour, je m’appelle Nathan, designer dans l’équipe Apple Design. Bienvenue dans cette session sur la conception d’interactions de survol pour visionOS. Grâce à de nouvelles manières d’interagir selon le regard des utilisateurs, vos apps peuvent donner l’impression que l’expérience est guidée par la pensée.

Voici le programme d’aujourd’hui : nous verrons les principes de base de la saisie visuelle, les effets personnalisés, le défilement du contenu avec le regard et les commandes persistantes. C’est parti. Les utilisateurs naviguent dans visionOS avec leurs yeux et leurs mains. Ils regardent un élément et tapent avec leur doigt pour le sélectionner. Voici quelques rappels pour s’assurer que les apps sont réactives, aux yeux et aux mains. Placez votre contenu le plus important bien en vue, afin qu’il soit facile à trouver et à utiliser. Pour les éléments interactifs, privilégiez les formes arrondies, comme les cercles, les pastilles et les rectangles arrondis, car elles sont plus attrayantes et attirent le regard.

Pour des interactions précises, laissez au moins 60 points d’espace entre chaque élément. Les éléments peuvent être visuellement plus petits, à condition que leur espace total soit de 60 points.

Pour les objets 3D à échelle fixe, 60 points correspondent approximativement à une taille angulaire de 2,5 degrés, soit environ 4,4 cm pour un objet situé à 1 mètre.

Appliquez des effets de surbrillance à tous les éléments interactifs. Les composants standard comme ce menu seront automatiquement mis en surbrillance.

Pour vos composants personnalisés, ajoutez l’effet de surbrillance et vérifiez que sa forme correspond à celle du contenu.

Appliquez ces effets de tons clairs aux objets 3D sélectionnables.

Pour en savoir plus sur ces principes, regardez « Design for spacial input » du WWDC 2023.

Aujourd’hui, nous allons parler d’interactions très efficaces pour vos apps, comme les effets personnalisés. L’effet de surbrillance standard fonctionne très bien en général, mais vous pouvez l’étendre ou le remplacer par vos animations. Cela s’appelle des effets de survol personnalisés. Nous utilisons ces effets de survol partout dans visionOS.

Des barres d’onglets s’ouvrent, avec le nom de chaque onglet. Les boutons Précédent s’agrandissent et affichent le titre de la page précédente. Les curseurs ont un bouton interactif.

Sous les boutons, des infobulles décrivent leurs fonctions.

Dans Safari, la barre de navigation s’agrandit pour afficher les onglets du navigateur. Enfin, dans la vue Accueil, les icônes d’environnement révèlent davantage le paysage.

Vous pouvez créer de tels effets personnalisés dans vos apps.

Ils sont parfaits pour fournir des commentaires tout en préservant le style de votre app ou de votre jeu. Tout d’abord, voyons un peu mieux comment ils fonctionnent. Dans un souci de confidentialité, le système applique des effets de survol en dehors du processus de l’app, qui ne sait donc pas où les utilisateurs regardent. Au lieu de répondre directement à un survol, vos vues définissent deux états : leur apparence standard et leur apparence au survol. Le système s’anime entre ces états, lorsque l’on regarde la vue ou détourne le regard.

Ceci est idéal pour jouer des animations, mais cela ne permet pas d’utiliser des effets personnalisés pour effectuer des actions dans l’app. Je vais vous expliquer. Admettons que je conçoive une app pour parcourir des photos. Je peux ajouter un bouton de téléchargement pour enregistrer les photos.

Je peux utiliser un effet personnalisé pour afficher la taille du téléchargement lorsqu’on le regarde, car c’est une animation. Toutefois je ne peux pas effectuer l’action de téléchargement en regardant le bouton, car il faut que l’app sache quand l’effet est appliqué.

Les utilisateurs devront à la place tapoter pour enregistrer la photo.

Les effets personnalisés déclenchent donc les animations. Quel type d’animations est le plus efficace ? Il y a en général trois catégories : instantanées, différées et progressives. Les animations « instantanées » démarrent dès que l’on regarde une vue. Dans Pleine conscience, les boutons affichent une flèche pour indiquer que d’autres options sont disponibles.

Le lecteur vidéo standard affiche un horodatage lorsque l’on regarde la tête de lecture. Ces infos sont de petite taille, contextuelles et non interactives. Parfois, les animations instantanées sont trop réactives, et déclenchent des mouvements alors que l’on regarde autour d’elles. Les animations différées sont alors utiles. Celles-ci affichent plus de contenu après un court laps de temps.

Les infobulles en sont un exemple. Ce délai permet d’appuyer rapidement sur le bouton et d’afficher le titre uniquement si l’on en manifeste l’intérêt.

Le bouton de profil Safari, qui suit le même principe avec une autre disposition, est un autre exemple.

Enfin, il y a les animations « progressives ». Il s’agit d’animations différées, mais avec un indice au début et une courbe personnalisée. Regardez les icônes d’environnement de la vue Accueil. Dès que les utilisateurs les regardent, elles s’agrandissent lentement, puis s’ouvrent pour révéler davantage le paysage. Cet effet progressif indique que l’icône s’agrandira si vous continuez à la regarder, mais qu’elle ne s’ouvrira complètement que si l’on en manifeste l’intention. Cela permet de parcourir la grille sans que les icônes ne s’ouvrent en cours de route.

Voici un autre exemple, où cette carte s’agrandit pour afficher le texte complet. Ces animations progressives offrent un équilibre entre les animations « instantanées » et « différées ». Elles fournissent un retour immédiat sans distraire l’attention.

Pour créer votre animation progressive, essayez une courbe comme celle-ci. Elle commence par une lente mise en place, puis s’achève par un rebond rapide. Cette courbe d’animation fonctionne mieux lorsque les vues se développent pour afficher plus de contenu. Si vous envisagez d’utiliser ces effets dans vos apps, voici quelques bonnes pratiques à garder à l’esprit. D’abord, prévoyez des éléments d’ancrage. Les meilleurs effets personnalisés conservent une partie de la vue inchangée. Ces éléments statiques, comme le titre ici, sont ancrés : ils fournissent un contexte et aident à comprendre les nouveautés.

Si le texte se déplace lorsque l’on regarde une vue, cela peut perturber la lecture. Essayez donc que le texte reste fixe.

Ou bien, si une vue est complètement différente selon ses deux états, cela crée une certaine confusion.

De plus, les effets de survol doivent démarrer d’un élément visible. Si aucun indice n’est donné sur l’emplacement d’un élément, il sera difficile à trouver ou surprenant si on le trouve par hasard. Si vous avez des éléments masqués, affichez-les lorsque l’on regarde quelque chose de visible. Ici, par exemple, le contrôle de redimensionnement apparaît en regardant le coin de la fenêtre. Les utilisateurs peuvent ainsi trouver facilement les commandes.

Appliquez les effets personnalisés avec précaution.

Réfléchissez où des effets personnalisés pourraient attirer l’attention, comme sur cette boussole. Affichez des infos supplémentaires comme l’état de l’emplacement ou créez des moments agréables comme une cascade animée.

Évitez de trop changer les choses lorsque l’on regarde autour. Trop d’effets personnalisés, tels que l’affichage du nom de chaque épingle, peut détourner l’attention, voire causer une gêne visuelle. Même un effet mineur peut être gênant, comme les boutons de la barre d’outils ou les cellules d’un tableau, car cela déplace les éléments que l’on essaie de consulter. Pour ce type de vue, utilisez l’effet de surbrillance standard et limitez l’utilisation des effets.

Les meilleurs effets personnalisés sont subtils et fonctionnent bien sur les petites vues, comme ce bouton de téléchargement. Évitez d’appliquer des effets personnalisés à des vues de grande taille, comme cette photo entière, car cela provoque beaucoup de mouvement et de la confusion. Pour ce type d’images, évitez les effets qui atténuent les couleurs.

Vous pourriez utiliser un effet de surbrillance qui fournit un retour instantané, puis s’estompe pour révéler les couleurs réelles de la photo. Cela s’applique aux objets 3D, comme cette plante. Un effet de surbrillance s’estompe pour révéler ses couleurs.

Enfin, évitez tout mouvement brusque. Je vois cela souvent. Vous pensez avoir une bonne idée, mais elle finira par avoir des effets secondaires. Je vais vous montrer. La vue d’ensemble des onglets Safari affiche une grille d’onglets ouverts. Il vous vient une idée géniale : et si je masquais tous les boutons Fermer par défaut, qui ne s’afficheraient que lorsque l’on regarde un onglet ? Ça a l’air plus net, n’est-ce pas ? Cependant, lorsque vous regardez un onglet et que le bouton apparaît, vos yeux se posent instinctivement dessus. Cela peut entraîner une fermeture accidentelle de l’onglet que l’on essaie de sélectionner, car on a regardé le bouton Fermer tout en tapotant. Vous pouvez à la place essayer cela : le bouton apparaît progressivement et à moitié lorsque l’on regarde l’onglet, puis complètement quand on le regarde.

Cela réduit toujours les distractions dans une grande grille d’onglets, mais évite fermetures accidentelles. Il est essentiel de tester ces effets sur un appareil. Il est impossible de les découvrir en regardant une vidéo, car ils réagissent là où vous posez le regard. J’apprécie le simulateur visionOS, mais il ne remplace pas les tests sur un appareil réel.

La conception d’effets personnalisés est un processus itératif, plus que d’autres éléments de l’interface. Vous devrez tester plusieurs options et affiner le tout jusqu’à obtenir le bon résultat.

Avec le temps, vous développerez une certaine intuition sur ce qui fonctionne ou non, mais si vous avez une idée, testez-la. Elle pourrait bien fonctionner. Passons maintenant à une autre interaction efficace : Regarder pour faire défiler. Celle-ci permet de faire défiler le contenu avec les yeux. Dans Safari, lorsque je regarde le bas de la page, cette partie s’anime peu à peu vers le haut.

Dans Musique, quand je regarde la dernière playlist, celle-ci défile vers le centre.

Cela facilite la navigation car vos yeux suivent le contenu, l’amenant presque dans le champ de vision. Il s’agit d’une interaction légère qui se combine avec le défilement manuel.

Le défilement démarre quand on regarde près du bord de la vue de défilement, en haut et en bas pour le défilement vertical, ou sur les côtés pour le défilement horizontal.

Votre app peut comporter de nombreuses vues défilantes et vous devrez décider d’activer ou non cette option pour chacune d’elles. Pour cela, tenez compte des points suivants :

Si votre vue sert surtout à lire ou à naviguer, activez l’option. Regarder pour faire défiler est idéale pour lire un article dans Safari ou rechercher une série dans TV.

Cependant, dans des apps comme Réglages, les utilisateurs parcourent une liste à la recherche d’un élément spécifique. Cette option n’est pas adaptée dans ce cas. En général, si votre vue comporte surtout des contrôles d’interface utilisateur, ne l’activez pas.

Ensuite, réfléchissez à votre contenu. En général, Regarder pour faire défiler fonctionne bien sur le contenu principal de l’app. Par exemple dans Notes, la note défile lorsque l’on regarde les bords, mais la liste à gauche ne bouge pas, comme dans le modèle de l’app Réglages.

Enfin, réfléchissez à la cohérence de votre app.

Dans TV, il y a une liste de séries TV connexes, un peu comme la liste de la bibliothèque principale, donc on s’attend à ce que Regarder pour faire défiler fonctionne ici.

Maintenant que vous avez une idée des vues de défilement à privilégier, voyons comment rendre le défilement naturel et prévisible.

Idéalement, vos vues de défilement avec cette option devraient occuper toute la largeur ou toute la hauteur de votre fenêtre. Cela offre un vaste espace pour faire défiler le contenu et des bords clairs pour s’y repérer.

Si votre vue défilante est insérée dans la fenêtre, définissez des limites claires afin que l’on sache où regarder.

Si votre app utilise le défilement pour animer le contenu à une vitesse différente, appliquer des effets de parallaxe ou des animations personnalisées, faites en sorte que le défilement s’effectue à une vitesse normale. Ou peut-être que Regarder pour faire défiler n’est pas le bon choix pour ces vues.

Cependant, lorsque la vue de défilement remplit la fenêtre, a des bords nets et défile normalement, la navigation est fluide et prévisible. Enfin, examinons les commandes persistantes, une fonctionnalité qui fait toute la différence. Voici un lecteur vidéo standard sous visionOS. Les commandes de lecture s’affichent et se masquent en tapotant. Les commandes affichées sont automatiquement masquées après un certain délai. Cela fonctionne bien, mais les commandes peuvent se masquer pendant que vous les regardez. Désormais, les commandes restent visibles pendant que vous les regardez, puis masquées lorsque vous revenez à la vidéo. Vous ne le remarquerez peut-être pas au début, car cela fonctionne comme prévu.

Si votre app utilise un lecteur vidéo standard, intégré, dans une fenêtre ou immersif, ce comportement est prévu. Si votre app utilise des commandes vidéo personnalisées, vous devrez l’activer. Cela ne se limite pas aux apps de vidéo ! FaceTime conserve les commandes d’appel et Pleine conscience, les commandes de session. Quand une interface utilisateur se masque automatiquement après un certain délai, pour une vidéo ou une expérience immersive, adoptez ce comportement. Il existe de nombreuses façons de donner vie à vos apps grâce aux interactions de survol : animer vos interfaces avec des effets personnalisés, faire défiler les vues en les regardant et conserver les commandes médias.

Lorsque vous concevez vos apps avec ces fonctionnalités, commencez par tester quelques idées. Recherchez des occasions d’appliquer des effets de survol personnalisés dans vos apps. Vous pouvez les créer dans SwiftUI ou RealityKit, et vous pouvez en savoir plus sur leur création dans les sessions ici à partir de 2024. Pour activer Regarder pour faire défiler et les comportements de persistance, consultez la documentation sur developer.apple.com. Merci, et bonne continuation.