Comme vous l’avez sans doute remarqué, l’accès d’une application au Windows Store passe par une phase de validation plutôt complète. Et comme l’expérience utilisateur est totalement intégrée à ce processus, voyons un peu et point par point les éléments à prendre en compte pour pouvoir faire arriver simplement son appli sur les étagère du Store Windows 8. 

Evitons les “Must Fix” en 15 leçons.

1/ Votre appli doit fournir du contenu spécifique et proposer un contenu exclusif, de même qu’une expérience singulière. Vous pourrez tirer parti assez clairement des nouvelles capacités de l’OS . faites-vous à l’idée que vous ne pouvez pas vous contenter d’un simple portage d’une appli iPad. Essayer d’adopter ModernUI pour faire exploser votre valeur ajoutée intrinsèque. http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465427.aspx

 2/ De la même manière, votre application ne peut simplement pas être la copie d’un site web. Avoir un site, c’est très bien, mais vous pouvez évaluer sans peine la différence de potentiel avec une appli comportant des scenarii particuliers (Zoom sémantique, snap mode, …). http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465427.aspx 

3/ Après son installation, votre appli doit afficher une tuile dans le menu Démarrer. L’image ou l’icone de cette vignette doit être directement en rapport avec le contenu de l’application. Pas de pub. De plus, on évitera d’avoir plus de 5 messages dynamiques, afin d’éviter de perdre l’utilisateur. Une grande vignette doit être dynamique, tandis qu’une petite vignette peut ou pas l’être. Et si vous utilisez une image comme fond de la vignette de votre appli, tâchez de la faire correspondre au premier item présenté dans l’app. http://msdn.microsoft.com/fr-fr/library/windows/apps/hh761490.aspx ou http://msdn.microsoft.com/fr-fr/library/windows/apps/hh868259.aspx

4/ La tuile que vous utiliserez pour votre app doit correspondre à un des templates standard. Et vous en avez quelques uns à disposition, spécialement si vous souhaitez inclure le pack total (Grande vignette dynamique, petite vignette dynamique, la même en statique) http://msdn.microsoft.com/fr-fr/library/windows/apps/hh761490.aspx ou http://msdn.microsoft.com/fr-fr/library/windows/apps/hh868259.aspx

5/ Pas de pubs dans les contrôles (App bar, nav bar, settings,…). pas de pub dans tout ce qui est affichable par le mouvement Glisser-depuis-un-bord. Pour éviter essentiellement que le public confonde ce qui appartient au système, et ce qui est propre à votre message et ce que représente l’appli. Tout ce qui, de près ou de loin, peut être assimilé à l’OS et au système doit rester vierge de toute publicité. http://msdn.microsoft.com/fr-fr/library/windows/apps/jj649139.aspx 

6/ Pas de compromis ! Votre appli doit être utilisable aussi bien en mode tactile qu’en mode clavier/souris, parce que le tactile, c’est super cool, mais parce que les devices plus classiques sont là pour rester ! http://msdn.microsoft.com/fr-fr/library/windows/apps/hh700412.aspx ou http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465397.aspx

7/ Pourquoi tenter de réinventer sans cesse la roue ronde ? Les gestuelles associées à Windows , en plus de bien fonctionner sont aussi le garants que votre utilisateurs bénéficiera d’une expérience fluide entre l’OS et votre app, et passera de l’un à l’autre avant une grande facilité ! http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465415.aspx

 8/ Même chose pour l’utilisation de la souris. Pas grand chose de spécial ici, consultez juste le sujet de cette page : http://msdn.microsoft.com/fr-fr/library/windows/apps/hh700408.aspx ou  http://msdn.microsoft.com/fr-fr/library/windows/apps/hh994936.aspx

9/ Tout les éléments interactifs de votre appli doivent proposer du feedback. A l’opposé, les éléments non-interactifs ne doivent pas proposer de feedback afin de proposer une interface robuste, simple et un schéma d’interactions simple :http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465415.aspx.

