Cette nouvelle version apporte son lot de nouveautés et de corrections. On pourrait par exemple citer l’implémentation de Skydrive, de tous les services Windows Live (rebaptisés pour l’occasion) ou encore la disparition du bouton Démarrer.

Pour les développeurs, c’est surtout l’occasion de découvrir la prochaine mouture de Visual Studio et du Framework .Net (version 4.5). Le principal changement de Visual Studio 11 réside dans son interface qui a fait l’objet d’une refonte totale pour coller à l’esprit Metro (ce qui provoque quelques réactions dans la communauté).

Pour télécharger tout cela, rendez-vous sans plus attendre à cette adresse.

La capture d’écran ci-dessus montre clairement l’un des premiers changements importants. Sous Windows 7 (et antérieurs), c’est l’utilisateur qui manage lui-même la durée de vie d’une application. Ce dernier peut lancer 1 ou plusieurs applications en même temps et a également la liberté de fermer les applications de son choix, mettant par la même occasion fin à leur processus.

Sous Windows 8, les choses sont différentes. C’est désormais le système qui manage la durée de vie des applications. Quand une application est lancée pour la première fois (on appelle cette étape l’activation), celle-ci rejoint les applications en mémoire et y demeure. Si l’application est au premier plan, elle est dite « active ». A l’inverse, toutes les applications en arrière plan sont considérées comme « suspendues ». Par défaut, l’utilisateur n’a pas la possibilité de fermer complètement une application lancée (sauf en passant par le Gestionnaire de Tâches pour forcer la fermeture). Le passage d’une application en mode Actif ou Suspendu est donc géré par le système. L’utilisateur choisi simplement l’application qui apparait au premier plan.

On distingue donc 3 états dans la durée de vie d’une application : Running, Suspended et Terminated. Une application au premier plan est en exécution (Running) et est mise en pause (suspending) dés son passage en arrière plan. En réalité, ce passage se fait après un court délai (quelques secondes). Elle passe alors en mode « suspended ». Si l’application passe de nouveau au premier plan, elle repasse en exécution automatiquement (resuming). Ce passage se fait lui instantanément afin d’assurer une fluidité dans les actions de l’utilisateur. Enfin, dans certains cas précis, tel qu’un manque de mémoire, le système peut décider de terminer certaines applications suspendues. Cela intervient également en cas de plantage d’une application, de fermeture de Windows ou de changement d’utilisateur.

Il est bon de préciser que les applications en suspens n’ont aucun impact sur la durée de vie de la batterie. Entendez par là que ces applications ne consomment aucune ressource au niveau du processeur mais subsistent uniquement en mémoire.

Voyons encore un peu plus en détails le processus de transition des différents états de vie d’une application. Comme on peut le constater sur le schéma ci-dessous, les applications mises en suspens le sont en réalité au bout de 5 secondes. Le but étant de permettre aux développeurs de lancer du code sur l’évènement (OnSuspend) afin, par exemple, de sauvegarder l’état de l’application. La sauvegarde est utile car si l’application venait à être terminée (à cause d’un manque de mémoire), celle-ci ne serait pas avertie. Autrement dit, il est impossible d’exécuter du code au moment de la fermeture totale d’une application. Il faut donc anticiper cette possibilité !

Une application en suspens qui redevient active (resuming) est par contre notifiée de cet évènement (OnResume).

Remarquons qu’il est donc impossible de lancer plusieurs instances d’une même application. Si l’application est déjà en suspens, la sélectionner depuis le bureau ne fera que la remettre au premier plan.

Résumons l’état suspendu en quelques points :

• La suspension d’une application n’est pas planifiée. Cela intervient seulement si l’application passe en arrière plan.
• Une application suspendue n’utilise pas le CPU, les disques ou les différentes connectivités (web, …).
• L’application demeure simplement en mémoire, ce qui explique son impact nul sur la batterie de l’appareil.
• Tous les threads sont suspendus.
• Le kernel s’assure que la suspension d’une application n’intervient pas à un moment critique pouvant causer des plantages.
• Le passage de l’état suspendu à l’état actif se fait instantanément.

