Recommandations en matière de paramètres de l’application

Applies to Windows only

Windows fournit un volet Paramètres par défaut pour chaque application du Windows Store. La partie supérieure du volet Paramètres répertorie les "points d’entrée" pour vos paramètres d’application. Chaque point d’entrée ouvre un menu volant des paramètres qui présente les options des paramètres. Cette rubrique décrit les meilleures pratiques pour créer et afficher des paramètres d’application.

Voir cette fonctionnalité en action dans le cadre de notre série Fonctionnalités d’application de A à Z:  Interface utilisateur des applications du Windows Store de A à Z

Exemple

Les utilisateurs effectuent un mouvement de balayage à partir du côté de l’écran pour afficher les icônes, puis appuient sur l’icône Paramètres pour afficher un volet Paramètres.

Menu volant des paramètres pour l’application OneDrive.

Remarque  Windows ajoute deux points d’entrée par défaut à chaque volet Paramètres dans une application du Windows Store : Autorisations et Évaluer et noter. Notez que, si votre application n’est pas installée via le Windows Store (s’il s’agit, par exemple, d’une application d’entreprise chargée par d’autres biais), le volet Paramètres de votre application ne comprend pas le point d’entrée Évaluer et noter. Au bas du volet Paramètres figurent les paramètres système comme le volume, la luminosité et l’alimentation.

Est-ce que mon application doit inclure des paramètres d’application ?

Toutes les applications du Windows Store incluent un volet Paramètres avec des sections Autorisations et Évaluer et noter par défaut. Vous trouverez ci-dessous des exemples de paramètres supplémentaires qui figurent dans le volet Paramètres :

  • Options de configuration qui affectent le comportement de l’application et qui sont rarement modifiées, comme le choix de l’unité de température Celsius ou Fahrenheit par défaut dans une application météorologique, ou le changement de paramètres de compte dans une application de messagerie.
  • Options qui dépendent des préférences de l’utilisateur, comme la musique, les effets sonores ou les couleurs de thème.
  • Informations sur l’application qui ne sont pas nécessaires très souvent, telles que la déclaration de confidentialité, l’aide, la version de l’application ou les informations de copyright.
  • Lien vers votre politique de confidentialité si une connexion Internet est déclarée dans vos fonctionnalités. L’oubli de ce lien est la cause la plus courante de blocage des certifications. Pour plus d’informations, voir Critères de certification des applications pour le Windows Store.

Les commandes qui font partie du flux de travail classique de l’application (par exemple, la modification de la taille du pinceau dans une application artistique) ne doivent pas se trouver dans le volet Paramètres. Placez plutôt les commandes souvent utilisées dans la barre de l’application supérieure ou inférieure. Pour en savoir plus sur la disposition des commandes, voir Modèles de commandes. Guidelines for app bars fournit des recommandations pour utiliser les barres des applications.

Pratiques conseillées et déconseillées

Principes généraux

  • Créez des points d’entrée pour tous vos paramètres d’application dans le volet Paramètres.
  • Veillez à ce que vos paramètres restent simples. Définissez les valeurs par défaut actives et limitez au minimum le nombre de paramètres.
  • Si nécessaire, vous pouvez créer un lien depuis des éléments de l’interface utilisateur de votre application vers le volet Paramètres ou un lien ciblé vers un menu volant des paramètres spécifique. Par exemple, vous pouvez créer un lien vers votre menu volant des paramètres de l’aide à partir d’un bouton d’"aide" dans la barre de l’application inférieure ainsi qu’à partir d’un point d’entrée d’"aide" dans le volet Paramètres.
  • Si un utilisateur modifie un paramètre, l’application doit immédiatement refléter la modification. Appliquez les modifications de paramètres immédiatement ou dès qu’un utilisateur a terminé son interaction avec le menu volant.
  • Utilisez les contrôles du menu volant des paramètres disponibles pour WinJS (SettingsFlyout) et XAML (SettingsFlyout). Ces contrôles implémentent les recommandations pour la conception de l’interface utilisateur (décrites dans la section Concevoir une interface utilisateur de paramètres) par défaut.
  • N’incluez pas des commandes qui font partie d’un flux de travail d’application courant, par exemple la modification de la couleur du pinceau dans une application artistique, dans les paramètres d’application. Ces commandes doivent figurer sur une barre de l’application ou la zone de dessin. Pour plus d’informations, voir Modèles de commandes pour une vue d’ensemble conceptuelle et Recommandations en matière de barres d’application.
  • N’utilisez pas un point d’entrée dans le volet Paramètres pour effectuer directement une action. Les points d’entrée doivent ouvrir les menus volants des paramètres.
  • N’utilisez pas le volet Paramètres pour la navigation. Quand le volet Paramètres se ferme, l’utilisateur doit se retrouver dans l’application au même emplacement auquel il se trouvait quand il cliqué sur l’icône Paramètres. La barre d’application supérieure est plus appropriée à la navigation.
  • N’utilisez pas les classes du menu volant des paramètres comme des contrôles polyvalents. Elles sont uniquement destinées aux menus volants des paramètres lancés à partir de points d’entrée du volet Paramètres.

