Applications et sites webs pour smartphones : pourquoi il faut faire plus simple que simple

Résumé : Cet article vous présente une réflexion et des pistes d’optimisation pour les applications et les sites webs sur smartphone.

fractales

Pourquoi il faut simplifier les interfaces de smartphone

Je me tue à le dire et le redire : en design d’interface pour smartphone, faites simple !

Ce n’est pas nouveau, mais un post de blog du Norman Nielsen Group vient encore de le rappeler : l’abondance d’informations tuera vos applications. Trop de choix tue le choix. Trop de possibilités nuisent à la possibilité. Trop d’options, c’est pas bon !

Ce postulat est d’autant plus vrai quand il s’agit de mobilité et d’applications pour smartphone où la surface des écrans ne permet pas, par manque d’espace, de reproduire ce que l’on trouve sur desktop. Les designers d’interface l’oublient trop souvent. Ou bien, ce sont plutôt leurs commanditaires qui l’oublient. En tout cas, il y a forcément des gens qui se trompent. Il suffit pour s’en convaincre d’aller regarder quelques sites webs pour smartphone ou quelques applications, qui sont souvent le reflet d’une volonté de recaser à tout prix ce que l’on a sur desktop.

Exemple de descriptif produit inexploitable sur smartphone
Simplifiez vos descriptifs ! Pensez-vous vraiment que les gens vont lire ça ? En tout cas, pas plus d’une fois, et sans doute en ayant loupé la moitié de l’information.

Offrir sur smartphone les mêmes fonctionnalités et contenus que sur le desktop est une erreur

Or, c’est une erreur de penser qu’en offrant le même nombre de fonctionnalités, le même nombre d’informations sur une interface pour smartphone que pour desktop satisfera les utilisateurs. C’est simplement trop. Plus vous fournirez d’informations sur une surface réduite, plus vous rendrez son usage complexe :

  • Pour gagner de la place, les liens, les signes, les images sont réduites, rendant la lisibilité moins bonne et demandant plus d’efforts à l’utilisateur pour les distinguer et les comprendre

    Page produit sur le site mobile d'ETAM
    Page produit sur le site mobile d’ETAM. A quoi servent tous ces textes : réf ? nom du produit ? résultats ? Conseils ? Et le cross-sellling, vous l’aviez-vu, vous l’aviez-lu ? Pensez-vous que « voir la sélection » soit lisible ?

  • Mettre autant d’infos sur smartphone que sur desktop oblige l’utilisateur à plus d’interactions pour voir la même quantité d’informations

    Cross selling sur une fiche produit d'ETAM
    Vous allez dire que je suis méchant avec ETAM, mais que pensez-vous de ces boutons ? Trouvez-vous cela attractif ? Simple ? Facile à utiliser ?

  • Exemple typique du e-commerce : les menus de navigation déjà surchargés sur desktop, lorsque l’assortiment est important, deviennent insupportablement longs sur smartphone. Je vous invite à regarder pour cela ce que devient la navigation sur un Decathlon ou un Leroy Merlin (c’est vrai pour tout les sites possédant des profondeurs d’offres très grandes). La recherche de produit devient rapidement fastidieuse et, surtout, comme le suggère le Norman Nielsen Group, « laisse sur leur faim » les utilisateurs qui effectuent toujours un choix en ayant la sensation d’avoir manqué quelque chose, raté une offre ou un produit

    Navigation site mobile Décathlon
    Très bien fait par ailleurs, le site decathlon.fr ne peut pas ne pas tomber dans l’écueil d’avoir trop de niveaux de profondeurs dans son arborescence. Ainsi, il faut descendre jusque 4 « étages » pour arriver parfois à la gamme de produits désirés. Ce qui est beaucoup trop pour le pauvre cerveau humain qui risque d’avoir du mal à s’y retrouver.

Je rêve d’une application mobile qui ne me donne pas envie de tout casser au bout de 2 minutes

Gad Elmaleh giflé par BatmanTout comme Gad Elmaleh qui rêvait d’une banque qui ne prenait pas ses clients pour des pigeons (mais comme c’était un rêve, ça n’existait pas, bien sûr), je rêve pour ma part d’une application ou d’un site mobile qui ne me donne pas envie de tout casser au bout de 2mn. Avec laquelle je pourrai me concentrer sur la seule chose qui m’intéresse : le plaisir de la découverte, tout simplement, sans avoir à interagir en permanence avec l’interface pour filtrer, trier, attendre que les pages se chargent, ou essayer de trouver un produit enfoncé profondément dans les abysses de l’arborescence.

Est-ce que cela est possible ?

Quelques pistes d’idées pour simplifier vos interfaces

Pour concevoir une bonne application ecommerce sur smartphone où le problème de l’espace est critique et pour lesquels l’engagement utilisateur est beaucoup plus faible que celui sur desktop, il me semble que la réflexion doit s’orienter vers de nouveaux axes.