Différentes manières de lancer une application
Sous Windows 7, le lancement d’une application se faisait la plupart du temps en sélectionnant le raccourci présent sur le bureau ou dans le menu démarrer.

Sous Windows 8, l’activation d’une application peut se faire depuis les tuiles (qui remplacent les icones du bureau) mais peut également intervenir depuis les menus de recherche ou encore de partage (voir schéma ci-dessous).

Comme nous l’avions déjà évoqué dans le billet (« Comment faire une bonne application Metro »), les applications Metro Style peuvent utiliser des Contrats afin de se lier au système et / ou avec d’autres applications. On trouve par exemple un contrat « Search » et un contrat « Share ». Pour plus de détails, je vous invite à lire le billet susmentionné, ou encore d’attendre un prochain article qui détaillera en pratique comment implémenter ces fameux contrats. Mais revenons au cycle de vie de nos applications.

En lançant une application depuis un contrat, des informations seront transmises afin de conserver le contexte. Prenons l’exemple d’une application qui permet de gérer sa médiathèque (qu’on appellera sobrement « Médiathèque »). L’utilisateur y stocke les films en sa possession en précisant, entre autre, leur nom. On pourrait trouver utile d’implémenter le contrat « Search » dans cette application. Ainsi, en utilisant le menu recherche de Windows 8, l’utilisateur se verrait automatiquement proposer de lancer sa recherche dans le contexte de l’application « Médiathèque ».

Dans l’application Médiathèque, il est donc primordial de prendre cela en compte afin de récupérer, dans ce cas précis, la saisie initiale de l’utilisateur pour lancer la recherche dans la Médiathèque.

Une application peut donc se lancer de différentes manières, surtout si celle-ci implémente un ou plusieurs contrats.

Utilisation du Splash Screen
En lançant une application pour la première fois (activation), celle-ci doit inévitablement se charger et effectuer quelques traitements. Pendant ce temps, un Splash Screen est affiché sur l’écran de l’utilisateur. A la fin du chargement, le Splash Screen disparait pour laisser place à la vue principale de l’application. Toutes ces étapes sont parfaitement expliquées dans le schéma ci-dessous :

C’est le système qui s’occupe automatiquement d’afficher ce Splash Screen. Le développeur peut très simplement choisir la couleur et l’image à afficher sur cet écran d’attente. Signalons que le Splash Screen ne peut pas être affiché plus de 15 secondes. Au delà de ce délai, si votre application n’est toujours pas chargée et visible à l’écran, le système la terminera automatiquement.

Si votre application nécessite un chargement de plus de 15 secondes à son activation, vous devez mettre en place un Splash Screen « Etendu ». En fait, il s’agit d’une astuce consistant à utiliser la première vue de l’application comme un Splash Screen. Ainsi, pour le système l’application est bien en exécution alors que pour l’utilisateur, le chargement est toujours visible.

Signalons à ce titre que l’API Splash Screen est disponible.

Le schéma ci-dessus résume clairement le processus d’activation d’une application.

Les bonnes pratiques à avoir
Bonnes pratiques de conservation et de restauration du contexte :

• Une application en exécution doit enregistrer de manière incrémentale les données utilisateur.
• Quand l’application passe en arrière plan (Suspending), il faut sauvegarder l’état de l’application à ce moment précis (par exemple, l’écran sur lequel se trouve l’utilisateur, la dernière page lue d’un livre, le dernier niveau terminé d’un jeu, …). Le fait d’avoir sauvegardé les données utilisateur tout au long de l’exécution de l’application permet de gagner du temps lors de la mise en suspens. Vous devez partir du principe que l’application peut être terminée et avoir en mémoire que vous ne serez pas notifié de cet événement. C’est donc votre dernière chance d’enregistrer l’état de l’application !
• Quand une application « En suspens » est activée, vous n’avez rien à faire. En effet, l’application est restée en mémoire tout ce temps.
• Quand une application est activée pour la première fois, il faut restaurer les données utilisateurs qui ont été précédemment sauvegardées. L’utilisateur doit avoir l’impression de n’avoir jamais quitté l’application.

Bonnes pratiques lors de l’activation d’une application :

