Ecrans tactiles : mort aux mythes

Par 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 fiable

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.

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érer

Plus 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 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 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 :

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é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.

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’est un minimum absolu. Mais cette valeur ne convient que pour des utilisateurs immobiles ; pour peu qu’ils soient en mouvement ou peu attentifs, augmentez à 8mm. Toute valeur inférieure obligera vos utilisateurs à ralentir, ce qui n’est pas forcément envisageable pour votre interface utilisateur. Une cible tactile n’a pas besoin de mesurer plus de 15mm de hauteur.

Selon la manière dont vous mesurez le barycentre d’un point de contact, celui-ci semble parfois se trouver en-dessous de la mi-hauteur de l’élément. Même si c’est techniquement vérifié, le calcul de l’écart circulaire probable (R95 ou D2RMS) montre que ce n’est pas significatif. Les statistiques indiquent en effet qu’il n’y a pas de différence notable à mesurer le nombre de clics équidistants au-dessus ou au-dessous de la ligne médiane de l’élément. Ce phénomène n’ayant aucune incidence sur le design, ce n’est pour moi qu’un mythe de plus de la conception pour mobile.

Les zones d’interférences

S’assurer qu’une cible tactile est de la bonne taille, c’est faire en sorte qu’un utilisateur puisse l’activer. Quand il n’y arrive pas de manière suffisamment précise, c’est un raté et la cible ne s’active pas. Il est très important de prévoir ce qui se produit dans cette situation car les cibles sont toujours manquées dans une plus ou moins grande mesure.

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.

En suivant ces recommandations, la plupart des cibles tactiles ne se retrouveront jamais trop proches l’une de l’autre, et il n’y aura besoin que d’un minimum d’espace entre elles. Cet espace, d’ailleurs, n’a pas besoin d’être matérialisé visuellement, et une zone non réactive n’est pas obligatoirement composée d’espace négatif. Les barres d’outils par exemple sont souvent composées d’icônes suffisamment espacées, sans que l’espace entre elles ne soit matérialisé. Et des onglets peuvent avoir une hauteur visuelle minimale, tant qu’aucune autre cible ne se trouve trop près au-dessus ou en dessous de la barre d’onglets.

Que vous testiez directement sur un appareil ou sur une capture écran de dimension identique, superposez comme sur la figure 5 un cercle sur chaque cible pour vous assurer qu’il n’y aura pas d’interférence possible. Dans cet exemple, le cercle extérieur mesure 10mm et le disque intérieur mesure les 8mm minimum. Dans les deux captures l’espacement des cibles dans les listes est supérieur aux valeurs minimum. En revanche, la barre d’onglet sur l’écran de gauche provoquera des interférences car les utilisateurs risquent d’appuyer involontairement sur l’élément de liste situé juste en dessous.

[Figure 5 : Mesurer, pour éviter les interférences des différentes cibles]

L’autre aspect à prendre en compte quand on conçoit en fonction des interférences consiste à éviter les catastrophes. Il est souvent impossible d’éloigner suffisamment les zones cliquables pour éviter tout risque d’activation accidentelle. Parfois même, c’est le système d’exploitation qui impose des cibles trop petites et trop proches les unes des autres. Heureusement, les tactiques pour limiter la portée de ces problèmes sont relativement faciles à mettre en place.

Ne placez jamais de boutons ayant des conséquences catastrophiques (ou même simplement difficiles à annuler) à côté de boutons aux effets plus anodins. Dans un écran de rédaction d’email, par exemple, les boutons Envoyer et Annuler doivent être placés loin l’un de l’autre, et surtout pas à côté de fonctionnalités telles que la mise en forme du texte. Corriger une mise en gras accidentelle ne demande que d’appuyer à nouveau sur Gras alors qu’il est impossible d’annuler l’envoi d’un message, et que récupérer un message supprimé nécessite d’aller farfouiller dans la corbeille – quand elle existe.

Les éléments interactifs se trouveront forcément proches les uns des autres sur mobile, il se produira donc obligatoirement des erreurs sur les clics et autres actions. Nos pratiques de conception habituelles remédient déjà heureusement à ce problème en grande partie. C’est le cas par exemple quand nous groupons les actions possibles en fonction de leur type, quand nous évitons de placer des cibles excessivement près l’une de l’autre ou de donner le même poids visuel ou le même emplacement à des éléments d’importance différente.

