Consignes de conception des paramètres Android

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

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ésactivera l'ensemble de la fonctionnalité pour 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 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é 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

À 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

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"

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

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

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