Instructions relatives à la conception des interactions des widgets

Cet article fournit des instructions détaillées pour la conception d’interactions pour les widgets Windows.

Un widget doit être visible et ciblé et représenter un aspect unique de l’objectif principal de l’application. Les widgets peuvent fournir un ou plusieurs appels à l’action. Lorsque l’utilisateur clique sur un appel à l’action, le widget doit lancer l’application ou le site web associé au lieu d’implémenter l’action dans le widget lui-même. Un widget n’a qu’une seule page principale qui peut héberger plusieurs interactions. Cliquer sur un élément dans le widget ne doit jamais vous amener à une vue complètement différente du widget. Par exemple, dans un widget météo, vous pouvez afficher le temps pendant plusieurs jours, mais cliquer sur l’un des jours ne développera pas les détails inline, mais lancera plutôt l’application ou le web.

Voici le nombre maximal de points tactiles recommandés pour chaque taille de widget prise en charge.

Taille du widget Nombre maximal de points tactiles
petit 1
 Moyen 3
large 4

Ne concevez pas le widget autour des modèles de navigation suivants :

  • Pivots qui basculent entre des expériences non liées.
  • Pages de deuxième niveau pour les tâches détaillées.
  • Défilement vertical ou horizontal pour atteindre les informations principales du widget.

Il s’agit de contraintes de conception pour une expérience consultable d’un coup d’œil, et non une déclaration indiquant que le contenu web HTML ne peut pas implémenter le défilement ou la navigation. Pour un widget web, conservez le contenu utilisable dans chaque taille prise en charge et déplacez des tâches détaillées vers l’application ou le site web.

conteneurs

Les images suivantes montrent des exemples d’utilisations d’éléments de conteneur dans un modèle de widget. Les conteneurs regroupent des éléments visuels en colonnes et en lignes pour créer une structure de grille hiérarchique.

Quatre images de widgets qui illustrent des conteneurs. Les widgets des images ont des éléments divisés en lignes et colonnes pour fournir une structure de grille hiérarchique.

Les images suivantes montrent des exemples d’utilisations d’éléments de lien d’image dans un modèle de widget.

Deux images de widgets qui illustrent des liens d’image. Les images sont organisées dans les colonnes et les lignes faisant une grille.

Pagination

Les images suivantes montrent des exemples de pagination dans un modèle de widget. Les contrôles de pagination peuvent être alignés horizontalement ou verticalement. Les flèches de navigation s’affichent en réponse à un pointage de curseur.

Cet ensemble de deux images affiche la pagination horizontale. Dans la première image, une colonne de points est alignée le long du côté droit. Un point est plus grand pour indiquer la page actuellement active. Dans la deuxième image, un curseur se déplace sur une flèche pointant vers le bas du widget qui permet à l’utilisateur de passer à la page suivante. Il existe une flèche pointant vers le haut correspondante en haut du widget pour accéder à la page précédente.

Cet ensemble de deux images affiche la pagination verticale. Dans la première image, une ligne de points est alignée le long du bas. Un point est plus grand pour indiquer la page actuellement active. Dans la deuxième image, un curseur se déplace sur une flèche pointant vers la droite du widget qui permet à l’utilisateur de passer à la page suivante. Il existe une flèche correspondante pointant vers la gauche du widget pour accéder à la page précédente.

Ces deux images illustrent l’apparence des contrôles de pagination lorsque le widget a un arrière-plan d’image.

Les images suivantes illustrent des exemples de liens hypertexte dans un modèle de widget.

Deux images de widgets qui illustrent des liens hypertexte. La première image montre une chaîne de texte avec lien hypertexte. Le texte est simple. Dans la deuxième image, un curseur de souris pointe sur le lien hypertexte, ce qui entraîne le soulignement du texte.

Image montrant un lien hypertexte centré au bas du widget, juste au-dessus de la ligne horizontale des points de pagination. Un X rouge indique que les points de pagination et le lien hypertexte ne doivent pas se trouver dans le même espace. Sur la droite, une autre image montre le lien hypertexte en bas, mais les points de pagination sont alignés verticalement dans une colonne située à droite. Une vérification verte indique que ce placement des deux éléments est correct.

Deux images de widgets qui illustrent des menus déroulants. Dans l’image de gauche, le menu déroulant est réduit. Dans l’image de droite, la liste déroulante est développée et s’étend sur la bordure du widget

L’illustration montre une liste déroulante rendue par l’hôte qui s’étend au-delà de la limite de la carte. Ne supposez pas que le code HTML personnalisé ou les menus d’un widget web peuvent être affichés en dehors de leur zone de contenu. Testez l’emplacement du menu et le rognage dans l’hôte cible. Les menus doivent se fermer lorsque l’utilisateur clique en dehors de ceux-ci.

  • Dernière mise à jour :