• Il faut activer une application rapidement. Ce qui n’est pas utile peut être fait en différé.
• L’activation permet d’initialiser l’application et éventuellement de restaurer les données utilisateurs.
• Si le chargement dure plus de 15 secondes, il faut utiliser un Splash Screen « Etendu ».

Bonnes pratiques lors de la suspension d’une application :

• La sauvegarde des données doit être rapide, moins de 5 sec. En effet, c’est le temps que laisse le système à l’application avant de passer réellement à l’état suspendu.
• Sauvegarder les données de manière incrémentale avant que l’application ne soit mise en suspens.
• Avoir à l’esprit qu’une application en suspens peut être terminée sans notification.
• Mettez à jour la tuile de l’application.

En résumé
Le cycle de vie des applications Metro Style est managé par le système et non plus par l’utilisateur. Une fois activée, une application demeure en mémoire sauf si le système décide de la terminer (manque de mémoire, …). Ce changement nécessite quelques modifications au niveau de la conception des applications afin, par exemple, de prendre en compte la gestion de la sauvegarde et de la restauration des données utilisateurs.

Ce billet, qui est dédié au cycle de vie des applications Metro Style, fait volontairement l’impasse sur les Tuiles et les notifications. En effet, il y a beaucoup de choses à dire sur le sujet et un article dédié sera publié très prochainement sur mon blog.

Pour gérer cette grande diversité d’affichage, Microsoft pose quelques recommandations utiles mais aussi certaines obligations. Passons en revue tous ces éléments.

Snap, Filled ou plein écran
Toute application Metro Style disponible sur le Market Place doit obligatoirement implémenter 3 types d’affichage : Snap, Filled et le traditionnel Plein écran.

Nous ne détaillerons pas le mode plein écran puisqu’il s’agit du format d’affichage traditionnel dans lequel l’application occupe la totalité de l’écran. Intéressons nous plutôt aux modes Snap et Filled. Sous Windows 8, l’utilisateur a en effet la possibilité d’afficher deux « applications » en même temps, l’une occupant environ 1/3 de l’écran et l’autre le reste. Vos applications étant susceptibles d’être affichées en mode réduit (Snap) ou en mode Filled, il est impératif de penser à adapter l’affichage pour offrir une expérience utilisateur optimale en toute circonstance ! Vous devez toujours avoir cet objectif en tête.

En effet, si l’utilisateur ne peut plus utiliser convenablement votre application en mode réduit, celle-ci perdra fortement en intérêt (et sera rapidement supprimée).

Comme le montre la capture d’écran ci-dessus, le mode Snap occupe 320 px en largeur. Cette valeur est universelle, quelque soit la résolution ou la taille de votre écran. C’est donc la valeur du mode Filled (ici 1024 px de largeur) qui sera susceptible de varier selon la taille de votre écran.

Prenons maintenant l’exemple d’une application, affichée ci-dessous en plein écran :

L’utilisateur peut y découvrir une série de Grid contenant divers éléments. Sans adaptation de l’affichage, le mode Snap serait inutilisable :

Comme vous pouvez le constater, la vue n’est pas du tout optimisée et l’utilisateur devra sans cesse scroller pour parcourir toutes les Grid.

La capture ci-dessous montre en revanche une bonne adaptation de l’affichage pour le mode Snap :

La vue étant réduite, l’affichage a été fortement revu pour s’étirer en hauteur et non plus en largeur. La navigation en sera beaucoup plus facile et agréable.

Signalons que l’affichage Snap peut être placé à gauche ou à droite de l’écran

Détecter le type d’affichage
Pour terminer sur cette partie, voyons comment détecter les changements au niveau de l’affichage. Pour cela, il est possible d’utiliser la propriété Value de la classe ApplicationLayout ou de s’abonner à l’évènement LayoutChanged.

Rappelons pour ceux qui découvrent Windows 8 que l’utilisateur ne peut plus redimensionner à sa guise la taille d’une fenêtre. Pour être exact, il n’y a plus de fenêtre. Une application est donc, soit en plein écran, soit en mode Snap, soit en mode Filled (ou éventuellement en arrière plan). Il n’y a pas d’autres cas possible.

