Création d'une expérience utilisateur optimale en matière de vignettes (première partie)

Blog des développeurs d'applications Windows 8

Indications sur la conception d'applications de style Metro pour Windows 8, par l'équipe d'ingénierie de Windows 8

Création d'une expérience utilisateur optimale en matière de vignettes (première partie)

  • Comments 0

L'utilisation de vignettes dynamiques est une solution idéale pour inciter les utilisateurs à utiliser fréquemment votre application. Dans ce billet, nous expliquons comment mettre à jour la vignette dynamique de votre application à l'aide d'API d'interrogation et d'API locales, afin de présenter les avantages offerts par votre application directement dans l'écran d'accueil de Windows 8. Votre vignette met ainsi en avant les activités les plus intéressantes liées à votre application. La vignette fait partie intégrante de votre application et dans bien des cas, il s'agit même du composant le plus visible. Aussi, n'hésitez pas à exploiter la vignette pour inciter les utilisateurs à accéder le plus souvent possible à votre application !

Tout au long de ce billet, je vais utiliser un exemple d'application pour vous montrer comment :

  1. concevoir des mises à jour pour vos vignettes ;
  2. choisir des modèles adaptés au contenu de la vignette ;
  3. utiliser des notifications d'interrogation à partir du cloud, afin de mettre à jour la vignette lorsque l'application n'est pas en cours d'exécution ;
  4. mettre à jour la vignette lorsque l'application est en cours d'exécution, à l'aide de la bibliothèque NotificationsExtensions incluse dans le SDK (voir l'exemple de vignettes et de badges d'application avec le SDK Windows 8).

Présentation de l'application Contoso Food Trucks

Étudions ensemble un exemple d'application : Contoso Food Trucks. Cette application permet aux utilisateurs d'obtenir des informations sur les restaurants ambulants. Nous avons déjà présenté cette application dans l'étude de cas consacrée à la conversion d'un site Web en application de style Metro. Dans ce billet, je vous explique comment ajouter des vignettes dynamiques à votre application.

L'application Food Trucks, parmi les nombreuses vignettes de l'écran d'accueil

Quels sont les principaux avantages de votre application ?

En évaluant précisément les avantages offerts par votre application, vous pouvez déterminer le contenu à afficher dans la vignette, ainsi que la fréquence de mise à jour.

Le principal intérêt de l'application Contoso Food Trucks est qu'elle permet aux utilisateurs de trouver et de suivre leurs restaurants ambulants préférés, mais aussi d'en découvrir de nouveaux. Aussi, j'ai fixé les objectifs suivants pour la vignette de cette application :

  • Elle doit indiquer les restaurants ambulants situés à proximité d'un lieu donné.
  • Elle doit permettre de retrouver les restaurants ambulants préférés de l'utilisateur.

Vous ne devez pas utiliser la vignette de votre application comme emplacement publicitaire. Conformément aux conditions du Windows Store, dans la plupart des cas, vous n'êtes pas autorisé à afficher des publicités dans la vignette.

Vignette par défaut et taille de la vignette

Chaque application possède une vignette par défaut. Il s'agit de la vignette affichée lors de la première installation de l'application. Le logo de la vignette par défaut correspond au logo de l'application ou à celui d'une autre marque permettant à l'utilisateur d'identifier facilement l'application.

Vous devez définir le logo de la vignette par défaut dans le manifeste de l'application. Windows affiche ce logo jusqu'à ce que la vignette soit actualisée pour la première fois. En l'absence de notification, la vignette peut réafficher l'image par défaut, par exemple lorsque la notification de vignette active expire ou lorsque l'utilisateur désactive l'actualisation de la vignette dynamique pour cette application.

Les images de la vignette par défaut définissent également les tailles de vignette acceptées. Deux formats sont disponibles : carré ou large. Toutes les applications doivent prendre en charge une vignette carrée et éventuellement une vignette large. Si aucun logo large n'est fourni pour la vignette par défaut, la vignette ne peut pas être redimensionnée en vignette large, et elle ne peut donc pas recevoir des notifications de vignette élargie. Si l'application inclut un logo élargi, par défaut Windows affiche la vignette au format large.

Dans le cas de notre application Contoso Food Trucks, j'ai choisi de prendre en charge les vignettes élargies, parce que j'actualise la vignette au moins une fois par jour et que le contenu fourni par l'application a besoin d'un de place supplémentaire. Voici les images utilisées pour les logos de la vignette par défaut :

Vignette rectangulaire, intitulée Contoso Food Trucks, et vignette carrée plus petite, intituée Food Trucks, présentant un grand logo sur lequel figure un camion

