Taille minimale du bouton sensible sur iPhone
Je suis en train de concevoir une application iPhone qui propose un assez grand ensemble de boutons rectangulaires arrondis à l'écran. Compte tenu de l'interface utilisateur tactile basée sur les doigts, quelle serait, selon vous, la taille de bouton la plus petite? Je dois en installer autant que possible dans la fenêtre sans trop compromettre la convivialité. Peut-être existe-t-il une taille minimale recommandée par Apple? En ce moment, c'est 33x33, et ça avait l'air bien sur un simulateur, mais je jouais avec l'application sur un vrai téléphone hier soir, et c'était maladroit - les boutons étaient trop petits.
Apple dit que le toucher du doigt moyen est de 44x44 (de la WWDC). Il est recommandé que toutes les lignes du tableau aient au moins cette hauteur. Il est courant que les icônes apparaissent en 32x32, mais ont un rembourrage pour rendre la zone tactile 44x44. Bien sûr, les gens peuvent appuyer sur un 1x1 s'ils sont très prudents, mais pourquoi inciter les gens à faire plus d'efforts que nécessaire pour utiliser votre application?
Des recherches scientifiques récentes ont révélé 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)).
Étant donné la densité de pixels de l'iPhone de 163 PPI (6,417 px/mm), vous devriez de préférence viser pas plus bas que 59 pixels en diagonale pour n'importe quelle cible.
(Veuillez noter que cela est vérifié pour utilisation du pouce à une main uniquement.)
Apple n'est pas cohérent dans ce domaine et il n'y a pas de règles strictes.
Ils vous recommandent de fournir Cibles de la taille du bout des doigts dans les directives de l'interface utilisateur, puis de continuer en disant que les boutons de la calculatrice sont 44x44.
Toujours dans ce document, ils disent que les images pour la barre d'outils et les icônes de navigation doivent être de 20 x 20, et pour les icônes de la barre d'onglets doivent être de 30 x 30.
Je pense que vous devez simplement tester votre application et vous assurer qu'il est facile d'appuyer sur les boutons - même lorsque vous avez des mains assez grandes ...
-t
Dans la pratique, lors de la création d'une interface utilisateur d'appareil Web personnalisée sur les premiers écrans tactiles, nous avons jugé important de concevoir ce que l'un de nos bêta-testeurs appelait "mes gros doigts". Et il avait raison: il est facile de concevoir des commandes élégantes et fines qu'un nombre important d'utilisateurs trouveront sujets aux erreurs ou inutilisables. Dans ce projet, la taille exacte dépendait de l'application, mais ce testeur a trouvé 40 x 40 utilisables (le double de celui des écrans haute définition/Retina), rien de moins augmentait le nombre de ratés et d'erreurs (et de frustration); et en prime, les personnes aux doigts minces ont trouvé qu'elles pouvaient se déplacer plus rapidement et n'avaient pas besoin d'être aussi précises, ce qui rendait le tout plus lisse, moins de friction subjective, plus de marge de manœuvre. L'astuce consiste à faire en sorte que les contrôles de cette taille ne semblent pas maladroits ou dominateurs; une solution est mentionnée ci-dessus, ce qui rend la partie visuelle du contrôle plus petite que ses dimensions réelles, bien que ce ne soit pas une solution universelle.
J'aurais pu jurer qu'ils ont dit que le minimum était de 37 pixels, mais j'en trouve 44 aujourd'hui. De toute façon, 33 semble petit.
(Notez que les images peuvent être plus petites car elles font souvent partie d'une zone rectangulaire plus grande.)
(Vous pourriez vous en tirer avec moins de pixels sur d'autres appareils, si la taille des pixels est plus grande.)