Création d'applications de style Metro qui sortent du lot

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'applications de style Metro qui sortent du lot

  • Comments 0

Lorsque vous transférez votre application dans le Windows Store, votre catégorie comptera sans aucun doute d'autres applications qui attireront également l'attention des utilisateurs potentiels. Mettre en avant ce qui différencie vos offres tout en restant concentré sur vos principaux atouts est crucial pour qu'une application de style Metro sorte du lot.

Windows 8 fournit un ensemble de modèles de conception, de contrôles courants et de fonctionnalités intégrées de la plateforme comme les contrats qui vous aident à vous concentrer sur vos principaux avantages. Pour ne donner que quelques exemples : la barre des applications est un contrôle courant qui aide les utilisateurs à se concentrer sur le contenu et minimise les distractions, le modèle tactile prescrit un ensemble de mouvements utilisés de manière homogène dans les contrôles de la plateforme, tels que balayer l'écran depuis le bord pour afficher la barre des applications, afin que les utilisateurs puissent utiliser immédiatement votre application sans avoir à apprendre de nouvelles interfaces. Le contrat de partage est l'élément qui permet à deux applications de fonctionner ensemble afin que les utilisateurs puissent aller plus loin avec votre contenu.

Ce billet est légèrement différent de certains des autres billets. Au lieu de traiter des modèles de codage, nous parlons des modèles de conception que vous pouvez utiliser dans votre processus de planification. Je prends un exemple d'application, « Food with friends », et je commence par répondre à cette question clé pour que l'application sorte du lot : « Quels sont les principaux avantages de mon application dans sa catégorie ? ». J'illustre ensuite certaines étapes pratiques visant à concevoir la structure et la disposition de l'application afin de mettre en valeur ses différences primordiales et ses principaux avantages. Ce billet est le premier d'une série de billets occasionnels qui vont être publiés au cours des prochains mois. Les prochains billets continueront à utiliser cette application comme exemple et expliqueront comment tirer le meilleur parti des différents aspects de la plateforme Windows 8 afin de concevoir des expériences immersives, rapides et fluides.

Commençons !

Exemple : « Food with friends »

Supposons que l'application que nous concevons aide les gens à trouver des restaurants. Penchons-nous sur le processus de conception de cette application.

1. Identification des différences

Nous commencerons par identifier un point focal qui nous permettra de nous différencier des autres concurrents dans la catégorie des restaurants :

Mon application est la meilleure dans sa catégorie pour aider les utilisateurs et leurs amis à trouver un restaurant où manger ce soir.

Le point de vue unique de cette application est d'aider les utilisateurs et leurs amis et de dîner ce soir. L'axe de cette application est d'aider des amis à s'accorder sur le choix d'un restaurant et de rassembler les préférences des amis afin qu'un utilisateur puisse les prendre en compte pour prendre des décisions. Cet intérêt différencie notre application des autres applications génériques présentes dans la même catégorie, qui peuvent se contenter de fournir la liste des restaurants à proximité.

Cette formulation « des principaux avantages » décrit les raisons pour lesquelles un utilisateur souhaite acheter cette application et non celle d'un concurrent qui se trouve dans la même catégorie. Nous y reviendrons très souvent lorsque nous aurons à effectuer des compromis en matière de conception et devrons choisir l'ensemble de fonctionnalités et les fonctions de la plateforme à utiliser.

Ceci étant dit, appelons cette application Food with friends.

2. Choix des scénarios appropriés

Identifions ensuite les principaux scénarios sur lesquels notre application se concentrera en fonction de notre formulation des principaux avantages. Au cours du processus d'évaluation et de sélection des scénarios, nous pouvons prendre en charge un grand nombre de scénarios intéressants (par exemple en prenant en compte la valeur nutritionnelle des plats). Mais pour proposer une expérience réellement unique et différente et tenir les promesses de notre formulation des principaux avantages, nous ne devons pas les prendre en compte s'ils ne collent pas parfaitement à notre vision. Ainsi, voici les principaux scénarios dans lesquels cette application excellera :

  • Trouver des restaurants dans lesquels je souhaite manger
  • Trouver des restaurants dans lesquels mes amis souhaitent manger
  • Préparer une sortie au restaurant avec des amis pour ce soir