J’encourage ceux que ce sujet intéresse à étudier la technologie des écrans tactiles afin de mieux connaitre leurs possibilités et leurs limites. Pour vous donner un exemple, l’imprécision peut très bien être inhérente à la conception de ce type d’écran, qui varie grandement d’un appareil à l’autre. Certains notamment souffrent d’aberrations sur des zones de l’écran. En appréhendant mieux ces limites techniques, nous pouvons améliorer l’utilisabilité en évitant de placer les interactions les plus fines dans ces zones-là.

Concevoir les gestes et mouvements

Cet article s’est jusque là concentré sur la conception d’interactions basées sur le tapotement ou, éventuellement, une pression longue. L’ergonomie des gestes sur écran tactile n’a pas fait l’objet d’études aussi nombreuses et poussées.

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.

Les autres types de mouvements nécessitent également ce genre d’ajustements, quoique légèrement différents à chaque fois. Tout comme la conception pour tactile, on trouve de nombreux mythes concernant les bonnes pratiques de design pour interactions gestuelles, car elles sont souvent mal définies et mal comprises. Soyez donc particulièrement attentifs aux besoins des utilisateurs lorsque vous concevez ce type d’interaction. J’espère qu’en plus des nombreux guides de bonnes pratiques pour les interactions gestuelles existants, nous aurons bientôt des études plus solides sur lesquelles nous appuyer pour en apprendre plus sur celles-ci.

Résumé des règles de conception pour écrans tactiles

Pour conclure cet article où j’ai évoqué un grand nombre de choses à prendre en considération, voici en résumé les étapes indispensables quand on réalise ou évalue un design destiné à une interface tactile :

  1. Déterminez les dimensions de chaque cible visuelle.
  2. Déterminez les dimensions de chaque cible tactile –et notez-les dans vos spécifications techniques !
  3. Évaluez les risques d’interférences. Si des cibles de petite taille sont trop proches l’une de l’autre, ajustez leurs dimensions et positions.
  4. Évaluez les conséquences d’une activation accidentelle pour les cibles adjacentes. Si elles sont sévères, protégez les utilisateurs en les réorganisant ou en les éloignant l’une de l’autre.

Résumé des directives concernant les dimensions

Pour vous simplifier la tâche, j’ai rassemblé ici les recommandations indiquées tout au long de cet article. Vous y trouverez notamment : les dimensions minimales possibles pour une cible visuelle selon les dimensions des appareils (tableau 1), les dimensions minimales préconisées pour une cible tactile, ainsi que l’espacement minimum à respecter entre deux cibles (calculé à partir du centre, peu importe l’axe), pour éviter les erreurs d’interférences.

[Tableau 1 : Dimensions minimum pour les cibles visuelles selon les dimensions de l’appareil]

CibleTéléphone 2,5 poucesTéléphone de 3,5 à 5 poucesTablette de 9 à 10 pouces
Texte4 pt / 1,4 mm6 pt / 2,1 mm8 pt / 2,8 mm
Icônes6 pt / 2,1 mm8 pt / 2,8 mm10 pt / 3,5 mm

Cibles tactiles

Références

Wikipédia. HP–150

Consulté le 5 mars 2013. Probablement le premier appareil à écran tactile distribué commercialement, ce PC de bureau tout-en-un et équipé d’un écran tactile à grille infrarouge s’est vendu à partir de 1983. Le constructeur a par la suite intégré des écrans tactiles dans toutes sortes d’appareils et d’environnements.

Apple. Caractéristiques de la plateforme, recommandations concernant le développement d’interfaces pour iOS

Consulté le 6 mars 2013. Un point Apple (à distinguer du point typographique mesurant 1/72ème de pouce) est une unité de mesure correspondant à 44 pixels sur les premiers iPhones et iPod Touch. Sur l’iPhone, cette mesure correspondait à 6,74mm ce qui était légèrement trop petit – sans doute s’étaient-ils basés sur les dimensions de l’index au lieu du pouce. Les dimensions physiques d’un point sont de plus en plus variables car elles sont fonction du ratio d’ajustement de l’appareil. Il est particulièrement important de savoir que l’iPad mini, sorti fin 2012, affiche les interfaces en prétendant avoir les dimensions de l’iPad classique, chaque élément est donc plus petit à l’écran –cibles tactiles comprises.

Nokia : Expérience utilisateur, les points à vérifier Indications de conception pour Symbian

