Applications de shopping
Le livre de conception d’application d’achat décrit une application d’achat fictive pour Windows 8.1. Pour la conception de votre propre application d’achat, inspirez-vous des scénarios de cette rubrique et de la manière dont le langage de conception Microsoft est utilisé dans l’application.
Exemple de code disponible : Tallan Inc. a créé un exemple d’application réussi basé sur le guide de conseils de l’application d’achat. Vous pouvez télécharger leur exemple d’application pour afficher une implémentation réelle des fonctionnalités décrites dans ce guide de conseils et bien plus encore. Téléchargez l’exemple d’application d’achat de Tallan ici.
Scénarios d’application d’achat
L’application d’achat décrite dans cette rubrique utilise les fonctionnalités de conception Microsoft pour créer une expérience d’achat attrayante pour les utilisateurs.
| Vignettes dynamiques et navigation | Recherche et redimensionnement de fenêtre | Partage |
.png "image de vignettes dynamiques et de la navigation") |
.png "image de la recherche") |
.png "image de partage") |
Susciter l’intérêt des utilisateurs dans le contenu de votre application
Utilisez le langage de conception Microsoft pour créer une expérience de navigation informelle amusante, simple et puissante. Servez-vous également des vignettes dynamiques de votre application pour susciter l’intérêt des utilisateurs. Poursuivez ce scénario pour découvrir comment rendre votre application d’achat attrayante.
.png "image de vignettes dynamiques et de la navigation")
Matt Berg utilise sa tablette Windows 8.1 dans le bus qui le ramène à la maison en rentrant du bureau.
|
Une vignette dynamique indiquant « Nouvel arrivage » alerte Matt de l’arrivage d’une nouvelle collection de mode d’automne. Il est intéressé et clique alors sur la vignette pour accéder à l’application.
|
Il a besoin d’une nouvelle veste et clique par conséquent sur la catégorie « Manteaux ».
|
La vue de la catégorie est disposée horizontalement avec une vue détaillée de toutes les options affichées sur le même Canvas. Matt peut naviguer sans devoir parcourir aucune hiérarchie de contenu.
|
Matt effectue un pincement pour activer le zoom sémantique, ce qui lui permet de visualiser et de parcourir rapidement la liste d’articles.
|
Après avoir cliqué sur la section « Vestes », Matt sélectionne une veste pour la visualiser dans la vue de l’article et l’ajoute à son panier.
|
Matt termine ses achats en achetant la veste ainsi qu’une chemise ajoutée précédemment à son panier.
|
.png "image de vignettes dynamiques et de la navigation")
.png "image de vignettes dynamiques et de la navigation")
.png "image de vignettes dynamiques et de la navigation")
.png "image de vignettes dynamiques et de la navigation")
.png "image de vignettes dynamiques et de la navigation")
.png "image de vignettes dynamiques et de la navigation")
.png "image de vignettes dynamiques et de la navigation")
Résumé du scénario de vignettes dynamiques et de navigation
Dans ce scénario, nous décrivons des cas d’utilisation qui tirent parti des éléments de conception suivants :
- Les vignettes dynamiques font revenir les utilisateurs vers l’application en affichant des informations qui sont pertinentes pour l’utilisateur.
- Votre contenu ressort sans chrome dans votre application et permet aux utilisateurs de se plonger dans leur expérience favorite.
Pour plus d’informations sur les vignettes dynamiques et le zoom sémantique, voir :
- Recommandations en matière de vignettes dynamiques
- Exemple de vignette dynamique
- Recommandations en matière de zoom sémantique
- Exemple de zoom sémantique (C#/VB/C++)
- Exemple de zoom sémantique (JavaScript)
Pour vous aider à choisir le meilleur modèle de navigation pour votre application, voir Modèles de navigation.
Voir le Modèle de navigation plat en action dans le cadre de notre série Fonctionnalités d’application de A à Z.
Susciter l’engagement de l’utilisateur
Vous pouvez utiliser le langage de conception Microsoft pour attirer les utilisateurs quand ils sont prêts à acheter en ajoutant une zone de recherche, en implémentant le contrat de recherche et en leur permettant d’effectuer plusieurs tâches en même temps, et en concevant des applications qui fonctionnent bien même en largeur étroite.
.png "image de vignettes dynamiques et de la navigation")
John Rodman utilise sa tablette Windows 8.1 pour naviguer sur un blog de mode.
|
À partir d’Internet Explorer ou de toute autre application, John peut afficher l’icône de droite et rechercher une veste similaire.
|
|
John sélectionne l’application « De pied en cap » qui affiche les résultats de sa recherche pour le terme « Veste ».
|
John se sert d’un filtre pour réduire les résultats de la recherche en fonction du prix. Il sélectionne alors un article.
|
John redimensionne l’application sur la gauche afin de comparer l’article avec la veste du blog. John étant satisfait de son choix, il l’ajoute au panier.
|
Toujours en largeur étroite, John décide de terminer ses achats.
|
.png "image de vignettes dynamiques et de la navigation")
.png "image de vignettes dynamiques et de la navigation")
.png "image de vignettes dynamiques et de la navigation")
.png "image de vignettes dynamiques et de la navigation")
.png "image de vignettes dynamiques et de la navigation")
.png "image de vignettes dynamiques et de la navigation")
.png "image de vignettes dynamiques et de la navigation")
Résumé du pilotage de l’engagement de l’utilisateur
Dans ce scénario, nous décrivons des cas d’utilisation qui tirent parti des éléments de conception suivants :
- Le contrat de recherche place votre application dans la liste cible potentielle quand votre client décide de faire des achats.
- Une application qui fonctionne correctement en largeur étroite permet aux clients de naviguer et de comparer le contenu avec d’autres applications et sites web.
Pour plus d’informations sur la recherche et les tailles de fenêtre, voir :
- Recommandations en matière de recherche
- Exemple de recherche
- Recommandations en matière de tailles de fenêtre
- Recommandations en matière de disposition étroite
Se connecter grâce au partage
Le langage de conception Microsoft vous permet de connecter les utilisateurs à n’importe quelle autre application, contact ou réseau social.
.png "image de vignettes dynamiques et de la navigation")
David Hamilton vient juste d’acheter une veste. Après avoir commandé, il est sollicité pour partager les nouvelles.
|
Il utilise le contrat de partage afin de faire profiter ses amis du code promotionnel.
|
.png "image de vignettes dynamiques et de la navigation")
.png "image de vignettes dynamiques et de la navigation")
Résumé de la connexion des utilisateurs grâce au partage
Dans ce scénario, nous décrivons des cas d’utilisation qui tirent parti des éléments de conception suivants :
- Que vous pouvez transformer votre contenu en source de partage et Windows 8.1 vous connecte à d’autres applications, messageries et réseaux sociaux.
- Que vous pouvez transformer votre application en cible de partage et recevoir du contenu, des liens ou tout autre type de données structurées.
Pour plus d’informations sur le partage, voir :
Rubriques associées
Découvrir les applications du Windows Store
Recommandations en matière d’expérience utilisateur pour les applications du Windows Store
Recommandations en matière de vignettes dynamiques
Exemple de zoom sémantique (C#/VB/C++)
Exemple de zoom sémantique (JavaScript)
Recommandations en matière de zoom sémantique
Recommandations en matière de recherche
Recommandations en matière de tailles de fenêtre