Nous voulons commencer par réfléchir aux scénarios qui expliquent pourquoi les gens souhaitent utiliser l'application, avant de commencer à penser aux fonctionnalités, qui correspondent à la façon dont les gens atteindront ces objectifs. Chacun de nos scénarios comprend un certain nombre de fonctionnalités. Une fois les principaux scénarios identifiés, nous pouvons alors commencer à réfléchir aux fonctionnalités qui donneront lieu à ces scénarios. Nous expliquerons plus en détail comment sélectionner et concevoir les fonctionnalités dans le prochain billet, mais voici quelques exemples de fonctionnalités éventuelles :

  • Trouver des restaurants dans lesquels je souhaite manger :
    • Parcourir les restaurants sur une carte ou dans une liste
    • Rechercher par nom ou par mot clé
    • Filtrer/trier par catégorie, prix et évaluation
    • Ajouter/supprimer des restaurants d'une liste de préférences

3. Création d'une expérience d'arrivée

La page d'arrivée est primordiale pour les applications de style Metro. Elle vous permet d'indiquer aux utilisateurs les principaux avantages de votre application. Lorsque les utilisateurs ouvrent votre application, vous voulez qu'ils saisissent immédiatement les principaux atouts de votre application et ce qui fait sa différence. Une bonne page d'arrivée incite les utilisateurs à ouvrir l'application en proposant un contenu nouveau et actualisé en permanence, et elle leur donne envie de passer plus de temps dans l'application. Elle agit comme un concentrateur qui met en valeur le centre d'intérêt et le meilleur de l'application.

Concevoir un concentrateur adapté revient à créer une disposition qui permet d'amener le contenu et les fonctionnalités aux utilisateurs d'une manière optimale et simple à explorer. Dans un modèle de navigation classique d'une application ou sur le Web, une section par défaut s'affiche à l'écran, puis les utilisateurs choisissent d'accéder à une autre section à l'aide d'une barre de navigation ou d'une table des matières. Le problème de ce modèle est qu'il n'encourage pas l'exploration. Pour que les personnes décident de cliquer sur un onglet et d'accéder à une nouvelle section, il est nécessaire qu'ils pensent que cette section contient quelque chose d'intéressant ou d'utile pour elles. Si aucune section ne les intéresse, ils passeront à une autre application. Par exemple, cette application de flux d'actualités repose sur une conception en onglets où les gens arrivent sur une section unique, mais où ils doivent ensuite décider d'accéder aux autres sections de l'application en se basant simplement sur leur nom. Vous ne pouvez pas savoir si l'une des 4 autres sections vous intéresse tant que vous ne l'avez pas ouverte.

Conception en onglets de la page d'arrivée

Convertissez à la place cette page en concentrateur et ajoutez simplement le déplacement, qui ne nécessite aucune décision difficile de la part des utilisateurs. Ils pourront ainsi voir pourquoi le contenu ou les fonctionnalités de l'application présentent un intérêt pour eux.

Conception en concentrateur de la page d'arrivée

En disposant l'application de façon à faciliter son exploration, nous montrons aux utilisateurs pourquoi ils doivent l'utiliser. Nous mettons en avant toute l'étendue des avantages de notre application.

En gardant cela à l'esprit, commençons par une disposition en concentrateur basique en utilisant le modèle de projet Grille de Visual Studio (XAML, HTML). Sa page d'arrivée (la page groupedItemsPage) possède des sections et des éléments sélectionnés provenant de chaque scénario :

Page d'arrivée du modèle de projet Grille de Visual studio

Nous voulons que cette page représente réellement la formulation des principaux avantages suivante : Mon application est la meilleure dans sa catégorie pour aider les utilisateurs et leurs amis à trouver un restaurant où manger ce soir. La première étape consiste à faire en sorte que chaque section de notre concentrateur représente un de nos trois scénarios principaux.Chaque scénario principal doit être représenté (même si plusieurs sections peuvent être liées à un scénario) :

1. Ce soir

Porte sur la préparation d'une sortie au restaurant avec des amis pour ce soir

2. Listes de préférences des amis

Porte sur la recherche de restaurants dans lesquels mes amis souhaitent manger

3. Ma liste de préférences

Porte sur la recherche de restaurants dans lesquels je souhaite manger

4. Tous les restaurants

Porte également sur la recherche de restaurants dans lesquels je souhaite manger

