Partage via


Principes de base des commandes

Dans une application Windows, les éléments de commande sont les éléments d’interface utilisateur interactifs qui permettent aux utilisateurs d’effectuer des actions, telles que l’envoi d’un e-mail, la suppression d’un élément ou l’envoi d’un formulaire. Les interfaces de commande sont constituées d’éléments de commande courants, des surfaces de commande qui les hébergent, des interactions qu’elles prennent en charge et des expériences proposées.

Proposer la meilleure expérience de commande

L’aspect le plus important d’une interface de commande est ce que vous essayez de laisser un utilisateur accomplir. Lorsque vous planifiez la fonctionnalité de votre application, envisagez les étapes requises pour effectuer ces tâches et les expériences utilisateur que vous souhaitez activer. Une fois que vous avez élaboré une première ébauche de ces expériences, vous pouvez prendre des décisions concernant les outils et les interactions pour les implémenter.

Voici quelques expériences de commande courantes :

  • Envoi ou envoi d’informations
  • Sélection de paramètres et d’options
  • Recherche et filtrage de contenu
  • Ouverture, enregistrement et suppression de fichiers
  • Modification ou création de contenu

Soyez créatif avec la conception de vos expériences de commande. Choisissez les appareils d’entrée pris en charge par votre application et la façon dont votre application répond à chaque appareil. Par la prise en charge du plus large choix de fonctionnalités et de préférences, vous rendez votre application aussi utilisable, portable et accessible que possible (consultez Conception de commandes pour les applications Windows pour plus de détails).

Choisir les éléments de commande appropriés

L’utilisation d’éléments adéquats dans une interface de commande peut faire toute la différence entre une application intuitive et facile à utiliser, et une application dont l’utilisation est complexe et déroutante. Un ensemble complet d’éléments de commande est disponible dans l’application Windows. Voici une liste de quelques-uns des éléments de commande UWP les plus courants.

image du bouton

Boutons

Les boutons déclenchent une action immédiate. Il peut s’agir de l’envoi d’un e-mail, de l’envoi des données d’un formulaire ou de la confirmation d’une action dans une boîte de dialogue.

image de liste

Listes

Répertorie les éléments présents dans une liste interactive ou une grille. Elles sont généralement utilisées pour de nombreuses options ou pour afficher les éléments. Il peut s’agir d’une liste déroulante, d’une zone de liste, d’un affichage de liste et d’un affichage de grille.

image de contrôle de sélection

Contrôles de sélection

Ils permettent aux utilisateurs de choisir entre différentes options, par exemple, pour remplir un questionnaire ou configurer des paramètres d’application. Par exemple, checkBox, RadioButton et bouton bascule.

Image de calendrier

Sélecteurs de calendriers, de date et d’heure

Les sélecteurs de calendriers, de date et d’heure permettent aux utilisateurs d’afficher et de modifier les informations de date et d’heure, notamment pour créer un événement ou configurer d’une alarme. Il peut s’agir d’un sélecteur de date du calendrier, d’un affichage de calendrier, d’un sélecteur de date et d’un sélecteur d’heure.

Image de saisie de texte prédictive

Saisie de texte prédictive

Elle fournit des suggestions au fur et à mesure que les utilisateurs entrent des données ou émettent des requêtes. Les exemples incluent AutoSuggestBox.

Pour obtenir une liste complète, consultez Contrôles et éléments d’interface utilisateur

Placer des commandes sur la surface droite

Vous pouvez placer les éléments de commande sur un certain nombre de surfaces dans votre application, notamment le canevas d’application ou des conteneurs de commande spécifiques, comme une barre de commandes, un menu volant de barre de commandes, une barre de menus ou une boîte de dialogue.

Essayez toujours de laisser les utilisateurs manipuler du contenu directement plutôt que par le biais des commandes qui agissent sur le contenu, par exemple le glisser-déplacer pour réorganiser des éléments de liste plutôt que des boutons de commande vers le haut et vers le bas.

Toutefois, cela peut ne pas être possible avec certains appareils d’entrée ou lors de la prise en compte de préférences et de capacités spécifiques à l’utilisateur. Dans ce cas, fournissez autant d’affordances de commandes que possible et placez ces éléments de commande sur une surface de commande dans votre application.

Voici une liste de quelques-unes des surfaces de commande les plus courantes.

image de zones de dessin d’application

Zones de dessin d’application (zone de contenu)

Si une commande est nécessaire en tout temps pour permettre aux utilisateurs d’effectuer des scénarios de base, placez-la sur la zone de dessin. Étant donné que vous pouvez placer des commandes près (ou sur) des objets qu’ils affectent, le fait de placer des commandes sur le canevas les rend faciles et évidents à utiliser. Toutefois, choisissez attentivement les commandes que vous placez sur le canevas. S’il y a trop de commandes sur la zone de dessin de l’application, vous perdrez de l’espace précieux sur l’écran et risquez de submerger l’utilisateur. Si la commande n’est pas fréquemment utilisée, pensez à la placer sur une autre surface de commande.

