Interfaces mobiles : nouveaux usages, nouvelles ergonomies

| Miratech | Bovino |

Les nouvelles tendances d'ergonomie et de design commencent à émerger sur les interfaces mobiles. Miratech constate quotidiennement les changements à travers les tests utilisateurs sur smartphones et sur tablettes.

Miratech donne ici les deux premières règles à suivre pour faire une interface mobile qui marche.

L'article original peut être lu sur le blog de Miratech : Interfaces mobiles : nouveaux usages, nouvelles ergonomies.

Commentez

- Titre : Interfaces mobiles : nouveaux usages, nouvelles ergonomies

- Auteurs : Miratech, Bovino

- Parution : 8 mars 2012

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2012 Miratech. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Introduction

- Règle n° 1 : soignez l'intuitivité

- Faire comprendre de façon intuitive comment fonctionne le site ou l'application

- Intuitivité des icônes

- Intuitivité des nouvelles interactions

- Règle n° 2 : les règles du Web s'appliquent encore (presque) toutes au mobile

- Conclusion et remerciements

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.

Devinette : où faut-il cliquer pour accéder aux offres d'emploi ?

Animation en format "youtube" non supportée.
Contenu uniquement consultable en ligne à cette adresse :
https://www.youtube.com/v/LnAS_MKl96A?version=3&feature=player_detailpage

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 ?

Que signifient les deux icônes que nous avons entourées en rouge ? Mystère...

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.

Exemple de deux icônes que tout le monde comprend

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.

Le texte coupé en bas de l'écran de l'application de Twitter illustre bien que l'on peut descendre dans la page

L'application de Planet Sushi permet de swiper vers le haut. Mais 0 % des utilisateurs l'ont compris.

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.

Animation en format "youtube" non supportée.
Contenu uniquement consultable en ligne à cette adresse :
https://www.youtube.com/v/ifnbxz-05CE?version=3&feature=player_detailpage

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.

Animation en format "youtube" non supportée.
Contenu uniquement consultable en ligne à cette adresse :
https://www.youtube.com/v/t5XpeacyHEo?version=3&feature=player_detailpage

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.

Les textes de l'application du Monde sont coupés. Par exemple, le dernier article est incompréhensible. Cette mise en page est pourtant impensable sur un site Internet.

Animation en format "youtube" non supportée.
Contenu uniquement consultable en ligne à cette adresse :
https://www.youtube.com/v/-PORBgwZ0AU?version=3&feature=player_detailpage

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.