Partager via


Toucher

Remarque

Ce guide de conception a été créé pour Windows 7 et n’a pas été mis à jour pour les versions plus récentes de Windows. La plupart des instructions s’appliquent toujours en principe, mais la présentation et les exemples ne reflètent pas notre guide de conception actuel.

Toutes les applications Microsoft Windows doivent offrir une expérience tactile exceptionnelle. Et la création d’une telle expérience est plus facile que vous ne le pensez.

L’interaction tactile fait référence à l’utilisation d’un ou plusieurs doigts pour fournir une entrée via un affichage du périphérique et interagir avec Windows et les applications. Une application optimisée pour l’interaction tactile a un modèle d’interface utilisateur et d’interaction conçu pour prendre en charge les zones de contact plus larges et moins précises du toucher, les différents facteurs de forme des appareils tactiles, et les nombreuses postures et positions de prise que les utilisateurs peuvent adopter lors de l’utilisation d’un appareil tactile.

User interacting with tablet by using touch

Chaque périphérique d’entrée a ses points forts. Le clavier est idéal pour l’entrée de texte et l’exécution de commandes avec un mouvement minimal de la main. La souris est idéale pour un pointage efficace et précis. L’interaction tactile est idéale pour la manipulation d’objets et pour exécuter des commandes simples. Un stylet est idéal pour l’expression libre, comme avec l’écriture manuscrite et le dessin.

Windows 8.1 est optimisé pour la réactivité, la précision et la facilité d’utilisation avec l’interaction tactile tout en prenant entièrement en charge les méthodes d’entrée traditionnelles (telles que la souris, le stylet et le clavier). La vitesse, la précision et le retour d’information tactile qu’offrent les modes d’entrée traditionnels sont familiers et attrayants pour de nombreux utilisateurs et potentiellement mieux adaptés à des scénarios d’interaction spécifiques.

Vous trouverez des instructions relatives à la souris, au stylet et à l’accessibilité dans des rubriques distinctes.

Lorsque vous réfléchissez à l’expérience d’interaction pour votre application :

Ne supposez pas que si une interface utilisateur fonctionne bien pour une souris, elle fonctionne également bien pour l’interaction tactile. Bien que la bonne prise en charge de la souris soit un début, une bonne expérience tactile a quelques exigences supplémentaires.

Supposez que si une interface utilisateur fonctionne bien pour l’interaction tactile, elle fonctionne également bien pour un stylet. En rendant votre application compatible avec l’interaction tactile, vous pouvez également fournir une bonne prise en charge du stylet. La principale différence est que les doigts ont une extrémité plus arrondie. Ils ont donc besoin de cibles plus grandes.

Avec l’interaction tactile, vous pouvez manipuler directement des objets et l’interface utilisateur, ce qui en fait une expérience plus rapide, naturelle et attrayante.

Offrir une expérience tactile exceptionnelle

Vous devez vous assurer que les utilisateurs peuvent effectuer efficacement des tâches critiques et importantes à l’aide d’une entrée tactile. Toutefois, certaines fonctionnalités d’application, telles que la manipulation de texte ou de pixel, peuvent ne pas convenir à l’interaction tactile et peuvent être réservées pour le périphérique d’entrée le plus approprié.

Si vous n’avez pas beaucoup d’expérience dans le développement d’applications tactiles, il est préférable d’apprendre en faisant. Procurez-vous un ordinateur tactile, mettez la souris et le clavier de côté et utilisez uniquement vos doigts pour interagir avec votre application. Si vous avez une tablette, essayez de la tenir dans différentes positions, comme sur vos genoux, à plat sur une table ou en la tenant pendant que vous êtes debout. Essayez de l’utiliser dans l’orientation portrait et paysage.

Les applications optimisées pour l’interaction tactiles qui fonctionnent le mieux avec l’interaction tactile sont généralement :

  • Naturelles et intuitives. Les interactions sont conçues pour correspondre à la façon dont les utilisateurs interagissent avec des objets dans le monde réel.
  • Moins intrusives. L’utilisation de l’interaction tactile est silencieuse, et par conséquent, beaucoup moins distrayante que de taper sur un clavier ou de cliquer.
  • Portables. Les appareils tactiles sont plus compacts, car de nombreuses tâches peuvent être effectuées sans clavier, souris, stylet ou pavé tactile. Ils sont également plus flexibles, car une surface de travail n’est pas nécessaire.
  • Directes et attrayantes. L’interaction tactile vous donne l’impression de manipuler directement les objets à l’écran.
  • Moins précises. Les utilisateurs ne peuvent pas cibler les objets avec autant de précision avec l’interaction tactile qu’avec une souris ou un stylet.

