Interactions tactiles pour Windows

Windows 8.1 propose un ensemble concis d’interactions tactiles qui sont utilisées dans l’ensemble du système. Si vous appliquez ce langage tactile de façon cohérente à votre application, les utilisateurs ne seront pas perdus. Votre application sera plus facile à appréhender et utiliser, et l’utilisateur n’en sera que plus confiant. Pour plus d’informations sur l’implémentation du langage tactile, voir Mouvements, manipulations et interactions.

 

Utilisateur qui interagit tactilement avec une tablette

 

Dans cet article :

  • Principes de conception pour l’interaction tactile
  • Langage tactile
  • Cibles tactiles
  • Position et prise en main
  • Rubriques associées

Principes de conception pour l’interaction tactile

Obtenir une réaction immédiate

Donnez confiance à l’utilisateur en lui proposant un retour visuel instantané dès qu’il touche l’écran. Les éléments interactifs doivent réagir par un changement de couleur, de taille ou de position. Les éléments non interactifs doivent afficher les images tactiles du système lorsque l’utilisateur touche l’écran.

Le contenu suit le doigt

Les éléments qui peuvent être déplacés ou glissés par un utilisateur, comme une zone de dessin ou un curseur, doivent suivre le doigt de l’utilisateur à mesure qu’il se déplace. Les boutons et autres éléments qui ne se déplacent pas doivent retrouver leur état par défaut lorsque l’utilisateur retire son doigt de l’élément.

Les interactions doivent être réversibles

Si vous prenez un livre, vous pouvez le remettre là où vous l’avez pris. Les interactions tactiles doivent avoir un comportement similaire. Elles doivent être réversibles. Offrez un retour visuel indiquant ce qui se passe lorsque l’utilisateur retire son doigt. Votre application pourra ainsi être explorée tactilement en toute sécurité.

Autoriser un nombre quelconque de doigts

Les utilisateurs touchent souvent l’écran avec plusieurs doigts, sans même s’en rendre compte. C’est pourquoi les interactions tactiles ne doivent pas radicalement changer selon le nombre de doigts qui touchent l’écran. Comme dans le monde réel, le fait de faire glisser quelque chose avec un ou trois doigts ne doit pas faire de différence.

Langage tactile

Appuyer de façon prolongée pour apprendre

Cette interaction tactile affiche des informations détaillées ou des éléments visuels didactiques (par exemple, une info-bulle ou un menu contextuel) qui ne vous demandent aucune action. Aucun des éléments affichés de cette manière ne doit empêcher les utilisateurs d’effectuer un mouvement panoramique s’ils commencent à faire glisser leurs doigts.

Important  Un appui prolongé peut être utilisé pour la sélection lorsque les mouvements panoramiques horizontal et vertical sont activés.

Appuyer pour l’action principale

Le fait d’appuyer sur un élément appelle son action principale (par exemple, le lancement d’une application ou l’exécution d’une commande).

Glisser pour effectuer un mouvement panoramique

Le glissement est principalement utilisé pour les mouvements panoramiques mais peut également l’être pour le déplacement (lorsque le mouvement est limité à un sens), le dessin ou l’écriture. Le glissement permet également de cibler de petits éléments denses en faisant glisser le doigt sur des objets connexes, comme des cases d’option.

Balayer pour sélectionner, commander et déplacer

Le fait de faire glisser le doigt sur une petite distance, perpendiculaire à la direction du mouvement panoramique (lorsque le mouvement est limité à un sens), permet de sélectionner des objets dans une liste ou une grille. Affichez la barre de l’application avec les commandes appropriées lorsque des objets sont sélectionnés.

Pincer et étirer pour agrandir

Les mouvements pincer et étirer sont généralement utilisés pour le redimensionnement, mais permettent également d’accéder directement au début, à la fin ou à n’importe quel endroit du contenu grâce au zoom sémantique. Un zoom sémantique propose un affichage réduit permettant de montrer des groupes d’éléments et des moyens rapides de s’y replonger.

Tourner pour faire pivoter

Le mouvement de rotation effectué avec deux doigts ou plus permet de faire pivoter un objet. Faites pivoter l’appareil lui-même pour faire pivoter l’écran tout entier.

Balayer à partir du bord pour les commandes d’application

Les commandes d’application sont affichées par un mouvement de balayage à partir du bas ou du haut de l’écran. Utilisez la barre d’application pour afficher les commandes de l’application.

Balayer à partir du bord pour les commandes système

Un mouvement de balayage à partir du bord droit de l’écran affiche les icônes des commandes système.

Un mouvement de balayage à partir du bord gauche permet de faire défiler les applications en cours d’utilisation.

Un mouvement de glissement du bord supérieur vers le bord inférieur de l’écran permet de fermer l’application active.

Un mouvement de glissement du haut vers le bas et vers la gauche ou la droite permet de placer l’application active de ce côté de l’écran.

Remarque  Les utilisateurs peuvent effectuer simultanément des manipulations directes, comme glisser pour effectuer un mouvement panoramique, pincer pour zoomer et tourner pour faire pivoter, quel que soit le nombre de points tactiles.

Cibles tactiles

Taille et efficacité : la taille de la cible influence le taux d’erreur

Graphique montrant la réduction des erreurs liées aux interactions tactiles dans le cas de cibles de plus grande taille