Les deux formats de vignettes peuvent recevoir des notifications. Lorsque j'envoie des notifications, j'inclus systématiquement une version carrée et une version large. Ainsi, si un utilisateur réduit la taille de la vignette, il continue à voir les données mises à jour.

Pour en savoir plus sur la création d'une image par défaut pour votre application, consultez l'article suivant : Démarrage rapide : création d'une vignette par défaut à l'aide de l'éditeur de manifeste de Microsoft Visual Studio 11. Vous trouverez des détails supplémentaires sur les concepts liés à la taille des vignettes dans la présentation des vignettes et des notifications.

Conception des mises à jour pour les vignettes

Signalement des restaurants ambulants situés à proximité

L'un des avantages de notre application est qu'elle permet aux utilisateurs de choisir un restaurant ambulant. Par conséquent, nous devons savoir quels restaurants ambulants se trouvent à proximité. Pour cela, notre application permet à l'utilisateur de définir le lieu par défaut où il prend ses repas. Une fois que l'utilisateur a défini ce lieu, nous lui indiquons quels restaurants ambulants se trouvent à proximité. Pour mettre à jour cette vignette, j'ai choisi un modèle sans image.

Les vignettes étant actualisées en adaptant le contenu de l'application à des modèles définis par le système, notre première tâche consiste à choisir un modèle adapté à notre contenu. Après consultation du catalogue de modèles disponibles dans le Centre de développement (voir Sélection d'un modèle de vignette), j'ai choisi le modèle TileWideText01 pour la vignette large. Pour la vignette carrée, j'ai opté pour le modèle TileSquareText03 . J'ai choisi ces deux modèles basés uniquement sur du texte, parce que j'actualise uniquement les chaînes de texte figurant sur la vignette.

J'ai utilisé l'exemple de vignettes et de badges d'application créés avec le SDK Windows 8 pour essayer différentes possibilités de modèles avant de prendre une décision. Les exemples me permettent d'essayer facilement différentes chaînes et différentes images avant de définir l'apparence définitive de la vignette. Par exemple, en testant les modèles de l'exemple, j'ai compris que je devais utiliser le nom abrégé de l'application dans le modèle carré, de façon à ce que le texte ne soit pas tronqué.

La vignette large rectangulaire affiche les informations suivantes : restaurants ambulant à proximité / Nom Nom Barbecue Truck / Sushi Truck / Macaroni Makin' Wagon    La vignette carrée affiche les informations suivantes : À proximité / Nom Nom / Sushi Truck

Les mises à jour des vignettes sont créées en envoyant une notification. Une notification n'est plus ni moins qu'un fragment de code XML adapté au schéma de la vignette. Vous pouvez créer ce code XML à l'aide de la fonction TileUpdateManager.getTemplateContent() ou de la bibliothèque NotificationsExtension, que j'évoquerai plus en détail dans la deuxième partie de ce billet. La notification indique le modèle de vignette à utiliser pour le rendu de la notification, ainsi que le texte et les images à afficher sur la vignette, en fonction de la disposition du modèle.

Pour créer les mises à jour de vignette indiquée ci-dessus pour notre application Food Trucks, j'ai utilisé le code XML suivant :

Code XML de vignette

<?xml version="1.0" encoding="utf-8" ?>
<tile>
<visual>
<binding template="TileWideText01">
<text id="1">Food Trucks Near You</text>
<text id="2">Nom Nom Barbecue Truck</text>
<text id="3">Sushi Truck</text>
<text id="4">Macaroni Makin' Wagon</text>
</binding>
<binding template="TileSquareText03">
<text id="1">Near You</text>
<text id="2">Nom Nom</text>
<text id="3">Sushi Truck</text>
</binding>
</visual>
</tile>

Ce code XML contient deux éléments <binding> : un pour la vignette carrée et un autre pour la vignette large. Comme notre application prend en charge les vignettes larges, je fournis systématiquement les liaisons de modèle pour la vignette large et la vignette carrée dans chaque notification de vignette. Ainsi, la vignette affiche toujours le contenu mis à jour par la notification, quelle que soit la taille de vignette choisie par l'utilisateur. La vignette carrée affiche seulement deux restaurants ambulants, car le format carré ne permet pas d'en afficher trois.

Restaurants ambulants préférés