L’interaction tactile offre une sensation naturelle et réelle d’interaction. La manipulation directe et l’animation complètent cette impression en donnant aux objets un mouvement et un retour d’information réalistes et dynamiques. Par exemple, considérez un jeu de cartes. Non seulement il est pratique et facile de faire glisser les cartes avec le doigt, mais l’expérience prend des allures de réalité lorsque vous pouvez lancer, faire glisser et faire tourner les cartes comme vous le feriez avec un jeu de cartes physique. Et lorsque vous essayez de déplacer une carte qui ne peut pas l’être, il est préférable que la carte résiste mais sans empêcher le mouvement, et qu’elle se remette en place lorsqu’on la relâche, pour indiquer clairement que l’action a été reconnue mais qu’elle ne peut pas être effectuée.

Heureusement, si votre application est déjà bien conçue, fournir une expérience tactile exceptionnelle est facile à faire. Pour cela, il faut un programme bien conçu :

  • Garantir que la plupart des tâches importantes peuvent être effectuées efficacement à l’aide d’un doigt (au moins les tâches qui n’impliquent pas beaucoup de saisie ou de manipulation détaillée des pixels).
  • Utiliser des contrôles larges pour l’interaction tactile. Les contrôles courants ont une taille minimale de 23 x 23 pixels (13 x 13 DLU) et les contrôles les plus couramment utilisés ont une taille minimale de 40 x 40 pixels (23 x 22 DLU). Pour éviter un comportement sans réponse, les éléments d’interface utilisateur doivent avoir au moins 5 pixels (3 DLU) d’espace entre eux. Pour les autres contrôles, assurez-vous qu’ils ont au moins une cible de clic de 23 x 23 pixels (13 x 13 DLU), même si leur apparence statique est beaucoup plus petite. Consultez le dimensionnement des contrôles standard.
  • Prendre en charge l’entrée de la souris. Les contrôles interactifs ont des affordances claires et visibles. Les objets ont des comportements standard pour les interactions standard de la souris (simple et double-clic gauche, clic bouton droit, glisser et pointer).
  • Prendre en charge l’entrée du clavier. L’application fournit des affectations de touches de raccourci standard, en particulier pour les commandes de navigation et de modification qui peuvent également être générées par le biais d’interactions tactiles.
  • Garantir l’accessibilité. Utiliser UI Automation ou Microsoft Active Accessibility (MSAA) pour fournir un accès programmatique à l’interface utilisateur pour les technologies d’assistance. L’application répond de manière appropriée aux modifications apportées à l’orientation, au thème, aux paramètres régionaux et aux métriques système.
  • Éliminer les interactions inutiles. Pour éviter toute perte d’accès aux données ou au système, utilisez les valeurs par défaut les plus sécurisées. Si la sécurité n’est pas un facteur, l’application sélectionne l’option la plus probable ou la plus pratique.
  • Fournir l’équivalent tactile pour le pointage. Ne considérez pas le pointage comme seule façon d’effectuer une action.
  • Garantir que les mouvements prennent effet immédiatement. Conservez les points de contact sous les doigts de l’utilisateur en douceur tout au long du mouvement, ce qui donne l’impression que le geste s’adapte directement au mouvement de l’utilisateur.
  • Utiliser des mouvements standard chaque fois que cela est possible. Mouvements personnalisés uniquement pour les interactions propres à votre application.
  • Garantir que les commandes non souhaitées ou destructrices peuvent être inversées ou corrigées. Les actions accidentelles sont plus probables lors de l’utilisation de l’interaction tactile.

Recommandations en matière d’entrée tactile

Avec l’interaction tactile, votre application Windows peut utiliser des mouvements physiques pour émuler la manipulation directe des éléments de l’interface utilisateur.

Tenez compte de ces bonnes pratiques lors de la conception de votre application activée par interaction tactile :

La réactivité est essentielle pour créer des expériences tactiles directes et attrayantes. Pour être directs, les mouvements doivent prendre effet immédiatement, et les points de contact d’un objet doivent rester sous les doigts de l’utilisateur en douceur tout au long du mouvement. L’effet de l’entrée tactile doit être mappé directement au mouvement de l’utilisateur. Par exemple, si l’utilisateur fait pivoter ses doigts de 90 degrés, l’objet doit également pivoter de 90 degrés. Tout décalage, réponse hachée, perte de contact ou résultats incorrects détruit la perception de la manipulation directe et aussi de la qualité.

La cohérence est essentielle pour créer des expériences tactiles naturelles et intuitives. Une fois que les utilisateurs ont appris un mouvement standard, ils s’attendent à ce que ce mouvement ait le même effet sur toutes les applications. Pour éviter la confusion et la frustration, n’attribuez jamais de significations non standard aux mouvements standard. Utilisez plutôt des mouvements personnalisés pour les interactions propres à votre programme.

