Applications Windows
Réduire la table des matières
Développer la table des matières

Développer des applications du Windows Store performantes

Dans Windows 8, les applications du Windows Store sont le point focal de l’expérience utilisateur. Les applications du Windows Store réussies ont en commun un ensemble de caractéristiques qui offrent à l’utilisateur une expérience cohérente, engageante et convaincante. Vous découvrez ici les 8 caractéristiques des applications du Windows Store réussies.

Applications du Windows Store

Regarder la vidéo

Cette vidéo vous explique en quoi l’utilisation des principes du style de conception Microsoft vous aide à créer des applications convaincantes. Après avoir regardé la vidéo, lisez un résumé des différents éléments qui constituent une application du Windows Store réussie.

|

Tirer parti du style de conception Microsoft

Le contenu est la clef de voûte d’une application du Windows Store. Il est donc fondamental que vous privilégiiez la création de contenu par rapport au chrome lorsque vous concevez des applications du Windows Store. Le reste, c’est-à-dire l’interface qui contribue à la présentation du contenu et à l’interaction avec celui-ci, est accessoire.

Présentation du contenu

Concevez l’interface utilisateur de votre application pour promouvoir votre contenu, et rendez accessible votre interface utilisateur pour les utilisateurs souffrant de handicaps.

Une disposition claire et ouverte

  • Minimisez les distractions et favorisez l’immersion des utilisateurs dans le contenu en affichant uniquement les éléments les plus appropriés à l’écran.
  • Pour aérer votre contenu, supprimez les lignes, les boîtes et les effets graphiques inutiles comme les flous et les dégradés. Utilisez l’espace ouvert pour encadrer le contenu.
  • Limitez le chrome de navigation constamment affiché à l’écran, notamment les onglets. Donnez aux utilisateurs la possibilité de consacrer leur attention sur le contenu et évitez de les distraire avec le chrome de navigation.

Effacer la hiérarchie d’informations   Le langage de conception Microsoft repose sur une typographie claire et attrayante qui permet aux utilisateurs de comprendre la hiérarchie du contenu. Utilisez la typographie proposée à la place des lignes et des boîtes traditionnelles pour établir la structure et la hiérarchie de votre contenu.

  • Configurez la taille, l’épaisseur et la couleur de votre texte de manière uniforme pour transmettre à l’utilisateur des informations sur l’importance des différentes sections de contenu. Le jeu de variations doit être restreint afin de permettre aux utilisateurs de voir facilement la place qu’occupe le contenu dans la hiérarchie globale. Voir Instructions relatives au texte et à la typographie.
  • Utilisez la feuille de style par défaut pour obtenir la gamme des types prédéfinis pour votre texte.

Silhouette Windows  Lorsque les utilisateurs portent leur attention sur le contenu, la composition de ce contenu forme l’identité de l’application. Une silhouette familière permet aux utilisateurs d’identifier de manière instinctive votre application comme une application du Windows Store (par opposition à une page Web par exemple).

  • Adhérez à la silhouette Windows pour donner aux utilisateurs un sentiment de familiarité et une certaine assurance.
  • Commencez par les modèles de projet Grille ou Fractionner de Visual Studio pour obtenir la disposition désirée. Voir les instructions concernant les Modèles de projet JavaScript pour les applications du Windows Store dans Visual Studio.

Interaction avec le contenu

Utilisez des interactions grâce auxquelles l’utilisateur peut garder, en toute confiance, le contrôle du contenu.

Interactions directes  Une interaction directe avec le contenu, sans chrome intermédiaire, est pour les utilisateurs la méthode d’interaction la plus naturelle.

  • Dans la mesure du possible, donnez aux utilisateurs la possibilité d’effectuer des actions en manipulant directement le contenu (par opposition à des manipulations indirectes à l’aide de contrôles).

    Par exemple, laissez aux utilisateurs le soin d’appuyer sur un élément pour afficher plus de détails, de le faire glisser latéralement pour le sélectionner, de le déplacer librement ou encore d’effectuer un zoom arrière pour voir le contexte dans son intégralité—au lieu d’ajouter des boutons à l’écran pour effectuer ces actions.

  • Exploitez le zoom sémantique pour mettre en place un moyen de navigation rapide, fluide et axé sur le contenu pour parcourir une longue liste de contenu.
  • Gardez à l’esprit la manière dont les lecteurs d’écran qui dépendent des claviers interagissent avec le contenu.

