Niveau 2 : optimisé pour l'adaptabilité

Les applis optimisées gèrent entièrement tous les types d'écrans et états d'appareil, y compris les transitions d'état.

Illustration des trois niveaux de qualité sous forme de couches empilées verticalement, avec le niveau intermédiaire mis en avant.

Consignes

Créez votre application pour qu'elle s'adapte à toutes les tailles d'écran et à tous les états d'appareil.

Interface utilisateur

Guideline ID Test IDs Description
Responsive_adaptive_layouts T-Layout_Flow

L'appli dispose de mises en page responsives et adaptatives conçues pour toutes les tailles d'écran. Toutes les mises en page sont responsives (consultez Migrer votre UI vers les mises en page responsives). L'implémentation des mises en page adaptatives est déterminée par les classes de taille de fenêtre.

L'UI de l'appli peut inclure les éléments suivants :

  • Rails de navigation sur le bord gauche, qui s'agrandissent sous forme de panneaux de navigation complets quand la fenêtre est plus grande
  • Mises en page en grille qui adaptent le nombre de colonnes en réponse aux changements de taille de fenêtre
  • Colonnes de texte sur les grands écrans
  • Panneaux latéraux droits qui s'ouvrent par défaut sur les tailles d'écran correspondant aux ordinateurs, mais restent fermés sur les écrans plus petits

Créez des mises en page à plusieurs volets (le cas échéant) pour exploiter pleinement l'espace disponible à l'écran. Consultez Mises en page canoniques.

L'intégration d'activités permet aux applications basées sur des activités de créer des mises en page à plusieurs volets en affichant les activités côte à côte.
UI_Secondary_Elements T-Layout_Flow

Les fenêtres modales, les menus contextuels et les autres éléments secondaires sont correctement mis en forme, quel que soit le type d'écran ou l'état de l'appareil. Exemples :

  • Les bottom sheets n'occupent pas toute la largeur sur les grands écrans (appliquez une largeur maximale pour éviter l'étirement). Consultez Comportement dans Sheets : bottom.
  • Les boutons n'occupent pas toute la largeur sur les grands écrans. Consultez Comportement dans Boutons.
  • Les champs et zones de texte ne s'étirent pas sur toute la largeur sur les grands écrans. Consultez Comportement dans Champs de texte.
  • Les menus d'édition ou fenêtres de petite taille ne couvrent pas l'intégralité de l'écran et restent le plus possible en contexte pour l'utilisateur. Consultez Menus.
  • Les menus contextuels s'affichent à côté de l'élément sélectionné par l'utilisateur. Consultez la rubrique "Menus contextuels" dans Menus.
  • Les rails de navigation remplacent les barres de navigation, pour une meilleure ergonomie sur les grands écrans. Consultez Rail de navigation.
  • Les panneaux de navigation sont remplacés par des rails de navigation développés. Consultez Panneau de navigation.
  • Les boîtes de dialogue utilisent la dernière version en date du composant Material. Consultez Boîtes de dialogue.
  • Les images sont affichées dans une résolution adéquate, et ne sont pas étirées ni recadrées.
Touch_Targets T-Touch_Targets Les cibles tactiles font au moins 48 dp. Consultez les consignes de mise en page et typographie pour le Material Design.
Drawable_Focus T-Drawable_Focus Un état de sélection est créé pour les drawables personnalisés interactifs. Un drawable personnalisé est un élément d'interface utilisateur visuel qui n'est pas fourni par le framework Android. Si les utilisateurs peuvent interagir avec un drawable personnalisé, celui-ci doit être sélectionnable quand l'appareil n'est pas en mode tactile, et un indicateur visuel de l'état de sélection doit être visible.

Clavier, souris et pavé tactile

