Concevoir la meilleure application possible

Cette rubrique vous aide à concevoir une application qui s’intègre parfaitement aux plateformes Windows et Windows Phone en termes d’apparence et de comportement. Les principes et stratégies de conception présentés dans les rubriques d’aide à la conception (y compris celle-ci) fournissent de précieuses informations qui permettront à votre application de se détacher par rapport à ses concurrents dans le Windows Store. Ils simplifieront également, durant la phase de conception, la résolution des éventuels problèmes d’utilisation. Une conception de haute qualité permet d’offrir à l’utilisateur une bonne expérience et d’obtenir de bonnes évaluations, ce qui est essentiel pour que votre application devance la concurrence.

Pour plus d’informations sur le brainstorming et la planification, voir Conceptualisation d’application.

Aspects clés du prototype de votre conception

La conception d’un prototype nécessite d’effectuer une synthèse de toutes les séances de brainstorming à ce jour. Dans cette section, vous allez découvrir comment créer des maquettes de l’apparence de votre application et les utiliser pour tester les principaux aspects de votre conception.

Remarque  Le prototypage n’est pas seulement gage de qualité ; il permet de gagner du temps et d’éviter toute frustration. Les conseils fournis dans cette section vous permettront d’optimiser la conception de votre application tout en gagnant du temps.

Blend pour Visual Studio est utile pour effectuer un prototypage rapide et réaliste. Avec Blend, vous pouvez créer des maquettes et des prototypes interactifs. Les prototypes interactifs sont utiles pour les zones de l’application qui nécessitent une interface utilisateur personnalisée, une animation ou une transition pour rendre l’expérience compréhensible aux utilisateurs. Cette interaction, souvent essentielle au succès d’une application, permet aux utilisateurs de mieux se familiariser avec l’application durant les tests d’utilisation. Blend vous permet également de créer des conceptions opérationnelles directement à partir de prototypes. Pour en savoir plus sur Blend, accédez à la page d’accueil de Microsoft Expression.

Le complément Création de plan conceptuel PowerPoint, disponible avec Microsoft Visual Studio 2012, est un autre outil qui vous permet de créer des croquis. Avec lui, vous pouvez générer un plan conceptuel à partir d’une collection de formes de plan conceptuel prédéfinies et capturer des interfaces utilisateur existantes. Pour plus d’informations, voir Créer un plan conceptuel de vos idées à l’aide de PowerPoint.

Concepts de croquis

Dans cette section, vous allez découvrir comment créer des maquettes de votre application.

La première phase du prototypage de votre conception doit commencer avec une feuille et un crayon, puis passer rapidement au croquis sur PC. La création d’un croquis d’application pour un appareil mobile diffère de celle pour un logiciel de bureau. Ici, les plans conceptuels sont moins utiles car ces applications ont des hiérarchies de navigation moins profondes et une portée plus étroite. Le défi avec une interface utilisateur mobile est de présenter des opérations et des données de manière intuitive et dynamique.

Si votre application implique l’exécution de tâches complexes, créez pour elles un plan conceptuel individuel pour vous assurer qu’elles nécessitent le moins d’étapes possibles et les étapes les plus simples possibles. Vous trouverez ci-dessous une série de croquis de prototypes pour une application de diffusion radio en continu générique.

1. Dressez un croquis des écrans statiques que les utilisateurs verront ou utiliseront le plus. Par exemple, la figure suivante montre les dessins préliminaires de l’application de diffusion radio en continu. Il s’agit de maquettes de l’écran d’accueil, des catégories, de la vue d’informations sur les artistes et d’une liste de stations préférées.

   

   Écrans principaux

2. Si votre application doit afficher des états transitoires, dressez un croquis de leur apparence. Dans notre exemple, si vous créez une application de lecteur de musique générique, dessinez une vue des écrans de paramètres et de l’écran de démarrage.

   

   Quelques états

3. Dressez un croquis des contrôles importants que vous souhaitez personnaliser. Pensez à la façon dont les contrôles personnalisés peuvent être utilisés pour simplifier la taxonomie des écrans. Cette maquette montre des contrôles détaillés pour la lecture et une vue paysage spéciale avec des contrôles.

   

   Contrôles importants

