Expérience utilisateur et design des apps mobiles : comment ne pas se tromper

Les dernières tendances en terme de design mobile sont elles toujours une bonne idée ? Flat Design, swipe, hamburger menu : comment prendre les bonnes décisions dès la phase de conception ?

Publié le 29/09/2014 à 11:17 par - Mis à jour le 14/10/2016 à 16:54

Lors de l’App Strategy Workshop le 25 septembre dernier à Paris, j’ai eu le plaisir d’animer une table ronde sur l’expérience utilisateur des applications mobiles, à laquelle ont participé Vincent Roussilhon de Blablacar, Louis Rouffineau de La Company, Edouard Andrieu du Monde.fr, et Moritz Daan de Soundcloud. Ces spécialistes, en charge du Product Management dans leur entreprise et passionnés d’UX et d’UI ont partagé beaucoup de points de vue intéressants sur les dernières tendances du marché en terme d’expérience utilisateur et de design.

Flat Design : Est-ce toujours une bonne idée ?

C’est LA tendance actuelle en terme de design, particulièrement sur mobile, popularisée par Apple, puis par Google et par Microsoft, dans des versions aux esprits à la fois proches et éloignés. Un principe est cependant commun : en finir avec le SKUmorfism, singeant les objets de la vie réèlle et dont les deux exemples les plus emblématiques sont selon moi iBooks et Notes sur iOS.

skeuomorphism-iBooks-iOS

A gauche, l’effet « carnet à spirales » de l’appli Notes sur iOS. A droite, l’effet rayonnage de bibliothèque pour l’appli iBooks, également sur iOS.

Place au minimalisme et aux aplats de couleur, aux interfaces « clean » et élégantes. Mais gare au risque de passer à l’excès inverse, un design tellement clean qu’il devient absent et conduit l’internaute à ne plus savoir comment utiliser l’interface. iOS7 a clairement dépassé cette mince frontière. Je vous suggère la lecture du TumblR UX critique qui décortique tous les aspects problématiques du flat design sur iOS7.

flat-design-examples

Ma première question au panel d’experts a donc été de savoir si le Flat Design leur posait des problèmes d’usabilité. Pour Edouard Andrieu, en charge du mobile au Monde, le Flat Design a en fait été un véritable « mieux » pour l’expérience utilisateur et il n’a noté aucune problématique particulière sur ce sujet.
Même retour d’expérience de Moritz Daan de Soundcloud qui a insisté sur le minimalisme : clarifier l’interface rend l’expérience plus agréable pour l’utilisateur, qui est perdu si on lui propose trop d’informations ou de fonctionnalités au même moment. Il semble donc que depuis les debuts du « flat », une vraie appropriation ait eu lieu qui a permis au meilleur des deux mondes d’émerger : lisibilité et facilité d’utilisation.

Vincent Roussilhon de Blablacar alerte tout de même sur les risques d’impact négatif sur la conversion globale et recommande de travailler fortement la signalétique, les formulaires et les boutons. Quelques effets d’ombre peuvent également, à certains moments, rester utiles selon lui.

Swipe, scroll, hamburger menu : bonne pratique ou catastrophe ergonomique ?

Une autre grande problématique lorsque l’on designe une appli, ce sont les gestes propres au tactile, comme le slide vertical pour rafraichir ou le swipe (ou glissement horizontal) pour afficher des fonctions masquées. Faut-il les utiliser (c’est tendance et on tire ainsi pleinement parti des possibilités offertes par le tactile) ou les éviter ? La représentation du menu sous forme de 3 traits empilés, comme un burger (le carré rouge en haut à droite de l’image un peu plus bas) pose aussi par mal de questions, car quelle autre solution pour afficher un menu dans un espace aussi petit ?

Swipe, slide, Tap & Hold

slide-down-refresh

Le scroll vertical (ou sliding) du haut vers le bas pour rafraichir une liste : l’exemple de la timeline de l’appli Twitter

Pour Louis Rouffineau, fondateur de l’agence LaCompany et qui développe des applis depuis plusieurs années pour des clients variés, si le swipe marche pour les listes car cela reste intuitif, le risque que l’internaute active ces fonctionnalités par erreur reste fort dans à peu près tous les cas. Il recommande plutôt l’utilisation du « Tap & Hold » (un appui prolongé du doigt avant déplacement horizontal ou vertical) mais précise qu’il vaut mieux, dans tous les cas, doubler le swipe d’un second accès plus « évident » via texte ou icône.