Tirer parti du bord   Il arrive que certaines actions ne puissent pas être accomplies par manipulation directe. Pour celles-ci, affichez des commandes contextuelles, uniquement en cas de nécessité, pour éviter d’encombrer votre canevas. Exploitez le bord d’écran ou du périphérique pour que les utilisateurs puissent aisément trouver les commandes.

  • Placez les commandes dans la barre de l’application. Vous pouvez l’afficher à la demande lorsque l’utilisateur effectue un mouvement de balayage à partir du bord haut ou bas, puis la faire disparaître une fois que l’utilisateur a terminé son action.
  • Tirez parti des icônes, que vous pouvez afficher à la demande lorsque l’utilisateur effectue un mouvement de balayage à partir du bord droit, pour appeler les icônes Rechercher, Partager, Périphériques ou Paramètres.
  • Évitez de laisser des commandes constamment affichées à l’écran et pensez à ne pas afficher des points d’entrée en double pour les contrats qui sont accessibles au moyen d’icônes.
  • Concevez votre application en donnant la priorité au confort de l’utilisateur, et placez les surfaces d’interaction fréquemment utilisées près des bords.

Pour plus d’informations, voir Conception des commandes.

Rapidité et fluidité

Répondez rapidement aux actions de l’utilisateur avec une énergie équivalente.

Animations utiles  

Le mouvement fait partie intégrale du langage de conception Microsoft. Avec des animations bien faites, vos applications prennent vie et donnent la sensation d’un travail soigné.

  • Utilisez des animations utiles pour lier visuellement des expériences et raconter une histoire. Dans une interface fluide, le contenu arrive et repart en toute transparence.
  • Tirez profit des animations de la bibliothèque d’animations, celles-ci étant conçues pour des scénarios spécifiques, pour transmettre des informations. Utilisez des mouvements familiers pour renforcer les concepts, faire comprendre aux utilisateurs ce qui les attend et leur conférer un sentiment de confiance. Pour obtenir des instructions concernant les animations, voir la section Animation de votre interface utilisateur.
  • Lorsque vous utilisez des animations pour communiquer des informations importantes, veillez à proposer une autre manière accessible pour véhiculer les informations.

Le tactile au centre de la conception  

Les applications du Windows Store sont avant tout conçues pour être tactiles. Elles permettent aux utilisateurs de se servir de leurs mains et de leurs doigts de la manière la plus naturelle qu’il soit, avec un accent sur le confort et l’ergonomie.

  • En adoptant le langage tactile de Windows 8, vous pouvez recourir au jeu de mouvements recommandés pour permettre aux utilisateurs de manipuler le contenu de manière naturelle et cohérente. Pour plus d’informations, voir Conception de l’interaction tactile.
  • Laissez le contenu suivre directement vos doigts. Ne vous limitez pas aux appuis et utilisez des interactions par balayage, comme le zoom sémantique, pour permettre aux utilisateurs de naviguer dans le contenu et d’interagir avec celui-ci rapidement et sans effort.
  • Pensez à fournir aux utilisateurs un retour visuel immédiat pour qu’ils puissent avoir confirmation qu’ils ont bien appuyé sur la cible visée. Veillez à ce que les interactions soient réversibles, et validez uniquement une action lorsque l’utilisateur ne s’en préoccupe plus, et ce afin d’autoriser les erreurs et d’encourager l’exploration.
  • Ne séparez pas l’interaction tactile de l’interaction à la souris.
  • En termes d’accessibilité, veillez à ce que tous les éléments interactifs soient accessibles par programme. Pour en savoir plus, voir Rendre accessibles les événements tactiles et Vérifier les scénarios d’application principaux à l’aide du Narrateur.

Contrôles intégrés  

Exploitez les contrôles intégrés pour générer des animations fluides, séduisantes et cohérentes tout en bénéficiant de comportements optimisés pour l’interaction tactile. Voici quelques exemples :

  • La sélection par mouvement de balayage (balayage latéral) est intégrée au contrôle ListView. Vous pouvez également l’étendre au moyen du zoom sémantique pour permettre aux utilisateurs de naviguer de manière rapide et fluide dans une longue liste. Voir les instructions concernant le contrôle ListView.
  • Le contrôle FlipView permet aux utilisateurs d’effectuer des glissements pour se déplacer entre des éléments. Il intègre des animations de transition.
  • Les contrôles de type bouton, bascule, case à cocher, case d’option, évaluation et curseur fournissent un retour visuel lorsque les utilisateurs appuient dessus. L’action est uniquement validée lorsque le contrôle est relâché. Les utilisateurs peuvent également annuler leur action en effectuant un glissement. Voir les instructions concernant les contrôles de type bouton, bascule, case à cocher, case d’option, sélecteur de date et d’heure, évaluation et curseur.