4. Vous pouvez maintenant associer certains des écrans comme une séquence d’étapes pour accomplir une tâche. Planifiez les étapes dont un utilisateur aura besoin pour exécuter des tâches ou des opérations importantes. Dessinez dans l’ordre les écrans statiques qui feront partie de chaque étape d’une tâche. La figure ci-dessous montre une maquette qui mappe le flux d’une opération de recherche du point de départ jusqu’à l’affichage des informations sur l’artiste.

   

   Tâche de recherche courante

   Pour exécuter cette étape, vous devez d’abord répertorier toutes les tâches qu’un utilisateur accomplirait avec votre application, par exemple rechercher un genre musical ou ajouter une nouvelle station à la liste des favoris. Dessinez ensuite une carte pour chacune des tâches identifiées. Ces cartes montrent le chemin à parcourir à travers les écrans pour accomplir une tâche donnée.

5. Essayez de dresser un croquis de la relation complète entre les écrans statiques dans toutes les parties de votre application. Essayez de faire en sorte que l’apparence et le comportement des écrans associés donnent une impression de progression à mesure que l’utilisateur avance dans une tâche. La figure ci-dessous montre une carte d’architecture d’informations complète pour une application de diffusion radio en continu simple.

   

   Carte maître

   La carte maître diffère de la carte des tâches. Sur la carte maître statique, vous ne montrez pas le flux nécessaire pour accomplir une tâche donnée, mais simplement chaque écran et la relation hiérarchique entre eux. Dans l’exemple précédent, vous pouvez constater qu’à partir de l’écran d’accueil vous pouvez accéder aux écrans de favoris, de catégories et de résultats de recherche.

   Une fois que vous avez épinglé quelques dessins au mur, commencez le prototypage en ouvrant un nouveau projet dans Blend pour Visual Studio.

   Remarque  Lors du prototypage avec Blend, le balisage XAML associé est écrit pour vous en arrière-plan. Cela vous permet de créer la disposition et les styles au fil de l’itération. Ces artefacts ne seront sans doute de haute-fidélité, mais ils seront au même format que ceux d’une application de production, et par conséquent compatibles.

Identification des principales zones à prototyper

Vous pouvez prototyper des applications mobiles rapidement en sélectionnant des zones d’intérêt spécifiques. Il n’est généralement pas nécessaire de prototyper chaque aspect de votre application à un niveau de détail élevé. Choisissez ce qui est le plus important ou délicat à gérer et axez votre prototypage sur cet aspect. En général, un concepteur doit traiter en priorité les nouvelles technologies ou fonctions, ou tout ce qui s’éloigne du savoir-faire ordinaire de l’équipe de développement.

Pour la plupart des applications, cela signifie créer une maquette des tâches ou opérations qui sont précieuses aux yeux de l’utilisateur. Réfléchissez aux opérations de base qui doivent pouvoir être exécutées dans votre application. Prototypez-les comme vous imaginez qu’elles auront lieu, étape par étape, et notez où des contrôles personnalisés peuvent réduire les étapes ou accélérer les choses.

En général, lors de la conversion d’une application depuis le Web ou une autre plateforme vers Windows Phone, il faut que les écrans d’application comportent moins de contrôles et de graphiques, pour que la présentation soit le plus clair possible. Il peut également être nécessaire de distribuer les tâches parmi plusieurs écrans dans une taxonomie logique, tandis que sur le Web les contrôles sont plus souvent imbriqués ensemble dans de grands groupes. Vérifiez si vous devez mettre à l’échelle les graphiques, le contenu ou les photographies présentés par votre application. Veillez à créer votre prototype avec des contrôles natifs et le moins de contrôles WebView possibles.

Déterminez à l’avance le nombre d’itérations idéal.

Décision quant au niveau de détail du prototype

Pour prototyper rapidement et passer à la génération, identifiez les éléments de votre application qui méritent une haute priorité à mesure que vous itérez. Vous devez pour cela décider du niveau de profondeur de prototypage des aspects suivants de votre application :

• Niveau de détail visuel

  Si les graphiques et l’apparence revêtent un aspect primordial pour les parties prenantes de cette application, créez une série hautement détaillée de dessins des fonctionnalités, fonctions, écrans et états. Vous devez aussi créer une maquette des contrôles personnalisés et de leurs états.

  Remarque  Le fait de créer des maquettes des contrôles personnalisés ou des contrôles utilisateur dans Blend pour Visual Studio vous permettra d’avoir du balisage XAML qui vous aidera à générer vos contrôles de production.

  Les maquettes visuelles détaillées doivent inclure les éléments suivants :

  1. styles et thèmes ;
  2. écran de démarrage ;
  3. vignette d’application.

• Niveau de détail fonctionnel

  Les fonctions ou fonctionnalités sont-elles au cœur de votre application ? Dans ce cas, vous souhaiterez peut-être créer un prototype interactif et semi-fonctionnel. Commencez par un écran statique ou groupe d’écrans statiques et créez les interactions entre eux, une par une. Réfléchissez à la façon de rationaliser les fonctions et de réduire la quantité de contrôles ou d’entrées nécessaires.

