Taille d'élément de formulaire exploitable
Je ne suis en aucun cas un concepteur d'interface. J'ai remarqué au cours des deux dernières années que des boutons/liens importants, etc. sur de nombreux sites Web ont désormais de très grandes zones de clic. Je dois dire que je l'apprécie, car obtenir le curseur juste pour agir est une douleur. Je dirais que c'est probablement plus pertinent maintenant avec le mobile, qui peut même être le moteur de ces changements de conception.
Alors, existe-t-il une règle de base pour les tailles de bouton/lien sur une page Web?
Tout est basé sur loi de Fitts qui vous donne le temps moyen qu'il faut à l'utilisateur pour amener le curseur sur le bouton. Vous pouvez trouver différents articles sur le sujet comme La loi UI de Fitts appliquée au Web ou même le podcast de Jared Spool .
Et la règle d'or est simple: un bouton important doit être si gros qu'il peut être appuyé avec, littéralement, un pouce (bonjour, iPad) :-)
Voici une règle d'or pour l'iPhone, de Apple's Human Interface Guidelines .
Créez des contrôles d'au moins de 29 pixels de hauteur et fournissez une zone cible de 44 pixels haute.
Plus dans le livre, Tapworthy , où je l'ai découvert.
Mais quelle taille est assez grande pour les cibles tactiles iPhone? Eh bien, quelle est la taille d'un doigt? Apple le fixe précisément à 44 pixels et cette mesure apparaît de manière fiable dans tous les contrôles iPhone standard
Il n'y a pas tellement une règle de base que la prise de conscience que tous les utilisateurs d'Internet n'ont pas la dextérité et l'agilité d'un concepteur d'interface professionnel à plein temps. En 1999/2000, vous avez vu beaucoup de designs "pixelisés" où les choses étaient minuscules et utilisaient des boutons 8x8 gros. Depuis le boom de la convivialité inspiré par Steve Krug, Kathy Sierra, 37signals, Jakob Nielsen et d'autres au cours des années 2000, les gens ont pris davantage conscience de l'utilisabilité de leurs applications et de leurs sites et ont commencé à concevoir en conséquence.
Un autre côté de l'histoire est que les écrans et les résolutions d'écran en général deviennent plus grands. La moyenne d'aujourd'hui est probablement de 1 280 x 1 024 et plus, alors qu'il y a dix ans, vous auriez la chance de trouver un visiteur de 1 280 x 1 024 sur votre site, car la plupart des gens faisaient encore environ 800 x 600. Parce que les résolutions sont plus grandes, plus de pixels tiennent sur l'écran et ce qui était auparavant assez facile à voir devient maintenant encore plus fin (et en tant que tel, plus difficile à cliquer).
Et enfin, l'introduction d'appareils tactiles a amené de nombreux développeurs à prendre au sérieux la zone de clic, car il est difficile de toucher une petite cible avec quelque chose d'aussi imprécis qu'un doigt par rapport à l'extrême précision du pointeur de la souris.
Tous ces changements entraîneront probablement des règles générales à un moment donné, mais dans l'ensemble, la meilleure chose à faire est d'identifier le type d'audience visitant votre site et de concevoir en conséquence, en tenant compte de qui ils sont, de quels appareils ils sont en utilisant, et d'autres éléments tels que l'espace dont vous disposez sur votre écran/fenêtre.
Dans une certaine mesure, la taille de la zone de clic est relative aux autres éléments de la page. Je n'ai pas de norme stricte, mais je trouve généralement que mes boutons ont une hauteur d'au moins 40 pixels et que la taille de mon texte est généralement d'au moins 13 pixels. Je pense également que pour la navigation et d'autres boutons avec au moins un composant graphique, il est important de rendre la zone entière cliquable, plutôt que juste le texte.