Ensuite, nous allons décrire le langage tactile Windows, mais avant cela, voici une courte liste de termes d’entrée tactile de base.

  • Mouvement

    Un mouvement est l’acte physique ou le mouvement effectué sur, ou par, le périphérique d’entrée (doigt, doigts, stylet, souris, etc.). Par exemple, pour lancer, activer ou appeler une commande, vous utilisez un seul doigt pour un appareil tactile ou pavé tactile (équivalent à un clic gauche avec une souris, un appui avec un stylet ou Entrer sur un clavier).

  • Manipulation

    Une manipulation est la réaction en temps réel ou la réponse immédiate d’un objet ou d’une interface utilisateur à un mouvement. Par exemple, les mouvements de glissement et de balayage entraînent généralement un déplacement d’un élément ou d’une interface utilisateur d’une certaine manière.

    Le résultat final d’une manipulation, la façon dont elle est manifeste par l’objet à l’écran et dans l’interface utilisateur, est l’interaction.

  • Interaction

    Les interactions dépendent de la façon dont une manipulation est interprétée et de la commande ou de l’action qui résulte de la manipulation. Par exemple, les objets peuvent être déplacés à l’aide des mouvements de glissement et de balayage, mais les résultats diffèrent selon qu’un seuil de distance est franchi. Le glissement peut être utilisé pour faire glisser un objet ou obtenir une vue panoramique tandis que le balayage peut être utilisé pour sélectionner un élément ou afficher une barre d’application.

Langage tactile Windows

Windows fournit un ensemble concis d’interactions tactiles utilisées dans tout le système. L’application de ce langage tactile rend votre application familière à ce que les utilisateurs connaissent déjà. Cela augmente la confiance des utilisateurs en rendant votre application plus facile à apprendre et à utiliser. Pour en savoir plus sur l’implémentation du langage tactile, consultez Mouvements, manipulations et interactions.

Maintenir enfoncé pour en savoir plus

Le mouvement « maintenir enfoncé » affiche des informations détaillées ou des visuels pédagogiques (par exemple, une info-bulle ou un menu contextuel) sans valider une action ou une commande. Le mouvement panoramique est toujours possible si vous effectuez un mouvement de glissement pendant l’affichage du visuel.

Important

Vous pouvez utiliser le mouvement « maintenir enfoncé » pour la sélection dans les cas où le mouvement panoramique horizontal et vertical est activé.

État d’entrée : un ou deux doigts en contact avec l’écran.

Mouvement : pas de mouvement.

État de sortie : le dernier doigt à ne plus être en contact avec l’écran termine le mouvement.

Effet : afficher plus d’informations.

touch-press-to-learn.png

Mouvement « maintenir enfoncé ».

Pointage

Le pointage est une interaction utile, car il permet aux utilisateurs d’obtenir des informations supplémentaires via des conseils avant de lancer une action. L’affichage de ces conseils rend les utilisateurs plus confiants et réduit les erreurs.

Malheureusement, le pointage n’est pas pris en charge par les technologies tactiles, de sorte que les utilisateurs ne peuvent pas pointer à l’aide de leur doigt. La solution à ce problème consiste à tirer pleinement parti du pointage, mais uniquement de manière à ne pas être nécessaire pour effectuer une action. Dans la pratique, cela signifie généralement que l’action peut également être effectuée en cliquant, mais pas nécessairement de la même façon.

Screenshot that shows an example of the hover interaction next to an example of the clicking action.

Dans cet exemple, les utilisateurs peuvent voir la date du jour en pointant ou en cliquant.

Appuyer pour l’action principale

Appuyer sur un élément appelle son action principale, par exemple le lancement d’une application ou l’exécution d’une commande.

État de l’entrée : un doigt en contact avec l’écran ou le pavé tactile et levé avant que le seuil de temps d’une interaction « maintenir enfoncé » ne se produise.

Mouvement : pas de mouvement.

État de sortie : une fois que le doigt n’est plus en contact avec l’écran, le mouvement se termine.

Effet : lancer une application ou exécuter une commande.

touch-tap-primary.png

Mouvement d’appui.

Glisser pour faire un panoramique

Le glissement est principalement utilisé pour les interactions panoramiques, mais peut également être utilisé pour le déplacement (où le mouvement panoramique est limité à une direction), le dessin ou l’écriture. Le glissement peut également être utilisé pour cibler des petits éléments densément regroupés en frottant (glisser le doigt sur des objets connexes tels que des cases d’option).

État d’entrée : un ou deux doigts en contact avec l’écran.

Mouvement : faire glisser avec tous les doigts supplémentaires restant dans la même position l’un par rapport à l’autre.

État de sortie : le dernier doigt à ne plus être en contact avec l’écran termine le mouvement.

Effet : déplacer l’objet sous-jacent directement et immédiatement à mesure que les doigts se déplacent. Veillez à garder le point de contact sous le doigt tout au long du mouvement.

