Consignes de conception des paramètres Android

Ce document met en évidence les principes et les lignes directrices pour toute personne qui conçoit les paramètres de la plate-forme Android, les paramètres de base de GMS (paramètres Google) ou pour tout développeur qui conçoit des paramètres pour son application Android.

Principes de conception

Fournir un bon aperçu

Les utilisateurs doivent pouvoir consulter les écrans de paramètres et comprendre tous les paramètres individuels et leurs valeurs.

Figure 1. Les paramètres et leurs valeurs actuelles sont présentés sur l'écran de niveau supérieur

Organisez les éléments de manière intuitive

Placez les paramètres fréquemment utilisés en haut de l’écran. Limitez le nombre de paramètres sur un écran. Afficher plus de 10 à 15 éléments peut être écrasant. Créez des menus intuitifs en déplaçant certains paramètres vers un écran séparé.

Figure 2. Les paramètres communs se trouvent en haut de l'écran

Rendre les paramètres faciles à trouver

Dans certains cas, il peut être utile de dupliquer un paramètre individuel sur deux écrans différents. Différentes situations peuvent inciter les utilisateurs à modifier un paramètre. Par conséquent, inclure le paramètre à plusieurs endroits aidera les utilisateurs à trouver cet élément.

Pour les paramètres en double, créez un écran séparé pour le paramètre et disposez de points d’entrée à différents endroits.

Figure 3 et 4. « Son de notification par défaut » apparaît sur les écrans « Notification » et « Son »

Utilisez un titre et un statut clairs

Rendez les titres de vos paramètres brefs et significatifs. Évitez d'utiliser des titres vagues comme « Paramètres généraux ». Sous le titre, affichez l'état pour mettre en évidence la valeur du paramètre. Montrez les détails spécifiques au lieu de simplement décrire le titre.

Les titres doivent :

  • Mettez le texte le plus important de votre étiquette en premier.
  • Reformulez les mots négatifs comme « ne pas » ou « jamais » en termes neutres tels que « bloquer ».
  • Utilisez des étiquettes impersonnelles telles que « Notifications » au lieu de « Me prévenir ». Exception : S'il est nécessaire de faire référence à l'utilisateur pour comprendre le paramètre, utilisez la deuxième personne ("vous") plutôt que la première personne ("je").

Les titres doivent éviter :

  • Termes génériques, tels que définir, changer, éditer, modifier, gérer, utiliser, sélectionner ou choisir.
  • Répétition de mots à partir du séparateur de section ou du titre du sous-écran.
  • Jargon technique.

Types de pages

Liste des paramètres

C'est le type d'écran le plus courant. Il permet de regrouper plusieurs paramètres. Les listes de paramètres peuvent être un mélange de commandes, comme des commutateurs, des menus et des curseurs.

S'il existe plusieurs paramètres dans une même catégorie, ils peuvent être regroupés. Voir Regroupement et diviseurs pour plus de détails.

Figure 5. Exemple de liste de paramètres

Vue en liste

La vue liste est utilisée pour afficher une liste d’éléments tels que des applications, des comptes, des appareils, etc. Des contrôles pour filtrer ou trier peuvent être ajoutés à l’écran.

Figure 6. Exemple de vue Liste

Écran d'entité

L'écran d'entité est utilisé pour présenter les paramètres d'un élément distinct comme une application, un compte, un appareil, un réseau Wi-Fi, etc.

Visuellement, l'entité est affichée en haut avec une icône, un titre et un sous-titre. Tous les paramètres sur cet écran doivent être liés à cette entité.

Figure 7. Exemple d'écran d'entité utilisé dans les informations sur l'application

Figure 8. Exemple d'écran d'entité utilisé dans le stockage

Réglage principal

Le paramètre principal est mieux utilisé lorsqu’une fonctionnalité entière peut être activée ou désactivée, comme le Wi-Fi ou le Bluetooth. En utilisant un interrupteur en haut de l'écran, l'utilisateur peut facilement contrôler cette fonctionnalité. L’utilisation du paramètre principal pour désactiver la fonctionnalité désactive tous les autres paramètres associés.

Si une fonctionnalité nécessite une description textuelle plus longue, le paramètre principal peut être utilisé car ce type d'écran permet un texte de pied de page plus long.

Si un paramètre doit être dupliqué ou lié à partir de plusieurs écrans, utilisez le paramètre principal. Puisque le paramètre principal est un écran séparé, vous éviterez d’avoir plusieurs commutateurs à différents endroits pour le même paramètre.