Points d’entrée

Les points d’entrée sont des étiquettes qui apparaissent en haut du volet Paramètres et ouvrent les menus volants des paramètres, dans lesquels vous pouvez afficher une ou plusieurs options de paramètres. Une fois que vous disposez d’une liste de paramètres à inclure, tenez compte des recommandations suivantes pour les points d’entrée :

  • Regroupez les options similaires ou connexes sous un seul point d’entrée. Évitez d’ajouter plus de quatre points d’entrée à votre volet Paramètres.
  • Affichez les mêmes points d’entrée, quel que soit le contexte de l’application. Si certains paramètres ne sont pas appropriés dans un certain contexte, désactivez-les dans le menu volant des paramètres.
  • Si possible, utilisez des étiquettes descriptives en un seul mot pour vos points d’entrée. Par exemple, pour les paramètres liés aux comptes, nommez l’entrée « Comptes », plutôt que « Paramètres de compte ». Si vous voulez un seul point d’entrée pour vos paramètres et que les paramètres ne se prêtent pas à une étiquette descriptive, utilisez « Options » ou « Défaut ».
  • Si un point d’entrée est lié directement au Web plutôt qu’à un menu volant, informez-en l’utilisateur à l’aide d’un indice visuel, par exemple « Aide (en ligne) » ou « Forums Web » avec un style sous forme de lien hypertexte. Envisagez de regrouper plusieurs liens vers le Web dans un menu volant doté d’un point d’entrée unique. Par exemple, un point d’entrée « À propos de » peut ouvrir un menu volant proposant des liens vers vos conditions d’utilisation, votre déclaration de confidentialité et le support technique de votre application.
  • Combinez les paramètres peu utilisés dans un même point d’entrée de sorte que les paramètres plus courants puissent avoir leur propre point d’entrée. Placez le contenu ou les liens qui contiennent uniquement des informations dans un point d’entrée « À propos de ».
  • Ne dupliquez pas la fonctionnalité dans le volet « Autorisations ». Windows fournit ce volet par défaut et vous ne pouvez pas le modifier.

Concevoir une interface utilisateur de paramètres

Remarque  Les contrôles du menu volant des paramètres disponibles dans WinJS et XAML suivent les instructions ci-dessous par défaut, à l’exception de celles qui se rapportent aux couleurs de l’en-tête et de la bordure. Utilisez ces contrôles (SettingsFlyout (HTML) ou SettingsFlyout (XAML)) pour vous assurer que les menus volants des paramètres suivent les instructions de l’interface utilisateur et assurent une expérience utilisateur cohérente.

  • Lancez toujours un menu volant des paramètres à partir des points d’entrée de votre volet Paramètres.
  • Utilisez une surface avec estompement qui s’affiche au-dessus du contenu de l’application principale et qui s’estompe quand l’utilisateur clique en dehors du menu volant ou redimensionne l’application. Cela permet aux utilisateurs de modifier un paramètre rapidement et de revenir à l’application.
  • Veillez à ce que votre menu volant des paramètres s’affiche du même côté de l’écran que les icônes et le volet Paramètres. Utilisez la propriété SettingsEdgeLocation pour déterminer de quel côté de l’écran l’icône Paramètres apparaît.
  • Faites glisser le menu volant depuis le même côté de l’écran que le volet Paramètres, plutôt que depuis le haut ou le bas de l’écran.
  • Un menu volant doit occuper toute la hauteur de l’écran, quelle que soit l’orientation, et doit être étroit (346 pixels) ou large (646 pixels). Choisissez la largeur appropriée au contenu et ne créez pas de tailles personnalisées.
  • L’en-tête des menus volants doit inclure un bouton Précédent, le nom du point d’entrée ayant ouvert le menu volant, ainsi que l’icône de l’application.
  • La couleur d’arrière-plan de l’en-tête doit être identique à la couleur d’arrière-plan de votre vignette.
  • La bordure doit être de la même couleur que l’en-tête, mais 20 % plus foncée.
  • Affichez le contenu des paramètres sur un arrière-plan blanc.

