Notions de base relatives aux 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

Les listes présentent des éléments 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. CheckBox, RadioButton et toggle switch en sont des exemples.

Image du 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. Par exemple , AutoSuggestBox.

Pour obtenir la liste complète de ces éléments, voir Contrôles et éléments d’interface utilisateur.

Placer les commandes sur la surface appropriée

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. Comme vous pouvez placer les commandes près des objets qu’elles affectent (ou sur ceux-ci), le fait de les placer sur le Canvas rend leur utilisation facile et évidente. Toutefois, choisissez les commandes que vous placez sur le Canvas avec soin. 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 les menus contextuels permettent de gagner de l’espace en organisant les commandes et en les masquant jusqu’à ce que l’utilisateur en ait 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.

Notes

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 status aux utilisateurs s’ils souhaitent obtenir 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 boîtes de dialogue bloquent les interactions avec la fenêtre de l’application jusqu’à ce qu’elles soient masquées explicitement. Elles demandent souvent un type d’action de l’utilisateur. Les boîtes de dialogue peuvent nuire à la fluidité de l’expérience et ne doivent être utilisées que dans certaines situations. Pour plus d’informations, voir la section Quand confirmer ou annuler des actions.

Conseil

Prenez garde à ne pas utiliser un trop grand nombre de boîtes de dialogue de confirmation dans votre application : elles peuvent être très utiles en cas d’erreur de l’utilisateur, mais elles représentent 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 dont les conséquences sont importantes, nous vous recommandons d’utiliser une boîte de dialogue de confirmation. Exemples de telles actions :

  • Remplacement d’un fichier
  • Non-enregistrement d’un fichier avant la fermeture
  • Confirmation de la suppression définitive d’un fichier ou de données
  • Achat (sauf si l’utilisateur refuse de demander une confirmation)
  • Envoi d’un formulaire, par exemple pour s’inscrire à un programme

Pour les actions qui peuvent être annulées, une simple commande d’annulation est généralement suffisante. Exemples de telles actions :

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

Optimiser les types d’entrée spécifiques

Voir les Notions fondamentales sur les interactions pour plus d’informations sur l’optimisation des expériences utilisateur avec un type ou un périphérique d’entrée spécifique.