{"partition": "head_middle", "source_domain": "www.pompage.net", "digest": "sha1:IZWHTRHLYC5OFXVUO56RJKQLXXWEQKXC", "path": "/lustre/fsn1/projects/rech/qgz/uzq54wg/processed_redpajama/base_processing/output/fr/2014-15/000_00043.parquet"}
Pompage - Web design puisé à la source.
AccueilTous les articlesRessourcesÀ propos du siteContact
Ecrans tactiles : mort aux mythesPar
Steven Hoober
Les écrans tactiles nous entourent depuis plusieurs dizaines d'années. Depuis 5 ans, c'est même pour beaucoup le principal moyen d’interaction avec notre téléphone. D’ailleurs les designers et développeurs les plus jeunes et ceux qui ont pris le train du Web mobile en route n’ont jamais utilisé de téléphone à touches.
Cependant, bien peu de designers savent comment fonctionnent réellement les écrans tactiles, et comment les gens les utilisent. J’ai travaillé avec de nombreuses entreprises en tant que consultant en design d’expérience utilisateur, et rencontré un grand nombre de mythes et de demi-vérités concernant le design pour tactile.44 pixels n’est pas une valeur fiableMê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.Mais tout comme il est impensable de définir les cibles d’une interface tactile en pixels, il faut également prendre un autre axe en considération.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.[Schéma 1 : seule une partie du pouce touche l’écran]
Nos doigts ayant également un volume et une certaine souplesse, la zone de contact dépend de l’angle et de la pression exercée. Plusieurs études semblent indiquer qu’en cas de cibles de faibles dimensions, les utilisateurs ralentissent et adaptent leur façon de toucher l’écran, par exemple en utilisant le bout du doigt plutôt que la pulpe. De plus, pour être plus précis, les utilisateurs appuient plus légèrement, réduisant ainsi la zone de contact. Il sera peut-être bientôt possible de le détecter et d’en tirer parti. Mes recherches personnelles m’amènent à conclure que les enfants ont beau avoir des doigts plus petits, leur contrôle moteur est moins fin et la zone de contact est au final sensiblement aussi large que celle d’un adulte.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.[Figure 2 : Barycentre d’un point de contact sur une cible]
Heureusement, les gens savent relativement bien se servir de leurs mains et toucher l’écran à l’endroit voulu, en plaçant le barycentre au-dessus de leur cible. Sur le schéma précédent, la zone de contact est à cheval sur « Nearby » et « Events » mais le barycentre est sans ambigüité sur le premier, et c’est bien ce bouton qui est activé.Les dimensions des doigts ont bien sûr de l’importance mais pas tant sur la taille des cibles que sur l’organisation des éléments car, suivant la manière dont un utilisateur tient le téléphone, la main cache une partie de l’écran.Les gros boutons sont plus faciles à utiliser – mais sans exagérerPlus un bouton est gros plus il est facile à viser – jusqu’à un certain point seulement. 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 ciblesQuand 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 visuellesLes 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.Les problèmes les plus courants viennent des attentes des utilisateurs. Dans une liste ou un tableau, par exemple, si les éléments sont séparés par des séparateurs visibles ou un arrière-plan de couleur différente, ils s’attendent à ce que l’élément entier soit actionnable – et pas seulement le texte. Vous devez donc faire en sorte que la ligne ou la cellule entière puisse être touchée pour déclencher l’action, l’indiquer par le graphisme, et bien sûr utiliser des séparateurs et des arrière-plans de différentes couleurs chaque fois que c’est possible.Prévoyez également les différents états possibles pour chaque cible visuelle. Un grand nombre d’erreurs sont causées par un léger délai séparant le déclencheur d’une action et son résultat à l’écran. En l’absence de résultat immédiatement visible, les utilisateurs pensent que leur geste n’a pas été détecté et recommencent. Toute cible devrait significativement changer d’apparence dès l’instant où elle a été touchée. N’oubliez pas que la cible peut être masquée par le doigt de l’utilisateur à ce moment : le changement d’état doit se produire dans une zone suffisamment large pour être repéré malgré tout.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.[Figure 3 : Les angles de vision, ou pouvoir de résolution]
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, comme sur la figure 3, 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.Les cibles ne doivent pas non plus dépasser une certaine taille. On dit souvent –même si c’est une approximation– que notre attention couvre bien moins que notre champ de vision. La fovéa [zone centrale de la rétine où la vision des détails est la plus précise, NdT] représente un angle d’environ 5° de large, soit un disque large comme la moitié de notre poing, bras tendu. Cela correspond –ce n’est pas une coïncidence– à la largeur de la plupart des écrans de mobiles ; les tablettes sont bien plus grandes en revanche. Les boutons ou autres éléments cliquables couvrant toute la largeur de l’écran sont tellement grands que les utilisateurs ne se rendront pas compte qu’ils sont actionables.Et si vous pensez que les bandeaux publicitaires ne semblent pas avoir ce problème, regardez-les bien : vous verrez qu’ils contiennent le plus souvent un bouton ou un lien plus petit qui sert précisément à contourner ce problème. Faites donc attention à concevoir des cibles visuelles suffisamment petites pour qu’elles tiennent en entier dans la zone d’attention des utilisateurs.Nota bene : sauf mention contraire, les recommandations citées concernent les téléphones mobiles. Les tablettes, les écrans d’ordinateur et les lecteurs multimédia se tiennent ou se placent à plus grande distance, il faut donc concevoir des cibles plus grandes suivant le cas d’utilisation, les dimensions de l’écran et l’activité en question. A contrario, les gens tiennent les petits appareils tels que les téléphones plus classiques à bien plus faible distance, on peut réduire la taille des cibles visuelles sur ce type d’appareil. Il est cependant indispensable de calculer la résolution visuelle et de s’assurer de la lisibilité avec du vrai matériel et des utilisateurs.Concevoir des zones réactivesLes 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.Comme indiqué plus tôt, l’apparence visuelle d’une cible détermine en grande partie la zone que les utilisateurs s’attendent à trouver réactive. Si toute la surface d’un bouton ou autre élément d’interface donne l’impression de pouvoir être touchée, faites en sorte que ce soit le cas. Je rencontre bien trop de boutons dont seul le libellé est cliquable.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. J’ai étudié de nombreux rapports et études sur la taille minimum qu’une cible tactile doit avoir pour être utilisable, et fait des calculs autour de ce qu’on appelle l’écart circulaire probable (ECP).Tout contact avec l’écran est forcément imprécis. Les points de contact de l’utilisateur ne peuvent pas être tous parfaitement alignés sur la cible visée, ils se répartissent tout autour. Loin d’être aléatoire, cette répartition se concentre principalement juste autour de la cible visible : en mesurant leur imprécision on peut mesurer l’ECP en pourcentage de réussite et ainsi déterminer si un utilisateur est capable d’atteindre une cible avec une précision satisfaisante.Au-delà d’une ECP de 95%, le rendement décroît rapidement (la précision augmente bien moins sensiblement que la taille des cibles), je me suis donc basé sur ce chiffre pour calculer les tailles minimum possibles.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.[Figure 4, Chrome transforme les liens trop petits en boutons d’une taille plus appropriée]
La cible visible n’a cependant pas besoin de correspondre à la cible tactile, et souvent même elle ne devrait pas y correspondre. Prenons par exemple un site mobile qui doit avoir un lien vers les mentions légales ou le site complet d’une taille de 6 points. Le texte doit être petit parce qu’il ne doit pas sauter aux yeux, mais sa petite taille le rend difficile à activer.Pas de problème ! Pour commencer, le texte en lui-même doit être cliquable, mais la zone qui l’entoure également. (Pour voir cette zone, laissez votre doigt appuyé sur un lien texte.)Pour un lien en Helvetica de taille 6 points, la zone cliquable correspondante mesure 7,68 points de hauteur, soit 2,7mm. C’est bien trop petit pour qu’il soit facile de l’activer, et les utilisateurs ont près d’une chance sur deux de cliquer à côté.Pour être utilisable avec confiance, un lien doit mesurer 6mm de hauteur, c