image CommandBar

Barres de commandes et barres de menus

Les barres de commandes simplifient l’organisation des commandes et en facilitent l’accès. Les barres de commandes peuvent être placées en haut de l’écran, en bas de l’écran, ou les deux (une barre de menus peut également être utilisée lorsque la fonctionnalité de votre application est trop complexe pour une barre de commandes).

image de menu contextuel

Menus et menus contextuels

Les menus et menus contextuels économisent de l’espace en organisant les commandes et en les masquant jusqu’à ce que l’utilisateur en a besoin. Les utilisateurs accèdent généralement à un menu ou à un menu contextuel en cliquant sur un bouton ou en cliquant avec le bouton droit sur un contrôle.

CommandBarFlyout est un type de menu contextuel qui combine les avantages d’une barre de commandes et d’un menu contextuel en un seul contrôle. Il peut fournir des raccourcis pour les actions fréquemment effectuées et un accès aux commandes secondaires qui ne sont pertinentes que dans certains contextes, comme le presse-papier ou les commandes personnalisées.

UWP fournit également un ensemble de menus traditionnels et de menus contextuels ; pour plus d’informations, consultez Menus et menus contextuels.

Fournir des commentaires sur la commande

Les commentaires sur la commande communiquent aux utilisateurs qu’une interaction ou commande a été détectée, comment la commande a été interprétée et gérée, et si la commande a réussi ou non. Cela permet aux utilisateurs de comprendre ce qu’ils ont fait et ce qu’ils peuvent faire ensuite. Idéalement, les commentaires doivent être intégrés naturellement à l’interface utilisateur pour que les utilisateurs n’aient pas à être interrompus ou à prendre de mesures supplémentaires, à moins que cela ne soit absolument nécessaire.

Remarque

Fournissez des commentaires uniquement quand cela est nécessaire et quand ils ne sont pas disponibles ailleurs. Maintenez l’interface utilisateur de votre application claire et simple, à moins que cela n’ajoute une valeur.

Voici quelques solutions pour fournir des commentaires dans votre application.

image de la zone de contenu CommandBar

Barre de commandes

La zone de contenu de CommandBar est un endroit intuitif pour communiquer l’état aux utilisateurs s’ils souhaitent afficher des commentaires.

Image du menu volant

Menus volants

Les menus volants sont des fenêtres contextuelles légères qui peuvent être fermées en appuyant ou en cliquant quelque part à l’extérieur du menu volant.

Image de la boîte de dialogue

Contrôles de boîte de dialogue

Les contrôles de boîtes de dialogue sont des superpositions d’interface utilisateur modales qui fournissent des informations contextuelles sur l’application. Dans la plupart des cas, les dialogues bloquent les interactions avec la fenêtre de l’application jusqu’à ce qu’elles soient explicitement ignorées, et demandent souvent un type d’action à l’utilisateur. Les boîtes de dialogue peuvent être perturbatrices et ne doivent être utilisées que dans certaines situations. Pour plus d’informations, consultez la section Quand confirmer ou annuler des actions .

Conseil

Veillez à ce que votre application utilise des boîtes de dialogue de confirmation ; ils peuvent être très utiles lorsque l’utilisateur fait une erreur, mais ils sont un obstacle chaque fois que l’utilisateur tente d’effectuer une action intentionnellement.

Quand confirmer ou annuler des actions

Même si l’interface utilisateur de votre application a été très bien conçue, il arrivera inévitablement à tous les utilisateurs d’effectuer une action non souhaitée. Votre application peut remédier à ce genre de situation en demandant à l’utilisateur de confirmer une action ou en lui offrant un moyen d’annuler les actions récentes.

Pour les actions qui ne peuvent pas être annulées et qui ont des conséquences majeures, nous vous recommandons d’utiliser une boîte de dialogue de confirmation. Voici quelques exemples de ces actions :

  • Remplacement d’un fichier
  • Ne pas enregistrer un fichier avant de fermer
  • Confirmation de la suppression définitive d’un fichier ou de données
  • Effectuer un achat (sauf si l’utilisateur refuse d’exiger une confirmation)
  • Envoi d’un formulaire, par exemple l’inscription à quelque chose

Pour les actions qui peuvent être annulées, l’offre d’une commande d’annulation simple est généralement suffisante. Voici quelques exemples de ces actions :

  • Suppression d’un fichier
  • Suppression d’un e-mail (pas définitivement)
  • Modification du contenu ou modification de texte
  • Changement de nom d’un fichier

Optimiser pour des types d’entrée spécifiques

Pour plus d’informations sur l’optimisation des expériences utilisateur autour d’un type d’entrée ou d’un appareil spécifique, consultez l’primeur d’interaction.