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).

Utilisation du pouce pour manipuler l'interface d'un smartphone
Utilisation du pouce pour manipuler l’interface d’un smartphone

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

Position de consultation d'un smartphone ou d'une tablette
Position de consultation d’un smartphone ou d’une tablette

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.

Illustration des zones de recouvrement
Illustration des zones de recouvrement

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) :

Zoom contextuel dans Crome sur Android
Zoom contextuel dans Chrome sur Android

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 !

3 commentaires sur “Recommandations de taille pour les éléments d’interfaces mobiles

  1. Article très intéressant, merci Frédéric

    Je le place en complément d’un billet que j’avais moi même posté au début du mois concernant un récapitulatif des interfaces iOS que l’on rencontrait désormais chez Apple.

    C’est un peu la pagaille avec tous ces modèles et avoir les spécifications de tous ces appareils est vraiment nécessaire au quotidien.

    Je te laisse découvrir mon billet par ici http://bit.ly/YThYRG

    A bientôt

  2. Article très intéressant.
    Avez-vous pu tester les nouveautés d’ iOS 7, censées permettre de mieux gérer les interfaces mobiles, comme Managed Open In par exemple ?
    Certaines de ces nouveautés sont décrites ici, http://www.interfaces-mobiles.com/ios-7-a-ameliore-la-gestion-des-interfaces-mobiles/
    Pensez-vous qu’elles puissent avoir un impact intéressant pour les entreprises ayant recours au BYOD ?
    Merci de votre réponse

Laisser un commentaire