Souvenez-vous que les contrôles intégrés sont accessibles par défaut, ce qui peut réduire le coût de développement d’une application accessible. Pour obtenir la liste des contrôles intégrés, voir les instructions détaillées concernant l’expérience utilisateur.

S’adapter à toutes les tailles

Créez une expérience mémorable sur chaque facteur de forme et chaque option d’affichage pour vos utilisateurs.

Mise à l’échelle sur plusieurs facteurs de forme   Votre application a le potentiel d’être utilisée sur des centaines de millions de PC exécutant Windows 8. Ces PC sont équipés d’écrans de tailles et de résolutions variées, allant des <tablettes de 10 pouces aux >écrans de 27 pouces.

  • Utilisez au mieux l’espace à l’écran en tirant parti de la prise en charge de la disposition fluide intégrée aux contrôles de plateforme. Par exemple, le contrôle ListView réorganise automatiquement le contenu selon l’espace disponible.
  • La plateforme fournit une mise à l’échelle automatique basée sur la taille et la résolution de l’écran du périphérique. Fournissez 3 tailles de ressources ou utilisez des graphiques SVG (Scalable Vector Graphics) pour veiller à ce que votre application ait toujours une apparence impeccable et soignée. Voir les instructions concernant la mise à l’échelle en fonction des écrans et les instructions concernant la mise à l’échelle en fonction de la densité des pixels.
  • Gardez à l’esprit que l’activation de Agrandir tout ce qui se trouve à l’écran dans les Options d’ergonomie réduit efficacement la résolution en cours. Vous devez donc vous assurer que l’ensemble de l’interface utilisateur est encore visible et utilisable. Pour en savoir plus, voir Vérifier votre application avec l’option « Agrandir tout ce qui se trouve à l’écran ».
  • Utilisez le simulateur dans Microsoft Visual Studio pour voir à quoi ressemblera votre application sur différents facteurs de forme.

Conception pour différentes tailles de fenêtre  Les utilisateurs sont naturellement enclins au multitâche et ils peuvent exécuter plusieurs applications côte à côte. Les utilisateurs peuvent redimensionner sans cesse les applications à une échelle inférieure jusqu’à une largeur minimale. La largeur minimale par défaut est de 500 pixels. Si votre application fonctionne bien à plus petite échelle et si vous voulez encourager les utilisateurs à garder votre application à l’écran, vous pouvez ramener la largeur minimale à 320 pixels. Voir les Recommandations sur les tailles fenêtre.

  • Concevez votre application de manière à fluidifier le réaffichage de son contenu afin qu’elle reste conviviale et fonctionnelle quelle que soit sa taille, jusqu’à la largeur minimale. Conservez le contexte des utilisateurs lorsqu’ils redimensionnent l’application.
  • Assurez-vous que les contrôles de votre application, tels que la barre des applications, la barre de navigation, les boîtes de dialogue et les menus volants s’affichent à la taille minimale.

Utiliser les bons contrats

Les contrats sont le ciment qui lie les applications du Windows Store entre elles et à l’interface utilisateur du système. Deux applications ayant implémenté le même contrat peuvent fonctionner ensemble pour mener à bien un scénario important ou complexe.

  • Pour certains des contrats les plus courants, comme la recherche, le partage et les sélecteurs de fichiers, commencez par les modèles d’élément Visual Studio correspondants.
  • Utilisez les icônes pour créer un modèle d’invocation cohérent en qui les utilisateurs peuvent avoir entièrement confiance. Évitez de créer une interface utilisateur secondaire sur le canevas de l’application pour appeler les contrats, car cela pourrait prêter à confusion.
  • Voir la liste complète des contrats d’application.

Partage   Les contrats de partage permettent aux utilisateurs de partager les données d’une application avec une autre application. Une application source fournit des éléments à partager, tandis qu’une application cible reçoit le contenu partagé grâce à un jeu de formats de données communs. Voir les instructions concernant le partage du contenu.

  • Nous vous recommandons de configurer chaque application en tant que source de partage et d’implémenter le plus grand nombre de formats possible.
  • Les applications qui publient, stockent ou transforment des données partagées sont particulièrement aptes à être des cibles de partage. Citons en exemple les applications de communications, celles en rapport avec les réseaux sociaux et celles qui sont connectées à des périphériques.

