Recommandations de taille pour les éléments d’interfaces mobiles

L’avènement des terminaux mobiles a changé beaucoup de choses dans le quotidien des concepteurs d’interfaces. Si les meilleures pratiques de conception d’interfaces mobiles pour iPhone ou iPad étaient facilement appréhendables il y a encore deux ans, la situation s’est considérablement complexifiée ces derniers mois avec la multiplication des formats et des technologies d’écran. Les concepteurs d’interfaces mobiles doivent maintenant jongler avec différents types de smartphones et tablettes, mais ils doivent de plus prendre en compte des résolutions d’écran très disparates (cinema display, HD…). Bref, c’est un authentique calvaire, et nous n’avons plus réellement de repères pour nous y retrouver.

Ce n’est pas la première fois que j’aborde le sujet de la conception d’interfaces mobiles (Des mises en page adaptives aux systèmes de navigation adaptatifs) et ce sujet est régulièrement abordé par d’autres blogs spécialisés dont le très sérieux UXmatters (Designing for Users and Their Devices et Mobile Input Methods). Ils ont justement publié la semaine dernière un très bon article abordant la problématique de résolution d’écran : Common Misconceptions About Touch.

Le point de départ de l’article est que la taille « standard » définie par Apple pour les éléments d’interaction (44 pixels) n’est plus pertinente dans la mesure où  avec ces grandes disparités de résolution d’écran (le dernier smartphone Samsung a un écran full HD). Plutôt que de résonner en pixels, il est ainsi plus rigoureux de se baser sur des dimensions en mm. Nokia et Microsoft préconisent ainsi des éléments d’une largeur minimale de 7 mm, avec un espacement minimal de 2 mm. Le problème est que ces tailles minimales sont plus adaptées à une manipulation au stylet qu’avec nos gros doigts. Le principal argument avancé par l’auteur de l’article est que nous manipulons principalement nos smartphones avec nos pouces, cachant ainsi une bonne partie de l’écran (d’où un grand manque de précision).

De plus, nous n’avons pas le nez sur notre smartphone ou tablette, surtout quand nous sommes en position debout :

D’après l’auteur, ces différents facteurs combinés font que la taille minimum devrait être de 2 mm pour du texte et de 2,8 mm pour une icône. Il fait également fort justement remarqué que le mode d’usage décrit plus haut rend complexe la lecture du texte ou l’identification d’un bouton, mais qu’il perturbe également la précision. L’auteur recommande donc d’élargir la zone d’interaction autour d’un bouton ou d’un lien pour compenser un contexte d’usage problématique (reflet sur l’écran…) et un manque de précision dû à une tenue à une main.

Une solution élégante, mais qui induit un autre problème : celui des zones de recouvrement. Les boutons sont ainsi généralement regroupés en haut ou en bas d’une interface, si l’on utilise une zone d’interaction (touch target) plus large que la zone d’affichage (visual target), les éléments se font concurrence.

Certains navigateurs mobiles comme Chrome anticipent ce problème en affichant un zoom contextuel en cas de pression sur une zone de recouvrement (ici, deux liens l’un au dessus de l’autre) :

Comme vous l’aurez compris, augmenter la taille des boutons permet de faciliter le repérage, mais dans une certaine limite sinon on ne peut pas tout faire rentrer, d’autant plus si vous prévoyez d’étendre la zone d’interaction de quelques pixels. Ceci étant dit, il est tout de même primordial de privilégier le repérage et la prévention des fausses manipulation. L’auteur précise enfin qu’au-delà d’une certaine taille, un champ ou un bouton ne sont plus interprétés en tant que tels par les utilisateurs qui les confondent avec des bannières.

Au final, l’article se termine par des recommandations précises sur le formatage des éléments d’interface :

• hauteur minimum des textes et icônes respectivement de 1,4 et 2,1 mm pour un feature phone ; 2,1 et 2,8 mm pour un smartphone ; 2,8 et 3,5 pour une tablette ;
• hauteur recommandée de 8 mm pour une zone d’interaction sur un bouton (minimum 6 mm et maximum 15 mm) ;
• espacement recommandé de 10 mm entre deux éléments (minimum 8 mm).

Il ne vous reste plus qu’à sortir votre règle pour vérifier si vous respectez ces recommandations !