touch-slide.png

Le mouvement panoramique.

Balayer pour sélectionner, exécuter et déplacer

Le glissement du doigt sur une courte distance, perpendiculaire à la direction du mouvement panoramique (où le mouvement panoramique est limité à une direction), sélectionne les objets dans une liste ou une grille. Afficher la barre d’application avec des commandes pertinentes lorsque les objets sont sélectionnés.

État d’entrée : un ou plusieurs doigts touchent l’écran.

Mouvement : faire glisser sur une courte distance avant que le seuil de distance d’une interaction de déplacement ne se produise.

État de sortie : le dernier doigt à ne plus être en contact avec l’écran termine le mouvement.

Effet : l’objet sous-jacent est sélectionné ou déplacé ou la barre d’application s’affiche. Veillez à garder le point de contact sous le doigt tout au long du mouvement.

d:\sdkenlistment\m-ux-design\m-ux-design\images\touch-swipe.png

Mouvement de balayage.

Pincer et étirer pour effectuer un zoom

Les mouvements de pincement et d’étirement sont utilisés pour trois types d’interactions : zoom optique, redimensionnement et zoom sémantique.

Le zoom optique ajuste le niveau d’agrandissement de la zone de contenu entière pour obtenir une vue plus détaillée du contenu. En revanche, le redimensionnement est une technique permettant d’ajuster la taille relative d’un ou plusieurs objets d’une zone de contenu sans modifier la vue dans la zone de contenu.

Le zoom sémantique est une technique d’interaction tactile optimisée pour présenter et parcourir des données structurées ou du contenu au sein d’une vue unique (par exemple, la structure de dossiers d’un ordinateur, une bibliothèque de documents ou un album photo) sans avoir besoin de panoramique, de défilement ou de contrôles d’arborescence. Le zoom sémantique fournit deux vues différentes du même contenu en vous permettant de voir plus de détails au fur et à mesure que vous effectuez un zoom arrière.

État d’entrée : deux doigts en contact avec l’écran en même temps.

Mouvement : les doigts s’écartent (étirer) ou se rapprochent (pincer) le long d’un axe.

État de sortie : si l’un des doigts n’est plus en contact avec l’écran, le mouvement se termine.

Effet : effectuer un zoom avant ou arrière sur l’objet sous-jacent directement et immédiatement à mesure que les doigts se séparent ou s’approchent sur l’axe. Veillez à garder les points de contact sous le doigt tout au long du mouvement.

landing-areazoom.png

Mouvement de zoom.

Tourner pour faire pivoter

La rotation avec deux doigts ou plus entraîne une rotation d’un objet. Faites pivoter l’appareil lui-même pour faire pivoter l’écran entier.

État d’entrée : deux doigts en contact avec l’écran en même temps.

Mouvement : un ou deux doigts tournent autour de l’autre, se déplaçant perpendiculairement à l’axe entre eux.

État de sortie : si l’un des doigts n’est plus en contact avec l’écran, le mouvement se termine.

Effet : faire pivoter l’objet sous-jacent en fonction de la rotation des doigts. Veillez à garder les points de contact sous le doigt tout au long du mouvement.

touch-turn.png

Mouvement de rotation.

La rotation n’est logique que pour certains types d’objets, de sorte qu’elle n’est pas mappée à une interaction Windows système.

La rotation est souvent effectuée différemment par différentes personnes. Certaines personnes préfèrent faire pivoter un doigt autour d’un doigt pivot, tandis que d’autres préfèrent faire pivoter les deux doigts dans un mouvement circulaire. La plupart des gens utilisent une combinaison des deux, avec un doigt se déplaçant plus que l’autre. Bien qu’une rotation fluide à n’importe quel angle soit la meilleure interaction, dans de nombreux contextes, tels que l’affichage photo, il est préférable de se caler sur la rotation à 90 degrés la plus proche une fois que l’utilisateur termine le mouvement. En mode de retouche photo, vous pouvez utiliser une petite rotation pour redresser la photo.

Balayer à partir d’un bord pour les commandes d’application

Le balayage du doigt sur une courte distance du bord inférieur ou supérieur de l’écran révèle les commandes de l’application dans une barre d’application.

État d’entrée : un ou plusieurs doigts touchent le cadre de l’appareil.

Mouvement : faire glisser sur une courte distance sur l’écran puis lever le doigt.

État de sortie : le dernier doigt à ne plus être en contact avec l’écran termine le mouvement.

Effet : la barre d’application s’affiche.

touch-swipe-bottom-edge.png

touch-swipe-side-edge.png

Mouvement de balayage à partir du bord.

Développeurs : Pour plus d’informations, consultez l’énumération DIRECTMANIPULATION_CONFIGURATION.

Contrôler l’utilisation

