Recommandations sur les paramètres d’application (applications du Windows Store)

Cette rubrique décrit les meilleures pratiques pour utiliser l’icône Paramètres permettant d’afficher les paramètres d’application. 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 le volet Paramètres. Le volet Paramètres contient les paramètres d’application et les paramètres système.

Paramètres d’application 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 de paramètres qui présente lesdits paramètres. Les points d’entrée vous permettent de créer des catégories de paramètres, en regroupant les contrôles similaires ou connexes ensemble. Windows fournit deux points d’entrée : Autorisations et Évaluer et noter. Seules les applications qui ont été installées par le biais du Windows Store disposent du point d’entrée Évaluer et noter. Les applications d’entreprise chargées par d’autres biais ne disposent pas de ce point d’entrée. Paramètres du PC standard Au bas du volet Paramètres figurent les paramètres du PC fournis par le système, comme le volume, la luminosité et l’alimentation.

Recommandations en matière d’expérience utilisateur

Principes généraux

• Utilisez l’icône Paramètres en tant que point d’entrée principal dans tous les paramètres de votre application, puis placez tous vos paramètres dans le volet Paramètres.
• Si besoin, vous pouvez créer un lien depuis l’interface utilisateur de votre application vers le volet Paramètres ou un lien profond vers un menu volant de paramètres spécifique.
• Veillez à ce que vos paramètres restent simples et peu nombreux. Définissez les valeurs par défaut actives et réduisez au maximum le nombre de paramètres.
• Si un utilisateur modifie un paramètre, l’application doit immédiatement refléter la modification. Appliquez immédiatement les modifications de paramètres ou dès que des utilisateurs ont terminé leur interaction avec le menu volant, et utilisez une surface d’interface utilisateur avec estompement, afin que les utilisateurs puissent le faire disparaître en touchant en dehors de la surface ou en déplaçant le focus de l’application.

Choisir les paramètres appropriés

• Options de configuration qui affectent le comportement de l’application dans son ensemble et qui sont rarement modifiées comme, par exemple le choix de l’unité de température par défaut, Celsius ou Fahrenheit, 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.
• N’incluez pas des commandes qui font partie d’un flux de travail d’application classique, tel que la modification de la couleur du pinceau dans une application graphique. Ces commandes doivent figurer sur une barre d’application ou sur la zone de dessin. Pour plus d’informations, voir Recommandations concernant les barres d’application.

Ajouter des points d’entrée

Les points d’entrée correspondent au texte qui apparaît en haut du volet Paramètres et permettent généralement d’ouvrir des menus volants de paramètres, où vous pouvez proposer 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.
• 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 de paramètres de l’application.
• Dans la mesure du 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 ».
• En cas d’accès direct 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 à titre d’information uniquement dans un point d’entrée « À propos de ».
• Ne dupliquez pas la fonctionnalité dans le volet « Autorisations ». . Ce volet est contrôlé par le système et les applications ne peuvent pas le modifier.

Définir votre interface utilisateur de paramètres

Conseils pour les développeurs : pour les applications JavaScript, utilisez le contrôle SettingsFlyout. Celui-ci implémente les recommandations d’interface utilisateur indiquées dans cette section et prend en charge les classes CSS prédéfinies pour générer le style recommandé. Pour les autres modèles d’application, vous devez créer une interface utilisateur de paramètres personnalisée. Utilisez les recommandations suivantes pour vous assurer que votre interface utilisateur respecte les recommandations. Pour plus d’informations, voir Exemple de paramètres d’application.

• Créez une expérience cohérente en lançant toujours un menu volant de paramètres (ou une surface d’interface utilisateur de type menu volant) depuis vos points d’entrée.
• Utilisez une surface avec estompement qui se superpose au contenu de l’application et qui s’estompe lorsque l’utilisateur touche l’application, lorsque l’application perd son activation (par exemple lorsque des icônes sont ouvertes) et lorsque l’utilisateur ancre l’application. Cela permet aux utilisateurs de modifier un paramètre rapidement et de revenir à l’application.
• Placez votre menu volant du même côté de l’écran que les icônes afin de former un flux d’interface utilisateur complet. 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, plutôt que depuis le haut ou le bas de l’écran.
• Les menus volants doivent occuper toute la hauteur de l’écran, quelle que soit leur orientation, et peuvent être étroits (346 pixels) ou larges (646 pixels). Choisissez la taille 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 et la couleur de la bordure doivent refléter la couleur de l’application (identique à la couleur d’arrière-plan de votre vignette).
• La couleur de la bordure doit être de la même couleur, mais 20 % plus foncée.
• Affichez le contenu des paramètres sur un arrière-plan blanc.

Ajouter des paramètres aux menus volants de paramètres

• Présentez le contenu de haut en bas dans une seule colonne que l’utilisateur pourra faire défiler, si nécessaire, mais limitez le défilement à un maximum de deux fois la hauteur de l’écran.

• Envisagez d’utiliser ces contrôles pour les paramètres :

  • Bouton bascule : pour permettre aux utilisateurs de définir des valeurs Activé ou Désactivé.
  • Groupe de cases d’option : pour permettre à l’utilisateur de choisir un élément dans un ensemble de 5 options ayant un lien entre elles, mais mutuellement exclusives.
  • Contrôle de sélection : pour permettre aux utilisateurs de choisir un élément dans un ensemble de 6 éléments ou plus de texte seulement.
  • 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 attendez de l’utilisateur, tel qu’une adresse e-mail ou un mot de passe.
  • Lien hypertexte : lorsque l’action dirige l’utilisateur vers une autre surface de l’interface utilisateur et qu’elle quitte l’interface utilisateur des paramètres actuelle.
  • Bouton : pour permettre aux utilisateurs de lancer une action immédiate sans quitter l’interface utilisateur des paramètres actuelle.
• Utilisez les contrôles de façon cohérente pour les paramètres du même type. Ajoutez un message descriptif si un des contrôles est désactivé. Placez ce message au-dessus du contrôle désactivé.
• Une fois l’animation du menu volant de 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 de l’animation enterPage ou EntranceThemeTransitionavec un décalage gauche de 100 px.
• Utilisez des en-têtes de section, des paragraphes et des étiquettes lorsque ceux-ci facilitent la hiérarchie et apportent plus de clarté. Ces éléments sont facultatifs dans les menus volants de paramètres.
• 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 plus d’informations, voir Recommandations et liste de vérification pour les contrôles de progression.
• N’utilisez pas de boutons pour la navigation ou pour valider des modifications.

Utilisation non appropriée des paramètres

• N’ajoutez pas de commandes qui font partie du flux de travail courant de l’application. Ces commandes doivent être placées dans la barre d’application ou sur le canevas de l’application.
• N’utilisez pas un point d’entrée pour effectuer une action directement. Les points d’entrée doivent ouvrir un menu volant ou le navigateur.
• N’utilisez pas le volet Paramètres pour la navigation. Lorsque le volet Paramètres se ferme, les utilisateurs doivent se retrouver dans l’application au même emplacement auquel il se trouvait lorsqu’ils ont entré les paramètres. La barre d’application est plus appropriée à la navigation. Pour plus d’informations, voir Définition de la disposition, de la navigation et des commandes.
• N’utilisez pas la classe SettingsFlyout en tant que contrôle à usage général. Elle est uniquement destinée aux menus volants de paramètres lancés à partir de points d’entrée.

Rubriques associées

Concepts

Données de l’application

Ajout d’une aide à l’application

Recommandations

Recommandations en matière de données d’application itinérantes

Référence

SettingsCommand

SettingsFlyout

ApplicationSettings

Exemples

Exemple d’application de paramètres