Blog de Steven Hanquez

Comment faire une bonne application Metro ?

Comme vous le savez surement si vous avez suivi l’actualité ces derniers jours, Microsoft a présenté lors de la BUILD 2011 son nouveau système d’exploitation, Windows 8.

Durant cet évènement, Microsoft a présenté un grand nombre de conférences dévoilant en détails les différents aspects des applications Metro. Une de ces conférences était destinée à expliquer les aspects essentiels (règles, bonnes pratiques) à la réalisation d’une « bonne » application Metro. Je vous propose donc un petit résumé des informations données durant cette présentation très intéressante et riche d’enseignement.

Un design « Metro Style »
Avec Windows 8, Microsoft a réutilisé le design déjà arboré sous Windows Phone 7 et connu sous le nom de Metro. Le style Metro se veut le plus minimaliste possible. L’information est au centre et tout ce qui n’est pas utile n’a pas besoin d’être montré. Il faut que les écrans soient clairs et fassent une place de choix au contenu.

Pour cela, Visual Studio 11 met à la disposition des développeurs un certain nombre de templates permettant de répondre à une grande variété d’utilisation. Microsoft recommande vivement l’utilisation de ces templates afin que les applications soient en harmonie avec l’environnement de Windows 8. Bien entendu, il est possible de personnaliser les templates afin de leur donner un look unique.

Une application Metro Style doit laisser libre les côtés gauche et droit de l’écran. En effet, ces espaces sont utilisés par le système pour revenir à l’application précédente et pour accéder à une barre d’outils. Il est donc nécessaire de laisser une marge de chaque côté de vos écrans afin de ne pas entraver le fonctionnement du système.

A l’inverse, les parties en haut et en bas de l’écran sont réservées à votre application. Il est donc conseillé de les utiliser pour permettre, par exemple, d’afficher des commandes avancées.

Les points essentiels à retenir sont :

• Les commandes principales, importantes et utilisées fréquemment doivent apparaitre sur vos écrans directement.
• Les autres commandes doivent être masquées et apparaitre sur demande de l’utilisateur dans les barres en haut et en bas de l’écran.

Microsoft a ensuite évoqué l’importance d’avoir des commandes accessibles facilement. En effet, Windows 8 et vos applications sont susceptibles de fonctionner sur un grand nombre d’appareil dont des tablettes tactiles. Ces tablettes sont tenues par les utilisateurs par les côtés et les pouces servent la plupart du temps à accéder aux commandes tactiles. Etant donné la disposition des mains et la longueur des doigts, l’utilisateur n’a pas un accès immédiat à toutes les parties de l’écran.

Comme le montre la capture ci-dessus, les zones en vert sont celles de confort. L’utilisateur peut accéder à ces emplacements très facilement et sans le moindre gène. Celles en jaune et en rouge sont plus délicates à atteindre. Le reste de l’écran est inaccessible en tenant la tablette par les côtés et oblige l’utilisateur à changer la position de ses mains.

Forcer l’utilisateur à modifier la position de ses mains est une erreur ! Il est donc primordial de concentrer les commandes des applications dans les zones accessibles par les doigts de l’utilisateur.

Enfin, il a été rappelé que les applications Metro Style devaient être conçues pour une utilisation tactile. Bien entendu, l’utilisation d’une souris et d’un clavier doit être possible mais ne doit pas faire l’objet d’une interface séparée.

Rapide et Fluide
Dans cette partie, Microsoft a rappelé l’importance d’avoir une application rapide et fluide. L’utilisateur ne doit pas avoir la sensation de blocage ou d’attente. L’application doit être réactive aux actions à tout moment, même lorsqu’un chargement est en cours.

L’utilisation d’animations est ainsi fortement recommandée. Une application fluide doit donner la sensation à son utilisateur que tout arrive de quelque part et va ensuite quelque part. Pour illustrer cela, une démonstration a été faite dans laquelle l’utilisateur pouvait ajouter des images à une liste en cliquant sur un bouton. Dans la version sans animation, les images apparaissaient d’un coup dans la liste, sans prévenir. Dans la seconde version avec des animations, les choses se faisaient de manière plus naturelle, donnant réellement l’impression que l’image qui était ajoutée venait de quelque part.

La présentation était ensuite accès sur l’importance des fonctions tactiles des applications Metro Style. Une interface tactile doit faire l’objet d’une véritable réflexion et ne doit pas être un simple transposage de l’interface classique à la souris / clavier.

Comme un exemple est toujours plus facile à comprendre qu’un long discours, une démonstration a été faite sur ce point très important. Sur l’interface Metro, l’utilisateur a la possibilité de réorganiser ses icones (nous verrons plus tard qu’il s’agit de Tiles en réalité) comme bon lui semble. A la souris, ce geste s’effectue simplement en cliquant sur l’icône désiré et en maintenant la pression tout en déplaçant l’icône à l’endroit voulu. Avec une interface tactile simplement calquée sur la version souris / clavier, l’utilisateur doit toucher l’icône désiré et faire glisser son doigts pour l’amener à l’endroit voulu. Comme la page d’accueil peut s’étendre en largeur, ce mouvement peut être long et fastidieux (comme le montre la démonstration).

