Recommandations en matière de ciblage

Cette rubrique décrit l’utilisation de la géométrie de contact pour le ciblage tactile dans la nouvelle interface utilisateur Windows et fournit des recommandations en matière d’expérience utilisateur à prendre en compte lors de l’utilisation de ces nouveaux mécanismes de ciblage dans vos applications du Windows Store.

Voir cette fonctionnalité en action dans le cadre de notre série Fonctionnalités d’application de A à Z: Interaction utilisateur : entrée tactile... et plus encore

Vue d’ensemble du ciblage via la géométrie de contact

Le ciblage tactile dans Windows 8 utilise la zone de contact entière de chaque doigt détecté par un numériseur tactile. Le jeu de données d’entrée plus grand et plus complexe généré par le numériseur est utilisé pour accroître la précision lors de la détermination de la cible souhaitée (ou la plus probable) de l’utilisateur. Ceci permet de garantir à l’utilisateur une expérience bien plus satisfaisante en augmentant sa précision et en lui inspirant confiance en ses interactions tactiles.

Les recommandations suivantes décrivent comment optimiser votre application pour le ciblage tactile.

Mesures et mise à l’échelle

Pour conserver la cohérence des différentes tailles d’écran et densités de pixels, toutes les tailles de cibles sont représentées en unités physiques (millimètres). Pour convertir les unités physiques en pixels, utilisez l’équation suivante :

Pixels = densité de pixels × mesure

L’exemple suivant utilise cette formule pour calculer la taille des pixels d’une cible de 9 mm sur un affichage de 135 ppp (pixels par pouce) avec un plateau d’échelle de 1x :

Pixels = 135 ppp × 9 mm

Pixels = 135 ppp × (0,03937 pouces/mm × 9 mm)

Pixels = 135 ppp × 0,35433 pouces

Pixels = 48 pixels

Ce résultat doit être ajusté en fonction de chaque plateau d’échelle défini par le système.

Seuils

Des seuils de distance et de temps peuvent être utilisés pour déterminer le résultat d’une interaction.

Par exemple, lorsqu’un appui est détecté, il est enregistré si l’objet est glissé de moins de 2,7 mm par rapport au point d’appui et que le doigt est levé dans les 0,1 seconde suivant l’appui. Le fait de déplacer le doigt sur l’écran au-delà de ce seuil de 2,7 mm entraîne un glissement de l’objet et sa sélection ou son déplacement (pour plus d’informations, voir Recommandations en matière de glissement croisé). En fonction de votre application, le fait de maintenir appuyé le doigt pendant plus de 0,1 seconde peut provoquer de la part du système une interaction d’auto-révélation (pour plus d’informations, voir Recommandations en matière de retour visuel).

Taille des cibles

Il n’existe pas de recommandation particulière et définitive en matière de taille de cible ou de son emplacement dans votre application. La taille et la zone cible d’un objet dépendent de divers facteurs, notamment des scénarios d’expérience utilisateur et du contexte d’interaction.

Le schéma suivant montre comment la taille de la cible est généralement une combinaison de la cible visuelle, de la taille réelle de la cible et de l’éventuel espacement entre la cible réelle et d’autres cibles potentielles.

Schéma des tailles recommandées pour la cible visuelle, la cible réelle et l’espacement.

Le tableau suivant affiche la liste des tailles minimales et recommandées pour tous les composants d’une cible tactile.

Composant de cible Taille minimale Taille recommandée
Espacement 2 mm Non applicable
Taille visuelle de la cible < 60% de la taille réelle 90 à 100% de la taille réelle
Taille réelle de la cible 9 x 9 mm (48 x 48 px à 1x)

Pour les éléments dont la taille est inférieure à la taille conseillée dans les recommandations en matière d’expérience utilisateur, la distance entre le centre d’un élément et le centre de l’autre élément doit être d’au moins 9 mm.

Non applicable
Taille totale de la cible 11 x 11 mm (environ 60 px : trois unités de grille de 20 px à 1x) 13,5 x 13,5 mm (72 x 72 px à 1x)

Ceci implique que la taille combinée de la cible réelle et de l’espacement soit supérieure à leurs valeurs minimales respectives.

 

Vous pouvez modifier ces recommandations en matière de tailles de cibles en fonction du scénario particulier de votre application. Certaines des remarques suivantes liées à ces recommandations doivent être prises en compte :

  • Fréquences des interactions tactiles : il est recommandé que la taille des cibles utilisées de manière répétée ou fréquente soit supérieure à la taille minimale.
  • Conséquences des erreurs : les cibles dont l’utilisation par erreur peut être lourde de conséquences doivent être affectées d’un espacement supplémentaire et placées à une distance plus éloignée du bord de la zone de contenu. Ceci concerne tout particulièrement les cibles fréquemment utilisées.
  • Position dans la zone de contenu
  • Facteur de forme et taille d’écran
  • Position des doigts
  • Visualisations tactiles
  • Digitaliseurs matériel et tactile