Ici, nous fournissons quelques instructions pour optimiser les contrôles pour l’utilisation tactile.

  • Utilisez des contrôles courants. Les contrôles les plus courants sont conçus pour prendre en charge une bonne expérience tactile.
  • Choisissez des contrôles personnalisés conçus pour prendre en charge l’interaction tactile. Vous pouvez avoir besoin de contrôles personnalisés pour prendre en charge les expériences spéciales de votre programme. Choisissez des contrôles personnalisés qui :
    • Peuvent être suffisamment grands pour être facilement ciblés et manipulés.
    • Lorsqu’ils sont manipulés, se déplacent et réagissent de la façon dont les objets réels se déplacent et réagissent, par exemple en ayant de l’élan et de la friction.
    • Sont indulgents en permettant aux utilisateurs de corriger facilement les erreurs.
    • Pardonnent l'imprécision des clics et des glissements. Les objets déposés près de leur destination doivent se placer au bon endroit.
    • Ont un retour d’information visuel clair lorsque le doigt se trouve au-dessus du contrôle.
  • Utilisent des contrôles contraints. Les contrôles contraints tels que les listes et les curseurs, lorsqu’ils sont conçus pour un ciblage tactile facile, peuvent être mieux que les contrôles sans contrainte comme les zones de texte, car ils réduisent la nécessité d’une entrée de texte.
  • Fournissent les valeurs par défaut appropriées. Sélectionnent l’option la plus sûre (pour éviter la perte de données ou d’accès au système) et l’option la plus sécurisée par défaut. Si la sécurité et la sûreté ne sont pas des facteurs, sélectionnez l’option la plus probable ou la plus pratique, ce qui permet d’éliminer les interactions inutiles.
  • Fournissent la saisie semi-automatique du texte. La saisie semi-automatique du texte fournit une liste de valeurs les plus probables, ou les valeurs d’entrée les plus récentes, pour faciliter considérablement l’entrée de texte.
  • Pour les tâches importantes qui utilisent plusieurs sélections, si une liste de sélections multiples standard est normalement utilisée, fournissez plutôt une option permettant d’utiliser une liste de cases à cocher.

Tailles de contrôle et ciblage tactile

En raison de la grande surface du bout des doigts, les petits contrôles trop proches les uns des autres peuvent être difficiles à cibler avec précision.

En règle générale, une taille de contrôle de 23 x 23 pixels (13 x 13 DLU) est une bonne taille minimale de contrôle interactif pour n’importe quel périphérique d’entrée. En revanche, les contrôles de rotation de 15 x 11 pixels sont beaucoup trop petits pour être utilisés efficacement avec l’interaction tactile.

Screenshot that shows the width and height of up and down selection buttons, measuring 9 DLUs (15 pixels) wide by 5 DLUs (9 pixels) high.

N’oubliez pas que la taille minimale est vraiment basée sur une zone physique, et non sur des métriques de disposition telles que des pixels ou des DLU. La recherche indique que la zone cible minimale pour une interaction efficace et précise à l’aide d’un doigt est de 6 x 6 millimètres (mm). Cette zone se traduit par les métriques de disposition suivants :

Police Millimètres Pixels relatifs DLU
9 points Segoe UI 6 x 6 23 x 23 13 x 13
8 points Tahoma 6 x 6 23 x 23 15 x 14

En outre, la recherche montre qu’une taille minimale de 10 x 10 mm (environ 40 x 40 pixels) permet une meilleure vitesse et précision, et est plus confortable pour les utilisateurs. En pratique, utilisez cette plus taille pour les boutons de commande utilisés pour les commandes les plus importantes ou fréquemment utilisées.

L’objectif n’est pas d’avoir des contrôles géants, mais simplement des commandes tactiles faciles à utiliser.

Screenshot that shows the Microsoft Word toolbar with the 'A B C Spelling & Grammar' button highlighted, with a 41 DLU height and 40 DLU width.

Dans cet exemple, Microsoft Word utilise des boutons de plus de 10 x 10 mm pour les commandes les plus importantes.

Screenshot that shows the Windows calculator.

Cette version de Calculatrice utilise des boutons de plus de 10 x 10 mm pour ses commandes les plus fréquemment utilisées.

Il n’y a pas de taille parfaite pour les cibles tactiles. Différentes tailles fonctionnent pour différentes situations. Les actions avec des conséquences graves (telles que la suppression et la fermeture) ou les actions fréquemment utilisées 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 taille cible pour les contrôles personnalisés