Il n’existe pas de taille idéale pour les cibles tactiles. Des tailles différentes conviennent à des situations différentes. Les actions aux conséquences importantes (comme supprimer ou fermer) ou les actions fréquentes doivent utiliser de grandes cibles tactiles. Les actions rarement utilisées avec des conséquences mineures peuvent utiliser de petites cibles.

Recommandations en matière de tailles cibles.

Taille minimale recommandée de 7x7

7x7 mm : taille minimale recommandée

7x7 mm est une bonne taille minimale si le fait de toucher la mauvaise cible peut être corrigé en un ou deux mouvements ou dans les cinq secondes. La marge entre les cibles est tout aussi importante que la taille des cibles.

Taille 9x9 recommandée pour la précision

Lorsque la précision compte

Les actions fermer, supprimer et autres actions ayant des conséquences importantes ne peuvent souffrir aucun appui accidentel. Utilisez des cibles de 9x9 mm si le fait de toucher la mauvaise cible requiert plus de deux mouvements, cinq secondes ou un changement de contexte majeur pour être corrigé.

Taille minimale de 5x5

Quand on sait d’emblée que cela ne rentrera pas

Si vous retrouvez à devoir tasser pour que tout rentre, vous pouvez utiliser des cibles de 5x5 mm si le fait de toucher la mauvaise cible peut être corrigé en un mouvement. Dans ce cas, il est primordial de prévoir une marge de 2 mm entre les cibles.

 

Accessibilité

Lorsque vous planifiez l’interface utilisateur et les interactions prises en charge par votre application, gardez à l’esprit le large éventail de fonctionnalités, handicaps et préférences des utilisateurs. Le fait de suivre depuis le début les principes de conception d’accessibilité permet de rendre votre application accessible au plus grand nombre d’utilisateurs possible. Pour plus d’informations sur la planification de l’accessibilité, voir Recommandations en matière d’accessibilité.

Tailles des doigts

Les gens disent souvent d’eux qu’ils ont de « gros doigts ». Pourtant même les doigts d’un bébé sont plus larges que la plupart des cibles tactiles.

L’image de gauche montre que la largeur d’un doigt d’un adulte lambda est d’environ 11 millimètres (mm), celle d’un bébé de 8 mm et celle de certains joueurs de basketball de plus de 19 mm.

Illustration montrant la grande variation de largeur de doigt

Position et prise en main

Concevoir une application tactile ne se limite pas à concevoir ce qui apparaît à l’écran. Il faut également concevoir la manière dont l’appareil sera tenu.

Les gens adoptent habituellement différentes façons de tenir une tablette.

La tâche en cours et la manière dont elle est présentée déterminent généralement le mode de prise en main. Toutefois, l’environnement immédiat et le confort physique jouent également sur la durée de maintien de la prise en main et sur la fréquence de changement.

Essayez d’optimiser votre application pour différents types de prise en main. Mais si une interaction implique naturellement une prise en main spécifique, optimisez votre application pour celle-ci.

Zones d’interaction

Les tablettes étant souvent tenues par les côtés, les angles inférieurs et les côtés sont des zones d’interaction idéales.

Zones d’interaction

Zones de lecture

Le contenu placé dans la moitié supérieure de l’écran est plus facile à voir que celui de la moitié inférieure, qui est souvent obstrué par les mains ou ignoré.

Zones de lecture

Prises en main courantes

Prise Prise en main et interaction Considérations de conception
Prise à une main et interaction avec l’autre main Une main qui tient, une autre pour les interactions modérées à moyennes
  • Le bord droit ou le bord inférieur offre une interaction rapide.
  • L’angle inférieur droit peut être obstrué par la main et le poignet.
  • Limiter la portée pour un toucher plus précis
  • Lecture, navigation, messagerie électronique et frappe modérée.
Prise à deux mains et interaction avec les pouces Deux mains qui tiennent, utilisation des pouces pour des interactions modérées à moyennes
  • Les angles inférieurs gauche et droit offrent une interaction rapide.
  • Les pouces ancrés améliorent la précision tactile.
  • Tout ce qui est placé au milieu de l’écran est difficile à atteindre.
  • Pour toucher le milieu de l’écran, il faut changer de position.
  • Lecture, navigation, frappe modérée, jeux.
Interaction avec les deux mains L’appareil est posé sur une table ou sur les genoux, utilisation des deux mains pour les interactions modérées à fortes
  • Le bas de l’écran offre une interaction rapide.
  • Les angles inférieurs peuvent être obstrués par les mains et les poignets.
  • Limiter la portée pour un toucher plus précis
  • Lecture, navigation, messagerie électronique et frappe importante
Interaction passive sans prise L’appareil est posé sur une table ou un support, avec ou sans interaction
  • Le bas de l’écran offre une interaction rapide.
  • Le fait de toucher le haut de l’écran obstrue le contenu.
  • Le fait de toucher le haut de l’écran risque de déséquilibrer un appareil posé sur un socle.
  • L’interaction à une certaine distance réduit la lisibilité et la précision.
  • Augmenter la taille de la cible pour améliorer la lisibilité et la précision
  • Regarder un film, écouter de la musique

 

Rubriques associées

Réponse à l’interaction utilisateur

Version téléchargeable des interactions tactiles

Interaction utilisateur : entrée tactile... et plus encore

Recommandations en matière de ciblage (applications du Windows Store)

Recommandations en matière de clavier tactile et de volet d’écriture manuscrite (applications du Windows Store)