• Niveau de détail de contenu

  Si les parties prenantes de votre application se soucient principalement de la présentation du contenu, vous pouvez choisir comment créer les espaces réservés les plus précis possibles durant la création de votre interface utilisateur. Si votre contenu est textuel, créez une maquette de vos conceptions en apportant un soin particulier à la typographie et utilisez du texte de remplissage, et non des blocs ou autres abstractions, pour représenter l’emplacement du contenu.

  Si votre application doit présenter du contenu multimédia visuel, vous pouvez reprendre du papier et un crayon pour poursuivre le processus de prototypage. Dessinez des croquis détaillés du contenu de votre application tel qu’il doit apparaître durant la lecture et incluez à la fois l’orientation paysage et portrait dans vos dessins. N’oubliez pas que vous devrez peut-être personnaliser vos contrôles ou modifier leur disposition lors du changement d’orientation.

  Si vous prévoyez de localiser votre application, pensez à laisser suffisamment d’espace pour les langues qui en auront besoin et anticipez les éventuels problèmes de globalisation. D’autres références sont disponibles pour mieux comprendre les problèmes de localisation et de globalisation.

• Niveau de détail de personnalisation

  Si vous créez votre application à des fins commerciales et que la personnalisation en fonction de la marque est gérée, créez des prototypes visuels personnalisés en portant une attention granulaire aux détails. Ainsi, votre produit ne risquera pas d’enfreindre les normes de l’entreprise en matière de couleurs, de dispositions et de logos.

Personnalisation avec cohérence

Les éléments visuels personnalisés peuvent donner à une application une certaine qualité et originalité. Vous devez décider dès le début du niveau de personnalisation de votre application, et planifier la conception des éléments visuels. Il peut être difficile d’introduire des graphiques personnalisés durant les phases ultimes du processus de conception d’application.

Parmi les éléments à personnaliser figurent les thèmes, les modèles, les contrôles et les styles.

Veillez à respecter les consignes suivantes lors de la personnalisation des éléments visuels dans Windows Phone :

• Préférez le côté pratique au réalisme

  En règle générale, les applications ne doivent pas avoir de contrôles personnalisés qui tentent d’imiter la vie réelle. Par exemple, vous ne devez pas utiliser un cadran ou une série de boutons pour contrôler le choix de la station dans une application radio. Au lieu de cela, vous devez utiliser un contrôle curseur pour régler la fréquence, un bouton Lecture/Pause pour activer et désactiver la radio, et un bouton Favoris pour mémoriser les fréquences des stations.

  

  Application de radio FM

  Pour des raisons d’ordre pratique, il est également préférable de supprimer ou faire disparaître en fondu tout ou une partie des contrôles, la barre de l’application et la barre d’état quand votre application affiche du contenu ou un jeu en mode plein écran.

• Préférez le côté pratique au réalisme

  Pour que votre application avec contrôles personnalisés soit cohérente et fiable, assurez-vous qu’elle contient un style de conception sous-jacent où les symboles, les formes, les mots et les couleurs ont des significations cohérentes.

  Si vous prévoyez d’afficher des groupes de contrôles personnalisés qui s’affectent les uns les autres, assurez-vous que toutes les combinaisons de contrôles possibles sont logiques et fonctionnent de la manière prévue.

  Si possible, dessinez les interactions possibles entre les contrôles personnalisés pour être sûr que toutes les opérations possibles sont raisonnables. Si certaines combinaisons imposent des scénarios qui prêtent à confusion, utilisez une autre conception.

Test d’utilisation

Maintenant que vous avez affiné votre prototype, cessez la conception et vérifiez qu’elle ne s’est pas écartée des paramètres de la conception Windows Phone. Vérifiez si votre application exploite pleinement la plateforme et le système d’exploitation en vous posant les questions suivantes.

Questions à se poser quant au prototype