Guide de taille Description
7x7 recommended minimum size
7 x 7 mm : taille minimale recommandée
7 x 7 mm est une bonne taille minimale si le fait de toucher la mauvaise cible peut être corrigé en un ou deux gestes ou en cinq secondes. Le remplissage entre les cibles est tout aussi important que la taille de la cible.
9x9 recommended size for accuracy
Lorsque la précision est importante
La fermeture, la suppression et d’autres actions avec des conséquences graves ne peuvent pas se permettre des appuis accidentels. Utilisez des cibles de 9 x 9 mm si le fait de toucher la mauvaise cible nécessite plus de deux gestes, cinq secondes ou un changement de contexte important pour être corrigé.
5x5 minimum size
Lorsque ça ne rentre pas
Si vous vous trouvez dans l’obligation de tout faire rentrer, vous pouvez utiliser des cibles de 5 x 5 mm, à condition que le fait de toucher la mauvaise cible puisse être corrigé d'un seul geste. L’utilisation de 2 mm de remplissage entre les cibles est extrêmement importante dans ce cas.

Recommandations en matière de taille cible pour les contrôles courants

  • Pour les contrôles courants, utilisez les tailles de contrôle recommandées. La taille recommandée pour les contrôles respecte la taille minimale de 23 x 23 pixels (13 x 13 DLU), à l’exception des cases à cocher et des cases d’option (leur largeur de texte compense un peu), les contrôles spin (qui ne sont pas utilisables avec l’interaction tactile, mais sont redondants) et les séparateurs.

    Screenshot that shows an example of common controls, including audio controls, a 'Browse the Internet now' button, and a File Explorer window.

    Les tailles de contrôle recommandées sont faciles à toucher.

  • Pour les boutons de commande utilisés pour les commandes les plus importantes ou fréquemment utilisées, utilisez une taille minimale de 40 x 40 pixels (23 x 22 DLU) dans la mesure du possible. Cela permet d’améliorer la rapidité et la précision, tout en étant plus confortable pour les utilisateurs.

    Screenshot that shows multiple sizes of an e-mail 'Send' button, with the smallest to largest sizes starting left to right.

    Dans la mesure du possible, utilisez des boutons de commande plus grands pour les commandes importantes ou fréquemment utilisées.

  • Pour les autres contrôles :

    • Utilisez des cibles de clic plus grandes. Pour les petits contrôles, faites en sorte que la taille cible soit plus grande que l’élément d’interface utilisateur visible statiquement. Par exemple, les boutons d’icône de 16 x 16 pixels peuvent avoir des boutons de clic cibles de 23 x 23 pixels, et les éléments de texte peuvent avoir des rectangles de sélection de 8 pixels plus larges que le texte et de 23 pixels de haut.

      Bonne réponse :

      Screenshot that shows a toolbar with the correct target size.

      Incorrect :

      Screenshot that shows a U I tree with an incorrectly-sized target area.

      Bonne réponse :

      Screenshot that shows a U I tree with the correct size for the target area.

      Dans les exemples corrects, les cibles de clic sont plus grandes que les éléments d’interface utilisateur visibles statiquement.

    • Utilisez des cibles de clic redondantes. Il est acceptable que les cibles de clic soient plus petites que la taille minimale si ce contrôle dispose de fonctionnalités redondantes.

      Par exemple, les triangles de divulgation progressive utilisés par le contrôle d’arborescence ne sont que 6 x 9 pixels, mais leurs fonctionnalités sont redondantes avec leurs étiquettes d’élément associées.

      Screenshot that shows a U I tree with redundant click targets.

      Les triangles d’arborescence sont trop petits pour être facilement touchables, mais ils sont redondants dans les fonctionnalités avec leurs étiquettes associées qui sont plus grandes.

      Respectez les métriques système. Ne codez pas en dur les tailles. Si nécessaire, les utilisateurs peuvent modifier les métriques système ou les ppp pour répondre à leurs besoins. Toutefois, il s agit là d'une solution de dernier recours, car les utilisateurs ne devraient normalement pas avoir à ajuster les paramètres du système pour rendre l interface utilisateur utilisable.

      Screenshot that shows a standard menu height on the left, and a larger menu height on the right.

      Dans cet exemple, la métrique système pour la hauteur du menu a été modifiée.

Modification de texte

La modification de texte est l’une des interactions les plus difficiles à réaliser avec un doigt. L’utilisation de contrôles contraints, les valeurs par défaut appropriées et la saisie semi-automatique éliminent ou réduisent la nécessité d’entrer du texte. Toutefois, si votre application implique de modifier du texte, vous pouvez rendre les utilisateurs plus productifs en zoomant automatiquement sur l’interface utilisateur d’entrée jusqu’à 150 % par défaut lorsque l’interaction tactile est utilisée.

Par exemple, un programme de messagerie peut afficher l’interface utilisateur à une taille tactile normale, mais zoomer sur l’interface utilisateur d’entrée à 150 % pour écrire des messages.

Screenshot that shows an e-mail U I.

Dans cet exemple, l’interface utilisateur d’entrée est zoomée à 150 %.

Contrôler la disposition et l’espacement