Recherche   Le contrat de recherche et le contrôle SearchBox intégré à l’application permettent aux utilisateurs d’effectuer des recherches sur le contenu d’une application où qu’ils se trouvent dans Windows. Les résultats sont fournis par l’application et sont affichés dans sa propre interface utilisateur ou dans le volet de recherche globale. Voir les Recommandations et liste de vérification sur la recherche.

  • Si la recherche fait partie intégrante de votre application, utilisez le nouveau contrôle SearchBox. Si la recherche est utile pour votre application mais n’en constitue pas un élément central, utilisez l’icône Rechercher et le contrat.
  • Vous pouvez utiliser le contrat de recherche avec le contrôle SearchBox pour permettre l’activation à partir de la recherche globale.
  • Si des utilisateurs doivent rechercher votre application pour commencer à l’utiliser, ajoutez un glyph de recherche à la zone de dessin de votre application.
  • Améliorez la page des résultats de recherche de votre application en permettant aux utilisateurs de définir des filtres et des étendues pour affiner le jeu des résultats de la recherche.
  • Indiquez pourquoi un résultat de recherche correspond à la requête grâce à la nouvelle API de surligneur d’éléments correspondants.

Sélecteurs de fichiers     Les contrats de sélecteur de fichiers permettent aux utilisateurs d’accéder au contenu d’une application à partir d’une autre application. Lorsque le sélecteur de fichiers est appelé, les utilisateurs peuvent parcourir et sélectionner des fichiers à partir du stockage local ou d’une autre application qui prend en charge le contrat du sélecteur de fichiers. Voir les instructions concernant les sélecteurs de fichiers.

  • Utilisez ce contrat si votre application accède à des fichiers ou stocke des fichiers qui peuvent être utiles aux utilisateurs à partir d’un autre contexte.
  • Utilisez le contrôle ListView pour bénéficier de la disposition fluide et du comportement de sélection intégrés.

Créer une vignette accrocheuse

Une vignette est la vitrine d’une application. Présente sur l’écran d’accueil, elle constitue une extension de l’application et peut fournir des informations plus personnelles et plus engageantes qu’une icône traditionnelle. Réfléchissez bien à l’apparence de la vignette de votre application pour susciter l’intérêt des utilisateurs. Voir les instructions concernant les vignettes.

  • Personnalisez le contenu affiché sur la vignette en fonction des utilisateurs et maintenez-le à jour pour refléter toute modification apportée. De nombreux modèles de vignette préconçus sont disponibles. Sélectionnez celui qui correspond le mieux à votre type de contenu.
  • Faites référence au contenu qui réside sur la page d’accueil de votre application de manière à ce que les utilisateurs puissent y accéder facilement une fois l’application lancée.
  • Utilisez des vignettes secondaires pour permettre aux utilisateurs de placer des sous-sections dignes d’intérêt et fréquemment mises à jour du contenu de votre application sur leur écran d’accueil. Voir les instructions concernant les vignettes secondaires.

Proposer des informations connectées et dynamiques

Fournissez du contenu actualisé par le biais de vignettes dynamiques et de notifications pour que les utilisateurs se sentent connectés à votre application. Les vignettes dynamiques et les notifications utilisent la même infrastructure et peuvent être mises à jour à tout moment à l’aide des services de notifications Push Windows, soit localement lorsque l’application est en cours d’exécution, soit à une heure planifiée au préalable.

Vignettes dynamiques   Pour susciter continuellement l’intérêt des utilisateurs, placez du contenu dynamique, approprié et personnalisé sur la vignette de votre d’application. Le contenu actualisé donne aux gens une bonne raison de placer la vignette en bonne position sur l’écran d’accueil et de lancer souvent l’application.

  • Une vignette dynamique peut faire défiler jusqu’à 5 mises à jour. Par exemple, la vignette dynamique d’une application d’actualités peut faire défiler plusieurs articles chaque jour.
  • Le contenu affiché dans les mises à jour dynamiques doit être accessible à partir de la page d’accueil de votre application. Supprimez les notifications périmées si elles ne sont plus d’actualité ou lorsqu’il n’est plus possible d’y accéder à partir de la page d’accueil.
  • Utilisez des badges pour afficher des informations numériques ou des glyphes simples.

Notifications   Les applications peuvent utiliser des notifications pour afficher brièvement des messages ponctuels qui viennent interrompre l’activité de l’utilisateur dans Windows. Voir les instructions concernant les notifications toast.

  • Dans la majorité des cas, les applications doivent être silencieuses—s’ils le souhaitent, les utilisateurs peuvent activer les notifications dans une application.
  • Les utilisateurs contrôlant la fonctionnalité de notification de l’application, veillez à afficher uniquement des notifications qui sont pertinentes et à caractère urgent. Indiquez aussi les notifications manquées, si elles sont critiques, sur la vignette de l’application.
  • Songez à combiner les notifications si plusieurs mises à jour ont lieu au cours d’une brève période.
  • N’utilisez pas de notifications pour afficher des erreurs ou des avertissements. Au lieu de cela, intégrez les erreurs à l’application ou faites-les apparaître dans des menus volants et dans des boîtes de dialogue de message.