10/ L’application doit supporter la vue snap. Même si elle ne supporte pas un scénario qui met ce layout en valeur d’une manière particulière. Vous ne voulez assurément pas que votre appli crashe si votre utilisateur tente de snapper votre app , non? Et êtes-vous bien certains qu’il n’y a pas un scénario novateur pour la vue snap de votre appli ? http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465371.aspx 

11/ En mode paysage, l’appli doit rester parfaitement opérationnelle, même dans une résolution de 1024x768. http://msdn.microsoft.com/fr-fr/library/windows/apps/hh780612.aspx

12/ Votre appli ne doit pas se fermer de manière programmatique, ou si cela doit pouvoir se passer, c’est toujours l’utilisateur qui doit être à l’origine de l’action. C’est le cas si l’on propose un bouton pour cette action. De toute façon, les appli sous Windows 8 ne sont plus sensées se fermer et le système propose une gestuelle appropriée pour cette action.http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465088.aspx

13/ Tant que l’on parle de tâches, votre appli doit revenir de veille dans un état approprié (pas crashée, au moins, et avec un message explicite si les données de travail ne sont plus disponibles). Si l’on ne peut faire autrement, il faut prévoir un moyen élégant de revenir à un niveau stable de l’application (Bouton retour, par exemple). http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465088.aspx.

14/ Si votre appli utilise une barre d’application ou une barre de navigation, vous devez implémenter une gestuelle de type Glisser-depuis-un-bord. Pour augmenter la découverte et l’utilisation de l’appli, vous pouvez montrer ces barres au chargement de la page, la cacher dés qu’un “touch” est fait dans le layout, puis rappeler cette barre avec une gestuelle de type glissé-depuis-le-haut, ou Glissé-depuis-le-bas. http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465302.aspx, http://msdn.microsoft.com/fr-fr/library/windows/apps/hh781231.aspx

15/ Vous pouvez retirer de grands avantages des notifications, des badges et du panneaux des réglages, mais l’appli doit pouvoir rester totalement fonctionnelle sans ces options. Rappelez-vous que cela reste  le choix des utilisateurs d’activer ou non ces options.. http://msdn.microsoft.com/fr-fr/library/windows/apps/hh761490.aspx

 

 

Evitons ensemble les “Shall fix” en 15 points, également. 

Il pourrait y avoir tellement à dire dans cette partie. mais tâchons de faire court et concis et de tenir en 15 règles : 

1/ Votre appli doit proposer mieux qu’un site web dans une i-frame. Du contenu o-ri-gi-nal et unique. http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465427.aspx

2/ La page Hub (si votre app en possède une) doit être bien plus qu’un simple recueil de liens vers d’autres parties de l’app et proposer du contenu utile, dynamique, original et rafraichi. http://msdn.microsoft.com/fr-fr/library/windows/apps/hh761500.aspx.

3/ La loi, c’est la grille. Créer votre propre grille pour porter l’importance relative des éléments de votre interface. Alignez cette grille sur votre identité et sur le look que vous recherchez. Mais utilisez une grille !  Plus encore, utilisez une silhouette similaire à travers vos différents écrans afin de proposer un rail cohérent de cheminement  et une expérience progressive pour vos utilisateurs. http://msdn.microsoft.com/fr-fr/library/windows/apps/hh872191.aspx

4/ Evitons les scrolls multi-axes et préférez toujours un scroll sur un seul axe pour vos déplacements dans le contenu. Toujours dans cette optique de fournir un rail cohérent d’apprentissage de l’appli.

http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465310.aspx ou http://msdn.microsoft.com/fr-fr/library/windows/apps/jj883705.aspx.

  5/ Si vous avez embarqué une i-frame pour y afficher du contenu web qui affiche du contenu sans rapport avec le métier de votre appli, je vous recommande de passer plutôt et directement par un lien vers un navigateur externe (comme Internet Explorer, par exemple). http://msdn.microsoft.com/fr-fr/library/windows/apps/hh700379.aspx.