Heureusement, le tactile permet d’aller beaucoup plus loin si on y réfléchit correctement. Dans la seconde démonstration, l’utilisateur a utilisé son autre main pour faire scroller la page d’accueil alors qu’il avait sélectionné l’icône avec son doigt. En combinant l’utilisation des deux mains d’une manière logique et naturelle, le déplacement d’un icône d’un côté à l’autre de la page d’accueil se révèle bien plus rapide.

Une interface tactile réussie doit répondre à de nombreux critères :

• Elle doit être simple.
• Elle doit être rapide et fluide (le but n’est pas de perdre du temps).
• Les mouvements doivent être limités.
• Les manipulations doivent être directes.
• Les manipulations doivent pouvoir être annulées à tout moment.
• Il faut limiter l’utilisation de manipulations chronométrées.

Avoir une bonne mise à l’échelle
Comme nous l’avons déjà évoqué, vos applications peuvent être utilisées par des ordinateurs très différents (PC de salon, PC portable, notebook, tablette, …). Les écrans de ces appareils peuvent aller d’une taille de 10 pouces environ à 27 pouces, voire plus. La résolution peut varier de 1024*768 à plus de 1980*1080. Enfin, le format de l’écran peut être en 4/3 ou en 16/9. Il est donc impératif que vos écrans s’adaptent à la taille et à la résolution de l’écran de l’utilisateur.

Pour cela, il est recommandé d’utiliser des images au format vectoriel ou de les proposer dans 3 tailles différentes : 100, 140 et 180 %. Les templates proposés par Microsoft sont eux conçus pour s’adapter à toutes les tailles d’écran.

Notons également que vos applications doivent obligatoirement disposer d’une vue « Snap ». Comme le montre la capture d’écran, l’utilisateur a la possibilité de découper l’affichage de son écran en deux parties afin d’y afficher deux applications en même temps. On se retrouve alors avec une vue principale qui dispose de 70 % de l’écran environ. Les 30 % restants sont dédiés à la vue Snap.

La vue Snap ne doit pas être un simple redimensionnement de vos écrans mais doit faire l’objet d’une attention toute particulière afin de proposer une vue vraiment adaptée. On peut ainsi prendre l’exemple de l’application Tweet@rama. La capture d’écran ci-dessous montre l’application en mode plein écran et en mode Snap. Comme vous pouvez le voir, la vue Snap est différente de la principale et permet d’utiliser l’application pleinement avec un affichage optimisé. Ce point ne doit pas être négligé par les concepteurs d’applications.

Utiliser les Contrats correctement
Les Contrats permettent de lier les applications entres elles, mais aussi avec le système dans sa globalité. Ainsi, si deux applications implémentent le même Contrat, elles pourront travailler ensemble pour accomplir des tâches.

On trouve de nombreux Contrats parmi lesquels Microsoft nous en a présenté 3 fondamentaux : Share, Search et Picker, qu’on pourrait traduire par Partager, Rechercher et Piocher. Voyons en détails le fonctionnement de ces 3 contrats.

• « Share » :

Comme son nom le laisse entendre, le contrat « Share » permet à une application de partager des données avec d’autres applications. Le Partage fonctionne sur le principe source -> cible. Une application source est celle qui fournit quelque chose à partager. Une application cible est celle qui est susceptible de recevoir cette chose. Le contrat « Share » implémente un grand nombre de formats de données à échanger.

Imaginons par exemple que vous utilisez une application permettant de lire des news. Cette application implémente le contrat « Share ». Il est donc possible d’accéder à l’icône « Share » dans la barre de droite. En cliquant sur cette icone, vous verrez automatiquement toutes les applications qui implémentent également le contrat « Share » pour ce même type de données. En l’occurrence, nous pouvons ici sélectionner par exemple l’application Tweet@rama. Automatiquement, une petite fenêtre apparait permettant d’envoyer un tweet avec une url ciblant la news qu’on a partagé.

• « Search » :

En implémentant le contrat « Search », vous offrez la possibilité aux utilisateurs d’effectuer une recherche dans les données de votre application à tout moment depuis l’interface de Windows 8. Microsoft recommande de privilégier ce fonctionnement au lieu de proposer un système de recherche à l’intérieur de vos applications.

A tout moment, il est donc possible via la barre de droite d’accéder à l’écran de recherche de Windows 8. Cette fenêtre de recherche fait apparaitre toutes les applications qui implémentent le contrat « Search ». En haut, un champ de saisie permet de préciser sa recherche. L’utilisateur peut ensuite sélectionner une application et voir automatiquement le résultat de sa recherche dans cette application. L’avantage pour l’utilisateur est qu’il peut basculer très rapidement entre toutes les applications qui implémentent le contrat pour voir les résultats dans chaque cas. C’est très rapide et intuitif.