Itinérance au nuage

Itinérance   Créez une expérience continue sur plusieurs périphériques en rendant les données itinérantes. De cette façon, les utilisateurs peuvent reprendre une tâche à l’endroit précis où ils se sont arrêtés. Voir les instructions pour rendre les données d’application itinérantes.

  • Utilisez les comptes Microsoft et le stockage dans le Cloud de chaque utilisateur pour y stocker les paramètres, l’état ainsi qu’une petite quantité du contenu utilisateur et les rendre itinérants.
  • Exemples de paramètres d’application que vous pouvez rendre itinérants :
    • Villes et préférences de comparaison entre les degrés Celsius et les degrés Fahrenheit dans une application Météo
    • Flux RSS auxquels les utilisateurs sont abonnés dans une application de nouvelles
    • Équipes favorites dans une application de sports
  • Exemples d’états d’application que vous pouvez rendre itinérants :
    • La lecture en position la plus éloignée dans une application de lecteur
    • Le dernier point de contrôle ou déplacement terminé dans un jeu
    • La dernière piste lue dans une application de musique

Gestion de la durée de vie des processus (cycle de vie des applications)   Offrez aux utilisateurs une expérience continue en conservant l’état des utilisateurs sans qu’il leur soit nécessaire d’effectuer une opération d’enregistrement explicite. Lisez les Recommandations pour la suspension et la reprise d’une application.

  • Il est généralement préférable de lancer l’application à l’endroit où les personnes l’ont quitté plutôt que de la démarrer au niveau de la page d’accueil. Les utilisateurs doivent être en mesure de passer à une autre application, puis de revenir à la vôtre avec la sensation de retrouver leur panier, le message électronique qu’ils n’ont pas fini ou le jeu auquel ils étaient en train de jouer dans l’état où ils l’ont laissé.
  • Vous pouvez lancer la page d’accueil d’une application si une longue période s’est écoulée depuis la dernière visite de l’utilisateur et que le contexte précédent n’est plus d’actualité. Par exemple, dans une application d’actualités, vous pouvez diriger les utilisateurs vers la page d’accueil si le dernier article a été ouvert il y a longtemps et que celui-ci est à présent désuet.
  • N’arrêtez pas l’application lorsque l’utilisateur la déplace hors de l’écran. Laissez le système gérer le cycle de vie de l’application afin de permettre aux utilisateurs de revenir à votre application le plus efficacement possible. Il est inutile de proposer aux utilisateurs des méthodes pour mettre fin à votre application.

Intégrer les principes du style de conception Microsoft

Utilisez ces principes pour vous guider dans votre travail de conception.

Peaufiner les détails

  • Investissez le temps et l’énergie qu’il faut pour soigner toutes ces petites choses qui seront scrutées par tant de personnes.
  • Il est important de mettre au point une expérience utilisateur qui donne le sentiment d’être finie et soignée à chaque étape.

En faire plus avec moins

  • Évitez les distractions, mais ne limitez pas la découverte. Si vous donnez aux utilisateurs la possibilité de se plonger dans ce qu’ils aiment, ils exploreront vraisemblablement le reste.
  • Créez une expérience claire et fonctionnelle en affichant uniquement à l’écran les éléments appropriés à l’écran pour que les utilisateurs puissent s’immerger dans le contenu.

Rapidité et fluidité

  • Faites en sorte que les utilisateurs puissent interagir directement avec le contenu et répondez rapidement à leurs actions avec une énergie équivalente.
  • Donnez de la vie à l’expérience utilisateur, créez un sens de continuité et utilisez des mouvements simples pour raconter une histoire.

Faire preuve d’authenticité numérique

  • Tirez pleinement parti de la plateforme numérique. Supprimez les limites physiques pour créer des expériences qui sont plus faciles et plus efficaces que dans la réalité.
  • Faites-vous à l’idée que votre application se limite à des pixels sur un écran. Utilisez des couleurs et des images innovantes, touchantes et tranchantes qui vont au-delà des limites du réel.

Gagner en équipe

  • Tirez parti de l’écosystème et veillez à ce que votre application fonctionne de concert avec d’autres applications, périphériques et le système pour fournir aux utilisateurs une solution complète à leur problème.
  • Appuyez-vous sur le modèle d’interface utilisateur pour réduire la redondance. Enfin, profitez de ce que les gens savent déjà pour leur conférer un sentiment de savoir, de contrôle et de confiance.

 

 

Afficher:
© 2017 Microsoft