Figure 9. Exemple de paramètre principal utilisé dans l'écran de notifications d'application ; désactiver la bascule principale désactive toutes les fonctionnalités de cette application

Figure 10. Exemple de paramètre principal utilisé dans l'écran de notifications d'application avec la bascule principale désactivée

Écran de sélection des boutons radio

Cet écran est utilisé lorsque l'utilisateur doit effectuer une sélection pour un paramètre. Les boutons radio peuvent être affichés dans une boîte de dialogue ou sur un écran séparé. Les boutons radio ne doivent pas être utilisés à côté de curseurs, de menus ou de commutateurs.

Un écran de bouton radio peut contenir une image en haut et un texte de pied de page en bas. Les boutons radio individuels peuvent avoir un sous-texte ainsi qu'un titre.

Figure 11. Les boutons radio ne doivent pas être utilisés dans la liste des paramètres

Figure 12. Voici comment utiliser correctement les boutons radio dans les paramètres

Composants

À partir d'Android 8.0, la barre d'outils d'actions présente la recherche et l'aide ainsi que d'autres actions associées. Les menus à débordement sont déconseillés car les utilisateurs risquent de ne pas découvrir les actions cachées dans ces menus.

Pour les barres d'outils sans actions spécifiques à l'écran. Afficher les actions de recherche et d’aide.

Figure 13. Barre d'outils avec actions de recherche et d'aide

Pour les barres d'outils avec une action : Présentez l'action avant la recherche.

Figure 14. Barre d'outils avec une action avant les actions de recherche et d'aide

Pour les barres d'outils avec plus d'une action : Pensez à placer l'action principale avant la recherche, tout en mettant les actions avancées dans le menu de débordement.

Si toutes les actions sont avancées ou utiles uniquement à un petit groupe d’utilisateurs, envisagez de placer toutes les actions dans le menu de débordement.

Figure 15. Barre d'outils avec un menu de débordement pour les actions

En-tête d'entité

L'en-tête de l'entité peut afficher un en-tête uniquement ou un en-tête avec un sous-texte (plusieurs lignes sont autorisées pour le sous-texte). L'action ci-dessous est facultative. Vous pouvez avoir un maximum de deux actions.

Figure 16. En-tête d'entité