Portrait ou paysage
Une application Metro Style est susceptible d’être affichée en mode portrait ou en mode paysage. Sur les périphériques tels que les tablettes, l’accéléromètre permet d’ailleurs à l’utilisateur de basculer d’un mode à l’autre en tournant simplement son appareil.

Il est conseillé d’adapter l’affichage en mode portrait pour rendre l’utilisation de votre application toujours aussi agréable. Dans l’exemple ci-dessous, cela se traduit par une réorganisation des éléments des différentes Grid afin d’utiliser pleinement la hauteur disponible.

Il est cependant possible de bloquer l’orientation si nécessaire. Dans ce cas, l’affichage ne basculera pas, même si l’utilisateur tourne sa tablette. Signalons également que l’affichage Snap n’est pas disponible en mode portrait, ce qui est logique puisque la largeur est fortement réduite. En résumé, votre application sera toujours affichée en plein écran en mode portrait.

Pour détecter les changements d’orientation, vous pouvez au choix utiliser la propriété CurrentOrientation ou l’évènement OrientationChanged.

Une variété de résolution
La encore, la résolution des écrans sur lesquels vont s’afficher les applications Metro Style peut fortement varier. Cependant, Microsoft a placé certaines limites. Tout d’abord, la résolution minimale ne peut pas être en dessous de 1024*768. Ainsi, toutes les tablettes Windows 8 devront obligatoirement avoir un écran avec une résolution égale ou supérieure à cette valeur. La résolution considérée comme « de base » est de 1366*768.

Avec des densités de pixels pouvant fortement varier, l’expérience tactile peut s’en trouver détériorée. En effet, un élément manipulable (un bouton par exemple) sera forcément plus petit si la résolution est plus élevée.

Il est donc important d’adapter la taille des éléments selon la résolution afin de maintenir une expérience tactile unique et agréable.

Windows effectue cette mise à l’échelle automatiquement selon 3 pourcentages : 100 %, 140 % et enfin 180 %. Pour un résultat optimal, il est conseillé de préférer les images vectorielles aux images bitmap. Quand ce n’est pas possible, il est recommandé de fournir 3 versions de chaque image, une version pour chaque niveau de mise à l’échelle (100%, 140% et 180% donc).

Enfin, signalons que si vous avez besoin de détecter la résolution de l’écran et ses éventuels changements, vous pouvez utiliser la propriété Bounds et l’évènement SizeChanged.

Conclusion
Le design d’une application devient un élément aussi important que ses fonctionnalités. Le design ne se résume plus uniquement à donner un rendu visuel sympa à une application. Loin de là. Le design est l’étape nécessaire pour avoir une application agréable à utiliser en toute circonstance. Une application doit donc en prendre toutes les notions évoquées plus haut pour offrir une expérience utilisateur de qualité.

Bien entendu, chaque développeur ne peut pas s’approviser designer et toutes les entreprises ne vont pas embaucher une personne pour s’occuper uniquement de cet aspect. Mais même sans être designer, il est possible, en suivant certaines guidelines, d’avoir une application agréable à regarder et à utiliser. De ce point de vue, les applications Metro Style sont une aide non négligeable. Avec les diverses règles mises en place par Microsoft et l’apparition de nouveaux contrôles, il est en effet beaucoup plus aisé de réaliser une application au look sympa et ergonomiquement efficace.

Nous allons donc nous intéresser de manière plus précise à la partie tactile des applications Metro Style en essayant de montrer comment tirer parti efficacement de ces nouvelles possibilités en matière d’interaction.

Une interface tactile nécessite t’elle un nouveau langage d’interaction ?

Voilà la question essentielle qui doit être posée et à laquelle Microsoft a tenté d’apporter une réponse lors d’une conférence de la Build 2011. Faisons tout d’abord un état des lieux. On peut distinguer 3 types d’interfaces permettant une interaction avec l’utilisateur :