Ajouter le contenu des paramètres aux menus volants des paramètres

  • Présentez le contenu de haut en bas dans une seule colonne que l’utilisateur pourra faire défiler, si nécessaire. Limitez le défilement à un maximum de deux fois la hauteur de l’écran.
  • Utilisez les contrôles suivants pour les paramètres d’application :

    • Boutons bascule : pour permettre aux utilisateurs de définir des valeurs Activé ou Désactivé.
    • Cases d’option : pour permettre à l’utilisateur de choisir un élément dans un ensemble de 5 options au maximum ayant un lien entre elles, mais mutuellement exclusives.
    • Zone de texte : pour permettre aux utilisateurs d’entrer du texte. Utilisez le type de zone de texte qui correspond au type de texte que vous obtenez de l’utilisateur, tel qu’un message électronique ou un mot de passe.
    • Liens hypertexte : pour diriger l’utilisateur vers une autre page de l’application ou un site Web externe. Quand un utilisateur clique sur un lien hypertexte, le menu volant des paramètres se ferme.
    • Boutons : pour permettre aux utilisateurs de lancer une action immédiate sans quitter le menu volant des paramètres actuel.
  • Ajoutez un message descriptif si l’un des contrôles est désactivé. Placez ce message au-dessus du contrôle désactivé.
  • Une fois l’animation du menu volant Paramètres et de l’en-tête terminée, animez le contenu et les contrôles dans un bloc unique. Animez le contenu à l’aide des animations enterPage ou EntranceThemeTransition avec un décalage gauche de 100 px.
  • Utilisez des en-têtes de section, des paragraphes et des étiquettes pour faciliter l’organisation du contenu et apporter plus de clarté, si nécessaire.
  • Si vous avez besoin de répéter les paramètres, utilisez un niveau supplémentaire d’interface utilisateur ou un modèle développer/réduire, mais évitez les hiérarchies de plus de deux niveaux. Par exemple, une application météo qui fournit des paramètres par ville peut répertorier les villes et permettre à l’utilisateur d’appuyer sur la ville pour ouvrir un nouveau menu volant ou développer les options de paramètres.
  • Si le chargement des contrôles ou du contenu Web prend du temps, utilisez le contrôle de progression indéterminée pour indiquer aux utilisateurs que les informations sont en cours de chargement. Pour plus d’informations, voir Recommandations en matière de contrôles de progression.
  • N’utilisez pas de boutons pour la navigation ou pour valider des modifications. Utilisez des liens hypertexte pour accéder à d’autres pages et, au lieu d’utiliser un bouton pour valider les modifications, enregistrez automatiquement les modifications apportées aux paramètres d’application quand un utilisateur ferme le menu volant des paramètres.

Rubriques associées

Pour les concepteurs
Disposition
Modèles de commandes
Guidelines for app help
Guidelines for app bars
Recommandations en matière de contrôle de sélection
Pour les développeurs (HTML)
Disposition de votre interface utilisateur
WinJS.UI.SettingsFlyout
SettingsCommand
ApplicationSettings
Quickstart: Adding app settings
Quickstart: Add app help
Liste des contrôles
Pour les développeurs (XAML)
Disposition de votre interface utilisateur
SettingsFlyout
SettingsCommand
ApplicationSettings
Quickstart: Add app settings
Quickstart: Add app help
Liste des contrôles
Exemples
Exemple de paramètres d’application

 

 

Afficher:
© 2014 Microsoft