Skip to main content

Même s’il y a bien moins d’appareils sous iOS que sous Android, la recommandation d’Apple reste le standard : pas de cible de moins de 44 pixels. Sauf que ce n’est pas une mesure physique. De plus, du fait des différences de systèmes d’exploitation et de la décision d’Apple de convertir les pixels en une valeur indépendante des caractéristiques de l’appareil (un « point »), ces 44 pixels ne peuvent pas être convertis en une seule et même taille physique.

Pourtant c’est bien la taille qui compte, et toutes les bonnes recommandations donnent des mesures en millimètres, en pouces, en points typographiques et autres unités concrètes.

Par ailleurs, un grand nombre de recommandations destinées aux systèmes d’exploitation et aux équipementiers informatique (OEMs) préconisent des dimensions pour les cibles tactiles qui sont bien inférieures aux valeurs minimum relevées dans la vaste majorité des études sur le sujet. Nokia, par exemple, répète à l’envi que 7mm est une cible tout ce qu’il y a de plus adaptée pour tactile, et Microsoft leur emboîte joyeusement le pas, en ajoutant que 2mm suffisent largement pour séparer 2 cibles. Les autres recommandations sont tout aussi farfelues et incohérentes entre elles. ANSI/HFES 100–2007 préconise par exemple que les boutons ne fassent pas moins de 9,5mm. (…)
1671741-inline-contact-sizes

Faut-il prendre en compte la taille des différents doigts?

La norme ISO 9241–9 prend le problème un peu différemment et recommande que les boutons mesurent au minimum la largeur maximum de la dernière phalange de l’index de 95% de la population mâle, soit environ 22mm ! Mais énormément de gens utilisent les écrans tactiles avec le pouce.

Un grand nombre de recommandations se basent sur la largeur d’un doigt mais cette mesure est peu applicable en pratique car on ne touche pas un écran capacitif avec toute la largeur du doigt, comme l’illustre le schéma suivant. (…)

01

Vous serez peut-être surpris d’apprendre que les écrans tactiles actuels ne détectent pas la surface de contact entière mais seulement le centre géométrique, ou barycentre, comme l’indique la figure 2. Les téléphones, et donc a fortiori les applications et sites web, ne peuvent pas connaître la superficie de la zone de contact car l’écran ne leur fournit pas cette information. Les appareils ne pouvant se baser que sur le barycentre de la zone de contact, les dimensions de cette dernière n’ont donc aucune importance.

02

Les gros boutons sont plus faciles à utiliser – mais sans exagérer

(..) Plusieurs études ont démontré que la précision des interactions tactiles cesse d’augmenter à partir d’un certain seuil, et que ce seuil est bien plus bas qu’on ne s’y attend. Quand les boutons sont trop grands, les utilisateurs ont du mal à les voir comme cliquables, voire même à les interpréter comme des boutons.

Le mythe des gros boutons révèle également une croyance incorrecte, qui est que la zone cliquable devrait correspondre à la partie visible des cibles. C’est bien souvent le cas en pratique, mais cette croyance provoque néanmoins de nombreux problèmes de design. En pratique, augmenter la taille d’une cible n’implique pas nécessairement d’augmenter la partie visible d’un bouton. Il est souvent bien plus simple d’augmenter la zone cliquable autour des boutons ou des liens.

Comme pour tout élément interactif, les zones visibles et cliquables peuvent être différentes, et le plus souvent elles doivent l’être.

Dessiner des cibles

Quand on conçoit une interface tactile, il est primordial de comprendre et prévoir les trois aspects suivants pour chaque cible :

  • les cibles visuelles ;
  • les zones réactives ;
  • les zones d’interférences.

Les cibles visuelles

Les cibles visuelles correspondent aux textes, icônes ou autres éléments graphique indiquant qu’une interaction est possible. Elles doivent être assez grandes et lisibles pour :

  • Attirer le regard de l’utilisateur ;
  • Indiquer clairement leur interactivité ;
  • Être lisibles, et indiquer sans ambigüité le résultat de leur action ;
  • Montrer à l’utilisateur qu’il peut facilement les déclencher.

(…) Plus que la taille de police, c’est l’angle de vue qui influence la lisibilité, on parle alors de pouvoir de résolution. Dans la figure 3, le cône le plus étroit représente la taille minimum pour que du texte soit lisible. Il se situe dans un cône plus large qui correspond à la zone de haute résolution où se concentre le regard. Les appareils tenus à plus grande distance nécessitent une plus grande taille de texte.