• Interface en ligne de commande : C’est l’interface la plus ancienne. L’utilisateur peut saisir des commandes sous formes de chaines de caractères et voit les résultats sous ce même format. C’est le clavier qui est utilisé pour interagir avec le système.
• Interface graphique : L’interface en ligne de commandes a laissé place aux interfaces graphiques afin de s’ouvrir aux grands publics. Avec l’apparition des interfaces graphiques, un nouveau périphérique est apparu pour faciliter les interactions : la souris. Désormais, l’utilisateur peut utiliser son clavier pour saisir des commandes et sa souris pour effectuer diverses actions (sélectionner un élément, ouvrir, …).
• Interface tactile : Cette interface est la plus récente. Ici, l’utilisateur interagit avec le système en touchant son écran, autrement dit l’interface. Dés lors, plusieurs questions doivent se poser. Comment sélectionner un élément (équivalent du clic) ? Comment l’ouvrir (équivalent du double clic) ? Comment faire un défilement (équivalent de la roulette) ? Ce sont ces questions qui doivent être résolues afin d’offrir une expérience tactile agréable et utile. Cela se traduit par l’instauration d’un nouveau langage d’interaction.

Les objectifs du langage tactile sous Windows 8 :
Le langage tactile mis en place sous Windows 8 doit répondre à plusieurs objectifs :

• Etre simple et consistant : Ce nouveau langage doit être simple à assimiler et répondre à tous les besoins courants.
• Faire appel à des gestes simples et limités : Les gestes à faire doivent être faciles à réaliser. Demander à l’utilisateur de faire une manipulation excessivement compliquée nécessitant 3 doigts et des mouvements précis n’a aucun intérêt !
• Avoir des manipulations directes.
• Avoir des interactions réversibles : Comme pour le glisser-déposer à la souris, l’utilisateur doit pouvoir annuler son action jusqu’au dernier moment.
• Faire un usage limité des gestes chronométrés : Les gestes qui imposent des contraintes de temps doivent être évités ou utilisés au minimum.
• Pas de mode : Votre application ne doit pas avoir une interface pour une utilisation tactile et une autre interface pour une utilisation à la souris.

En conséquence, les commandes tactiles ne doivent pas être une simple transposition des commandes souris / clavier. Au contraire, elles doivent être utilisées de façon intelligente et intuitive afin d’en tirer le meilleur.

Les interactions tactiles de Windows 8 :

• Swipe pour sélectionner : Comment sélectionner un ou plusieurs éléments en utilisant uniquement les doigts ? Microsoft propose le « Swipe ». Un « Swipe » est un léger glissement du doigt sur la surface de l’écran. Pour sélectionner un ou plusieurs élément(s) (dans une liste par exemple), il suffit de poser le doigt dessus et de le faire glisser légèrement vers le bas. Un indicateur visuel permet de confirmer la sélection. Microsoft recommande d’utiliser le « Swipe » pour effectuer une sélection. A ce titre, signalons que les composants tels que la ListBox ou la Grid implémentent par défaut cette commande.

  

• Toucher et maintenir pour avoir des détails : Ce geste permet d’afficher le Tooltip de l’élément visé. Il suffit donc de placer le doigt sur l’élément et de le laisser. A la souris, on réaliserait cette action en laissant le curseur sur l’élément voulu.

  

• Toucher brièvement pour effectuer une action primaire, comme ouvrir une application.
• Faire glisser pour déplacer : Pour cette interaction, je me permets de m’auto-citer en reprenant un exemple de mon précédent billet que je trouve très parlant.
  

  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.

• Pincer pour jouer avec le zoom : C’est un mouvement bien connu des utilisateurs de Smartphone tactiles. En plaçant deux doigts sur l’écran, on peut ainsi effectuer zoom en les écartant, ou, au contraire, dézoomer en les rapprochant. A noter que Microsoft parle de deux types de zoom dans les applications. On a tout d’abord le zoom optique qui permet d’agrandir une photo par exemple. Mais on parle également de zoom sémantique.

  

  Prenons l’exemple d’une Grid affichant les types de films disponibles dans une bibliothèque. On y trouverait donc des éléments tels que Science Fiction, Policier, Aventure ou encore Comédie. L’utilisateur peut parfaitement sélectionner un élément, ce qui provoquera l’affichage des films de cette catégorie. Mais on peut imaginer une autre manière de faire. En zoomant sur les éléments de la liste, l’utilisateur peut ainsi « entrer » à l’intérieur et en voir le contenu. En dézoomant, l’utilisateur reviendra tout naturellement à la liste des types de films. On peut bien sur imaginer un nombre beaucoup plus important de niveaux de zoom. Notons que la transition entre chaque niveau se fait d’une manière très naturelle. Au final, le zoom sémantique se révèle très agréable à utiliser. On le retrouve d’ailleurs sur la fenêtre d’accueil de Windows 8 contenant les fameux Tiles. En effectuant un zoom arrière, les Tiles se retrouvent regrouper par catégorie. L’exemple ci-dessous montre l’utilisation du zoom sémantique sur une application calendrier :

  