Consulté le 5 mars 2013. « Les dimensions minimales pour un élément d’interface sont 7mm par 7mm pour l’index, et 8mm par 8mm pour le pouce. » Il est difficile de prévoir quel doigt sera utilisé, il vaut donc mieux présumer l’usage du pouce. Cette valeur (8mm) est presque bonne, quoique un peu petite.

Microsoft. Indications pour interfaces tactiles Windows 8 (PDF)

Consulté le 5 mars 2013. Microsoft suggère d’utiliser des cibles de 7mm dans la plupart des cas, en allant jusqu’à 9mm pour les cibles plus importantes, et de ne pas descendre en dessous de 5mm si les contraintes ne permettent pas de plus grandes dimensions. Ils préconisent également d’espacer les cibles de 2mm minimum, ce qui rend leurs recommandations assez fiables dans l’ensemble. Ils mentionnent qu’un doigt mesure 11mm de largeur mais ne semblent rien extrapoler de cette mesure, et j’approuve car ce n’est pas important au final.

Société d’ergonomie et des facteurs humains. Rapport ANSI/HFES 100–2007, Human Factors Engineering of Computer Workstations

Publié en 2007 à Santa Monica, Californie, la société d’ergonomie et des facteurs humains préconise d’utiliser des boutons de 9,5mm minimum ; cette recommandation est destinée aux « postes de travail informatiques », soit des ordinateurs de bureau.

ISO. Exigences ergonomiques pour travail de bureau avec terminaux à écrans de visualisation (TEV) - Partie 9 : Exigences relatives aux dispositifs d’entrée autres que les claviers.

Publié en 2000 à Genève par l’organisation internationale de standardisation, ce document recommande que les boutons soient aussi larges que la dernière phalange de 95% de la population mâle –soit entre 22 et 23mm. C’est extrêmement large, sans compter que sur la plupart des appareils les zones de contact sont plus étroites que la largeur du doigt. Ces valeurs correspondent cependant aux écrans tactiles à interférence, qui détectent la position du doigt dans un champ magnétique situé devant l’écran. La technologie sous-jacente importe beaucoup, utilisez donc ces valeurs avec précaution.

Anthony T. Design confortable au doigt, les dimensions idéales pour des cibles sur écran tactile mobile

Publié le 21 février 2012, consulté le 5 mars 2013. Un exemple argumenté se basant sur les dimensions physiques des doigts au lieu des zones de contact. La logique ne fonctionne que si les données et les prémisses sont correctes.

John Meyer. Toucher le bonheur du doigt : 6 petits trucs pour que votre design passe bien sur tablettes

Publié le 2 janvier 2013, consulté le 5 mars 2013. Un des nombreux commentaires soulève le problème des media queries fondées sur les pixels.

John Pavlus. Gros pouce : pincer-zoomer à une seule main

Publié le 4 février 2013 sur Fast Co Design, consulté le 5 mars 2013. Une brique logicielle qui déduirait la pression exercée en exploitant les dimensions des zones de contact, peut-être bientôt disponible dans un produit commercialisé.

Jakob Nielsen et Raluca Budiu. Utilisabilité mobile.

Les indications de retour doivent être visibles malgré le doigt qui les déclenche, c’est une des recommandations basiques d’utilisabilité pour le design d’interfaces mobiles et tactiles


–Nielsen Norman Group, 2013, Berkley, Californie.

Mary E. Sesto, Curtis B. Irwin, Karen B. Chen, Amrish O. Chourasia, et Douglas A. Wiegmann. Dimensions des boutons et espacement, et leur effet sur des utilisateurs handicapés ou non.

Publié dans le numéro 3, volume 54 de juin 2013 de la revue « Human factors : The Journal of the Human Factors and Ergonomics Society ». L’étude a révélé que les boutons de 20mm sont les plus efficaces, et qu’un grand espacement n’a pas d’effet ; l’indicateur utilisé était la pression mesurée plutôt que la précision de ciblage, apparemment pour prendre en compte un besoin spécifique du groupe de test handicapé. Ces résultats ne sont pas directement applicables mais 20mm représente une bonne valeur compte tenu de l’imprécision due aux troubles moteurs.

Pekka Parhi, Ami K. Karlson et Benjamin B. Bederson. Étude des dimensions des cibles lors de l’utilisation au pouce d’un appareil mobile à écran tactile tenu à une main.

