Quelle taille donner aux boutons sur une interface tactile ?

Voici une question que peuvent se poser fréquemment les développeurs d’application : quelle est la taille idéale pour les boutons sur IHM tactile. Luke Wroblewski synthétise sur son site en anglais les derniers travaux sur la question.

La taille des boutons sur interface tactile est souvent traduite en termes de pixels plutôt qu’en taille physique (en centimètres) : les recommandations d’Apple, pour leurs iDevice, préconisent que le bouton « mesure » 44 pixels de hauteur et 44 pixels de largeur afin de répondre à la taille des doigts de la majorité des utilisateurs. Très bien. Mais la taille physique (réelle) offerte par un carré de 44px de côté va changer selon la résolution et la taille de l’écran : un écran de même taille mais de résolution supérieure verra ses 44 pixels recouvrirent une surface moins importante.

Un bouton mesurant 5 pixels de hauteur sur 5 pixels de largeur verra sa taille diminuée de moitié si l’on propose une résolution 2x supérieure… mais la taille du doigt ne variera pas, elle !

Comparaison d'une même taille physique pour une résolution différente

Délicat donc de définir une taille devant correspondre à une taille physique (celle du doigt de l’utilisateur) en s’appuyant sur des mesures numériques, surtout à la vue des différences de taille et de résolution d’écran proposés sur le marché des tablettes… Il est donc important de définir une taille en centimètres (mesures absolues) plutôt qu’en pixel (mesures relatives).

C’est ce que préconisent les recommandations de Microsoft et Nokia, avec une taille minimum d’environ 1cm de côté.

Comparaison de la taille d’un bouton entre un iPad (à gauche) et un iPhone (à droite)

Quelque soit le support sur lequel vous développez, tant que l’interaction est tactile et nécessite l’usage d’un ou plusieurs doigts, la taille minimum de chaque bouton ou élément d’interaction doit respecter cette taille minimum d’1 centimètre de côté (champs de texte, zone d’interaction d’un radio bouton, largeur d’un slide, etc.).

That’s all Folks !

Auteur/Autrice

  • Loïc Balouzat

    UX Designer - Ergonome cogniticien spécialisé dans les jeux vidéo et les applications ludo-éducatives, Loïc intervient aussi sur des dossiers d’ergonomie logicielle et Web, en apportant sa vision ludique et immersive de la User Experience.