Principes fondamentaux de la conception des widgets

  • Article

Cet article fournit des conseils détaillés pour la conception d’un interface utilisateur pour un widget Windows.

Tailles de widget

Capture d’écran montrant des modèles de widgets vierges illustrant des tailles petites, moyennes et grandes.Capture d’écran montrant des exemples de petites, moyennes et grandes tailles pour un widget météo.Capture d’écran montrant des exemples de petites, moyennes et grandes tailles pour un widget trafic.

Les widgets fournissent trois tailles parmi lesquelles l’utilisateur peut choisir. Nous vous recommandons de créer et d’examiner les 3 tailles et d’adapter votre conception spécifiquement pour chaque taille. Les petites et moyennes tailles offrent une meilleure détectabilité, car elles sont plus souvent exposées dans le flux dynamique. Les grandes tailles sont utiles pour l’affichage d’informations plus détaillées. La prise en charge de plusieurs tailles permet une flexibilité dans la personnalisation par les utilisateurs de widgets qu’ils choisissent d’épingler au tableau des widgets.

Small

Les principes du widget qui peuvent être visibles et ciblés deviennent plus importants dans les décisions de conception prises pour le widget de petite taille. Le widget de petite taille ne doit pas essayer de forcer toutes les fonctionnalités qui pourraient aisément s’adapter dans un grand widget. Concentrez-vous sur une interaction utilisateur ou une information clé qui peut être exposée ici avec 1 cible tactile.

Moyenne

Le widget de taille moyenne offre plus d’espace par rapport au petit, ce qui permet d’inclure davantage de fonctionnalités ou d’informations supplémentaires. Le widget moyen peut également fournir la même expérience ciblée que le petit widget, mais fournir 2 à 3 cibles tactiles.

Grande

Les grandes tailles permettent de présenter plus d’informations, mais le contenu doit toujours être ciblé et facilement utilisable. Une carte de grande taille peut également mettre en évidence une image ou une rubrique et avoir une expérience plus immersive. La grande taille ne doit pas avoir plus de 3 à 4 cibles tactiles.

Couleur et thèmes

Trois modèles de widgets illustrant le thème de la lumière. Le premier est un widget vide sur fond blanc. Le deuxième est un widget vide avec un arrière-plan en dégradé clair. Le troisième est un widget sur fond d’image. Dans les trois cas, le mot « texte » est écrit dans une police foncée afin d’illustrer le contraste avec l’arrière-plan clair.

Trois modèles de widgets illustrant le thème sombre. Le premier est un widget vide sur fond noir. Le deuxième est un widget vide sur fond dégradé foncé. Le troisième est un widget sur fond d’image. Dans les trois cas, le mot « texte » est écrit dans une police de caractères claire afin d’illustrer le contraste avec l’arrière-plan sombre.

Windows 11 prend en charge deux modes de couleur : clair et sombre. Chaque mode se compose d’un ensemble de valeurs de couleur neutre qui sont automatiquement ajustées pour veiller à un contraste optimal. Pour chaque taille de widget que vous prenez en charge, veillez à créer des conceptions distinctes pour les thèmes clairs et sombres afin que le widget s’intègre en toute transparence au système d’exploitation plus large et au choix de thème de l’utilisateur. L’arrière-plan du widget prend en charge la personnalisation avec un arrière-plan clair/sombre, une teinte dégradée ou un arrière-plan d’image.

Deux exemples de widgets côte à côte. L’exemple de gauche présente un fond dégradé clair et un texte en police gris clair. L’image est marquée d’un X rouge pour indiquer que le faible contraste rend le texte illisible. L’image de droite présente un arrière-plan en dégradé clair et un texte dans une police noire foncée. L’image est marquée d’une coche verte pour indiquer que le contraste élevé rend le texte lisible.

Deux exemples de widgets côte à côte. L’exemple de gauche présente une image d’arrière-plan aux couleurs très saturées et un texte dans une police sombre. L’image est marquée d’un X rouge pour indiquer que le faible contraste rend le texte illisible. L’image de droite présente un arrière-plan de couleur désaturée et un texte dans une police noire foncée. L’image est marquée d’une coche verte pour indiquer que le contraste élevé rend le texte lisible.

Lorsque vous choisissez des couleurs d’arrière-plan, des images et du contenu, vérifiez qu’il existe suffisamment de contraste de couleurs pour garantir la lisibilité et l’accessibilité.

L’AA de niveau 2.0 des Web Content Accessibility Guidelines (recommandations en matière d’accessibilité du contenu web) exige un ratio de contraste d’au moins 4,5:1 pour un texte normal et de 3:1 pour un grand texte. WCAG 2.1 nécessite un rapport de contraste d’au moins 3:1 pour les composants graphiques et d’interface utilisateur (tels que les bordures d’entrée de formulaire). Le niveau AAA WCAG nécessite un rapport de contraste d’au moins 7:1 pour un texte normal et de 4,5:1 pour un grand texte. Un grand texte est défini sur 14 points (généralement 18,66 px) et en gras ou plus, ou 18 points (généralement 24 px) ou plus.