Concentrateur avec des sections pour Ce soir, Listes de préférences des amis, Ma liste de préférences, Tous les restaurants


L'ordre des sections est stratégique. La section Ce soir est placée en premier parce qu'elle correspond à ce qui se passe actuellement et qu'elle est donc susceptible de changer à chaque fois que vous ouvrez l'application. Les informations concernant ce qui se passe ce soir sont par ailleurs parfaites pour intégrer le contenu d'une vignette dynamique, car elles sont actuelles, personnelles et pertinentes. Cette programmation signifie que si des gens voient ce qui se passe ce soir sur la vignette dynamique de l'application de l'écran d'accueil, ils peuvent ouvrir l'application et voir directement dans la page du concentrateur le contenu qu'ils viennent de consulter sur la vignette dynamique. Votre application doit récompenser les utilisateurs qui ouvrent l'application en leur présentant des informations actuelles et importantes pour eux. Pour en savoir plus sur les vignettes dynamiques, consultez le billet de Kevin Michael Woley Création d'une expérience utilisateur optimale en matière de vignettes.

Nous plaçons ensuite Listes de préférences des amis, puis Ma liste de préférences. Ces sections doivent suivre cet ordre pour deux raisons :

  • L'application Food with friends met l'accent sur mes amis. Il s'agit du point de différenciation et c'est ce que Food with friends fait mieux que quiconque.
  • Tout comme pour la section Ce soir, d'autres personnes actualiseront leurs listes de préférences pendant qu'un utilisateur est sorti de l'application, ce qui peut engendrer des changements fréquents. Cette section contient des informations que l'utilisateur ne connaît pas. Il maîtrise mieux ses propres listes de préférences et l'exploration en est par conséquent moins critique.

Nous plaçons Tous les restaurants à la fin. Nous pensons que les utilisateurs accéderont à cette section uniquement pour gérer leur liste de préférences. D'après notre formulation des principaux avantages, la plupart du temps, les utilisateurs prendront des décisions sur où se rendre ce soir, ce qui signifie qu'en règle générale, ils regarderont les listes de préférences déjà présentes, ainsi que les suggestions de sortie pour le soir. Placer cette section à la fin permet en outre de l'agrandir comme bon vous semble, sans que cela n'affecte les autres contenus. Vous pouvez être inquiets du fait que la section Tous les restaurants se trouvent si loin, mais rassurez-vous. Le zoom sémantique est là pour permettre d'accéder rapidement aux différentes sections d'une liste.

4. Conception des sections

Pour concevoir une section, il convient de l'optimiser pour son scénario correspondant. Il n'est pas nécessaire de présenter une grille uniforme de vignettes sur tout le concentrateur ! C'est à ce niveau que nous pouvons faire preuve de créativité, en montrant en quoi notre application est différente des autres et en mettant en avant tous ses principaux avantages. En outre, nous n'avons pas besoin de montrer tous les éléments d'une section donnée de la page d'arrivée, ce qui risque de trop la surcharger. Nous pouvons en revanche rassembler uniquement un ensemble organisé des éléments les mieux appropriés et les plus actuels. Par exemple, nous affichons uniquement les principaux amis sous Liste de préférences des amis et les restaurants ajoutés le plus récemment sous Ma liste de préférences.

Pour cette application, la première section, Ce soir, concerne la décision que vous devez prendre avec vos amis sur l'endroit où vous allez manger ce soir. Comme cela exige une collaboration entre vos amis et vous, une discussion s'impose :

Page d'arrivée avec la section Ce soir renseignée par des conversations sur la préparation d'une sortie au restaurant avec des amis

La section Listes de préférences des amis concerne mes amis et ce qu'ils souhaitent. Plaçons par conséquent les personnes au cœur de cette section !

Page d'arrivée avec la section Listes de préférences des amis renseignée par une liste de restaurants de plusieurs amis

La section Ma liste de préférences porte sur les restaurants dans lesquels je préfère aller, nous mettons donc ces restaurants en avant :

Page d'arrivée avec la section Ma liste de préférences renseignée par ma liste de restaurants

Et enfin, Tous les restaurants permet d'explorer la très longue liste de tous les restaurants qui existent. Nous présentons par conséquent certains des plus connus qui peuvent intéresser les utilisateurs, puis proposons des catégories pour faciliter la navigation. Une fois toutes ces parties en place, vous pouvez voir à quoi ressemble la conception en concentrateur de la page d'arrivée de l'application :