Guideline ID Test IDs Description
Keyboard_Navigation T-Keyboard_Navigation Les principales procédures de l'application acceptent la navigation au clavier, y compris avec la touche Tabulation et les touches fléchées. Consultez Créer des applications plus accessibles.
Keyboard_Shortcuts T-Keyboard_Shortcuts L'appli accepte les raccourcis clavier pour les actions courantes (sélectionner, couper, copier, coller, annuler et répéter, par exemple). Consultez Entrées compatibles.
Keyboard_Media_Playback T-Keyboard_Media_Playback Le clavier permet de contrôler la lecture des contenus multimédias. Par exemple, la barre d'espace lance et met en pause la lecture.
Keyboard_Send T-Keyboard_Send La touche Entrée du clavier déclenche une fonction d'envoi dans les applications de communication.
Context_Menus T-Context_Menus Les menus contextuels sont accessibles via les commandes habituelles, à savoir un clic droit de la souris ou du pavé tactile (bouton de souris secondaire ou appui secondaire).
Content_Zoom T-Content_Zoom Vous pouvez zoomer sur le contenu de l'application avec la molette de la souris (en appuyant sur la touche Ctrl) et des gestes de pincement sur le pavé tactile.
Hover_States T-Hover_States Les éléments d'interface utilisateur actionnables ont un état de survol (le cas échéant) pour indiquer aux utilisateurs de souris et de pavés tactiles qu'ils sont interactifs.

Tests

Pour vous assurer que votre application est optimisée et réactive à toutes les configurations d'affichage, effectuez les tests suivants.

Interface utilisateur

Test ID Guideline IDs Description
T-Layout_Flow Responsive_adaptive_layouts,
UI_Secondary_Elements

Exécutez l'appli sur des appareils avec de nombreuses tailles d'écran différentes : téléphones, téléphones pliables, tablettes petit format, tablettes grand format, ordinateurs, etc. Exécutez l'appli en mode multifenêtre sur ces différents appareils.

Vérifiez que la mise en page de l'appli s'adapte à différentes tailles d'écran et de fenêtre. Contrôlez que l'appli agrandit et réduit les rails de navigation, adapte le nombre de colonnes si la mise en page est en grille, gère correctement les retours à la ligne dans les colonnes, etc. Vérifiez que la mise en forme des éléments d'interface utilisateur est à la fois esthétique et fonctionnelle.

Pour les applis utilisant l'intégration d'activités, vérifiez que les activités s'affichent côte à côte sur les grands écrans et les unes au-dessus des autres sur les écrans plus petits.
T-Touch_Targets Touch_Targets Vérifiez que la taille et la position des cibles tactiles restent cohérentes et accessibles, et qu'elles ne sont pas masquées ni obscurcies par d'autres éléments d'interface utilisateur, quelles que soient les tailles d'écran et les configurations. Pour en savoir plus sur l'accessibilité, consultez Accessibility Scanner.
T-Drawable_Focus Drawable_Focus Sur chaque écran d'appli contenant un drawable personnalisé interactif, vérifiez que le drawable est sélectionnable avec un clavier externe, un pavé directionnel ou un autre appareil permettant de sélectionner des éléments d'UI. Vérifiez qu'un indicateur visuel de l'état de sélection est bien visible. Pour en savoir plus, consultez Mode tactile.

Clavier, souris et pavé tactile

Test ID Guideline IDs Description
T-Keyboard_Navigation Keyboard_Navigation Naviguez dans les composants sélectionnables de l'appli avec la touche Tabulation et les touches fléchées d'un clavier externe.
T-Keyboard_Shortcuts Keyboard_Shortcuts Utilisez des raccourcis clavier sur un clavier externe pour effectuer les actions suivantes : sélectionner, couper, copier, coller, annuler et rétablir.
T-Keyboard_Media_Playback Keyboard_Media_Playback Utilisez un clavier externe pour lancer et arrêter la lecture d'un contenu multimédia, le mettre en pause, et faire un retour arrière et une avance rapide.
T-Keyboard_Send Keyboard_Send Utilisez la touche Entrée d'un clavier externe pour envoyer ou valider des données.
T-Context_Menus Context_Menus Utilisez le bouton secondaire d'une souris ou l'appui secondaire d'un pavé tactile pour accéder au menu contextuel des éléments interactifs.
T-Content_Zoom Content_Zoom Utilisez la molette de la souris (en conjonction avec la touche Contrôle ou Ctrl) et faites des gestes de pincement sur le pavé tactile pour zoomer vers l'avant ou l'arrière sur un contenu.
T-Hover_States Hover_States Pointez le curseur de la souris ou du pavé tactile sur des éléments d'interface utilisateur actionnables afin d'activer leur état de survol.