La taille de police doit faire en sorte que les caractères et les mots soient lisibles et faciles à cliquer. Les calculs de résolution et de distance montrent qu’une police cesse d’être lisible en dessous de 6 points, soit 2,1mm. Les icônes ne doivent quant à elles pas mesurer moins de 8 points, soit 2,8mm, à moins qu’elles ne viennent en complément de texte (comme par exemple un indicateur d’ouverture dans une nouvelle fenêtre). Ces mesures sont à augmenter pour les utilisateurs ayant des problèmes de vue. (…)

Concevoir des zones réactives

Les zones de l’écran que l’utilisateur peut toucher pour déclencher une action sont les cibles tactiles. Le contact avec l’écran en dehors de toute cible tactile n’a aucun effet. (…) Vu que les écrans tactiles ne détectent que le barycentre de la zone de contact, cette dernière n’est pas aussi déterminante que l’on s’y attend pour sélectionner la cible visée.

04

Les liens textes sont bien trop petits pour être facilement atteints. Certains des navigateurs et systèmes d’exploitations modernes tels que Google Chrome tentent de résoudre ce problème en effectuant un zoom sur les petites cibles ambiguës, afin que les zones cibles soient suffisamment grandes. (…)

Les zones d’interférences

(…) L’interférence, qui se produit quand les zones de probabilité d’erreur de deux éléments se recouvrent, est l’erreur pouvant avoir les plus graves conséquences.

Assurez-vous qu’aucune interférence n’est possible, dans les axes horizontaux et verticaux. Pour cela, assurez-vous de laisser au moins 8mm d’écart depuis le centre, et d’aller jusqu’à 10mm partout où c’est possible. « Depuis le centre » est un terme technique qui signifie que les distances sont calculées depuis le centre de chaque cible tactile. Ce type de mesure permet de s’affranchir des différences entre le type de cible, qu’elles soient visuelles ou tactiles, ou de taille différente. (…)

Concevoir les gestes et mouvements

(…) Par exemple, concevoir un curseur pour le volume facile à utiliser a clairement les mêmes contraintes basiques d’interaction pour ce qui est d’appuyer et de maintenir l’appui sur la cible. Mais d’autres considérations sont à prendre en compte dès que l’utilisateur déplace son doigt à l’écran pour ajuster la valeur. Plus particulièrement, il serait nécessaire de restreindre le mouvement à un seul axe, ou à un angle ou type de déplacement. Pour un curseur de volume horizontal, l’application devrait par exemple ignorer tout déplacement vertical une fois que l’utilisateur a commencé à interagir avec celui-ci. C’est un bon moyen pour permettre aux utilisateurs d’utiliser ce type d’éléments d’interfaces avec une grande précision. (…)

a

Sources

Article original : Common misconceptions about touch
Article complet en français : Écrans tactiles : mort aux mythes
Auteur : Steven Hoober
Date de parution : 18/03/2013
Traduction : Goulven Champenois

Liens

href="https://developer.apple.com/accessibility/" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#fff">Button Text  href="https://developer.apple.com/design/adaptivity/" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#fff">Button Text  href="https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#fff">Button Text  href="https://developer.apple.com/design/tips/" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#fff">Button Text  href="http://download.microsoft.com/download/8/A/6/8A652B51-AF09-4A5A-888C-A0465D00FE5E/Windows%208%20Touch%20Guidance.pdf" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#fff">Button Text  href="http://uxdesign.smashingmagazine.com/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#fff">Button Text  href="http://uxmag.com/articles/the-pursuit-of-tappiness" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#fff">Button Text  href="http://www.fastcodesign.com/1671741/fat-thumb-a-one-handed-alternative-to-pinch-to-zoom#1" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#fff">Button Text  href="http://grouplab.cpsc.ucalgary.ca/grouplab/uploads/Publications/Publications/2012-FatThumb.MobileHCI.pdf" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#fff">Button Text  href="https://developer.android.com/training/best-ui.html" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#fff">Button Text  href="https://developer.android.com/guide/topics/ui/index.html" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#fff">Button Text  href="https://developer.android.com/design/index.html" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#fff">Button Text
Valéry Girou

D.A. / DIGITAL / WEB / PRINT / Co-fondateur du site ELECTRICNEWS.fr / Consultant & Formateur Digital / Web / Print

Pin It on Pinterest