• « Picker » :

Terminons avec le contrat « Picker ». En implémentant ce contrat, votre application autorise les autres à piocher dans son contenu. Bien entendu, vous avez un accès total sur ce qui pourra être vu par les autres applications et comment cela sera affiché.

L’implémentation de ce contrat peut s’avérer utile si votre application stocke des fichiers qui sont susceptibles d’être utilisés dans un autre contexte, comme des images.

Avoir un « Tile » de qualité
Les Tiles, qu’on pourrait traduire par Tuiles en français, sont la nouvelle manière de présenter et d’accéder aux applications dans Windows 8. Ils remplacent donc les traditionnels icônes. Mais la comparaison s’arrête là comme le rappelle Microsoft. En effet, les Tiles ne doivent pas être utilisés comme les icônes mais doivent être considérés comme une véritable extension de vos applications.

Ils ne sont pas juste un accès à vos applications. Ils peuvent faire bien plus. Par exemple, ils peuvent afficher des données précieuses comme la météo de votre ville. Ainsi, l’utilisateur a accès à l’information sans même ouvrir l’application Weather. Dans le cas d’une application Calendrier, le Tile peut afficher le détail du prochain rendez-vous. Pour une alarme, le Tile peut laisser apparaitre le détail de la prochaine alerte.

Les Tiles doivent utiliser un template fourni par Microsoft. Il est possible d’y afficher des données et des images. Deux tailles de Tile existent : petit et large. Seul le petit est obligatoire.

En plus du Tile principal de votre application, il est possible de mettre en place des Tiles secondaires. Ces Tiles peuvent être considérés comme des sortes de raccourcis rapides à un emplacement précis de votre application. Par exemple, un utilisateur peut désirer avoir un accès rapide au profil de son meilleur ami sur Socialite. Pour cela, il a la possibilité de créer un raccourci qui sera matérialisé sous la forme d’un nouveau Tile. En sélectionnant ce Tile, il arrivera directement à l’endroit ciblé.

Les Tiles secondaires permettent donc aux gens de pointer des zones et éléments clés de vos applications.

Etre connecté et vivant
Les applications Metro peuvent rester actives grâce à deux procédés :

• Les « Live Tiles »
• Les notifications

Les Live Tiles sont des Tiles dans lesquels du contenu est affiché dynamiquement. Par exemple, le Tile de l’application Email peut faire apparaitre automatiquement le contenu du dernier email reçu. Une application dédiée aux photos peut utiliser son Tile pour faire apparaitre, à tour de rôle, les photos contenues dans les albums de l’utilisateur.

Les notifications permettent aux applications d’afficher brièvement un message d’information en bas à droite de l’écran. Là encore, les notifications doivent utiliser les templates proposés par Microsoft. Puisque l’utilisateur est susceptible de ne pas voir les notifications, il est conseillé de mettre également à jour le Tile pour afficher l’information.

Les Live Tiles et les Notifications fonctionnement selon la même architecture. Pour les mettre à jour, il existe 3 possibilités :

• En Local : Fonctionne uniquement quand l’application est en utilisation.
• Programmé : Une mise à jour est effectuée à un moment précis.
• Push : En utilisant WNS (Windows Push Notification Service), vous pouvez effectuer des mises à jour n’importe quand, même lorsque votre application n’est pas en fonctionnement.

Utiliser le « cloud »
Lorsque que vous retournez sur une application après un certain temps, il peut être intéressant de revenir à l’endroit exact ou vous étiez. Un peu comme si vous n’aviez jamais quitté l’application.

De même, si vous terminez le niveau d’un jeu, vous ne devriez pas devoir recommencer ce niveau, même si vous jouez à ce jeu sur un autre appareil.

Enfin, si vous changez un élément dans la configuration d’une application, vous ne devriez pas devoir refaire cette manipulation à nouveau, même si vous lancez cette application depuis un autre ordinateur.

Tout cela est possible grâce au Cloud ! En effet, si l’utilisateur se connecte à son appareil équipé de Windows 8 en utilisant son Windows Live ID, toutes les applications auront la possibilité de stocker des informations (préférences utilisateur, état, …) dans le Cloud.

Microsoft donne quelques exemples de données qu’il est intéressant de stocker :

• Préférences :
  • Ma ville préférée sur l’application Weather.
  • Mes abonnements RSS sur l’application News.

• Etats :
  • La page à laquelle je suis arrivé dans un livre.
  • Le dernier niveau terminé sur un jeu.
  • La dernière musique écoutée.

Pour les services additionnels et plus poussés, les développeurs ont la possibilité d’utiliser Windows Azure.

Conclusion
Cette présentation fût l’occasion d’en apprendre beaucoup sur les applications « Metro Style », comme l’utilisation des Contrats ou le système de notifications. Bien entendu, nous reviendrons en détails sur les points les plus importants dans de futurs billets. En attendant, je vous invite fortement à regarder cette conférence en allant à cette adresse.