Blog de Steven Hanquez

Un article de Hathortos    Pas de commentaires

Je vous propose aujourd’hui un second billet dédié à Windows 8 et aux applications Metro Style. Si vous ne l’avez pas encore fait, je vous invite à lire mon précédent article (« Comment faire une bonne application Metro Style ») en premier lieu.

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, …).