Ce document met en évidence les principes et les directives pour toute personne qui conçoit des paramètres de plate-forme Android, des paramètres de base GMS (paramètres Google) ou tout développeur qui conçoit des paramètres pour son application Android.
Principes de conception
Donner une bonne vue d'ensemble
Les utilisateurs doivent pouvoir jeter un coup d'œil sur 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 accablant. Créez des menus intuitifs en déplaçant certains paramètres vers un écran séparé.
Figure 2. Les paramètres communs sont 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 à partir de différents endroits.
 |  |
Figure 3 & 4. « Son de notification par défaut » apparaît sur les écrans « Notification » et « Son »
Utilisez un titre et un statut clairs
Faites en sorte que les titres de vos paramètres soient brefs et significatifs. Évitez d'utiliser des titres vagues comme "Paramètres généraux". Sous le titre, affichez l'état pour mettre en surbrillance 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 libellés impersonnels comme "Notifications" au lieu de "M'avertir". Exception : si la référence à l'utilisateur est nécessaire 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éter des mots 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 placer plusieurs paramètres ensemble. Les listes de paramètres peuvent être une combinaison de commandes, telles que des commutateurs, des menus et des curseurs.
S'il existe de nombreux paramètres dans une catégorie, ils peuvent être regroupés. Voir Regroupement et séparateurs pour plus de détails.
Figure 5. Exemple de liste de paramètres
Vue liste
La vue de 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 de 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 Entité utilisé dans Stockage
Réglage principal
Le réglage 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 fonction 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. Étant donné que le réglage principal est un écran séparé, vous éviterez d'avoir plusieurs commutateurs à différents endroits pour le même réglage.
Figure 9. Exemple de paramètre principal utilisé dans l'écran des notifications d'application ; la désactivation de la bascule principale désactive toute la fonctionnalité de cette application
Figure 10. Exemple de paramètre principal utilisé dans l'écran des notifications d'application avec bascule principale désactivée
Écran de sélection des boutons radio
Cet écran est utilisé lorsque l'utilisateur doit faire une sélection pour un réglage. 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é des curseurs, des menus ou des 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 avec 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
Entête
À partir d'Android 8.0, la barre d'outils d'action présente la recherche et l'aide ainsi que d'autres actions connexes. Les menus de débordement sont déconseillés car les utilisateurs peuvent 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 à une action : Présenter 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 plaçant les actions avancées dans le menu de débordement.
Si toutes les actions sont avancées ou utiles uniquement pour 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 uniquement un en-tête 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 l'en-tête (App1) défileront sous l'en-tête (Infos 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éfile en dessous
Lien menu
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 appuyant longuement.
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 une cible d'accès distincte à droite
Les autres cibles tactiles doivent utiliser la couleur du thème.
Figure 21. Exemple de menu cible à deux pressions
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é en 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 séparateurs
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 de 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
Basculer avec icône, titre et sous-texte
Figure 24. Commutateur avec icône, titre et sous-texte
Basculer avec le titre et le sous-texte
Figure 25. Commutateur avec titre et sous-texte
Basculer avec le titre uniquement
Les titres peuvent être accompagnés d'une icône à gauche.
Figure 26. Commutateur avec titre uniquement
Élément de liste + commutateur
Vous pouvez combiner un élément de liste avec un commutateur. Taper 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 un 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 affiche les titres des paramètres masqués. Le sous-texte ne doit comporter qu'une seule ligne. Le texte supplémentaire est tronqué avec des points de suspension.
Figure 31. Avancé utilisé sur l'écran "Affichage"
Menu déroulant
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 bouton 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 a des options simples.
Illustration 32. Menu déroulant
Case à cocher
Utilisez des commutateurs sur les cases à cocher lorsque cela est possible.
Les cases à cocher peuvent être utilisées :
- Pour les actions négatives telles que la restriction d'applications ou le blocage d'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
Liens
L'utilisation de liens dans les paramètres n'est pas recommandée. N'utilisez les liens qu'en cas d'absolue nécessité. Les liens doivent utiliser une couleur d'accent sans soulignement.
Figure 34. Lien utilisé dans les paramètres
Bas de page
Le texte de 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 s'affiche en bas de l'écran. Les pieds de page peuvent avoir des liens, si nécessaire.
Figure 35. Texte de pied de page
Motifs
Données
Les données critiques peuvent être affichées dans un graphique comme un graphique à 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 régulière.
Figure 36. Exemple de 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étrage à l'aide d'une animation et d'un 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.
Toutefois, si le formulaire comporte plusieurs champs, envisagez d'utiliser une boîte de dialogue plein écran . Cela fournit plus d'espace à l'écran pour organiser les champs dans 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