Marges

Schéma d’un widget avec des lignes directrices indiquant les marges. À côté, le diagramme d’un widget dont la zone située à l’intérieur des marges est colorée en bleu pour indiquer la zone de contenu.

Chaque widget a une marge de 16 px autour d’elle et une zone d’attribution de 48 px dans laquelle le contenu ne peut pas être placé. Le seul composant qui peut résider dans la marge de droite et la marge inférieure correspond aux points de pagination. Pour obtenir des exemples de positionnement des points de pagination, consultez la section pagination des Instructions relatives à la conception des interactions des widgets.

Deux exemples de widgets côte à côte. L’image de gauche montre des lignes directrices divisant le widget en trois colonnes, avec des gouttières de 4 pixels entre les colonnes. L’image de droite montre des lignes de guidage divisant le widget en trois lignes, illustrant des gouttières de 4 pixels entre les lignes.

Pour les widgets qui utilisent des conteneurs, la reliure entre chaque élément est de 4 px et les conteneurs doivent toucher les bords des marges. Votre contenu doit également utiliser des valeurs d’espacement et de dimensionnement de Multiples de quatre Px pour obtenir une conception propre et parfaite en pixels sur différentes résolutions d’écran.

Vous devez également consulter les conseils pour l’espacement et les reliures dans les Notions de base de la conception de contenu pour les applications Windows lors de la conception de votre contenu.

Typographie

Deux chaînes de la phrase « Voix ambiguë d’un cœur qui, au zéphyr, préfère les jattes de kiwis » côte à côte. Celle de droite a une police de caractères plus épaisse.

Un tableau montrant des exemples de texte pour différents types d’éléments d’un widget. Le tableau est recréé en texte brut sans l’aspect rendu dans le texte sous l’image.

Pour l’accessibilité, le tableau suivant présente le texte du tableau illustré dans l’image ci-dessus.

Exemple Taille / Hauteur de ligne Formule de cartes adaptatives
Caption 12/16 epx Petit, plus clair
Corps 14/20 epx Par défaut, plus clair
Corps (pour les liens hypertexte) 14/20 epx Par défaut, plus clair, accentuation
Corps fort 14/20 epx Valeur par défaut, plus gras
Corps grand 18/24 epx Moyen, plus clair
Corps Le plus grand 18/24 epx Moyen, plus gras
Subtitle 20/28 epx Grand, plus gras
Titre 28/36 epx Très grand, plus gras

L’interface utilisateur de Segoe est la police utilisée dans les widgets et dans Windows. La gamme de caractères ci-dessus inclut les formulations permettant de définir correctement les styles appropriés dans le Concepteur de cartes adaptatives. Le style de police ne doit pas s’écarter des formules spécifiées ci-dessus. Pour obtenir plus d’informations sur l’utilisation du Concepteur de cartes adaptatives pour créer des modèles de widget, consultez Créer un modèle de widget avec le Concepteur de cartes adaptatives.

Deux exemples de widgets avec la phrase « Voix ambiguë d’un cœur qui, au zéphyr, préfère les jattes de kiwis » et le texte « Hyperlien ». L’image de gauche présente un texte foncé sur un fond clair. L’image de droite présente un texte clair sur un fond sombre. Le texte de l’hyperlien est bleu dans les deux images.

Dans le Concepteur de cartes adaptatives, les titres et la copie du corps utilisent la couleur par défaut associée au thème du widget. Une option supplémentaire pour différencier davantage le titre de la copie du corps consiste à utiliser la version subtile de la couleur par défaut. La couleur d’accentuation est utilisée uniquement pour les liens hypertexte.

Iconographie

Images de profil

Quatre images de profil circulaires de taille décroissante de gauche à droite. Les images sont intitulées « 96 », « 48 », « 32 » et « 24 ».

Si votre widget inclut l’affichage des profils utilisateur (par exemple, un flux ou un stream de réseaux sociaux), utilisez l’une des tailles de profil de cercle autorisées suivantes : 96x96px, 48x48px, 32x32px ou 24x24px.

Info-bulles

Image d’un widget de calendrier montrant un rendez-vous. Le curseur de la souris survole l’objet du rendez-vous, qui est tronqué, et une info-bulle affiche l’objet complet.

Les info-bulles peuvent être utilisées lorsque le texte de titre est tronqué dans le widget. Pour de meilleures pratiques, le texte doit bien s’adapter à l’espace du widget et ne pas avoir besoin d’une troncation, mais il est possible que cela ne se produise pas toujours en fonction de scénarios tels que la localisation de la langue, la mise à l’échelle du texte système ou lors de la citation d’un élément (par exemple, le titre de l’article, le nom d’une chanson). Cela ne s’applique pas au corps du texte d’un widget.