Lorsque les utilisateurs interagissent avec votre application, ils le font souvent à l'aide de mécanismes de saisie non tactiles :
- Environnements de bureau : les utilisateurs naviguent et saisissent des données à l'aide de claviers matériels et de trackpads physiques.
- Android TV : les utilisateurs parcourent l'interface à l'aide du pavé directionnel.
- Automobile : les conducteurs et les passagers interagissent à l'aide de contrôleurs rotatifs.
- Appareils pliables et tablettes : les utilisateurs connectent des claviers et des accessoires d'entrée externes.
Dans tous ces scénarios, votre application doit suivre l'élément interactif actif à l'écran. Cet état actif est appelé focus.
Facteurs clés pour une navigation au clavier intuitive
Pour offrir une expérience utilisateur optimale sur les grands écrans et les appareils sans écran tactile, concevez votre application en respectant les principes suivants :
- Focus initial logique : placez le focus initial sur l'élément avec lequel les utilisateurs sont les plus susceptibles d'interagir lorsqu'ils accèdent à un écran.
- Ordre de navigation cohérent : fournissez un balayage du focus prévisible en une dimension (Tabulation) et en deux dimensions (touches fléchées ou pavé directionnel).
- Focus persistant : restaurez le focus de manière fluide après des interruptions, la fermeture de boîtes de dialogue ou des modifications de configuration.
- État de sélection clair : affichez des repères visuels accessibles et bien visibles (tels que des anneaux ou des ondulations de sélection) indiquant l'élément actuellement sélectionné.
- Défilement intuitif : assurez-vous que l'élément sélectionné et son contexte environnant défilent de manière fluide dans la fenêtre d'affichage visible.
Guides de concentration
Consultez les guides suivants pour découvrir comment gérer et personnaliser la mise au point dans Compose :
- Cibles de focus : découvrez comment les composants interactifs deviennent des cibles de focus et comment rendre les composables personnalisés sélectionnables.
- Ordre de balayage du focus : comprenez l'ordre d'apparence 1D et la navigation spatiale 2D, et découvrez comment personnaliser les chemins de balayage.
- Focus dans les champs de texte : découvrez comment les champs de texte sur une ou plusieurs lignes gèrent les touches Tabulation et les touches fléchées, et comment fonctionne l'interaction avec l'IME TV.
- Grouper les cibles de focus : groupez les composants avec
focusGroupet interceptez la redirection d'entrée ou de sortie. - Restaurer la sélection : restaurez la sélection sur les enfants précédemment actifs dans les conteneurs, gérez les composants de navigation et gérez la sélection lors des transitions d'écran.
- Indiquer l'état de sélection : appliquez des repères visuels et une indication personnalisée pour mettre en évidence les composants sélectionnés.
- Réagir à la sélection : observer les changements de sélection et interroger les propriétés de l'état de sélection à l'aide de
onFocusChanged. - Demander le focus de manière programmatique : déplacez explicitement le focus en réponse aux actions de l'utilisateur ou aux erreurs de validation.
- Déplacer et effacer la sélection : faites avancer ou effacez la sélection de manière programmatique à l'aide de
FocusManager. - Capturer et libérer le focus : capturez le focus pour les sous-interactions modales et libérez-le de manière sécurisée.
- Tester la navigation au clavier : écrivez des tests Compose automatisés pour vérifier les interactions au clavier avec les champs de texte, ainsi qu'avec les éléments 1D et 2D.
Recommandations personnalisées
- Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé
- Cibles de mise au point
- Ordre de balayage du focus
- Focus dans les champs de texte
- Grouper les cibles de focus
- Tester la navigation au clavier