Bonnes pratiques pour concevoir des applications

Optimiser les applications pour les mises en page verticales

Simplifiez la conception de votre application en utilisant des mises en page verticales, qui permettent aux utilisateurs de faire défiler le contenu dans une seule direction.

À faire

L'objectif de cette application est de rediriger l'utilisateur d'un point A vers un point B.

À ne pas faire

N'utilisez pas à la fois le défilement vertical et horizontal, car cela peut perturber l'expérience dans votre application.

Afficher l'heure

Affichez l'heure (superposition) en haut, car cela permet à l'utilisateur de s'y retrouver facilement.

À faire

Affichez l'heure en haut de la superposition, car cela permet à l'utilisateur de s'y retrouver facilement.

À ne pas faire

Affichez l'heure dans une boîte de dialogue temporaire, une superposition de confirmation ou un sélecteur. Par exemple, un utilisateur ne verra probablement un écran de confirmation que très brièvement.

Points d'entrée intégrés accessibles

Assurez-vous que toutes les actions sont affichées au même niveau, en utilisant des icônes et des libellés clairs pour l'accessibilité. Cela inclut les points d'entrée vers les paramètres et les préférences.

À faire

Utilisez des icônes et des libellés lorsque cela est possible.

À ne pas faire

N'utilisez pas que des icônes pour inciter l'utilisateur à agir.

Orienter les utilisateurs à l'aide de libellés

Pour les boîtes de dialogue plus longues, orientez l'utilisateur à l'aide de libellés lorsqu'il parcourt le contenu.

À faire

Utilisez des sauts de section, des libellés et d'autres indicateurs pour organiser le contenu et orienter les utilisateurs lorsqu'ils parcourent de longues vues avec du contenu mixte.

À ne pas faire

N'ajoutez pas de libellé aux boîtes de dialogue qui ne contiennent qu'un seul type de contenu.

Mettre en avant les actions principales

Placez les actions principales en haut de la superposition pour aider les utilisateurs à agir en conséquence.

À faire

Placez les actions principales en haut, sans ambiguïté.

À ne pas faire

Placez l'action principale au bas d'une page très longue.

Afficher la barre de défilement sur les écrans à défilement

N'utilisez l'indicateur de défilement que sur les écrans à défilement pour éviter de créer de fausses attentes d'interaction. De même, n'oubliez pas d'ajouter l'indicateur de défilement sur les écrans à défilement pour indiquer à quel point de l'écran vous vous trouvez.

À faire

Affichez l'indicateur de défilement si la vue entière défile.

À ne pas faire

Affichez l'indicateur de défilement dans les vues non défilantes ou ne l'affichez pas dans les vues défilantes.

Concevoir des interfaces responsives pour les écrans de grande taille

Assurez-vous que les composants que vous utilisez remplissent la largeur disponible et tenez compte de la hauteur dans les mises en page sans défilement.

Tous les composants Compose sont créés de manière responsive, mais toute personnalisation visant à améliorer votre conception et à ajouter de la valeur sur les écrans plus grands est encouragée.

À faire

Assurez-vous que le contenu remplit la largeur et la hauteur disponibles, et que les éléments en plein écran (ProgressIndicators, TimeText, etc.) s'adaptent de manière responsive aux mises en page sans défilement.

À ne pas faire

Utilisez des composants à largeur fixe qui ne remplissent pas l'écran de manière responsive ou n'ajustez pas le comportement du contenu pour qu'il remplisse l'espace disponible.

Utiliser des marges responsives (en pourcentage)

Nous vous recommandons d'utiliser des marges en pourcentage afin que leur taille s'adapte à la courbe croissante de l'écran.

À faire

Utilisez des marges de pourcentage supplémentaires pour vous assurer que le contenu n'est pas coupé en haut et en bas.

À ne pas faire

Les composants ne doivent pas simplement se redimensionner pour remplir l'espace disponible sans marges supplémentaires.