Page d'arrivée avec la section Tous les restaurants renseignée par une liste de restaurants

Pour faire la différence, il est crucial de mettre en valeur la marque de vos produits. Ce sujet mérite qu'on lui consacre un billet entier, alors gardez un œil sur les mises à jour pour découvrir les conseils et techniques de disposition et de conception visuelle qui permettront de mettre en avant la personnalité de votre marque tout en observant une apparence cohérente avec la plateforme pour laquelle l'application est conçue. Pour le moment, regardons un exemple simple :

Page d'arrivée de l'application Food with friends avec les couleurs de la marque et une image d'arrière-plan

5. Disposition du reste de votre application

Maintenant que nous disposons de notre page d'arrivée, positionner le reste de l'application est très simple.

Nous savons que toutes les sections du concentrateur n'étaient pas complètes, nous avons donc besoin de pages entièrement consacrées à l'affichage de tout le contenu de chaque section. La page groupDetailPage du modèle Grille de Visual Studio a été conçue dans ce but précis. Nous personnalisons la disposition du contrôle ListView sur cette page afin d'accueillir au mieux le type de contenu.

Listes de préférences de mes amis :

Page Listes de préférences des amis avec la liste complète des amis et leurs restaurants préférés

Ma liste de préférences :

Page Ma liste de préférences avec la liste complète de mes restaurants préférés

Tous les restaurants :

Liste complète de tous les restaurants regroupés par type de cuisine et les restaurants à l'affiche

Nous savons par ailleurs que deux entités principales sont reflétées dans le concentrateur : les restaurants et les personnes. Cela signifie que nous avons besoin de deux variantes de la page de détail des éléments (itemDetailPage dans le modèle de projet Grille) dans lesquelles les utilisateurs peuvent voir des informations sur un élément lorsqu'ils cliquent ou appuient dessus :

Page d'une amie avec ses informations de profil, sa liste de préférences et ses critiques

Page d'un restaurant avec ses horaires, son emplacement, ses coordonnées, des photos et des critiques émanant d'autres utilisateurs

Lors de la conception de chaque page, il est tout aussi important de garder à l'esprit les principaux avantages de chaque page, et de penser à la façon dont elle contribue à aider votre application à appuyer la formulation « de ses principaux avantages ».

6. Navigation dans l'interface utilisateur

Maintenant que nous disposons des différentes pages, il nous reste à donner à l'utilisateur le moyen de passer de l'une à l'autre. Il est peu probable que la navigation dans l'interface utilisateursoit l'un des principaux avantages d'une application. Nous pouvons appliquer des modèles de navigation existants que les utilisateurs connaissent déjà afin qu'ils puissent accéder rapidement au contenu et aux fonctionnalités de notre application. Dans cet exemple, nous utilisons le modèle de projet Grille, qui suit le modèle du système hiérarchique. Par exemple, le fait d'appuyer sur une vignette vous permet d'accéder à la page de détail de l'élément. Le fait d'appuyer sur l'en-tête d'une section dans le concentrateur vous permet d'accéder à cette section. Appuyez de nouveau pour revenir à l'endroit d'où vous venez (sans remonter). Tout cela ou presque est intégré au modèle de projet Grille. Dans un prochain billet, nous expliquerons plus en détail l'implémentation et donnerons plus de conseils sur la conception d'une navigation plus avancée dans l'application.

Capture d'écran illustrant la hiérarchie du contenu de l'application

Résumé

Identifier les principaux avantages d'une application dans sa catégorie est la première et la plus importante des étapes pour créer une fantastique application de style Metro qui sorte du lot. Comme nous l'avons vu, la connaissance et la mise en avant des différences ont une influence sur de nombreuses décisions fonctionnelles qui permettent d'élaborer la structure de votre contenu, l'expérience d'arrivée, la disposition des pages et la navigation. Dans de prochains billets, nous continuerons dans ce sens et vous montrerons comment utiliser la plateforme Windows 8 pour que votre application soit la meilleure de sa catégorie. Pour prendre connaissance de certaines des ressources mentionnées dans ce billet, consultez le site http://design.windows.com.

-- Bonny Lau, chef de projet senior, Windows

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