• Le mode d’utilisation du matériel Windows Phone est-il évident dans la conception de votre application ?
• Les tâches de votre application vont-elles être faciles à exécuter ?
• Votre application va-t-elle présenter trop de fonctionnalités ou d’informations ? Ou peut-être pas assez ?
• Votre application permet-elle à l’utilisateur d’effectuer des tâches ou des opérations qui lui sont précieuses ?
• Venez-vous d’une autre plateforme mobile ? Les utilisateurs de Windows Phone s’attendront à avoir moins d’appuis à effectuer, à ce que les vues soient plus claires et la typographie soit plus grande, et à voir davantage de contraste et de couleurs.
• Utilisez-vous les deux axes de défilement (X et Y) et les deux orientations (Portrait et Paysage) ? Les utilisateurs peuvent s’y attendre (cela dépend de la fonction de votre application).
• Est-il facile d’activer les contrôles du bout du doigt ? Le texte des contrôles est-il lisible ?
• Votre interface utilisateur fournit-elle un retour pour l’appui et la progression ?
• Avez-vous pris en compte l’utilisation du bouton matériel Précédent ?
• Utilisez-vous le contenu Web incorporé (et le contrôle WebView) avec parcimonie ?
• Votre application fait-elle disparaître en fondu la barre d’état, les contrôles et la barre de l’application quand le contenu est lu en mode plein écran ?
• Utilisez-vous les contrôles Pivot et Hub efficacement et correctement ?

Test des éléments d’interface utilisateur personnalisés

Une fois que vous avez créé des maquettes des éléments d’interface utilisateur personnalisés, testez-les vous-même. Si vous travaillez dans Blend pour Visual Studio, vous pouvez créer une maquette du comportement d’une page ou d’un contrôle (à l’aide de la fonctionnalité Comportements) et de ses éléments visuels.

Consultation des utilisateurs

Dès le début du prototypage, trouvez un petit groupe de personnes de confiance parmi celles ciblées par votre application. Dès que vous vous sentez prêt, commencez à montrer les prototypes à vos utilisateurs de confiance. N’expliquez pas comment ils sont censés fonctionner ; au lieu de cela, attendez de voir si les utilisateurs comprennent facilement ce que fait votre application et comment elle fonctionne.

Remarque  En général, il vaut mieux utiliser des maquettes avec des détails visuels pour les tests utilisateur préliminaires, au lieu de dessins structurels. Ceux-ci ne créent pas une simulation exacte de l’expérience utilisateur.

Communiquez dès le début avec les utilisateurs

Si vous concevez une application professionnelle, testez les besoins et les priorités des responsables et des utilisateurs non-experts, en plus de vos utilisateurs cibles. Par exemple, un logiciel de gestion de projet doit être utile aux personnes qui travaillent sur un projet mais aussi à leurs supérieurs, qui peuvent souhaiter utiliser votre application pour vérifier l’avancement d’un projet.

Remarque  Ne cédez pas aux utilisateurs s’ils vous demandent sans cesse d’ajouter des fonctionnalités. Même si les commentaires des utilisateurs peuvent vous alerter quant à de graves problèmes liés à l’interface utilisateur, la plupart d’entre eux doivent être absorbés de manière holistique. Concentrez-vous sur les fonctionnalités principales de votre application. Souvenez-vous que les utilisateurs savent généralement mieux exprimer leurs objectifs dans une application qu’effectuer des suggestions spécifiques au sujet de l’interface utilisateur ou de l’interaction.

Créer les maquettes finales

À ce stade du processus de conception, votre application doit déjà respecter les critères d’utilisation mentionnés plus haut. Lors de l’évaluation de vos maquettes finales, procédez comme suit :

1. Déterminez si votre prototype répond aux besoins et aux critères de qualité dont vous aviez dressé la liste lors de la collecte d’idées.
2. Ensuite, déterminez si vos maquettes satisfont le niveau de détail requis par votre processus d’examen d’application final. Rappelez-vous le niveau de détail qui devait selon vous être nécessaire pour votre prototype après avoir lu la section Aspects clés du prototype de votre conception.
3. Les maquettes finales doivent inclure des niveaux de détails appropriés pour les éléments suivants :
   • Éléments visuels : la typographie et le contenu sont-ils présentés clairement, lisiblement et de manière précise ? Votre application est-elle visuellement attrayante ?
   • Éléments fonctionnels : les tâches sont-elles intuitives en termes d’objectifs et de fonctionnement ? La fonction et le fonctionnement de votre application sont-ils clairs ?
   • Éléments de contrôle : tous les contrôles personnalisés fonctionnent-ils selon un langage de conception interne cohérent ? Sont-ils dimensionnés et espacés afin de faciliter l’utilisation tactile ?
   • Éléments de personnalisation : avez-vous reproduit avec fidélité les couleurs et les logos ? Tous les graphiques sont-ils conformes aux directives en matière de droit d’auteur ?
4. Assurez-vous d’avoir conservé les interactions que vous aviez mappées durant le prototypage. Vérifiez que les tâches et opérations les plus courantes ou essentielles ont l’apparence et le comportement souhaités.
5. Une fois la conception finalisée et la production prête à démarrer, vous pouvez commencer à préparer votre application pour que sa conception réponde aux critères de soumission.

Rubriques connexes

Ressources de conception pour Windows Phone