Publié dans le compte-rendu de la 8ème conférence sur les interactions homme-ordinateur avec des appareils et services mobiles, New York, ACM, 2006. « Sur appareils à écrans tactiles tenus à une main et utilisés avec le pouce, 9,2mm convient pour les cibles occasionnelles, et 9,6mm pour les cibles plus fréquentes. » L’étude utilisait un ECP de 95%, et n’a pas constaté d’amélioration de la précision quand les cibles mesuraient 11,5mm. Cet article ne distingue pas entre cibles et interférences dans l’ensemble, en plaçant fréquemment les cibles à très courte distance les unes des autres. Mobile Usability de Nielsen fait dire à cette étude que les cibles tactiles doivent mesurer environ 10mm, ce que je trouve pertinent.

Seungyon Lee et Shumin Zhai. « Performance des boutons logiciels sur écrans tactiles ».

Publié dans le compte-rendu de la conférence SIGCHI des facteurs humains dans les systèmes informatiques, New York, ACM, 2009. Une précision de 98 à 99,4% était obtenue avec des boutons de 10mm. Face à des boutons de taille inférieure, les utilisateurs utilisaient l’index plutôt que le pouce. Les boutons du clavier virtuel de l’iPhone démontraient une bonne précision (90%) mais une vitesse de frappe plus lente d’un tiers, et le nombre de corrections nécessaires augmentait fortement lors de l’utilisation du clavier vertical. Je pense qu’ils évaluaient la précision en tant que capacité à entrer la valeur attendue plutôt que d’atteindre la bonne cible du premier coup, ignorant de ce fait l’importance cruciale des problèmes d’interférence.

Yong S. Park, Sung H. Han, Jaehyun Park et Youngseok Cho. Design des boutons virtuels pour la sélection de cibles sur téléphone mobile.

Publié dans le compte-rendu de la 10ème conférence sur les interactions homme-ordinateur avec des appareils et services mobiles, New York, ACM, 2008. Une étude très intéressante car les participants tenaient l’appareil en main tout en l’utilisant au pouce, et les résultats sont présentés sous forme de graphes montrant le taux d’erreur suivant la position sur l’écran. Les préconisations sur la taille des cibles sont intéressantes aussi, spécifiquement 10mm est bien mieux que 7, et 4mm est une catastrophe.

Bastian Schildbach et Enrico Rukzio. Enquête sur les performances de lecture et de sélection lors de l’utilisation d’un téléphone mobile en marchant.

Publié dans le compte-rendu de la 12ème conférence sur les interactions homme-ordinateur avec des appareils et services mobiles, New York, ACM, 2010. « La baisse de performance s’accompagne d’une charge mentale significativement accrue quand les utilisateurs lisent et visent tout en marchant. De plus, les mesures indiquent qu’augmenter la taille des cibles permet de compenser la difficulté à les atteindre, mais cette stratégie ne fonctionne pas avec le texte à cause de la nécessité de le faire défiler. » Les résultats de l’étude : les boutons de 6,74mm ont un taux d’erreur pouvant aller jusqu’à 23%, bien supérieur à celui de boutons de 10mm. Les boutons de 20mm quand à eux sont presque systématiquement atteints sans erreur, même en marchant. Les petits boutons obligent les utilisateurs à ralentir le pas, à cause de la concentration nécessaire. A 6 points, le texte ne pose pas plus de problème de performance en marchant qu’immobile, mais semble plus difficile à lire pour certains. Le besoin de faire défiler annule les gains en lisibilité du texte de grande taille, et au-delà d’un seuil le texte est trop gros.

Niels Henze, Enrico Rukzio et Susanne Boll. 100 000 000 taps : analyse et amélioration de performance tactile dans la nature.

Publié dans le compte-rendu de la 13ème conférence sur les interactions homme-ordinateur avec des appareils et services mobiles, New York, ACM, 2011. Plusieurs millions de clics plus ou moins qualifiés ont été enregistrés par un jeu sur Android. « Le taux d’erreur augmente dramatiquement en dessous de 15mm, et grimpe même à 40% pour les cibles de moins de 8mm. » Contient d’intéressants graphiques présentant le taux d’erreur suivant la position à l’écran, indiquant en gros que les bords de l’écran sont bien plus malcommodes que le centre, de manière assez symétrique.

