Taille et espacement des boutons les plus petits pour un écran tactile
Pour un écran tactile, comme l'iPhone, quelle est la plus petite taille pour un bouton avec lequel vous pourriez vous en sortir?
Et dans quelle mesure pourraient-ils être rapprochés?
J'ai une application qui va avoir beaucoup de boutons sur un seul écran, et je dois la concevoir pour qu'elle soit utilisable.
(Puisque je suis un peu paresseux, je vais commencer par réimprimer ma réponse à partir d'un fil sur SO)
Des recherches scientifiques récentes ont montré que:
[A] taille cible de 9,2 mm pour les tâches discrètes [c.-à-d. Tâches de pointage à cible unique ] et les cibles de 9,6 mm pour les tâches en série doivent être suffisamment grandes pour une utilisation du pouce à une main sur les ordinateurs de poche à écran tactile sans dégrader les performances et les préférences.
Cité de Étude de taille cible pour une utilisation du pouce à une main sur de petits appareils à écran tactile (Parhi, Karlson et Bederson 2006). D'autres sources s'accordent sur cette "règle de près de 0,4 pouce" (par exemple Designing Gestural Interfaces (Saffer 2008, p. 42)).
Compte tenu de la densité de pixels de l'iPhone 163 PPI (6,417 px/mm), vous devez viser de préférence pas plus bas que 59 pixels diagonale pour n'importe quelle cible.
(Veuillez noter que cela est vérifié pour utilisation du pouce à une main uniquement.)
Si vous suivez ces directives, l'espacement peut sera éliminé.
tl; dr? Tout se résume à la densité de pixels.
Reportez-vous aux iPhone Human Interface Guidelines (ce lien renvoie aux directives pour les applications Web) pour les recommandations d'Apple. Il y a un chapitre intitulé " Fournir des cibles au bout des doigts " que vous pouvez probablement utiliser pour baser vos décisions.
Aussi, ne devinez pas, testez. Obtenez des personnes avec des doigts de tailles différentes (au sein de votre public cible) et demandez-leur d'essayer d'appuyer sur des boutons de tailles différentes dans un prototype. Cela vous apprendra beaucoup à quoi vous attendre.
Modifier: Guide de conception et d'interaction de l'interface utilisateur de Microsoft pour Windows Phone 7 détaille les "tailles cibles tactiles minimales" à la page 4. Dans l'ensemble, cette le guide est excellent et une lecture incontournable pour les concepteurs d'interface utilisateur travaillant sur l'interface utilisateur tactile.
Lors du développement de certaines Android, j'ai dû tester la plus petite zone tactile à laquelle l'utilisateur peut facilement et précisément accéder avec un doigt/toucher (effectuer des actions de clic et de glisser).
Les tests ont été effectués sur 3 Android: HTC Hero, Samsung Galaxy Spica, T-Mobile Pulse. Les téléphones avaient des écrans de 3,2 pouces à l'exception du Pulse (qui a un écran de 3,5 pouces), tous d'entre eux avec une résolution d'écran de 320x480 pixels et une surface d'écran capacitive.
Pour faire court, tout ce qui était inférieur à 20x20 pixels était inutilisable. Gardez également à l'esprit qu'il devrait y avoir de l'espace autour du bouton (marge de 5 pixels).
De nombreuses directives UX tournent autour de la taille du bout des doigts et ces directives varient en taille et en espacement recommandés. La taille des pointes de doigt ne doit pas être le seul facteur à déterminer les contrôles de taille minimum et l'espacement.
Contact Patch
Considérez le véritable "patch de contact" créé par le doigt/pouce lorsque vous entrez en contact avec un écran tactile. Vous devez également tenir compte des erreurs de jugement commises par l'utilisateur en pensant qu'il a centré visuellement son toucher sur la cible, mais en fait, le contact réel avec l'écran peut être légèrement décalé d'un côté.
Type d'appareil
En raison de la manière dont les différents appareils sont maintenus et de la différence de distance par rapport à l'utilisateur (comparer un téléphone mobile à une tablette par exemple, un téléphone peut être tenu plus près), les tailles tactiles minimales et l'espacement peuvent également varier. On pourrait sans doute s'en tirer avec des minimums plus petits sur un téléphone car ils sont plus proches du spectateur et les erreurs sont moins susceptibles d'être commises. Pour un appareil plus grand comme une tablette maintenue plus loin, vous devrez peut-être augmenter vos tailles minimales pour répondre aux risques d'erreurs plus élevés.
Il y a un grand article parlant de cela et d'autres facteurs sur UXmatters ( http://www.uxmatters.com/mt/archives/ 2013/03/common-misconceptions-about-touch.php ).
Extraits de l'article:
... seule une partie du doigt ou du pouce entre en contact avec l'écran ... le patch de contact varie en fonction de la pression et de l'angle
Les tailles physiques comptent , donc toutes les bonnes directives sont en millimètres, pouces, points de typographes ou autres échelles du monde réel.
il n'est pas nécessaire d'augmenter la taille de la cible visible. Au lieu de cela, vous pouvez simplement augmenter les dimensions de la zone cliquable autour d'un lien ou d'un bouton
Conception pour les zones cibles visuelles et tactiles. Tenez compte des attentes des utilisateurs.
Tailles:
Juste comme un ajout: la conception du matériau Google suggère un minimum de 7-10 mm pour la taille cible tactile https://www.google.com/design/spec/search.html?q=Touch+target+size