Introduction▲
L'ergonomie sur les tablettes est en constante évolution. Les nouveaux usages d'aujourd'hui définissent les standards de demain.
Dans ces conditions, comment faire une application ou un site mobile qui marche ?
Miratech a déjà mené plus de 400 tests utilisateurs sur des interfaces mobiles (applications ou sites mobiles, sur tablettes ou sur smartphones). À travers quelques extraits, nous verrons qu'il suffit pour l'instant de respecter deux règles importantes :
- règle n° 1 : soignez l'intuitivité ;
- règle n° 2 : les règles du Web s'appliquent encore (presque) toutes au mobile.
Règle n° 1 : soignez l'intuitivité▲
Faire comprendre de façon intuitive comment fonctionne le site ou l'application▲
Les interfaces mobiles sont pour la plupart tactiles. Pour les utiliser, nous ne pouvons plus nous fier aux conventions de navigation des ordinateurs :
- si un élément est cliquable, le curseur de la souris se transforme en main ;
- si une page est longue, un ascenseur apparaît ;
- si une action prend du temps, un sablier s'affiche…
Nous avions d'ailleurs mesuré que l'utilisation d'un iPad génère quatre fois plus d'erreurs que l'utilisation d'un ordinateur. Il faut donc que les éléments des applications ou des sites mobiles soient encore plus intuitifs pour ne pas perdre les utilisateurs.
L'image ci-dessous est tirée de Jobintree, une application de recherche d'emploi. La page est très peu intuitive. Il est difficile de deviner où cliquer pour accéder aux offres d'emplois.
Cliquez pour lire la vidéo
Seulement 12 % des utilisateurs cliquent spontanément au bon endroit
Intuitivité des icônes▲
Le manque d'intuitivité se retrouve beaucoup dans les icônes. Pour gagner de la place sur des interfaces mobiles plus petites, les concepteurs ont tendance à inventer des icônes incongrues.
Par exemple, qui saurait dire à quoi mènent les deux boutons entourés en rouge de l'application iPad des Pages Jaunes ci-dessous ?
Il existe de nombreuses règles pour la création d'icônes. Le plus simple est de s'en tenir aux quelques icônes que connaissent déjà les utilisateurs. Par exemple une icône "maison" pour revenir à l'accueil, une flèche vers la gauche pour signifier "retour", ou une "roue d'engrenage" pour la gestion des paramètres. L'icône peut être accompagnée de texte, comme dans l'exemple ci-dessous.
Intuitivité des nouvelles interactions▲
Les outils mobiles permettent une multitude d'interactions nouvelles. Voici les plus courantes :
- le tap ;
- le press (ou tap long) ;
- le pinch et le spread (zoom et dézoom) ;
- le swipe horizontal ou vertical (équivalent du scroll sur les ordinateurs) ;
- la rotation tactile ;
- la rotation de l'appareil.
L'utilisateur ne peut pas toujours deviner quelles interactions sont possibles avec une application, à moins de caresser et retourner son téléphone dans tous les sens. Il faut donc le lui faire comprendre.
Par exemple, on peut laisser un bout de texte ou d'image tronqué en bas de l'écran pour montrer qu'il est possible de swiper vers le haut.
Règle n° 2 : les règles du Web s'appliquent encore (presque) toutes au mobile▲
Malgré toutes les nouvelles interactions possibles, les usages et conventions du Web s'appliquent encore pour la plupart aux interfaces mobiles. Plus généralement, les grandes règles des interfaces homme-machine (IHM) ne changent pas beaucoup.
Construisez donc votre interface mobile avec le même bon sens qu'une interface Web. Vous serez certain de ne pas perdre vos utilisateurs.
On voit ci-dessous des exemples d'applications dont les fonctionnalités ou le design ne seraient pas envisageables sur un site Internet.
Cliquez pour lire la vidéo
L'application de CDiscount ne contient ni filtre ni tri. Il est impossible de trouver un produit. C'est dommage car l'application est bien faite par ailleurs.
Cliquez pour lire la vidéo
L'application d'Expedia affiche un temps de chargement très long qui irrite les utilisateurs. Cerise sur le gâteau, l'application plante souvent.
Cliquez pour lire la vidéo
L'application de Teleloisirs ne permet pas de consulter le programme télé du lendemain. Si vous trouvez la solution, écrivez-nous !
Conclusion et remerciements▲
Avez-vous déjà désinstallé une application mobile parce qu'elle était difficile à utiliser ? Nous aussi.
Pour faire une application ou un site mobile qui marche, il suffit pourtant de suivre deux règles basiques :
- règle n° 1 : soignez l'intuitivité ;
- règle n° 2 : les règles du Web s'appliquent encore (presque) toutes au mobile.
Si vous introduisez une nouvelle ergonomie ou de nouveaux services, pensez surtout à vos utilisateurs. Recueillez leur opinion et observez leur comportement.
Pour en savoir plus, Miratech prépare un livre qui présentera de façon beaucoup plus exhaustive comment construire une application iPad. Il sera illustré de nombreux exemples utilisateurs avec eye tracking.
Enfin vous trouverez des exemples supplémentaires sur la chaîne YouTube de Miratech (RATP, Téléloisirs, vidéos eye tracking…)
Cet article est diffusé avec l'aimable autorisation de Miratech.
L'article original peut être consulté sur le blog de Miratech : Interfaces mobiles : nouveaux usages, nouvelles ergonomies.
Nous tenons aussi à remercier ClaudeLELOUP pour sa relecture attentive et efficace.
Toutes les études de Miratech sur developpez.com.