Quelle est la taille optimale des boutons des applications à écran tactile?
Il y avait un article de blog pas si récent sur la taille idéale du bouton des tailles de contrôle de l'écran tactile (désolé, il n'y a pas de lien, le site Web est maintenant un piège à spam) qui était basé sur le étude du MIT touch lab qui donne quelques mesures de la taille et de la sensibilité du doigt.
Comme l'a souligné l'auteur du blog, cette taille de contact idéale est beaucoup plus grande que la taille suggérée pour les appareils Windows et Apple qui se trouve dans leurs guides de conception. Je me demande pourquoi il y a une telle différence, et s'il est plus logique d'augmenter la taille des contrôles sur les applications à écran tactile, ou si ce n'est pas vraiment un problème de convivialité?
En outre, il semble que de nombreux sites Web et applications mobiles semblent ignorer complètement ces principes. Je suis sûr que la taille de l'écran limite la taille des contrôles d'interface, est-ce simplement un compromis entre la possibilité de contenir autant d'informations que la facilité d'interaction avec le contrôle? Il semble que le stylet ne soit pas très utilisé.
Une question similaire a été posée sur la taille minimale/la plus petite avec laquelle vous pouvez vous en sortir, mais je considérerais que c'est une question différente de la taille optimale, car la plus petite taille répond à l'exigence d'utilisation minimale, tandis que l'optimum la taille répond à la meilleure exigence d'utilisation.
Lien archivé du blog (le domaine d'origine montre du spam) https://web.archive.org/web/20140116222719/http://designbrother.com/2013/04/29/touch-screen-design-the -ideal-button-size /
Et voici une autre référence (juste pour montrer que ce n'est pas le problème avec le lien mais le site Web ( http://www.linkedin.com/groups/Touch-screen-design-ideal-button-) 2566185.S.238425414 )
MISE À JOUR # 1 : une autre nouvelle référence qui a un chiffre très précis d'un minimum de 44 x 44 points , je ne sais pas comment il est dérivé exactement mais intéressant ( http://babich.biz/pagination-best-practices/ ). Lisez la section 2. Fournissez de grands éléments cliquables.
MISE À JOUR # 2 : une autre référence, cette fois de Microsoft citant la taille de la cible tactile à 9 mm carré ou plus (48x48 pixels sur un affichage de 135 PPI à un plateau de mise à l'échelle 1.0x). Ils suggèrent également d'éviter d'utiliser des cibles tactiles de moins de 7 mm carrés.
MISE À JOUR # 3: quelque chose des Apple Developer Guidelines que j'ai référencé récemment en citant 44 x 44 points.
MISE À JOUR # 4: NN/g a publié un article sur Touch Targets on Touchscreens et les informations/conclusions restent inchangées.
MISE À JOUR # 5 Un très bon article sur la nécessité d'améliorer la taille de la zone cliquable des éléments communs de l'interface utilisateur, citant le directive WCAG 2.1 que la "taille cible minimale pour le toucher ou la souris doit être de 44 × 44 pixels" (2.5.5 - Taille cible - Niveau AAA).
Oui, la taille peut être un problème. Les cibles tactiles doivent être plus grandes que les cibles de bureau classiques car la précision du doigt est pire que la précision pointeur + souris. Avec cette pire précision, les chances de faire des taps manqués sont plus grandes (comme ne pas toucher un bouton ou toucher le mauvais).
Habituellement, les études tactiles utilisent comme variable d'étude principale le taux d'erreur. Les suggestions ne sont pas pour des cibles tactiles propices aux erreurs parfaites, mais plutôt pour minimiser le nombre d'erreurs à un niveau pratique tout en équilibrant d'autres variables importantes, comme la densité des informations d'écran.
Dans les interfaces tactiles traditionnelles, comme les kioscopes, les cibles sont généralement beaucoup plus grandes que dans les téléphones portables, car la taille de l'écran permet au concepteur de le faire. Dans les téléphones mobiles, certains compromis doivent être faits, et c'est la raison pour laquelle certaines tailles cibles diffèrent entre les guides de style et les études antérieures.
Toute mesure en pixels n'est pas utile pour concevoir des interfaces tactiles. Vous devez considérer la taille du doigt humain par rapport à la densité de pixels de l'écran. Vous devez connaître la densité de pixels des appareils pour lesquels vous concevez et convertir les unités métriques en pixels.
La taille optimale de la cible tactile, sans tenir compte de toute autre variable, serait la taille infinie théorique, mais il est généralement suggéré dans les guides de style d'utiliser une taille cible générale de 9 mm (0,5% de tapotements manqués) et 7 mm (1% de tapotements manqués) au minimum.
Luke Wroblewski a un bonne compilation des recommandations du guide de style , et je vous suggère de jeter un œil à recommandations de Microsoft (basé sur les sessions de test utilisateur). Le graphique des prises manquées provient de leurs études.
Les directives données pour les différentes plates-formes sont toutes basées sur l'idée que la la taille minimale doit être de 9 à 12 mm. La variation entre les lignes directrices est principalement due aux différences de densité de pixels sur les appareils, et donc au nombre différent de pixels nécessaires pour atteindre le chiffre 9-12 mm.
Notez que ce n'est pas une dimension idéale pour rendre le bouton plus facile à utiliser, mais ce que vous ne devriez jamais aller en dessous. En pratique, cependant, en raison de contraintes d'espace, il s'agit souvent de la taille standard utilisée.
Quelle est vraiment la "taille idéale" dépend de l'application. J'ai travaillé sur une application mobile où trois boutons d'une barre d'action alignée en bas devaient être utilisés très souvent. En augmentant la taille des boutons d'environ 20%, nous avons constaté une amélioration mesurable de l'UX. C'était assez important pour cette application que nous étions prêts à laisser de l'espace pour les gros boutons. Dans d'autres applications, cela peut ne pas être un bon compromis.
Je pense que tout aussi important est le remplissage entre les boutons et où le bouton est situé sur l'écran. Certains préconisent qu'en raison des cas de téléphone, il est difficile de toucher les boutons sur le bord de l'écran.
En raison de la grande taille des téléphones intelligents actuellement sur le marché, l'utilisation à une main est probablement en baisse, mais il peut toujours être judicieux de considérer la portée d'un pouce et à ses limites ou son mouvement, il est moins précis. Cette image d'un article sur l'utilisation des appareils mobiles l'illustre assez bien.
Enfin, comme quelqu'un l'a déjà mentionné, le cas d'utilisation est tout aussi important, sinon plus. Si l'application est destinée aux surfeurs des neiges, envisagez de l'utiliser avec des gants de ski (au moins ceux conçus pour les appareils tactiles) et si c'est pour les jeunes enfants qui développent encore leur motricité, des zones tactiles plus larges et un rembourrage est prudent.
J'ai lutté avec des gens citant cette conclusion sur plusieurs projets maintenant. La différence, à mon humble avis, existe en raison de la capacité du chercheur à exister dans un environnement contrôlé.
Lorsque vous avez des pages complexes à traiter, vous ne pouvez pas faire de chaque action enregistrable la taille de l'empreinte du pouce d'un grand homme. Si vous le faisiez, vous vous retrouveriez avec un désordre encombré d'une interface utilisateur. Les gens sont plus habiles avec leurs appareils tactiles que nous ne leur en accordons parfois le mérite.
Pour les actions critiques, j'ai trouvé quelque chose de 9 à 12 mm carré (ou plus large) pour fonctionner de manière fiable. Pour les actions secondaires et tertiaires, comme les petites icônes ou les liens de texte, je m'assure simplement qu'il n'y a pas moins de 6 mm carré.
En résumé: avec autre chose que vos actions de "chemin critique", vous avez une petite marge de manœuvre. Les gens ne sont pas complètement au hasard avec leurs appareils ces jours-ci, ils sont conscients du coût du tapotage paresseux. Quand ils veulent interagir avec l'une de vos actions les moins importantes, ils seront un peu plus prudents avec leurs doigts;)
PaRaP brièvement touché sur un point vraiment important
"Dans les interfaces tactiles traditionnelles, comme [les kiosques], les cibles sont généralement beaucoup plus grandes que dans les téléphones portables"
Il n'y aura pas de taille optimale unique en px ou mm, car cela dépend de la façon dont l'utilisateur interagit avec l'interface.
S'ils aiment rester immobiles, comme une application de lecture de nouvelles, vous pouvez vous permettre de réduire la taille des boutons.
S'ils vont probablement être en mouvement, comme une horloge de minuterie d'entraînement, alors vous allez vouloir que les boutons soient massifs.
J'aime l'approche consistant à collecter des données sur% des échecs par rapport à la taille, bien que vous obtiendrez un ensemble de résultats différent selon le scénario. De plus, je pense que le temps de presser serait important. Je ne peux pas manquer le bouton, mais cela peut me prendre un temps indu pour arrêter le mouvement de mon corps pour appuyer sur le bouton.