6/ …Et si , malgré tout, vous êtes dans l’obligation de mettre une i-frame, essayez de créer un CSS spécifique pour faire ressembler ce contenu web à celui de votre appli. http://msdn.microsoft.com/fr-fr/library/windows/apps/hh872191.aspx.

7/ Votre application devra avoir un écran de démarrage (éventuellement animé comme Skype). Le “Splashscreen” n’est pas une tuile et ne doit pas remonter du contenu rafraichi ou dynamique. Cet écran est par contre essentiel pour l’identité de l’app. http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465338.aspx.

8/  Si votre appli utilise une barre applicative (App bar), celle-ci ne doit pas contenir de navigation. Seules les actions ou les buts contextuels disponibles pour cette page seront rassemblées dans ce contrôle. Petit rappel: Cette barre doit se refermer sur un “touch” dans le layout et doit pouvoir être ouverte via un Glissé-vers-le-haut.

http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465302.aspx ou http://msdn.microsoft.com/fr-fr/library/windows/apps/hh781231.aspx.

9/ Pas de boites modales pour un usage contextuel. Utilisez plutôt un “Flyout” depuis l’Appbar ou un menu contextuel depuis la barre de navigation. http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465304.aspx ou http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465330.aspx.

10/ Les messages d’erreur doivent être affichés à coté de l’endroit qui pose problème, dans le contenu même. Si vous mettez le message d’erreur dans une boite de message, cela induit que cette erreur est valable pour toute l’appli. Pas de compte-rendu de l’état de la pile ou de debug non plus. L’utilisateur s’en moque éperdument. http://msdn.microsoft.com/fr-fr/library/windows/apps/hh738363.aspx.

11/ Filtrer et arranger le contenu sont des mesures considérées comme une action de page. Ceci doit donc se faire depuis l’Appbar. et apparaitre à partir de l’icone correspondant. Ces actions ne peuvent pas être considérées comme de la navigation, car celle-ci crée de l’historique (bouton back), pas les filtres. http://msdn.microsoft.com/fr-fr/library/windows/apps/hh761500.aspx.

12/ Si votre app à besoin d’une action spécifique pour la navigation, une confirmation particulière pour aller vers une page, ou une navigation “étape-par-étape”, alors les boutons doivent être placés dans le layout. http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465304.aspx ou http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465330.aspx.

13/ Les cibles de “touch” doivent être au moins de 5 mm  de large. rappelez-vous qu’un doigt à une empreinte de 40x40 pixels. Donc tâchez toujours de légèrement surestimer la taille des objets interactifs et de laisser assez de place aux alentours pour éviter les faux-contacts. (au moins 10 pixels). http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465330.aspx.

14/ Il est impératif aujourd’hui que le layout de l’appli soit flexible. Avec une telle approche, le contenu de l’appli pourra aisément se redimensionner en fonction de la taille de l’écran cible. Utilisez également des contrôles intelligents pour que votre contenu puisse s’empiler sur la hauteur en fonction de la résolution afin de se déplacer moins sur le latéral pour trouver un item, à mesure que la définition augmente. http://msdn.microsoft.com/fr-fr/library/windows/apps/hh780612.aspx.

15/ La vue snap (ancrée) est un usage de vos utilisateurs. l’appli ne doit donc pas s’ancrer ou revenir en 4/3  sans l’accord explicite de ceux-ci. Si votre contenu ne peut s’afficher dans la vue ancrée, un simple message informant votre audience est suffisant. Vous pouvez éventuellement ajouter un bouton explicite que pourra utiliser votre utilisateur pour changer de mode d’affichage. http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465371.aspx.