Aide au ciblage

Windows offre une aide au ciblage pour prendre en charge les scénarios dans lesquels les recommandations en matière de taille ou d’espacement minimal présentées ici ne peuvent pas s’appliquer ; par exemple, des liens hypertexte sur une page Web, des contrôles de calendrier, des listes déroulantes et des zones de liste déroulante ou une sélection de texte.

Ces améliorations de la plateforme de ciblage et les comportement de l’interface utilisateur fonctionnent ensemble avec le retour visuel (interface utilisateur de résolution des ambiguïtés) afin d’améliorer la précision et la confiance de l’utilisateur. Pour plus d’informations, voir Recommandations en matière de retour visuel.

Si la taille d’un élément tactile doit être inférieure à la taille de cible minimale recommandée, vous pouvez utiliser les techniques suivantes pour réduire les problèmes de ciblage qui en découlent.

Connexion

La connexion est un signal visuel (un connecteur situé entre un point de contact et le rectangle englobant d’un objet) qui sert à indiquer à l’utilisateur qu’il est connecté à un objet et qu’il interagit avec celui-ci, même si le contact d’entrée ne touche pas directement l’objet. Ceci peut se produire dans les cas suivants :

  • Un contact tactile a été détecté pour la première fois dans un certain seuil de proximité d’un objet et cet objet a été identifié comme la cible la plus probable du contact.
  • Un contact tactile a été éloigné d’un objet, mais il reste encore dans un seuil de proximité.

Cette fonctionnalité n’est pas exposée aux développeurs d’applications du Windows Store en JavaScript.

Frottement

Le frottement consiste à toucher n’importe où dans un champ de cibles et de laisser glisser le doigt pour sélectionner la cible souhaitée sans le lever tant qu’il n’est pas sur la cible souhaitée. Avec cette technique, également appelée « activation par décollage », l’objet qui est activé, est celui qui a été touché en dernier lorsque l’utilisateur a levé le doigt de l’écran.

Pour concevoir des interactions de frottement, tenez compte des recommandations suivantes :

  • Le frottement est utilisé conjointement avec l’interface utilisateur de résolution des ambiguïtés. Pour plus d’informations, voir Recommandations en matière de retour visuel.
  • La taille minimale recommandée pour une cible tactile de frottement est de 20 px (3,75 mm à 1x).
  • Le frottement est prioritaire lorsqu’il est effectué sur une surface de défilement panoramique, telle qu’une page Web.
  • Les cibles de frottement doivent être placées à proximité les unes des autres.
  • L’action est annulée si l’utilisateur cesse de faire glisser son doigt sur la cible de frottement.
  • La connexion à une cible de frottement est spécifiée si les actions effectuées par la cible sont sans danger ; par exemple, passer d’une date à une autre dans un calendrier.
  • La connexion est spécifiée dans une seule direction, horizontalement ou verticalement.

Rubriques associées

Conceptuel

Recommandations en matière d’interactions utilisateur courantes

Conception de l’interaction tactile

Didacticiel (applications du Windows Store en JavaScript)

Démarrage rapide : pointeurs

Démarrage rapide : manipulations et mouvements DOM

Démarrage rapide : actions statiques

Démarrage rapide : actions de manipulation

Didacticiel (applications du Windows Store en C#/VB/C++ et XAML)

Démarrage rapide : entrée tactile

Démarrage rapide : pointeurs

Didacticiel (applications du Windows Store en C++ avec DirectX)

Réponse à l’entrée tactile (DirectX et C++)

Exemples (DOM)

Exemple de zoom, de panoramique et de défilement HTML

Entrée : exemple de mouvements instanciables

Exemples (API d’applications du Windows Store)

Entrée : exemple de manipulations et de mouvements (JavaScript)

Entrée : exemple de mouvements Windows 8

Entrée : exemple d’événements d’entrée utilisateur XAML

Exemple de zoom, de panoramique et de défilement XAML

Exemples (DirectX)

Exemple d’entrée tactile DirectX

Entrée : exemple de manipulations et de mouvements (C++)

Entrée : exemple de test de positionnement tactile

Référence

Windows.UI.Core

Windows.UI.Input

Windows.UI.Xaml.Input