• Swipe depuis les rebords de l’écran : Ce « Swipe » reprend le fonctionnement de celui pour sélectionner un élément sauf qu’il doit être effectué sur un des rebords de l’écran. En haut ou en bas de l’écran, le Swipe permet de faire éventuellement apparaitre une barre d’application contenant, par exemple, des commandes avancées.

  

• Effectuer une rotation. Il s’agit ici d’un mouvement classique qui permet, en posant deux doigts à la surface de l’écran, de faire tourner l’élément choisi en réalisant une rotation avec les doigts.

En plus d’imposer un nouveau langage d’interaction, les interfaces tactiles amènent aussi quelques changements sur le plan visuel. La plupart de ces changements ont pour objectif d’améliorer l’expérience utilisateur et l’ergonomie.

Des commandes bien placées …
Une application tactile doit donc être facile d’utilisation. Pour cela, les commandes doivent être accessibles rapidement. A ce titre, il est important de connaitre la nature des appareils utilisés et la façon dont les utilisateurs vont s’en servir. Avec Windows 8, le panel des appareils est potentiellement assez diversifié : PC de salon, PC portable, notebook ou encore tablette. L’utilisation des tablettes imposent une réflexion quant au placement des commandes tactiles. En effet, l’utilisateur va tenir sa tablette par les côtés avec son pouce de chaque côté de l’écran et les autres doigts à l’arrière. Les pouces étant assez petits, leur champ d’action est plutôt faible.

Le schéma ci-dessus montre cela très clairement. Les zones en vert sont les parties accessibles très facilement par l’utilisateur en toute circonstance. En jaune, on retrouve les zones un peu plus éloignées mais toujours utilisables. Les zones en rouge représentent quant à elle les limites du champ d’action du pouce. Au delà de ces zones, l’utilisateur n’aura pas d’autre choix que de changer sa manière de tenir sa tablette (en la tenant à une main par exemple). Il est vivement recommandé de concentrer les commandes de ses applications dans les zones accessibles. Obliger l’utilisateur à changer la position de ses mains n’est pas une bonne chose (sauf pour l’utilisation de commande avancée ou pour certaines interactions comme le zoom, les rotations, …).

… et espacées
Toujours dans le même but, il est nécessaire de revoir la taille des boutons et autres éléments pouvant être manipulés avec le doigt de l’utilisateur. En effet, un doigt est inévitablement moins précis qu’un pointeur de souris. Il est impossible de cibler un pixel précisément avec son doigt par exemple.

Le graphique ci-dessous montre la corrélation entre la taille des objets et le nombre d’erreurs produites. Comme on peut s’en douter, plus un objet est gros, moins le risque d’erreur sera élevé. Ainsi, un élément (bouton, item dans une liste, …) de 11 mm provoquera un taux d’erreur de 1/1000, ce qui est très faible. En réduisant à 9 mm, le taux passe à 1/100, ce qui reste encore largement acceptable. A partir de 7 mm, le taux atteint 1/25. Au delà, le nombre d’erreurs augmente de manière exponentielle !

Devant ce constat, Microsoft apporte un certain nombre de recommandations. La taille recommandée est de 7×7 mm. Pour une précision idéale, la taille optimisée est de 9×9 mm. Enfin, pour des éléments petits, la taille optimisée est de 5×5 mm. Il est déconseillé d’aller en dessous de cette taille.

Un autre élément à prendre en compte est l’espacement entre les objets. Il est impératif de respecter une marge de 2 mm entre chaque objet manipulable tactilement. En dessous, les erreurs de manipulation seront trop fréquentes.

Dans un prochain article, nous détaillerons les différents types d’affichage d’une application Metro Style (portrait, paysage, filled, snaped, …).

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.