16/ Pas assez d’espace et encore tellement de choses à dire…Bon, cassons cette hypothèse de 15 règles et avançons encore un peu: Vous ne devez pas dupliquer une action ou un comportement qui existe ailleurs. Par exemple, vous pouvez vous abstenir de répliquer l’ouverture d’un contrat en plaçant une icone de loupe dans l’Appbar. Par contre, vous pouvez augmenter l’usage de l’app en permettant à l’utilisateur de saisir directement une requête tout en ouvrant le contrat de recherche. http://msdn.microsoft.com/fr-fr/library/windows/apps/hh761499.aspx.

17/ La recherche n’est pas la même action que “trouver dans la page”. Chercher veut dire exécuter une recherche dans toute l’application. Chercher dans la page implique une recherche d’un item particulier du contenu en cours. Donc recherchez dans la page implique une action et donc une icône dans l’Appbar.

http://msdn.microsoft.com/fr-fr/library/windows/apps/jj150605.aspx ou http://msdn.microsoft.com/fr-fr/library/windows/apps/jj883701.aspx

18/ Si votre application ne peut pas partager dans une vue, mais peux le faire ailleurs, il vous faudra revoir vos messages afin d’éviter le syndrome “Cette application ne peut pas partager” (un message générique qui apparait lors de l’action et qui ne reflète pas  les actions possibles sur les autres pages). http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465251.aspx.

19/ La vignette secondaire doit promouvoir du contenu dynamique et ne doit pas permettre d’interagir avec des fonctionnalités de l’application. Ce genre de tuiles est prévu pour permettre l’accès rapide à une partie spécifique de l’app, et , bien sûr, elle doit être relié au contenu qu’elle expose et pas au hub ou à une page de section. http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465398.aspx.

20/ Les notifications toast sont disponibles pour des messages importants, pas pour de la pub, pas pour des messages peu importants, pas pour des erreurs. Elles sont le moyens idéal de vous catapulter vers du contenu chaud.http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465391.aspx.

 21/ Si l’application nécessite une fenêtre d’authentification web (pour un tunnel d’achat, par exemple), alors utilisez une i-frame web. Simple, n’est-ce pas? http://msdn.microsoft.com/fr-fr/library/windows/apps/hh750287.aspx.

22/ Je devrais vraiment considérer de terminer ce post de blog. En ce qui concerne la silhouette de l’app, il existe deux manière de considérer votre design : D’une part, vous pouvez jouer le jeu et respecter à la lettre les guidelines. D’autre part, si vous souhaitez partir sur une silhouette à votre convenance, c’est génial !  Mais dans ce cas, veillez à provoquer une expérience forte en proposant une silhouette cohérente à travers tous les écrans. http://msdn.microsoft.com/fr-fr/library/windows/apps/hh872191.aspx.

23/  Quelque soit la police de caractères que vous utilisez, essayez de limiter son usage à 5 tailles et type de graisse dans votre layout. http://msdn.microsoft.com/fr-fr/library/windows/apps/jj553415.aspx 

24/ Le zoom sémantique est une option fantastique. Essayer de tirer parti d’un scénario spécifique pour apporter une expérience démentielle avec ce que le ZS peut apporter. le Zoom sémantique mérite tellement mieux que d’être une copie avec un nouveau layout de l’information d’origine : http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465319.aspx.

25/ Ce n’est pas bien compliqué de permettre à l’utilisateur de naviguer dans son appli avec le touch ET le clavier. c’est aussi une bonne idée de lui permettre de pouvoir utiliser les roll-over en mode souris… http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465370.aspx.

26/ Votre appli devrait supporter le mode portrait. c’est juste une très bonne manière de lire des livres ou des feeds de nouvelles. http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465349.aspx

 

Et nous en avons terminé avec les…hum…15+26 règles. Si toutes ces règles sont respectées avant de soumettre dans le store, vous pouvez vous détendre, prendre une bière et attendre tranquillement de voir apparaitre votre logo dans le store Windows !