L’espacement entre les contrôles est un facteur important pour rendre les contrôles facilement touchables. Le ciblage est plus rapide mais moins précis lorsque le doigt est utilisé comme dispositif de pointage, ce qui fait que les utilisateurs appuient plus souvent à côté de la cible voulue. Lorsque les contrôles interactifs sont placés très près les uns des autres, mais ne se touchent pas, les utilisateurs peuvent cliquer sur l’espace inactif entre les contrôles. Étant donné que le fait de cliquer sur un espace inactif n’a aucun résultat ou retour visuel, les utilisateurs sont souvent incertains de ce qui s’est passé.

Ajustez dynamiquement l’espacement en fonction de l’appareil d’entrée utilisé. Cela est particulièrement utile avec l’interface utilisateur temporaire, comme les menus et les menus volants.

Fournissez au minimum 5 pixels (3 DLU) d’espace entre les régions cibles des contrôles interactifs. Si les petits contrôles sont trop rapprochés, l’utilisateur doit appuyer avec précision pour éviter d’appuyer sur l’objet incorrect.

Rendez les contrôles au sein des groupes plus faciles à différencier en utilisant plus que l’espacement vertical recommandé entre les contrôles. Par exemple, les cases d’option à 19 pixels de haut sont plus petites que la taille minimale recommandée de 23 pixels. Lorsque vous disposez d’un espace vertical, vous pouvez obtenir à peu près le même effet que la taille recommandée en ajoutant un espacement supplémentaire de 4 pixels aux 7 pixels standard.

Bonne réponse :

Screenshot that shows a standard example of vertical spacing between controls.

Mieux :

Screenshot that shows an example of controls with more vertical spacing.

Dans le meilleur exemple, l’espacement supplémentaire entre les cases d’option les rend plus faciles à différencier.

Il peut arriver que l’espacement supplémentaire soit souhaitable lors de l’utilisation de l’interaction tactile, mais pas lors de l’utilisation de la souris ou du clavier. Dans ce cas, utilisez uniquement une conception plus spacieuse lorsqu’une action est lancée à l’aide de l’interaction tactile.

Choisissez une disposition qui place les contrôles proches de l’endroit où ils seront probablement utilisés. Conservez les interactions entre les tâches dans une petite zone dans la mesure du possible et localisez les contrôles près de l’endroit où ils seront probablement utilisés. Évitez les grands mouvements de main, en particulier pour les tâches courantes et pour les glissements.

Considérez que l’emplacement actuel du pointeur est le plus proche d’une cible, ce qui rend son acquisition triviale. Ainsi, les menus contextuels tirent pleinement parti de la loi de Fitts, comme le font les mini-barres d’outils utilisées par Microsoft Office.

Screenshot that shows an example of a context menu and a mini-toolbar from Microsoft Office side-by-side.

Évitez de placer de petits contrôles près du bord de l’application ou de l’affichage. Les petites cibles proches des bords peuvent être difficiles à toucher (les cadres d’affichage peuvent interférer avec les mouvements près des bords). Pour vous assurer que les contrôles sont faciles à cibler lorsqu’une fenêtre est agrandie, il faut qu’ils mesurent au moins 23 x 23 pixels (13 x 13 DLU) ou qu’ils soient placés loin du bord de la fenêtre.

Utilisez l’espacement recommandé. L'espacement recommandé est adapté à l’interaction tactile. Toutefois, si votre application peut bénéficier d’une taille et d’un espacement plus importants, considérez la taille et l’espacement recommandés comme des minimums, le cas échéant.

Fournissez au moins 5 pixels (3 DLU) d’espace entre les contrôles interactifs. Cela empêche toute confusion lorsque les utilisateurs appuient en dehors de leur cible prévue.

Envisagez d’ajouter plus que l’espacement vertical recommandé dans des groupes de contrôles, tels que des liens de commande, des cases à cocher et des cases d’option, ainsi qu’entre les groupes. Cela les rend plus faciles à différencier.

Envisagez d’ajouter plus que l’espacement vertical recommandé dynamiquement lorsqu’une action est lancée à l’aide de l’interaction tactile. Cela facilite la différenciation des objets, mais sans prendre plus d’espace lors de l’utilisation d’un clavier ou d’une souris. Augmentez l’espacement d’un tiers de sa taille normale ou d’au moins 8 pixels.

image

Dans cet exemple, les listes de raccourcis de la barre des tâches Windows 7 sont plus spacieuses lorsqu’elles sont affichées à l’aide de l’interaction tactile.

Interaction