Juan E. Gilbert, Aqueasha M. Martin, Gregory Rogers, Jerome McClendon, et Josh Ekandem. Eh, mais c’est pas ce que j’ai voté ! Une étude sur le design des machines à voter à écran tactile.

Dans cet article publié dans Interactions en novembre 2012, cibles et interférences sont traités indifféremment, les boutons étant collés les uns aux autres dans les designs présentés. Les informations sur les indicateurs de sélection et de focus visuel sont intéressantes. Présente la propension des utilisateurs à cliquer sur les étiquettes et l’utilité de cases à cocher pour indiquer l’état de la sélection.

A. Sears. Améliorer les claviers virtuels pour écrans tactiles : contraintes de design et comparaison avec d’autres types d’appareils.

Publié en 1991 dans Interagir avec les ordinateurs, volume 3. Il s’agit d’une des premières études sur les écrans tactiles fixes, à laquelle beaucoup se réfèrent, mais je me méfie de tout document se basant sur cette étude pour préconiser quoi que ce soit pour les appareils mobiles.

Steven Hoober et Eric Berkman. Concevoir des interfaces mobiles.

Publié aux éditions O’Reilly, Sébastopol, Californie en 2012. Voir en particulier l’annexe D : « Facteurs humains », section « Dimension des stimulis : angle de vision » qui inclut une formule pour le calcul de l’angle de vision, ou angle de résolution.

Steven Hoober et Eric Berkman. Facteurs humains et physiologie.

Publié le 11 juillet 2012 sur le wiki Guides de conception mobiles de 4ourth. Consulté le 18 mars 2013.

Phil. Plait. iPhone : la bonne résolution.

Publié le 10 juin 2012 dans Discover, et consulté le 16 mars 2013. Éclairage scientifique au milieu de l’effervescence provoquée par la sortie de l’écran Retina sur iPhone, offrant une démonstration mathématique facile à suivre des équations gouvernant la résolution angulaire, et pourquoi elle compte bien plus que la taille physique.

Wikipédia. Écart Circulaire Probable.

Non daté. Consulté le 5 mars 2013. (L’explication en anglais est bien plus complète, NdT.)

Steven Hoober. Du Web au mobile, tester l’efficacité.

Publié dans Ne me touche pas ! le 28 octobre 2011, consulté le 5 mars 2013. C’est la première fois que j’écrivais comment détecter les interférences sur des appareils concrets, en utilisant un guide circulaire.

4ourth. Wiki Guides de conception mobiles.

Non daté, consulté le 15 mars 2013. J’ai créé cet outil pour que plus de gens soient conscients des problèmes d’interférence et pour simplifier les tests. La vidéo explique comment la mesurer et explique en quoi c’est important, ainsi que la façon d’utiliser les autres fonctions de l’outil.

John Carey. Algorithmes de capteurs capacitifs : premier contact.

Publié dans Embedded, 9 septembre 2009, et consulté le 5 mars 2013. Une bonne présentation du fonctionnement des écrans capacitifs et de comment les améliorer. L’article est très complet et parfois très technique, je vous encourage à passer les sections qui ne vous parlent pas.

Priya Ganapati. Touché-manqué : pourquoi les écrans tactiles sont souvent imprécis.

Publié dans Wired le 4 mars 2010 et consulté le 5 mars 2013. Bon tour d’horizon des problèmes techniques limitant la précision des écrans tactiles capacitifs. C’est une raison de plus pour choisir des cibles de grandes dimensions, car l’imprécision de la mesure s’ajoute à celle de l’utilisateur. J’ai un temps suggéré que le biseautage permettait de faire des cibles plus petites sur les côtés mais la moindre précision des capteurs me fait retirer ça.

Steven Hoober et Eric Berkman. Concevoir des interfaces mobiles.

Publié aux éditions O’Reilly en 2012, Sébastopol, Californie. Voir en particulier la section « Contraindre les mouvements », page 317 environ, où nous expliquons pourquoi le défilement devrait se limiter à un seul axe une fois que l’utilisateur l’a initié.

Steven Hoober et Eric Berkman. Contrôles interactifs génériques.

4ourth. Wiki Guides de conception mobiles. Publié le 13 décembre 2011, consulté le 18 mars 2013.

Fiche technique

À propos de l'auteur

Designer et consultant en interactions mobiles, et auteur de nombreux ouvrages sur ces sujets.

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Ergonomie

Web Mobile

© 2001-2014 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site