L'icône et la partie en-tête (App1) défileront sous l'en-tête (Informations sur l'application).

Figure 17. Le titre des informations sur l'application fait ici partie de la barre d'outils, tandis que le reste de l'écran défilera en dessous.

Le titre est obligatoire. Vous devez également afficher un sous-texte qui met en évidence l'état du paramètre. L'utilisation d'une icône est facultative.

Essayez de garder le texte du titre concis. Si les titres sont longs, ils peuvent continuer sur la ligne suivante au lieu d'être tronqués. N'activez pas les menus ou les actions en cas d'appui long.

Exemples:

Figure 18. Lien de menu avec icône, titre et sous-texte

Figure 19. Lien de menu avec titre et sous-texte

Figure 20. Lien de menu avec titre uniquement

Lien de menu avec icône, titre, sous-texte et cible d'accès distincte à droite

Les autres cibles tactiles doivent utiliser la couleur du thème.

Figure 21. Exemple de menu cible en deux clics

Lien de menu avec icône, titre, sous-texte et icône de statistiques/numéro/alerte

Des valeurs numériques telles que le pourcentage et le temps peuvent être affichées à droite avec le sous-texte, tandis qu'un graphique à barres peut être affiché ci-dessous.

Habituellement, les valeurs numériques sont présentées à droite afin que les utilisateurs puissent facilement les consulter et les comparer.

Figure 22. Exemple de menu avec icône, titre, statistique et graphique

Regroupement et diviseurs

Si un écran comporte de nombreux paramètres, ils peuvent être regroupés et séparés par un séparateur. Contrairement aux anciennes versions d'Android, les séparateurs sont désormais utilisés pour regrouper les paramètres dans un groupe, plutôt que pour séparer les paramètres individuels.

Si les paramètres d'un groupe sont étroitement liés, vous pouvez ajouter un en-tête de groupe. Si vous utilisez un en-tête de groupe, vous devez toujours inclure un séparateur.

Figure 23. Paramètres regroupés avec des séparateurs

Changer

Changer avec l'icône, le titre et le sous-texte

Figure 24. Basculer avec l'icône, le titre et le sous-texte

Changer avec le titre et le sous-texte

Figure 25. Changer avec titre et sous-texte

Changer avec le titre uniquement

Les titres peuvent être accompagnés d'une icône à gauche.

Figure 26. Changer avec titre uniquement

Élément de liste + commutateur

Vous pouvez combiner un élément de liste avec un commutateur. Appuyer sur le côté gauche de la ligne verticale agit comme un lien et amène l'utilisateur à l'écran suivant. Le côté droit se comporte comme un interrupteur standard.

Pour l'élément de liste sur le côté gauche, un titre est obligatoire. L'icône et le sous-texte sont facultatifs.

Figure 27. Élément de liste et commutateur

Glissière

L'icône est facultative dans le curseur.

Figure 28. Curseur

Bouton à l'écran

Les actions positives utilisent la couleur du thème tandis que les actions négatives sont grises. Les actions positives peuvent inclure l'ouverture d'une application, l'installation d'une application, l'ajout d'un nouvel élément, etc. Les actions négatives incluent l'effacement des données, la désinstallation d'une application, la suppression d'éléments, etc.

Figure 29. Boutons gris pour « Désinstaller » et « Forcer l'arrêt »

Figure 30. Bouton bleu pour « Activer maintenant »

Divulgation progressive (avancé)

Les paramètres qui ne sont pas fréquemment utilisés doivent être masqués. Utilisez "Avancé" uniquement lorsqu'il y a au moins 3 éléments à masquer.

Ici, le sous-texte montre les titres des paramètres masqués. Le sous-texte ne doit comporter qu’une seule ligne. Le texte supplémentaire est tronqué par des points de suspension.

Figure 31. Avancé utilisé sur l'écran « Affichage »

Des menus déroulants sont disponibles, mais idéalement, vous devriez plutôt utiliser une boîte de dialogue ou un écran de sélection de boutons radio. Ceci est recommandé pour simplifier les réglages, car il existe actuellement trois modèles différents pour une sélection unique.

Si nécessaire, des menus déroulants peuvent être utilisés dans les cas où le paramètre comporte des options simples.

Figure 32. Menu déroulant

Case à cocher

Utilisez les commutateurs sur les cases à cocher lorsque cela est possible.

Les cases à cocher peuvent être utilisées :

  • Pour les actions négatives telles que restreindre des applications ou bloquer un service.
  • Pour éviter d'avoir trop de switchs sur l'écran.

Figure 33. Les cases à cocher sont utilisées pour réduire le nombre de commutateurs sur cet écran

L'utilisation de liens dans les paramètres n'est pas recommandée. N'utilisez les liens que lorsque cela est absolument nécessaire. Les liens doivent utiliser une couleur d’accent sans soulignement.

Figure 34. Lien utilisé dans les paramètres

Le texte du pied de page peut être utilisé pour ajouter du contenu explicatif. Le pied de page doit toujours avoir un séparateur en haut. Le pied de page est affiché en bas de l'écran. Les pieds de page peuvent contenir des liens, si nécessaire.

Figure 35. Texte du pied de page

Motifs

Données

Les données critiques peuvent être affichées dans un graphique comme un diagramme à barres ou à secteurs. Ces données peuvent être affichées dans l'en-tête de l'entité. Les exemples incluent les données mobiles et le stockage.

D'autres données moins critiques peuvent être présentées en utilisant une vue de liste standard.

Figure 36. Exemple montrant le stockage

Figure 37. Exemple montrant le réseau

Formation des utilisateurs

Certaines fonctionnalités peuvent nécessiter une explication ou une formation de l'utilisateur. Vous pouvez utiliser une animation ou une image avec du texte. L'animation ou l'image doit être présentée en haut de l'écran, tandis que le texte du pied de page peut être utilisé pour ajouter une explication.

Figure 38. Paramètre utilisant l'animation et le texte de pied de page

Formes

Si le formulaire comporte un champ de saisie, utilisez une boîte de dialogue normale. Cela permet aux utilisateurs de saisir facilement une seule entrée.

Cependant, si le formulaire comporte plusieurs champs, pensez à utiliser une boîte de dialogue plein écran . Cela fournit plus d'espace à l'écran pour organiser les champs selon un modèle clair.

Figure 39. Formulaire avec une boîte de dialogue normale

Résultats de recherche

Les résultats de la recherche affichent le titre, le sous-texte (si disponible) et l'emplacement du fil d'Ariane du paramètre.

Figure 40. Résultat de la recherche