L’utilisation des bons contrôles ne constitue qu’une partie du chemin vers une application tactile optimisée. Vous devez également prendre en compte le modèle d’interaction global que ces contrôles prennent en charge. Voici quelques recommandations pour vous aider à ce sujet.

  • Rendez le pointage redondant. Le pointage n’est pas pris en charge par la plupart des technologies tactiles, de sorte que les utilisateurs dotés de tels écrans tactiles ne peuvent pas effectuer de tâches nécessitant un pointage.

  • Pour les applications qui ont besoin d’une entrée de texte, intégrez entièrement la fonctionnalité de clavier tactile en procédant comme suit :

    • Fournissez les valeurs par défaut appropriées pour l’entrée utilisateur.
    • Fournissez des suggestions de saisie semi-automatique le cas échéant.

    Remarque

    Développeurs : Pour plus d’informations sur l’intégration du clavier tactile, consultez ITextInputPanel.

  • Autorisez les utilisateurs à zoomer sur l’interface utilisateur du contenu si votre programme a des tâches qui nécessitent la modification du texte. Envisagez de zoomer automatiquement à 150 % lorsque l’interaction tactile est utilisée.

  • Fournissez un panoramique et un zoom fluides et réactifs partout où cela est approprié. Redessinez rapidement après un panoramique ou un zoom pour rester réactif. Il est nécessaire de procéder ainsi pour que la manipulation directe soit réellement ressentie comme telle.

  • Pendant un panoramique ou un zoom, assurez-vous que les points de contact restent sous le doigt tout au long du mouvement. Sinon, le panoramique ou le zoom est difficile à contrôler.

  • Étant donné que les mouvements sont mémorisés, affectez-leur des significations cohérentes entre les applications. Ne donnez pas de significations différentes aux mouvements avec une sémantique fixe. Utilisez plutôt un mouvement spécifique à l’application approprié.

Pardon

La manipulation directe rend le toucher naturel, expressif, efficace et attrayant. Toutefois, là où il y a une manipulation directe, il peut y avoir une manipulation accidentelle et donc la nécessité de pardonner.

Le pardon est la capacité à inverser ou corriger facilement une action non souhaitée. Pour qu’une expérience tactile soit pardonnable, il faut prévoir une fonction d’annulation, un bon retour d’information visuel, une séparation physique claire entre les commandes fréquemment utilisées et les commandes destructrices, et permettre aux utilisateurs de corriger facilement leurs erreurs. Le pardon est associé à la prévention des actions indésirables, ce que vous pouvez faire en utilisant des contrôles contraignants et des confirmations pour les actions risquées ou les commandes qui ont des conséquences inattendues.

  • Fournissez une commande Annuler. Il est préférable de fournir un moyen simple d’annuler toutes les commandes, mais votre application peut avoir certaines commandes dont l’effet ne peut pas être annulé.

  • Dans la mesure du possible, fournissez un bon retour d’information lorsque le doigt est en contact avec l’écran, mais les actions ne doivent pas s’exécuter tant que le doigt est encore en contact avec l’écran. Cela permet aux utilisateurs de corriger les erreurs avant de les faire.

  • Dans la mesure du possible, permettez aux utilisateurs de corriger facilement leurs erreurs. Si une action prend effet lorsque le doigt n’est plus en contact aves l’écran, autorisez les utilisateurs à corriger les erreurs en glissant pendant que le doigt est toujours en contact avec l’écran.

  • Dans la mesure du possible, indiquez qu’une manipulation directe ne peut être effectuée en résistant au mouvement. Autorisez le mouvement, mais faites en sorte que l’objet se remette en place lorsque vous le relâchez pour indiquer clairement que l’action a été reconnue mais qu’elle ne peut pas être effectuée.

  • Disposez d’une séparation physique claire entre les commandes fréquemment utilisées et les commandes destructrices. Sinon, les utilisateurs pourraient toucher accidentellement des commandes destructrices. Une commande est considérée comme destructrice si son effet est répandu et qu’il ne peut pas être facilement annulé ou si l’effet n’est pas immédiatement visible.

  • Confirmez les commandes pour les actions ou commandes à risque qui ont des conséquences inattendues. Utilisez une boîte de dialogue de confirmation à cet effet.

  • Envisagez de confirmer toutes les autres actions que les utilisateurs ont tendance à effectuer accidentellement lors de l’utilisation de l’interaction tactile, et qui passent inaperçues ou sont difficiles à annuler. Normalement, il s’agit de confirmations de routine et elles sont déconseillées, car on suppose que les utilisateurs n’émettent pas souvent de telles commandes par accident avec une souris ou un clavier. Pour éviter les confirmations inutiles, présentez ces confirmations uniquement si la commande a été lancée à l’aide de l’interaction tactile.

    Les confirmations de routine sont acceptables pour les interactions que les utilisateurs font souvent accidentellement à l’aide de l’interaction tactile.

    Développeurs : vous pouvez faire la distinction entre les événements de souris et les événements d’interaction tactile à l’aide de l’API INPUT_MESSAGE_SOURCE.