Je souhaite que dans notre application, les utilisateurs puissent savoir où se trouvent leurs restaurants ambulants préférés. J'aimerais que les utilisateurs puissent avoir accès à ces informations directement dans la vignette. Dans mon cas, les informations tiennent sur deux petites lignes de texte. Je possède également des images représentant chaque restaurant ambulant, ce qui permet d'améliorer l'apparence de la vignette.

Les vignettes étant actualisées en adaptant le contenu de l'application à des modèles définis par le système, notre première tâche consiste à sélectionner le modèle adéquat. Après consultation du catalogue de modèles disponibles dans le Centre de développement (voir Sélection d'un modèle de vignette), j'ai choisi le modèle TileWideImageAndText02 pour la vignette large. Il permet d'afficher une image et deux courtes chaînes de texte. Pour la vignette carrée, j'ai opté pour le modèle TileSquarePeekImageAndText04, qui permet d'afficher à la fois une image et du texte. Les modèles d'aperçu me permettent d'afficher plus de contenu que ce qu'il est possible d'afficher dans la vignette standard. Windows anime les modèles d'aperçu pour afficher à la fois l'image et le texte que je place dans le modèle au sein de la vignette carrée. Ainsi l'image du haut et l'image du bas de la vignette carrée sont affichées en alternance sur la vignette. Le contenu d'une vignette d'aperçu défile verticalement dans l'espace de la vignette, de façon à afficher l'intégralité du contenu fourni.

Image présentant un filet de viande sur un grill, un camion, ainsi qu'un texte de mise à jour : Nom Nom Barbecue Truck, place Jean Jaurès, jusqu'au 3    Image présentant un filet de viande sur un grill, un camion, ainsi qu'un texte de mise à jour : Nom Nom @ place Jean Jaurès, jusqu'au 3

Code XML de vignette

<?xml version="1.0" encoding="utf-8" ?>
<tile>
<visual>
<binding template="TileWideImageAndText02">
<image id="1" src="http://www.contoso.com/foodtrucks/nomnombbq.png"/>
<text id="1">Nom Nom Barbecue Truck</text>
<text id="1">Washer Ave and 3rd until 3</text>
</binding>
<binding template="TileSquarePeekImageAndText04">
<image id="1" src=" http://www.contoso.com/foodtrucks/nomnombbq-square.png"/>
<text id="1">Nom Nom @ Washer Ave and 3rd until 3</text>
</binding>
</visual>
</tile>

Comme indiqué précédemment, j'ai déterminé les informations recherchées par la vignette en utilisant une notification définie sous forme de charge utile XML. Par rapport à ma première vignette, celle-ci présente une différence : cette fois-ci, j'utilise des images dans la notification. Les images figurant dans les notifications ne sont pas incluses dans la charge utile XML : seules des références à d'autres emplacements figurent dans la charge utile. Les images peuvent être stockées dans un service Web ou sur l'ordinateur local, comme dans notre exemple. Lorsque Windows reçoit la notification, il télécharge les images auprès du service Web au moment d'afficher la notification à l'utilisateur. Vous trouverez des informations supplémentaires sur l'insertion d'images dans une vignette dans l'article du Centre de développement intitulé Procédure d'ajout d'images à modèle de vignette.

La taille des images est limitée, aussi bien en résolution qu'en taille de fichier. Les notifications des vignettes ne s'afficheront pas si les images sont trop grandes. Par conséquent, utilisez des images respectant ces limites. Sachez également que seules les images JPG et PNG sont acceptées dans les vignettes. Pour en savoir plus sur l'insertion d'images dans votre vignette, consultez l'article Taille des images de vignette dans le Centre de développement.

À suivre...

Maintenant que nous savons à quoi nos vignettes doivent ressembler, nous devons déterminer quand les actualiser. Dans la deuxième partie de ce billet, nous examinerons ensemble comment ajouter des mises à jour par interrogation et des mises à jour de vignette locales à l'application Contoso Food Trucks. Je vous montrerai comment rechercher les mises à jour des vignettes à partir de votre application et je présenterai un exemple en ASP.NET et PHP qui permet de créer un service Web pour l'interrogation. J'expliquerai également comment ajouter une vignette secondaire à l'application et comment la mettre à jour en utilisant la bibliothèque NotificationsExtension. D'ici là, j'espère que ce billet vous aidera à mieux comprendre comment vous pouvez enrichir votre application au moyen d'une vignette dynamique.

-- Kevin Michael Woley, chef de projet, Windows

Je remercie tout particulièrement Tyler Donahue et Nazia Zaman, qui m'ont aidé à élaborer ce billet.

  • Loading...
Leave a Comment
  • Please add 3 and 3 and type the answer here:
  • Post