Ce document présente les principes et consignes pour toute personne qui conçoit les paramètres de la plate-forme Android, les paramètres de base GMS (paramètres Google) ou les développeurs qui conçoivent des paramètres pour leur application Android.
Principes de conception
Fournir un bon aperçu
Les utilisateurs doivent pouvoir consulter les écrans des 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 premier niveau.
Organiser vos produits de façon intuitive
Placez les paramètres fréquemment utilisés en haut de l'écran. Limitez le nombre de paramètres sur un seul écran. Il peut être difficile d'afficher plus de 10 à 15 éléments. Créez des menus intuitifs en déplaçant certains paramètres sur un écran distinct.
Figure 2. Les paramètres courants se trouvent en haut de l'écran
Faites en sorte que les paramètres soient faciles à trouver
Dans certains cas, il peut être utile de dupliquer un paramètre individuel sur deux écrans différents. Différentes situations peuvent amener les utilisateurs à modifier un paramètre. Par conséquent, l'inclure à plusieurs endroits aidera les utilisateurs à trouver cet élément.
Pour les paramètres en double, créez un écran distinct pour le paramètre et utilisez des points d'entrée provenant de différents endroits.
 |
 |
Figures 3 et 4. Le "Son de notification par défaut" s'affiche sur les écrans "Notification" et "Son"
Utilisez un titre et un état clairs
Choisissez des titres brefs et pertinents pour vos paramètres. É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. Affichez les détails spécifiques au lieu de simplement décrire le titre.
Lors de la création de vos titres, respectez les consignes suivantes :
- Placez le texte le plus important de votre libellé en premier.
- Reformuler les mots à exclure tels que "ne pas" ou "jamais" en termes neutres tels que "bloquer"
- Utilisez des libellés impersonnels tels que "Notifications" au lieu de "M'avertir". Exception: Si vous devez faire référence à l'utilisateur pour comprendre le paramètre, utilisez la deuxième personne ("vous") plutôt que la première ("I").
Les titres doivent éviter:
- Termes génériques, tels que définir, modifier, modifier, 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.
- Le jargon technique
Types de page
Liste des paramètres
Il s'agit du type d'écran le plus courant. Il permet de regrouper plusieurs paramètres. Les listes de paramètres peuvent être une combinaison de commandes, telles que des boutons bascules, des menus et des curseurs.
Si une catégorie comporte de nombreux paramètres, ils peuvent être regroupés. Pour en savoir plus, consultez la section Regroupement et séparateurs.
Figure 5 : Exemple de liste de paramètres
Liste
La vue Liste permet d'afficher une liste d'éléments tels que des applications, des comptes, des appareils, etc. Vous pouvez ajouter des commandes de filtrage ou de tri à l'écran.
Figure 6. Exemple de vue Liste
Écran "Entity" (Entité)
L'écran d'entité permet de présenter les paramètres d'un élément distinct tel qu'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 associés à cette entité.
Figure 7. Exemple d'écran "Entité" utilisé dans "Informations sur l'application"
Figure 8. Exemple d'écran "Entité" utilisé dans Storage
Paramètre principal
Il est préférable d'utiliser le paramètre principal lorsqu'une fonctionnalité entière peut être activée ou désactivée, comme le Wi-Fi ou le Bluetooth. Un bouton bascule en haut de l'écran permet à l'utilisateur de 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. Comme le paramètre principal est un écran distinct, vous évitez d'avoir plusieurs boutons bascules à différents endroits pour le même paramètre.
Figure 9. Exemple de paramètre principal utilisé sur l'écran des notifications de l'application ; la désactivation de l'option principale désactive complètement la fonctionnalité pour cette application
Figure 10. Exemple de paramètre principal utilisé sur l'écran "Notifications des applications" avec le bouton principal désactivé
Écran de sélection des cases d'option
Cet écran est utilisé lorsque l'utilisateur doit sélectionner un paramètre. Les cases d'option peuvent s'afficher dans une boîte de dialogue ou sur un écran distinct. Vous ne devez pas utiliser de cases d'option à côté de curseurs, de menus ou de commutateurs.
Un écran de cases d'option peut contenir une image en haut et un texte de pied de page en bas. Les cases d'option individuelles peuvent comporter un sous-texte à côté d'un titre.
Figure 11 : Les cases d'option ne doivent pas être utilisées dans la liste des paramètres.
Figure 12. Voici comment utiliser correctement les cases d'option dans les paramètres
Composants
Header
À partir d'Android 8.0, la barre d'outils d'action présente la recherche et l'aide, ainsi que d'autres actions associées. Les menus à développer sont déconseillés, car les utilisateurs ne peuvent pas découvrir les actions masquées dans ces menus.
Pour les barres d'outils ne comportant aucune action spécifique à l'écran. Afficher les actions de recherche et d'aide.
Figure 13. Barre d'outils avec des 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 comportant plusieurs actions: pensez à placer l'action principale avant la recherche, tout en plaçant les actions avancées dans le menu à développer.
Si toutes les actions sont avancées ou ne sont utiles que pour un petit nombre d'utilisateurs, envisagez de les placer dans le menu à développer.
Figure 15. Barre d'outils avec un menu à développer pour les actions
En-tête d'entité
L'en-tête d'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 la partie du titre (App1) défilent sous l'en-tête (Infos sur l'appli).
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 dessous
Lien vers le 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 ni les actions lors d'un appui prolongé.
Exemples :
Figure 18. Lien du menu avec icône, titre et sous-texte
Figure 19. Lien du menu avec titre et sous-texte
Figure 20. Lien du menu avec titre uniquement
Lien de menu avec icône, titre, sous-texte et une cible d'appel distincte à droite
Les autres éléments tactiles doivent utiliser la couleur du thème.
Figure 21. Exemple de menu cible en deux appuis
Lien vers le menu avec icône, titre, sous-texte et icône de statistiques/numéro/alerte
Les valeurs numériques telles que le pourcentage et le temps peuvent s'afficher à droite avec le sous-texte, tandis qu'un graphique à barres peut être affiché en dessous.
En général, 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 pour séparer des 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
Bouton bascule avec une icône, un titre et un sous-texte
Figure 24. Bouton bascule avec icône, titre et sous-texte
Passer au Pixel par le titre et le sous-texte
Figure 25. Passer au titre et au sous-texte
Passer au Pixel avec un titre uniquement
Les titres peuvent être accompagnés d'une icône sur la gauche.
Figure 26. Basculer avec le titre uniquement
Élément de liste + Bouton bascule
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 redirige l'utilisateur vers l'écran suivant. Le côté droit se comporte comme un commutateur standard.
Pour l'élément de liste à gauche, un titre est obligatoire. L'icône et le sous-texte sont facultatifs.
Figure 27. Élément de liste et bouton bascule
Curseur
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 en gris. 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 la suppression 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"
Divulgation progressive (avancé)
Les paramètres qui ne sont pas utilisés fréquemment doivent être masqués. N'utilisez "Avancé" que s'il y a au moins trois éléments à masquer.
Ici, le sous-texte montre les titres des paramètres qui sont masqués. Le sous-texte ne doit comporter qu'une seule ligne. Le texte supplémentaire est tronqué en ajoutant des points de suspension.
Figure 31. Paramètres avancés utilisés sur l'écran "Display"
Menu déroulant
Des menus déroulants sont disponibles, mais dans l'idéal, utilisez plutôt un écran de sélection de boîtes de dialogue ou de cases d'option. Nous vous recommandons de simplifier les paramètres, car il existe trois modèles différents pour une sélection unique.
Si nécessaire, vous pouvez utiliser des menus déroulants lorsque le paramètre comporte des options simples.
Figure 32. Menu déroulant
Case à cocher
Si possible, utilisez les cases à cocher.
Vous pouvez utiliser des cases à cocher:
- Pour les actions négatives, comme la restriction d'applications ou le blocage d'un service.
- Pour éviter d'avoir trop d'interrupteurs à l'écran.
Figure 33. Les cases à cocher permettent de réduire le nombre de commutateurs sur cet écran.
Liens
Nous vous déconseillons d'utiliser des liens dans les paramètres. N'utilisez des liens que lorsque cela est absolument nécessaire. Les liens doivent utiliser une couleur d'accentuation sans soulignement.
Figure 34. Lien utilisé dans les paramètres
Footer
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 représenté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é. Exemples : données mobiles et stockage.
D'autres données moins critiques peuvent être présentées à l'aide d'un affichage sous forme de liste standard.
Figure 36. Exemple illustrant Storage
Figure 37. Exemple illustrant "Réseau"
Formation des utilisateurs
Certaines fonctionnalités peuvent nécessiter une explication ou des informations à l'attention des utilisateurs. Vous pouvez utiliser une animation ou une image avec du texte. L'animation ou l'image doit s'afficher 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
Formulaires
Si le formulaire ne comporte qu'un seul 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 en plein écran. Cela offre 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 recherche indiquent le titre, le sous-texte (le cas échéant) et l'emplacement du fil d'Ariane du paramètre.
Figure 40. Résultat de recherche