Vincent Roussilhon de Blablacar enfonce le clou en déconseillant fortement l’usage de ces gestuelles si l’on veut que l’appli puisse être facilement utilisable par « Madame Michu ». Edouard Andrieu du Monde est un peu plus nuancé, il précise que ces gestuelles ne sont pas forcément problématiques si l’on a bien travaillé les explications au moment de « l’On Boarding » (les écrans de tutoriel à la première ouverture) et des info bulles explicatives dans les premiers jours de l’utilisation, en contexte. Pour autant, sur l’appli du Monde aussi, les actions de swipe sont doublées d’un autre accès par un système de « cartes » afin de s’assurer que tous arrivent à naviguer correctement.

Chez Soundcloud, c’est le même principe, Moritz Daan nous précise que les actions de swipe sont doublées par un autre moyen de navigation.

swipe-hamburger-menu

A gauche, l’écran de fermeture d’iOS7 : il faut glisser vers la droite pour éteindre. A droite, un menu de navigation masqué derrière un « hamburger menu ».

Le Hamburger menu

Tous les membres du panel étaient d’accord pour dire que, si ce n’était pas la solution idéale, ils n’avaient encore pas trouvé d’alternative valable au hamburger.

Pour Louis Rouffineau, c’est plutôt un bon début mais sûrement pas une bonne fin : on y met en général tout ce que l’on n’a pas su placer ailleurs ou qui ne méritait pas d’être montré directement sur l’écran principal. Dans certains cas, il vaut mieux tout simplement ne pas mettre de hamburger du tout et tout afficher directement. C’est le cas par exemple d’une application que La Company a réalisée pour l’hôtel Ritz. Lorsque c’est servitiel, a fortiori dans l’univers du luxe, on ne peut pas courir le risque que le client n’arrive pas à utiliser une fonction. On affiche donc tout directement.

Chez Blablacar, on n’a mis de hamburger menu que sur l’appli Android, et on est convaincu que cela ne peut pas être le seul moyen de navigation.

Au Monde, la question du menu a crée un assez gros mouvement de protestation des internautes sur les stores lors du lancement de la nouvelle version de l’appli. En juin dernier. Les critiques se sont cristallisées autour de la disparition du menu. Ce qui est intéressant, c’est que Le Monde avait effectué un test utilisateur en amont, n’ayant pas révélé une quelconque gène des internautes et également une étude analytics montrant un très faible usage du menu. Le supprimer semblait donc plutôt une décision rationnelle et peu risquée.

Mais voilà, la présence du menu peut être un véritable élément de réassurance, un point d’ancrage. Peu utilisé certes, mais indispensable pour autant. Edouard Andrieu a également précisé que lorsque l’on a un très grand nombre d’utilisateurs, on ne peut pas avoir en test un panel à 100% exhaustif, représentant tous les usages minoritaires et qu’un très petit nombre de mécontents peuvent faire de gros dégâts en terme de notations sur les stores. Pendant l’été, Le Monde a remis en place le hamburger menu, et les notes sont remontées (La version actuelle dispose effectivement d’une note de 4 étoiles).

Chez Soundcloud, pas de Hamburger, mais plutôt une navigation au clic avec ou sans bouton d’action (le « hide » en bas à droite de la capture ci-dessous permet de masquer le player plein écran et de revenir à la home). Une attention toute particulière a été portée sur le player qui est la fonctionnalité la plus importante de l’appli. Le choix a été fait de masquer certaines fonctions afin de mettre en exergue le plus important, l’expérience, et le son.

Un tap pour faire "Play", un tap pour fair "Pause". Le bouton pause a disparu, mais le bouton Play lui reste visible. Le sharing est masqué derrière un bouton "More".

Un tap pour « Play », un tap « Pause ». Le bouton pause a disparu, mais le bouton Play lui reste visible. Le sharing est masqué derrière un bouton « More ».

La suite du compte rendu de cette conférence dans ce second article, ou l’on évoqueles 3 autres sujets brûlants pour les concepteurs d’applis :

– A/B Testing : quoi et comment tester ?
– Rétention : notifications et social sharing, comment ne pas aller trop loin ?
– Temps d’attente : comment le gérer au mieux ?

Lire l’article : Ergonomie et conversion sur mobile : les bonnes pratiques

N’hésitez pas à enrichir ce post par vos retours d’expérience en utilisant les commentaires.

Partagez sur les réseaux

 

0 Commentaire (s)