Privilégier l’image par dessus tout. Sur les sites mobiles, il y a souvent trop de textes, trop d’informations annexes, trop de petites choses qui viennent polluer la navigation et qui ne sont pas utiles au premier abord. Les utilisateurs avant de regarder un prix regardent d’abord le produit (tout comme en magasin, en fait). Pourquoi les embêter, par exemple, avec le nom du produit ? Qu’est-ce que cela apporte réellement ?

Page produits de Wanelo
Page produits de Wanelo : même si les vignettes sont petites, leur accumulation et leur présentation sans texte permettent au regard de circuler rapidement sur chaque photo avec gourmandise sans être freiné par de l’information inutile

Utiliser les mécanismes de navigation des applications de gestion d’images (je pense au logiciel de gestion de ses photos sur iPhone). Leurs interactions sont simples, « instinctives », bien connues des internautes et permettent de naviguer rapidement au sein de milliers d’images sans trop de peine.

Doigts pinçant une image sur un écran de smartphone
Je rêve de pouvoir zoomer simplement sur un produit, comme dans mon application photo de smartphone. Mais très peu de sites permettent cette interaction.

– N’afficher les informations secondaires qu’à la demande : les descriptifs, les prix, les avis clients, les boutons de choix et d’achat uniquement à la demande de l’utilisateur. Pour cela, la mesure de la pression du doigt sur iPhone peut-être très utile, mais une simple pression continue sur la photo peut également être une bonne solution pour faire apparaitre ces informations supplémentaires

Page produit sur Promod
Page produit sur Promod : les informations secondaires sont affichées dans un menu à tiroir fermé au chargement de la page. C’est une bonne manière de masquer l’information secondaire pour laisser la place à l’exploration et la découverte du produit sans surcharger la page.

– Favoriser un moteur de recherche interne puissant, intelligent et rapide. Même si je n’imagine pas qu’on puisse se débarrasser du jour au lendemain de l’affichage d’arborescence sur smartphone, un bon moteur de recherche, suggérant en temps réel des termes de recherche est mille fois plus efficace et ne laissera pas l’internaute sur sa faim s’il est capable à chaque requête de renvoyer un nombre de résultats ni trop faible, ni trop important.

Moteur de suggestions sur l'application Amazon
Contrairement à beaucoup d’autres applications qui « cachent » leur moteur de recherche sous une icône, celui d’Amazon est directement visible et affiche en temps réel, sans délai, les suggestions rattachées à la frappe clavier en cours.

– Faire du cross-selling et de la suggestion de produits plutôt au moment de la commande ou après avoir ajouté un produit au panier et dans un simple écran interstitiel, plutôt qu’en casant ce genre de mécanisme en bas de page ou dans des blocs si petits qu’ils en deviennent illisibles

– Demander de se connecter immédiatement (ou de le faire rapidement) pour pouvoir proposer des choix personnalisés à l’internaute, mais aussi faciliter certaines actions importantes comme la mémorisation du panier (pour passer commande sur desktop) ou bien le paiement en 1 clic (avec l’enregistrement du moyen de paiement)

– Pour toute création de compte, ne demander que le nom et l’adresse email (et utiliser les réseaux sociaux). Les formulaires sur mobiles sont le pire ennemi de la transformation. Autant diminuer le plus possible cette étape. Et si la personne souhaite vraiment commander sur le site, tenter de récupérer son adresse sans avoir à la lui faire saisir (par géolocalisation, par exemple) ou alors carrément tenter d’éviter cette saisie en lui proposant un point de livraison soit proche de chez lui, soit carrément en magasin chez vous.

Conclusion

L’usage du mobile allant croissant, il n’est pas de doute que les marchands doivent adapter leur supports digitaux aux habitudes des consommateurs. Mais, pour que cela fonctionne et que l’expérience de navigation soit optimum, il faut qu’ils arrivent à se débarrasser de leurs habitudes sur desktop et pensent autrement l’expérience mobile.  Mieux vaut être simple et sacrifier un peu de cross-selling, de bannière publicitaire, de carrousel et autres informations non pertinentes dans un premier temps, et convertir plus, que l’inverse.

Et toi, Ô gentil lecteur persévérant de ce blog, que penses-tu de devoir simplifier à l’extrême les interfaces mobiles ?

Articles complémentaires :

5 commentaires

  1. Je partage votre synthèse. Sur votre blog par exemple, faudrait commencer par augmenter la taille de la police, pas adapté au mobile 😉

    1. Arf ! Oui. Je te dévoile un scoop : la refonte du blog est en cours et sa mise en ligne est prévue pour janvier. Evidemment, il sera entièrement responsive et adapté à la lecture sur smartphone. Mais sinon, merci pour la vanne. Je l’ai bien reçue 😉

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Merci de taper les caractères de l'image Captcha dans le champ

Merci de saisir ces caractères dans le champ
ci-dessous afin de valider votre commentaire.

Capitaine

Article de : Capitaine

Olivier Sauvage est le fondateur de Capitaine-commerce.com et de Wexperience, agence spécialisée en expérience utilisateur digitale.