Auteur/autrice : guillaume

Pour introduire cet article, parlons un peu de hiérarchie et plus particulièrement de hiérarchie de l’information !

On a tous déjà rencontré sur certains sites, une navigation avec un nombre incalculable de catégories et de sous-catégories… Et pour faire tenir toutes ces catégories dans un espace horizontal limité qu’est le menu de navigation, les polices utilisées sont très petites, les éléments sont rapprochés les uns des autres, et les étiquettes créées sont raccourcies.

A l’inverse, lorsque nous limitons un vaste espace d’informations à un petit nombre de catégories, les utilisateurs se retrouvent face à des catégories d’articles trop génériques, ce qui les empêche de trouver ce dont ils ont besoin. 

Mais avez-vous pensez à la navigation verticale ? Eh oui, avec cette navigation à gauche, votre site peut accueillir autant de catégorie que possible !

Les avantages de la navigation verticale

De nombreux bénéfices de cette navigation proviennent de sa capacité à contenir beaucoup de catégories !

• Des catégories spécifiques augmentent la trouvabilité et diminuent le coût d’interaction

L’usage de la navigation verticale supprime les contraintes du design visuel, qui limite le nombre de catégories. Cela permet à vos équipes d’élaborer une architecture de l’information qui comble naturellement l’espace, et qui présente des catégories spécifiques et fortes de sens pour les utilisateurs, afin que ceux-ci n’aient pas à rechercher ailleurs.

• La navigation verticale offre de la place !

La navigation verticale est un excellent choix pour les sites dont la navigation est susceptible de s’étendre et se ramifier, et dont les offres ou le contenu évoluent continuellement. L’ajout de catégories à la navigation verticale ne requiert pas d’important processus de refonte de la navigation. La seule décision majeure concerne l’emplacement des nouvelles catégories dans la structure déjà existante.

• La navigation verticale permet un balayage visuel plus optimal

Selon des études sur l’eye-tracking, nous savons que l’attention des utilisateurs se porte sur la gauche de l’écran : ils regardent la moitié gauche de l’écran dans 80% des cas. L’espace latéral gauche a de la valeur, et y placer votre navigation rendra très probable le fait que vos utilisateurs le remarquent et le balayent du regard !

De plus, des recherches en psycholinguistique ont démontré que la recherche visuelle dans une liste est plus efficace si la liste est verticale plutôt qu’horizontale. Les utilisateurs sont plus aptes à trouver un élément qui les intéresse seulement en quelques coups d’œil, simplement parce que davantage d’information peut être extraite en un seul coup d’œil. Il faut garder à l’esprit que l’œil est capable de percevoir une information qui se situe non seulement au centre du champ visuel, mais aussi celle qui se trouve autour. Par conséquent, même quand on lit de façon attentive chaque mot d’une phrase, nous n’avons besoin de n’en fixer que quelques-uns.  L’oeil humain est bien fait n’est-ce pas !

Ah oui ! Gardez aussi en tête cette idée fausse très répandue qui veut que les conceptions de navigation horizontale prennent en charge le fameux modèle de lecture du F-pattern ! Ce modèle fonctionne uniquement pour les textes non structurés. Il ne s’applique donc pas à la navigation qui, elle, est structurée ! 

• Les utilisateurs connaissent bien la navigation verticale

Si la navigation verticale est moins courante, elle est cependant rencontrée sur de nombreuses applications de bureau. Alors, s’il s’agit de la navigation la moins utilisée, les utilisateurs en sont tout de même familiers dans la mesure où certains l’utilisateurs au quotidien, comme notamment avec les applications d’e-mail ou de discussion telles que Gmail, Hotmail ou encore Slack, Teams 😉

• La navigation verticale s’adapte naturellement au mobile

Adapter une barre de menu horizontale en version mobile nécessite quelques ajustements, comme la transformation en une navigation verticale, souvent représentée par un menu hamburger. En revanche, l’utilisation d’une navigation verticale à la fois pour le bureau et le mobile permet à vos équipes d’appliquer les mêmes choix  de conception visuelle avec une adaptation relativement minime. Les bordures, les caractères, les espacements, l’ordre des catégories, peuvent être partagés entre les différents appareils ! 

Ceci étant dit, il ne faut pas cacher votre navigation de bureau sous un menu vertical (menu hamburger) pour autant ! Priorité à la navigation visible 😉 Si certains sites web mobile sont contraints de cacher la plupart ou la totalité de la navigation sous un menu hamburger en raison d’un espace limité, l’utilisation d’une navigation visible présente un avantage incontournable : celui de la découverte ! Lorsque la navigation est cachée, les utilisateurs oublient tout simplement de la vérifier.

La navigation verticale et les espaces

Le principal inconvénient de la navigation verticale est qu’elle prend plus de place que la navigation horizontale et, par conséquent, il y a moins d’espace disponible sur la page pour le contenu. La navigation verticale donne généralement lieu à des pages présentant un rapport contenu/ éléments de design (en anglais content-to-chrome ratio) inférieur à celui de la navigation horizontale. 

Pour les fenêtres de petite taille (comme les tablettes), ce compromis peut être difficile à mettre en place. Si vous travaillez avec un design réactif, vous devrez décider quelle est la meilleure interface de navigation et à quelle taille d’affichage une navigation verticale vous permettra d’obtenir un bon rapport contenu/ éléments de design.

Un menu vertical très long peut comporter certains éléments en dessous de la ligne de flottaison. Nous savons, grâce à de nombreuses recherches, que les utilisateurs accordent plus d’attention aux informations situées au-dessus de cette ligne de flottaison qu’à celles situées en-dessous. Ils peuvent même ne pas faire défiler la page si ce qu’ils voient au-dessus de cette ligne suffit pour répondre à leur objectif. 

Nos conseils pour la navigation verticale

• Placez la navigation verticale à gauche et utilisez un design perceptible

Comme indiqué précédemment, l’attention visuelle se porte sur le côté gauche de l’écran. Eh oui, le côté droit de l’écran n’est pas trop apprécié. Les utilisateurs évitent de regarder la colonne droite de la page parce que bien souvent cette dernière contient de la publicité ! La navigation sur le côté droit a donc moins de chances d’être remarquée. En fait, c’est simple, il faut veiller à ce que la navigation soit visuellement marquante ! Des couleurs de texte ou d’arrière-plan, ou encore des bordures différentes peuvent la faire ressortir du reste de la page 😉

• Ne dupliquez pas la navigation à l’horizontal

Une tendance récente et étrange consiste à utiliser deux interfaces utilisateur redondantes pour la navigation globale : une barre de menu horizontale et un menu hamburger,  avec exactement les mêmes catégories ! Et qu’on se le dise, cette duplication est inutile, et peut prêter à confusion !

• Ne cachez pas la navigation derrière des icônes

Puisque la navigation verticale occupe plus d’espace que la navigation horizontale, les concepteurs tentent souvent de minimiser la surface correspondante. Cet objectif est compréhensible, mais certains moyens pour y parvenir apportent plus de confusion qu’autre chose. Une tendance émergente consiste à utiliser des icônes au lieu de libellés pour les catégories. Et si les étiquettes textuelles sont disponibles pour chaque élément de navigation, l’utilisateur ne peut les voir qu’en cliquant ou survolant l’icône. Pas malin cette technique ! 

Depuis bien longtemps, nous recommandons d’ajouter des étiquettes aux icônes. Pourquoi ? Tout simplement parce que le texte enlève toute ambiguïté ! Et pourtant nous voyons encore des sites qui supposent que leurs utilisateurs vont comprendre instantanément leurs icônes associées aux différentes catégories de navigation. Si l’on cache les étiquettes de navigation, les utilisateurs seront plus susceptibles d’ignorer tout simplement la navigation (comme c’est souvent le cas avec un menu hamburger). Et ce type d’affichage demande un effort supplémentaire à l’utilisateur : celui de décoder la signification de l’icône mais aussi celle de cliquer et/ou de survoler l’icône pour accéder au libellé.

La stratégie consistant à réduire la navigation à une série d’icône peut être une bonne chose pour les applications utilisées quotidiennement, car l’utilisateur par habitude n’aura pas de mal à reconnaître la signification des icônes. Toutefois, sur un site web qui n’est utilisé qu’occasionnellement par un utilisateur, abandonnez cette stratégie !

• Pour les longs menus, placez les éléments les moins importants en bas

En raison des problèmes d’utilisabilité causés par la ligne de flottaison, un menu vertical très long risque d’avoir des éléments non visibles à l’écran si l’utilisateur ne fait pas défiler la page. Malheureusement, comme les utilisateurs ont des écrans de tailles différentes, vous ne pouvez pas savoir où la ligne de flottaison atterrit touche votre menu de navigation. L’idée est donc de hiérarchiser les éléments de manière à ce que les éléments les moins importants figurent en dessous de la ligne de flottaison.

Pour que la navigation verticale reste utile, ne la cachez pas sous un menu hamburger, utilisez des libellés alignés à gauche, et évaluez si ses avantages justifient l’espace pris sur la zone de contenu 😉

Via : Left-Side Vertical Navigation on Desktop: Scalable, Responsive, and Easy to Scan

On dit d’un header ou d’un entête (en français) qu’il est sticky lorsque celui-ci est toujours visible à l’écran. Il peut être très utile pour l’utilisateur seulement s’il ne gêne pas la lecture de l’écran, s’il est bien contrasté, un minimum animé, et s’il répond aux besoins de l’utilisateur ! 😉

L’entête “sticky” est un moyen très utilisé afin de garder l’entête d’un site ou d’une application affiché à l’écran alors que l’utilisateur fait défiler la page vers le bas. Vous connaissez aussi très certainement les entêtes partiellement sticky, c’est-à-dire les entêtes qui disparaissent et qui réapparaissent en haut de la page dès que l’utilisateur fait défiler la page vers le haut. 

Lorsqu’ils sont conçus de façon adéquate, les headers sticky permettent aux utilisateurs d’accéder rapidement à la navigation et à ses paramètres, ainsi qu’à l’onglet de recherche, sans avoir à remonter tout en haut de la page. En plus de cela, ils augmentent la visibilité des éléments de l’entête et donc la probabilité que les utilisateurs cliquent dessus 😉

En revanche, lorsqu’ils sont mal conçus, les headers sticky sont agaçants, perturbants et masquent le contenu de la page affichée. Quel dommage, n’est-ce pas !

Et comme vous vous en doutez, nous n’allons pas manquer de vous souffler nos bons conseils ! Voici alors 5 façons qui feront de vos headers une aide et non un obstacle à la navigation de vos utilisateurs.

N°1 : Maximiser le ratio header/navigateur en le réduisant autant que possible 

De façon inhérente, les headers prennent sur l’écran de la place qui aurait pu être occupée par du contenu, il est donc important que vous occupiez l’espace de façon réfléchie. Et vous vous en doutez, sur mobile, ce facteur est encore plus important, étant donné la taille de l’écran ! 

Vous vous devez donc d’assurer que le ratio header/navigateur soit optimal, de manière à ce que votre header occupe le plus petit espace possible tout en garantissant la lisibilité du texte ainsi que la place suffisante pour cliquer sur tel ou tel élément. 

Sur les écrans tactiles, assurez-vous que toutes les touches occupent une surface d’au moins 1 cm² et que tout texte soit d’une hauteur de 5 à 6 millimètres (cela peut être un peu plus ou un peu moins, en fonction de la typographie adoptée) .

Sur desktop, la taille de l’écran est beaucoup plus importante, alors attention… Il n’est pas recommandé de se perdre en pixels inutiles ! Veillez juste à la qualité et la lisibilité de votre logo, qui est un élément très important.  

N°2 : Ne pas oublier l’importance du contraste avec le contenu

Afin de choisir un fond approprié pour votre header, voyez s’il y a une différence visuelle suffisante entre le ce dernier et le contenu de votre page. Puisque l’en-tête apparaît tout en haut de votre site, il est important qu’il y ait assez de contraste avec le fond pour qu’il soit visible, lisible et bien différencié du reste de la page. Et n’oublions pas les sous-menus ou onglets déroulants qui doivent aussi être clairement distingués du fond. Bah oui, si Michel ouvre un onglet de fond jaune sur une page de fond jaune, il n’y verra pas grand-chose… 

Par conséquent, le header doit être d’une couleur opaque, différent du reste de la page. Même si les headers translucides ont pour intention de faire apparaître davantage de contenu, ils ont l’effet inverse, c’est-à-dire de rendre le contenu à moitié visible et donc difficilement lisible, ce qui peut agacer certains utilisateurs 😉

N°3 : Ne pas abuser des animations !

Les animations peuvent parfois être gênantes, perturbantes, ou ennuyeuses pour les utilisateurs, donc gardez en tête de les utiliser le moins possible pour vos headers ! En général, il est plutôt recommandé de ne pas les employer du tout et de simplement laisser votre header tel quel 😉

Sur le site Shein, le header contient beaucoup trop d’animations avec des promotions qui clignotent en caractère gras et en couleur rouge. De quoi faire mal aux yeux aux utilisateurs !

[youtube width= »70% »]https://www.youtube.com/watch?v=YnXhkI0Nckg[/youtube]

Mais comme on dit, il ne faut jamais dire jamais. Il y a deux cas lors desquels l’emploi de l’animation peut être nécessaire :

• Pour réduire une zone de votre header
• Pour un header partiellement “sticky”, c’est-à-dire pour un header qui disparaît

Et je suis sûr que vous êtes déjà tombé sur un site avec un header laissant place à un large logo, logo qui se réduit à mesure que l’utilisateur fait défiler la page ! Dans ce cas-ci, l’animation se doit d’être rapide et fluide. Le header doit se réduire lorsque la vitesse de défilement est relativement élevée de manière à ce que l’utilisateur ne se rende compte de rien 😉

Les headers « sticky » doivent aussi demeurer à un endroit précis en haut ou sur le côté de la fenêtre du navigateur, plutôt qu’apparaître après un certain délai. C’est ce qu’on appelle le « menu harceleur » !

N°4 : Prêter attention aux headers partiellement « sticky »

On retrouve le plus souvent les headers partiellement sticky sur mobile. Et ce qu’on peut dire, c’est qu’ils permettent d’avoir le beurre et l’argent du beurre : ils sont aisément accessibles depuis n’importe où sur la page, et n’obstruent pas la vue pendant que l’utilisateur lit ou fait défiler la page 😉

Cette technique fonctionne assez bien ! Mais attention, un header partiellement sticky est fondé sur le principe que lorsque l’utilisateur défile sur la page, cela signifie qu’il souhaite accéder au header. Cela sera vrai dans de nombreuses situations, mais dans d’autres non. Eh oui, l’utilisateur pourrait tout simplement désirer relire un paragraphe du site et non cliquer sur le header. Dans ces là, les animations associées aux headers partiellement sticky peuvent être dérangeants pour l’utilisateur. 

[youtube width= »70% »]https://www.youtube.com/watch?v=cVI95qXfD4E[/youtube]

C’est pourquoi de telles animations ne doivent pas obstruer la vue ni apparaître trop tôt ni trop tard. En fait, il faut que l’utilisateur ait la sensation de les faire apparaître manuellement en défilant, alors qu’elles seront en vérité activées par le fait que l’utilisateur fasse défiler un certain nombre de pixels (c’est-à-dire que si l’utilisateur arrête de faire défiler la page, le header continuera de s’animer).

N°5 : Voyez si un header “sticky” est vraiment requis

Un dernier aspect à prendre en compte est de savoir si un header sticky est vraiment requis. Finalement, en employant un header sticky, vous laissez de côté un certain espace d’écran sur chaque page de votre site. Calculez la balance coût-bénéfice en répondant aux questions suivantes :

• Quel type d’éléments votre header va-t-il contenir ? Principalement des outils de navigation ? Un logo ? 
• Ces éléments sont-ils susceptibles d’être requis souvent ou à quelque moment de la session ? 

Par exemple, si votre header contient un bouton de connexion, vos utilisateurs sont-ils susceptibles de se connecter à n’importe quel moment sur votre site ? Si vos catégories principales de navigation sont dans votre header, vos utilisateurs vont-ils passer d’une catégorie à une autre durant une session ou est-il plus probable qu’ils restent dans la même catégorie durant toute la session ? 

Bien sûr, les réponses à ces questions varient en fonction du type de site, ainsi que des tâches et du contenu qui se trouvent dessus 😉

Via : Sticky Headers: 5 Ways to Make Them Better

Nous vivons dans un monde digital guidé par la recherche, ce qui est bien tant que vous connaissez les mots-clés dont vous avez besoin. Mais que se passe-t-il si cela n’est pas le cas ? 

Lorsque les utilisateurs désirent trouver un élément ou une information dont ils ne connaissent pas le nom, ils se trouvent face à un problème, d’où l’intérêt de la sélection de mots-clés !

Lors d’une sélection de mots-clés, un utilisateur mène une recherche préliminaire (habituellement, par le biais d’un moteur de recherche, tel Google) afin de déterminer les mots-clés adéquats à sa recherche d’information.

En fait, il faut voir la sélection de mot-clés comme la recherche avant la recherche : il s’agit d’une ou plusieurs requêtes préliminaires afin d’aider l’utilisateur à formuler au mieux sa requête principale.

La sélection de mot-clés, quand se produit-elle ? Lorsque l’utilisateur…

• sait à quoi un élément ressemble, mais ne connaît pas son nom (exemple : ne pas savoir que des chaussures pour hommes formelles pointues s’appellent des “Richelieu”). 

• a besoin de résoudre un problème, mais ne sait pas quel outil, quelle technique ou quelle institution pourrait lui fournir la solution (exemple : avoir besoin de faire remplacer une pièce de métal autour de l’ouverture d’aération au devant de sa voiture, qu’on appelle la “calandre”) 

• a eu connaissance du nom de l’élément recherché, mais ne s’en souvient pas (exemple : avoir oublié le terme “hangar” et rechercher à la place “entrepôt d’avions”). 

• sait comment désigner un élément ou un mot dans une langue ou un dialecte, mais pas dans une autre (exemple : ne pas savoir que la ciboule se nomme “cébette” dans le Midi de la France). 

Un exemple avec le Duster Cardigan !

Lors d’une étude sur le sujet de la recherche par mots-clés, une participante voulait acheter un type spécifique de long gilet, assez branché à l’époque d’ailleurs !

“L’une des choses les plus compliquées, selon moi, avec les trucs de mode, c’est qu’on est obligé de connaître le nom de quelque chose avant de pouvoir le regarder. On se dit : je veux quelque chose qui ressemble à un cardigan, mais en long. Il faut donc connaître tout le vocabulaire, et il y en a beaucoup.” 

Elle expliquait que, par habitude, elle commençait par rechercher sur Google Shopping afin de se faire une idée basique de ce qu’elle voulait, par exemple en tapant “long cardigan”. Elle faisait alors défiler les images proposées jusqu’à ce qu’elle trouve quelque chose de similaire à ce qu’elle souhaitait, et ensuite regardait comment adéquatement qualifier l’objet considéré. 

Il est important de noter que la participante en question s’avérait être un bibliothécaire, elle devait donc avoir des compétences de recherche plus avancées que l’utilisateur moyen. Quand les personnes ont des compétences de recherche plus faibles, ils bataillent souvent lors de ce type de recherche de mot-clé. 

Un autre participant, avec des compétences de recherches moins avancées, réfléchissait à un voyage à Paris. Il voulait savoir comment obtenir de l’argent liquide avant le voyage, mais ne savait pas quelle était la devise monétaire utilisée en France. Il a alors recherché dans Google “Shopping à Paris”. Malheureusement, cette recherche n’a fait ressortir que des conseils sur quels quartiers visiter et dans quels magasins aller à Paris. Sa sélection de mots-clés fut un échec, elle ne sut jamais que les euros étaient en circulation en France. 

La recherche d’outils échoue souvent lorsque les utilisateurs sont incapables de formuler leur requête avec les termes adéquats.

Aidez vos utilisateurs à trouver ce dont ils ont besoin, même sans les termes corrects

Parfois vos utilisateurs savent ce qu’ils veulent, mais savent plus le nom de l’objet en question. Cette situation arrive souvent, surtout lorsque les utilisateurs ne sont pas familiers du domaine de recherche. Quand le centre d’intérêt est sophistiqué ou spécialisé (par exemple, les carrosseries de voiture, les éléments mécaniques de voiture, l’aménagement d’intérieur), ce problème peut être particulièrement ardu.

Les sites e-commerce doivent prêter attention à ce problème ! Eh oui, un client ne peut acheter ce qu’il ne sait trouver. La recherche à facettes peut s’avérer très utile quand il s’agit de formuler des requêtes dans des domaines inconnus.

Exemple ! Un utilisateur peut être à la recherche d’une gamme d’articles comprenant des fours électriques avec des plaques de cuisson à gaz, et ne pas savoir qu’on les appelle des “cuisinières”. Les options de filtrage sur le côté peuvent lui enseigner le vocabulaire requis pour mener à bien la recherche. 

Certains gros sites de e-commerce pensent que la recherche d’images peut aussi aider à résoudre ce problème. L’utilisateur n’a pas à connaître le nom de l’élément souhaité, seulement à pouvoir le reconnaître. Cependant, la plupart des outils de recherche d’images ne sont pas encore capables de fournir une qualité de résultats comparable à celle de Google. 

Pour l’instant, il s’agit de se focaliser sur l’anticipation du langage adopté par les utilisateurs pour rechercher un produit ou un contenu s’ils ne disposent pas du bon terme. Consultez l’historique de recherche de votre site afin de le découvrir.  Vos clients peuvent rechercher le terme exact (“duster”) ou en faire une grossière description (“long cardigan”).

Le phénomène de sélection des mots-clés permet de se rappeler du fait d’utiliser une gamme lexicale large dans votre contenu, et aussi d’accepter les requêtes imparfaites ou imprécises. 

Ce problème est une raison de plus d’éviter la prolifération de nouveaux termes lorsque cela est possible, particulièrement les termes spécialisés. Si vous inventez un terme nouveau, vos utilisateurs ne vont pas vous comprendre. Par exemple, si un fabricant de fours invente l’expression “Technologie de nettoyage intelligent” à la place de l’expression plus connue de “nettoyage automatique”, les utilisateurs ne sauront pas retrouver l’objet avec une recherche. 

Bien sûr, il y a des situations où l’on est obligé d’inventer un terme nouveau. Si c’est le cas, veillez à bien indiquer à côté les alternatives issues du langage courant, afin de pouvoir parler autant au chef d’entreprise qu’au simple client.  

Via The Search Before the Search: Keyword Foraging.

Dans un monde où la concurrence est de plus en plus grande et les attentes des clients de plus en plus importantes, l’expérience client est devenue plus que jamais essentielle à la réussite d’une entreprise. Les dirigeants doivent chercher de nouvelles façons de ravir leurs clients, de créer un lien émotionnel, et de défendre leurs intérêts.

C’est dans cette optique qu’une stratégie de surprise et de ravissement peut faire des merveilles. Mais en quoi cela consiste-t-il ? 

Selon un article écrit par Shep Hyken, une stratégie de surprise et de ravissement signifie surprendre le client  par un niveau d’expérience auquel il ne s’attendait pas. Mais attention, si cette idée est, à première vue, bonne, elle peut poser problème. Le client veut-il être surpris ? Quelle sera sa réaction face à quelque chose d’inattendu ? Une réaction positive, négative ? 

La vraie question qui se pose alors ici est la suivante :

Comment une entreprise peut-elle apporter une expérience agréable et constante tout en suscitant l’effet de surprise ?

Pour y voir plus clair, analysons et décomposons tous les éléments d’une stratégie de surprise et de ravissement qui peuvent contribuer à l’expérience de vos clients 😉

L’expérience client

Bien qu’il existe de nombreuses définitions de l’expérience client, celle-ci me semble parfaitement juste :

“L’expérience client est ce que ressent un client lors de chaque interaction avec une entreprise”.

Et puisque la surprise fait partie de nos états émotionnels, c’est cette émotion qui doit être suscitée par la stratégie de votre entreprise. Mais cette surprise conduira-t-elle au ravissement ?

La surprise et le ravissement

La surprise, c’est quoi ? C’est une émotion qui survient lorsqu’une personne rencontre un élément inattendu et imprévu. En bref, la surprise c’est vivre une expérience qui sort de l’ordinaire.

Aujourd’hui, nous savons que les sentiments jouent un rôle essentiel dans l’expérience client et, en fin de compte, dans les décisions d’achat. Comme l’explique mon dernier article (Ne jamais faire passer le plaisir de vos utilisateurs au second plan), nos décisions sont motivées par nos émotions 😉 

Aussi, il est essentiel de comprendre que les décisions et les expériences d’achat des clients sont émotionnelles. Si la surprise est mauvaise, cela peut faire fuir le client, alors qu’une bonne surprise le ravira et le fera, à coup sûr, revenir sur votre site web.

Comment susciter une émotion positive par la surprise ? Peut-être que la réponse à cette question réside dans le fait de fonder une stratégie sur un système solide, tel que celui de CX Academy.  Ce système repose sur 6 moteurs. Nous allons alors introduire ces moteurs, en présentant quelques idées, considérations et surtout les pièges utiles concernant une stratégie de surprise et d’enchantement !

La confiance

Les clients créent du lien avec les entreprises en lesquelles ils font confiance. Pour cela, les entreprises se doivent de chercher des moyens afin de créer cette confiance. Et être fiable est un élément fondamental pour bâtir une relation de confiance. Qu’est-ce qu’être fiable ? C’est agir de façon prévisible et récurrente. Cela suggère qu’introduire de la surprise au sein du parcours client peut ne pas fonctionner, car cela rompt la fiabilité. Alors méfiez-vous !

La connaissance

Ce deuxième moteur fait référence au fait que les clients ont besoin que les entreprises sachent quelque chose sur eux. Plus on en sait sur eux, plus les entreprises peuvent concevoir et offrir une bonne expérience client. En suscitant une émotion de surprise positive, nous pouvons satisfaire le client. Toutefois, comme dit précédemment, le client apprécie la fiabilité. Peut-il alors exister des moments où le client apprécie la surprise ? La seule façon de le savoir est de connaître le client et d’identifier ses besoins à chaque étape de son parcours !

 La facilité

Ce moteur incite les entreprises à trouver des moyens de rendre l’interaction avec elles et leurs clients aussi faciles que possible. La surprise est inattendue, et lorsque quelque chose d’inattendu se produit, les gens ont tendance à chercher une explication. Cela peut même provoquer le chaos dans les émotions du client : “Ce n’était pas censé se produire”, “Je ne m’attendais pas à ça !”.

 La compréhension

Ce moteur permet de faire preuve d’empathie envers les clients et d’être émotionnellement en phase avec leurs sentiments. Les clients apprécient la fiabilité, et ce moteur qu’est la compréhension peut aider à identifier les moment où la fiabilité est la plus importante, et ceux où les clients sont plus sensibles à la surprise. Et pour davantage savoir ce qu’est une surprise agréable pour ses clients, il est important de leur poser des questions, de les écouter, et de faire preuve d’empathie.

 La promesse

Une promesse, c’est faire ce sur quoi on s’est engagés. Il s’agit sûrement du facteur de considération le plus important en ce qui concerne une stratégie de surprise et de ravissement. La CX Academy affirme qu’il est important de comprendre que les clients mesurent leur expérience par rapport à leurs attentes, à leurs besoins. Car oui, les attentes des clients correspondent au niveau d’expérience attendu par l’entreprise. Si l’entreprise répond parfaitement à mes attentes, mon expérience ne sera que meilleure et j’en serai pleinement satisfait. 

La résolution

Ce moteur consiste à résoudre et régler les problèmes. Sans entrer ici dans le détail, nous pouvons supposer que fournir des explications, des mots quant à la surprise peut être utile lorsque les choses tournent mal. Parfois, il faut se mettre à la place de son client pour comprendre que la surprise n’a pas eu l’effet escompté. Dans ce cas-là, une explication est toujours la bienvenue. 

J’espère que cet article vous a permis de comprendre en quoi la surprise et le ravissement sont liés à l’expérience globale du client. Et le plus important, c’est de comprendre si la surprise peut être vécue de manière négative ou positive, de communiquer avec ses clients, et surtout de répondre à leurs attentes 😉

Via : Orchestrating surprise and delight strategies to evoke positive emotions.

On a tous déjà rencontré quelqu’un qui avait acheté la dernière voiture Tesla, ou alors le tout nouvel iPhone juste parce qu’il est « joli », « beau », « canon » ! Bref, vous avez compris l’idée.

Et si vous faites une rapide recherche Google sur les lancements de produits Apple, les critiques diront que l’entreprise fondée par Steve Jobs a tendance à privilégier la forme. En dépit de ces critiques, les produits Apple sont historiquement les produits qui ont connu le plus grand succès commercial de tous les temps. 

Alors qu’en est-il ? Est-il possible que la forme soit plus importante que la fonction même du produit ? Tentons de répondre à cette question !

Nos décisions motivées par nos émotions

Le neuroscientifique Antonio Damasio étudie depuis des décennies la façon dont le cerveau réagit lors de la prise de décisions. Et il a fait une découverte fascinante en étudiant des patients présentant des lésions cérébrales liées à la zone responsable des émotions. Ses patients étaient incapables de prendre les décisions les plus simples qui soient, comme le choix du repas du soir.

Ils essayaient de déterminer rationnellement les avantages au fait de manger de la dinde plutôt que du poulet pour le dîner. Et si c’était à vous de faire ce choix ? Imaginons que la dernière fois que vous ayez mangé de la dinde, ç’ait été dans un sandwich vraiment pas terrible que vous avez acheté dans une station service. Gravement affecté par cette mauvaise expérience, vous choisirez le poulet, n’est-ce pas ?

La conclusion de cette petite histoire ?

Presque toutes les décisions que nous pensons logiques sont en fait influencées par nos émotions.

Gerald Zaltman, professeur à Harvard Business School, nous en dit plus ! Ses recherches lui ont permis de constater que 95% des décisions sont prises de manière subconsciente. Prenons l’exemple des marques. Si l’on suppose que nous considérons de façon indifférente diverses marques avant d’acheter, ce n’est tout simplement pas vrai. 

Mais le plus drôle dans tout ça, c’est que nous aimons prétendre que nous prenons tous des décisions logiques et réfléchies.

Bah oui, répondre à la question “Pourquoi as-tu choisi une voiture Tesla” ? par “Parce qu’elle est jolie”, ce n’est pas terrible, n’est-ce pas ? Alors certains diront que s’ils ont fait le choix de Tesla, c’est pour des économies de carburant. Mais ont-ils réellement regardé d’autres options que cette marque ? Sûrement pas ! C’est ce que Gerald Zaltman veut nous faire comprendre 😉

Alors, Michel a-t-il acheté une Tesla parce qu’elle est jolie ou parce qu’elle lui permettra de faire des économies de carburant ? Je crois que la réponse est simple. Michel a craqué sur la Tesla de son ami Jean-Pierre. Le design, l’intérieur cuir, la couleur de la voiture, Michel était conquis. Il s’est ensuite convaincu que les économies de carburant seraient la raison d’un choix logique et réfléchi…

Nous utilisons la logique pour couvrir l’impact de la forme

Après on peut se le dire, il n’y a rien de mal à choisir de la même manière que Michel, on l’a tous fait ! Pendant longtemps, j’ai opté pour des téléphones de marque Huawei ou encore HTC, et en voyant de plus en plus de personnes de mon entourage avec leur super Iphone, j’ai craqué ! Me voilà maintenant avec l’Iphone X. Quelle ironie !

Et pour l’anecdote… J’ai comparé avec plusieurs amis l’iPhone X et XR. Voilà un petit résumé de notre conversation : 

Bob : Alors que penses-tu de l’Iphone XR ?

Moi : Eh bah, ce téléphone est vraiment génial, en plus il est 500 euros moins cher. Clairement, le XR est exactement comme le mien, mais la seule différence c’est…

Bob : “Les bordures ? Et aussi l’appareil photo !”

Moi : “Oui, l’appareil photo ! Sur mon Iphone X, les bordures sont beaucoup plus fines et élégantes ! Pour moi, ça vaut largement 500 euros. 

Jean-Pierre : “Ah oui, totalement d’accord avec vous !”

Cette discussion c’était un peu comme si nous avions découvert un secret que tout le monde partageait mais qu’aucun de nous n’osait révéler. Nous avons tous les trois privilégié la forme par rapport à la fonction en elle-même. Et pour se convaincre, pour se justifier de ce choix, on utilise le fameux appareil photo bien sûr ! Mais la vérité… c’est que toutes ces fonctions ne sont qu’un moyen de rendre ces produits plus jolis 😉

Ce que cela signifie pour les designers

En tant que designer, notre travail consiste à rendre les choses désirables. Mais qu’est-ce qui rend une chose désirable ? 

Bien évidemment, la fonction est importante, mais en fait, la forme l’est encore plus. Pensez à la dernière fois où vous avez voulu quelque chose, et demandez vous pourquoi vous l’avez voulu. Prenons Tesla. Est-ce que vraiment les économies de carburant ? Ou est-ce plutôt la façon dont la marque vous fait vous sentir ?

Pour le numérique et plus particulièrement l’UX, c’est pareil ! La forme, c’est-à-dire l’esthétique, a toute son importance. Lorsque vous vous rendez sur un site web, la première impression est souvent décisive. Et sur quoi repose cette première impression ? Sur l’esthétique, bien sûr !

Alors en tant que designer, souvenez-vous de cette fameuse phrase de Don Norman, psychologue cognitiviste américain : « Les choses attrayantes fonctionnent mieux ».

Pour en savoir davantage sur cette notion d’esthétique, je vous conseille de consulter l’un de mes précédents articles : L’équilibre entre esthétique et minimalisme ! 😉

Alors, retenez bien cela : ce n’est pas parce qu’une chose fonctionne qu’elle est désirable.

J’avais, jadis, un capteur d’empreintes digitales sur mon ordinateur portable ASUS. Est-ce qu’il fonctionnait ? Oui. Est-ce qu’il était beau et agréable au toucher ? Pas spécialement. Et maintenant, tout le monde, y compris moi, aura oublié la version d’ASUS et considérera le Touche ID d’Apple comme l’une des meilleures innovations.

Les gens peuvent bien banaliser la forme. Mais en tant que designers, nous ne pouvons pas l’oublier et surtout oublier le rôle qu’elle joue dans l’esprit des utilisateurs, des consommateurs. Eh oui, on peut vouloir quelque chose qui nous fait nous sentir bien juste parce qu’il est beau et agréable à regarder ! D’où l’importance d’améliorer la vie de gens, des utilisateurs grâce au design 😉

Via : “We’ll add delight later?” will cost you your business.

La navigation est l’un des éléments les plus critiques et importants de la conception d’une interface. L’utilisateur compte sur la navigation pour trouver du contenu et des fonctionnalités précises. D’où l’intérêt d’en faire une priorité absolue pour chaque site web ou application 😉

Et après tout, quel que soit le temps que vous investissez dans la conception d’un contenu ou d’une fonctionnalité, si l’utilisateur ne parvient pas à le trouver, votre travail aura été inutile ! Mais ne parlons pas de malheur, on vous explique tout dans cet article !

Concevoir une application qui correspond aux modèles mentaux des utilisateurs

• Déterminez comment les gens naviguent sur votre site Web. Il est important de savoir ce que l’utilisateur recherche sur votre site et pour cela, il vous faut examiner et analyser les parcours utilisateurs pour comprendre quels types de tâches l’utilisateur effectue.

• Concevez une navigation cohérente. Sachez le… L’incohérence crée de la confusion, et ça, c’est pas bon ! Alors, un conseil, ne déplacez pas les éléments de navigation de premier niveau, et ne modifiez pas les options de navigation. Vous risquez de perdre vos utilisateurs.

• Évaluez vos catégories de contenu. Lors des tests utilisateurs, plusieurs activités peuvent vous permettre de construire l’arborescence de votre site. Parlons du tri de cartes ! Lors de cette activité, l’utilisateur doit trier des cartes en fonction de plusieurs catégories selon sa propre logique, sa propre représentation. Alors, si vous voulez savoir si  le chapeau est considéré comme un vêtement ou un accessoire, organisez donc un petit tri de cartes 😉

• Testez vos menus auprès de vos utilisateurs. Il peut être difficile d’évaluer objectivement son propre travail. Bah oui, vous n’êtes pas l’un de vos utilisateurs. Et c’est pour cette raison, qu’il est essentiel de procéder à des tests utilisateurs afin de déterminer les différents problèmes qui peuvent surgir lors de la navigation de vos utilisateurs. Et en cette période de Covid, sachez qu’il est tout à fait possible de réaliser des tests à distance 😉 Alors, n’hésitez plus !

Concevoir pour une bonne découvrabilité

• Ne cachez pas votre menu. Au restaurant, vous aimez découvrir le menu immédiatement ! Eh bien, sur un site web c’est pareil ! Lorsque le menu est caché sous un bouton hamburger, l’utilisateur doit d’abord trouver le bouton pour ensuite découvrir le menu. Pas top pour la facilité de découverte !

• Veillez à ce que le menu soit suffisamment visible. Le style visuel de votre menu doit le distinguer du reste de la page. Pour cela, utilisez les espaces blancs et le contraste des couleurs.

• Utilisez des icônes pour donner plus de sens. Des icônes bien choisies peuvent aider l’utilisateur à comprendre certaines options du menu sans avoir à lire les intitulés. Toutefois, n’utilisez pas que des icônes ! Cela peut gêner la compréhension de l’utilisateur.

• Placez les menus sur des emplacements familiers. N’oubliez pas que les utilisateurs passent la plupart de leur temps à vagabonder sur plein de sites. Et ils s’attendent à ce que votre site web fonctionne comme les autres ! Ainsi, placez votre menu là où l’utilisateur s’attend à le trouver : en haut de la page,  partie latérale gauche, et pied de page.

Donner le contrôle aux visiteurs

• Utilisez des intitulés clairs. La conception de la navigation d’un site web doit être prévisible. L’utilisateur doit être en mesure de savoir ce que représente chaque option de navigation avant d’interagir avec elle. Pour ce faire, pour votre menu, laissez tomber les jargons un peu trop complexes, et utilisez des termes simples et connus de tous. Tout le monde sera content 🙂

• Donnez aux liens du menu un aspect interactif. Les visiteurs ne peuvent pas toujours se rendre compte qu’il s’agit du menu si les options n’ont pas l’air interactives. L’idée c’est donc d’apporter des indicateurs visuels ! Les couleurs, les contrastes sont d’excellents moyens d’apporter un signal clair de ce qui est cliquable ou non.

• Concevez des options de navigation de taille appropriée. Des options de navigation trop petites ou situées trop près les unes des autres peuvent pousser l’utilisateur à faire des erreurs ! Pensez alors à bien adapter la taille des boutons, notamment sur mobile.

• Communiquez l’emplacement actuel de l’utilisateur. Cet élément renvoie à l’un de nos précédents articles dédié au principe de visibilité. Selon ce principe, il est très important d’indiquer à l’utilisateur où il se trouve sur l’interface ou sur l’application.

• Proposez un fil d’Ariane. En ergonomie, le fil d’Ariane permet d’orienter l’utilisateur au sein de votre site web, notamment si son architecture se compose de plusieurs niveaux. En clair, il s’agit d’une aide à la navigation sous forme de signalisation de la localisation.

• Utilisez des “Sticky menus” pour le défilement de longue page. Avec un menu ordinaire, l’utilisateur, qui a atteint le bas de page, doit remonter jusqu’en haut pour naviguer. Un  “sticky menu” ou menu collant permet de rendre la barre de navigation toujours visible, et donc de pouvoir accéder directement aux différentes options de navigation. 

Concevoir pour une lecture rapide et efficace

• Affichez des intitulés de deux mots. Chaque élément du menu doit comporter un ou deux mots porteurs d’information. En clair, allez droit au but, cela ne sert à rien de palabrer !

• Évitez les répétitions. Pour ne pas nuire à la lisibilité de votre menu, évitez d’utiliser les mêmes mots pour débuter vos listes.

• Justifiez à gauche les éléments de navigation. Dans les pays occidentaux, on lit de gauche à droite. Alors, pour améliorer la lisibilité de votre site, utilisez des éléments de navigation justifiés à gauche comme le montre l’exemple de Zalando ci-dessous.

• Faites attentions aux majuscules. Les majuscules permettent d’attirer l’attention de l’utilisateur. Toutefois, en majuscule, tous les mots ont une forme rectangulaire et uniforme, ce qui rend la lecture parfois difficile et votre page web illisible. Veillez donc à utiliser avec parcimonie les mots en majuscule.

• Limitez le nombre d’options de navigation de premier niveau. Le psychologue George Miller a constaté que le nombre d’objets moyen qu’un être humain peut retenir est de plus ou moins 7. Il est alors important de retenir ce nombre, et si vous concevez un site complexe, avec plusieurs options de navigation, proposez des sous-menus afin de ne pas perdre l’utilisateur.

• Faites attention à l’ordre des options de navigation. Non seulement le nombre d’options est important, mais l’ordre l’est aussi. L’effet de position en série est le fait de mieux se souvenir des premiers et des derniers éléments d’une série. Les options que vous placez au début ou à la fin de la navigation sont donc plus marquantes, c’est pourquoi il faut les choisir avec réflexion.

• Utilisez des méga-menus. Les méga-menus sont de grands menus déroulants comprenant plusieurs niveaux. Ils permettent à l’utilisateur d’avoir une vision globale du menu, et donc de pouvoir sauter des niveaux pour gagner du temps.

Réduire au minimum la charge cognitive de l’utilisateur

• Privilégiez la navigation plate. La navigation plate est un système de navigation dans lequel l’utilisateur peut accéder à toutes les pages du site en un seul clic. L’idée est donc de limiter le nombre de niveaux pour ne pas perdre l’utilisateur.

• Évitez les effets animés. Plus votre menu est soft, mieux c’est ! Les animations ou visuels sur votre menu peuvent distraire l’utilisateur. Il ne s’agit donc pas de l’endroit idéal !

On espère que cet article vous a plu et qu’il vous permettra de rendre la navigation de votre site la plus optimale et efficace possible 😉 Rien de mieux pour satisfaire vos utilisateurs, et surtout pour les inciter à revenir !

Via UX Planet : Practical Tips for Creating Smooth Website Navigation Experience.

🏆 Deux trophées pour Wexperience : prix de l’interface numérique et de design graphique  !

Les lauréats du Com’en Or Trophy ont été annoncés il y a peu… Et c’est avec une immense fierté que nous vous annonçons que la team Wexperience remporte non pas un, mais deux trophées !

Nous recevons le prix de l’Interface numérique et du Design graphique pour notre projet sur Heyme.care, site de mutuelle et assurance dédié aux étudiants et jeunes actifs.

Ce projet, mené avec Sabrina Leroy, Directrice Innovation et Projets chez Heyme, consistait en la création d’un site web à la fois sur mobile et desktop. Refonte de site, design graphique, création de parcours utilisateur, découvrez l’ensemble de notre projet présenté juste ici  👇

Et pour découvrir le site c’est par ici 👇

Un grand merci au Com’en Or Trophy ainsi qu’aux membres du jury Sandrine Deprez, Christian Pawlowski, et Yann Kervarec !

Les détails visuels tels que la police, la couleur ou encore l’alignement créent une expérience conviviale et expriment, d’une certaine manière, les valeurs de votre marque.

Il est facile de regarder un design et de remarquer qu’il est beau. En revanche, il est plus difficile de déterminer pourquoi il l’est. Mais nous… On vous dit tout ! Et pour cela, nous analyserons trois interfaces utilisateurs afin d’examiner les principes de conception visuelle qui les rendent attrayantes 😉

Exemple 1 : Typographie et espacement

Prenons l’exemple de Medium.com, une plateforme américaine pleine de contenus intéressants. Cette conception utilise une grille, des espaces blancs et un système typographique afin de créer une expérience de lecture à la fois confortable et agréable.

• Alignement sur une grille. On remarque via le schéma ci-dessous une grille de colonnes. Cette grille de colonnes fournit des lignes d’ancrage verticales sur lesquelles différents éléments sont alignés. Dans la barre latérale, celle tout à gauche de l’écran, on remarque que les éléments (auteurs, commentaires, etc) sont alignés à gauche. Et cela permet de rendre le contenu plus net, et plus facile à lire. Le texte de l’article est également aligné à gauche sur une ligne de la colonne.
  
  En clair, lors de votre conception, il est important d’établir une grille de colonnes et de veiller à ce que l’alignement soit cohérent, entre les différentes pages de votre site, mais aussi entre les différents éléments. Ne perdez donc plus de temps… Définissez vos propres règles pour être le plus cohérent possible 😉

• Variations typographiques. Pour différencier les types de contenus, le site Medium utilise différents styles de caractères de la même police (gras, italique, souligné, etc) ainsi que des couleurs différentes, mais pas trop ! Un peu de noir, et un peu de gris, c’est le combo parfait. Eh oui, une trop grande variété de typographies, que ce soit le style ou la couleur, peut donner un aspect désordonné à votre site.
  
  La clé pour un design cohérent, c’est simple. Une variante = un objectif ! Prenons l’exemple des petites capitales “WRITTEN BY”. Ici, ce choix de typographie indique clairement qu’il s’agit d’un titre de section. 

• Espaces entre les lignes de texte. Il n’y a rien de pire que de lire un texte lorsque les lignes sont trop collées, n’est-ce-pas ? Il faut plisser les yeux et au bout de 2 min, on en a marre !  Ici, sur Medium, la distance entre chaque ligne de texte est légèrement augmentée par rapport à l’espacement par défaut qui est généralement supérieur de 2px à  la taille de la police. La méthode adoptée par ce site permet de créer un bloc de texte bien aéré et agréable visuellement.

• Ajustement du crénage. Pour ceux qui se le demandent, le crénage consiste à agrandir ou diminuer l’espace entre des paires de lettres spécifiques. Vous l’avez sûrement déjà remarqué, notamment dans les titres, l’espace entre les lettres est plus apparent, notamment entre les lettres qui forment un angle. Dans l’exemple ci-dessus, l’espace entre les lettres a été légèrement comprimé. Si la plupart du temps, le crénage est ajusté automatiquement, pensez à le faire manuellement 😉

Ces 4 points, qui peuvent vous sembler être des détails, sont très importants ! Ils rendent votre interface plus belle, tout en accomplissant l’objectif principal d’une page web : être facilement lisible et agréable.

Exemple 2 : Hiérarchie et couleur

Notre deuxième exemple est celui de Heyme.care, site d’assurance et de mutuelle.  Le design de leur site utilise la hiérarchie, les couleurs et les images de manière à créer une expérience visuelle attrayante.

• Une palette de couleur colorée. La palette de couleur se compose de trois couleurs : le bleu, le rouge et le jaune qui sont des couleurs complémentaires classiques. Ces trois couleurs contribuent à l’attrait du design, elles attirent l’œil sans l’agresser, et apportent une certaine légèreté, une certaine gaieté ! Tout ce qu’il faut pour ravir l’œil de l’utilisateur 😉
  
  En clair, lorsque vous choisissez des nuances de couleurs pour votre design, n’hésitez pas à créer plusieurs palettes, et à les ajuster de manière à voir ce qui se marie le mieux tout en ayant quelque chose de raffiné !

• Une hiérarchie visuelle claire. La hiérarchie visuelle guide l’œil de l’utilisateur et indique les éléments importants d’une page web. Dans le cas Heyme, l’œil est d’abord attiré par ce bandeau bleu qui indique qu’il s’agit d’une site de mutuelle et d’assurances dédié aux étudiants et jeunes actifs. La cible est d’emblée indiquée à l’utilisateur.
  
  Ensuite, notre attention se focalise sur les 3 offres proposées par Heyme : assurance, mutuelle et santé à l’étranger. Et vous savez pourquoi ces offres nous sautent aux yeux ? C’est parce que pour chaque offre, une couleur est associée. 🎨
  

Notez également le traitement typographique avec des polices en gras pour mettre en avant l’expertise de la marque et les avantages des offres proposées.  De cette manière, l’utilisateur voit en un coup d’œil les caractéristiques de la marque.

Et puisque la hiérarchie visuelle est un point très important, voici l’un de nos précédents articles sur le sujet qui vous apportera davantage de conseils 😉

Mais attention, lorsque vous mélangez les traitements de caractères, il faut veiller à :

1. Utiliser deux traitements de polices maximum dans un même titre. 
2. Utiliser le gras pour le ou les mots les plus importants et l’italique pour les mots secondaires.
3. Etre cohérent dans le style d’une page à l’autre.

• Utilisation d’images de haute qualité. Les visuels doivent apporter des informations précieuses sur vos produits, vos services, ou plus généralement votre marque. En fait, les visuels doivent aider les utilisateurs à comprendre quelque chose, et à leur faire ressentir quelque chose. Les visuels ne doivent pas être de simples décorations pour embellir votre interface. Les visuels du site Heyme.care reflète à merveille l’univers de mutuelle et assurance dédié à la jeune génération !

Et pour votre plus grand plaisir, vous pouvez consulter notre interview de Sabrina Leroy, responsable développement et stratégie digitale chez Heyme.care, qui nous parle de son interface web 😉

Exemple 3 : Cohérence

Notre troisième exemple est tiré de l’application mobile Spotify. La conception de cette application utilise de manière efficace une cohérence du traitement visuel, afin de créer une expérience d’écoute efficace et agréable !

• Un traitement visuel cohérent. Un design n’aura pas l’air professionnel et manquera d’élégance si les éléments visuels sont mal utilisés. Et ce n’est clairement pas le cas pour l’application Spotify. On remarque de nombreux éléments qui restent cohérents sur l’ensemble des pages : espacement entre les colonnes, alignement des en-têtes traitement typographiques… tout est ordonné et réfléchi !
  
  Aussi, chaque catégorie de musique est représentée par en encart avec un visuel personnalisé. Et même si chaque catégorie possède une couleur et un visuel différent, la disposition et la hiérarchie des encarts sont cohérentes en tout point. Le nom de chaque catégorie se trouve au même endroit, et il en est de même pour les visuels. Ces détails donnent à l’ensemble de l’interface un aspect cohérent, soigné, et clair.

Sachez que si vous trouvez telle ou telle interface belle et agréable, ce n’est pas par hasard ! Chaque décision doit être prise avec réflexion, car même s’il n’existe pas de règles à proprement parler, certaines bonnes pratiques vous seront très utiles 😉

Via Nielsen Norman Group : Why Does a Design Look Good?

Dans la conception e-commerce, le passage du paiement est l’une des parties les plus étudiées du parcours de l’utilisateur. Et de manière minutieuse ! Cette étape est très importante puisqu’elle influence la perception de la marque, la propension à revenir et la capacité à générer des revenus en ligne.

Avec le nombre croissant d’utilisateurs qui font leurs achats sur mobile, il est impératif de concevoir un parcours de paiement qui non seulement respecte les bonnes pratiques e-commerce, mais qui soit également optimisé.

Dans cet article, on vous propose une petite analyse des différentes manières de concevoir le processus de paiement sur mobile, et ce de manière la plus optimale possible 😉

1/ L’étape du panier et des options de paiement

Bien souvent, le processus de commande débute par une visite du panier, durant laquelle on contrôle si tout va bien,  si les articles ajoutés sont bien les bons, etc. Et cette étape où l’on peut modifier son panier doit être, pour l’utilisateur,  sans obstacles, sans difficultés. 

Comment s’y prendre ?

• Fournir un accès rapide au panier

Lorsque l’utilisateur appuie sur le panier, cela indique qu’il veut s’y rendre immédiatement, il n’a pas de temps à perdre avec des étapes inutiles qui pourraient le gêner pendant son parcours. Ce que l’utilisateur veut, il doit l’obtenir 😉 Pour le combler davantage, vous pouvez éviter les retards liés aux performances de votre site.

• Faciliter la mise à jour du panier

Parcourir des pages pendant des heures, en changeant sans cesse son panier, on le fait tous ! Et cela nous arrive même d’ajouter par inadvertance deux fois le même article… C’est pour cette raison qu’il est important de permettre à l’utilisateur de modifier facilement le contenu de son panier. 

• Ajouter l’option supprimer à côté de chaque article

Lorsqu’un utilisateur doit supprimer l’un de ses articles et qu’il est obligé de réduire la quantité à zéro, cela ne fait pas bon ménage ! Il est préférable, pour ne pas frustrer l’utilisateur, d’ajouter l’option « Supprimer » devant chacun des articles ajoutés au panier. Sinon, ne vous étonnez pas si vos utilisateurs préfèrent passer par Amazon pour effectuer tel ou tel achat…

• N’utiliser pas de bouton “Mise à jour” pour modifier son panier.

Certains sites obligent l’utilisateur à cliquer sur un bouton de “Mise à jour” pour actualiser les modifications ajoutées au panier. Si Michou décide finalement d’acheter 2 pulls en laine plutôt que 3, il devra indiquer la nouvelle quantité souhaitée, appuyer sur le bouton “Mettre à jour” pour mettre à jour son panier. Quel périple !

Cette méthode n’est pas très optimale… Et pour deux raisons ! 

1. L’utilisateur doit effectuer deux actions pour modifier son panier au lieu d’une seule !
2. L’utilisateur peut oublier d’appuyer sur ce fameux bouton “Mettre à jour”, soit parce qu’il oublie, soit parce qu’il ne sait pas qu’il est obligé de le faire.

En clair, il vaut mieux simplifier la vie de vos utilisateurs !

• Favoriser la continuité de l’expérience d’achat sur différents canaux

Si les marques continuent de se développer sur les différents canaux existants, les attentes des utilisateurs en matière de facilité d’accès et de flexibilité ne cessent aussi d’augmenter. On a tous tendance à faire des allers-retours entre l’ordinateur et le téléphone, et c’est ça qu’il est important de pouvoir “switcher” entre les deux tout en retrouvant le contenu que l’on était en train de consulter.

Les utilisateurs d’Apple peuvent bénéficier d’une fonction appelée “Handoff” qui permet d’entreprendre une activité sur un appareil et de la poursuivre sur un autre. En clair Michou peut prospecter les pulls en laine à partir de son iPhone, et procéder à l’achat sur son Mac (ou vice-versa) ! Ingénieux, n’est-ce pas 😉

• Faire en sorte que le paiement sans création de compte soit facile à trouver

On connaît tous ce fameux moment de doute en remplissant un mot de passe sur tel ou tel site… Eh bien évidemment on se trompe ! Dans ce cas-là, il est bien plus facile et rapide de passer au paiement sans création de compte. Cela évite de renvoyer un nouveau mot de passe, de se rendre sur sa boîte mail pour le récupérer et ainsi de suite… N’oubliez donc pas de proposer cette option à vos utilisateurs !

2/ Récapitulatif de commande et options de livraison

Les utilisateurs n’apprécient pas les inexactitudes ou les prix peu clairs et sont de plus en plus frustrés lorsque le coût de leur panier augmente de manière inattendue. Lorsque cela se produit, ils abandonnent leur panier et vont chercher ailleurs leurs articles pour éviter les frais supplémentaires d’expédition et de livraison. Pour éviter ce genre de chose, voici deux best-practices que vous pouvez mettre en place sur mobile :

• Faire en sorte que le récapitulatif de commande soit facilement accessible

Il est important d’accorder une attention toute particulière à l’emplacement du récapitulatif de commande sur mobile. En raison de l’espace limité de l’écran, ces frais supplémentaires apparaissent parfois en bas de la page et peuvent alors être ignorés par l’utilisateur. Pour éviter toute mauvaise surprise, pensez alors à afficher le récapitulatif bien en évidence, c’est-à-dire en haut de page. Ne faites pas défiler l’utilisateur pour trouver ces informations ! 

• Utiliser l’emplacement de l’utilisateur pour déterminer la TVA, les frais et les options de livraison

Les frais de livraison et la taxe dépendent généralement de l’adresse de livraison associée à la commande, c’est-à-dire à l’utilisateur.  Dans la mesure du possible, les détaillants doivent utiliser cet emplacement pour estimer les frais de livraison et la taxe avant même que l’utilisateur n’ait saisi son adresse de livraison. 

L’emplacement de l’utilisateur peut également servir à localiser les points de retrait situés aux alentours de son domicile, s’il s’agit de l’option sélectionnée. Et surtout ! Demandez toujours à l’utilisateur la permission d’utiliser son emplacement actuel, et laissez lui la possibilité de le modifier et de le mettre à jour facilement.

Vous souhaitez en savoir davantage sur le tunnel de commande ? On vous conseille de consulter l’un de nos précédents webinar dédié aux sites marchands de gastronomie ! On y parle livraison, création de compte et pas que 😉

3/ Champs du formulaire et interactions de saisie

Remplir des formulaire sur mobile peut prendre du temps, et être source d’erreurs. Réduire le nombre de champs du formulaire et ajouter le remplissage automatique des champs peut considérablement faciliter le processus de paiement. Voici quelques conseils que nous pouvons vous donner :

• Présenter le bon clavier pour chaque champ

Utilisez un pavé numérique pour les données telles que les numéros de carte de crédit ou numéros de téléphone. Pour les champs d’adresse électronique, utilisez un clavier optimisé pour la saisie, c’est-à-dire un clavier sur lequel l’utilisateur peut facilement retrouver les caractères spécifiques.

• Remplir automatiquement les champs en fonction des données préalablement saisies

Les champs tels que l’adresse, la ville, ou encore l’Etat peuvent être remplis automatiquement en fonction des autres données saisies par l’utilisateur. Quoi de mieux quand quelqu’un fait le travail à votre place ? 😉 Alors au lieu de demander à l’utilisateur de taper lui-même certaines informations, faites-le à sa place ! Il en sera ravi !

Le remplissage automatique du navigateur et les données enregistrées fonctionnent sur les champs suivants : nom, prénom, adresse électronique, numéro de téléphone, mot de passe et carte de crédit. Et franchement, ça, on adore ! 

• Utiliser un champ de formulaire ouvert, et non une liste de sélection lorsque vous demandez à l’utilisateur d’entrer son État et la date d’expiration de son carte de crédit

Les longues listes déroulantes sont particulièrement difficiles à utiliser pour les utilisateurs mobiles, notamment ceux qui utilisent iOS. Lorsque la liste déroulante occupe la moitié de l’écran, seuls quelques éléments apparaissent, et cela amène parfois l’utilisateur à se tromper. Il faut alors faire défiler cette longue liste plusieurs fois… En clair, il vaut mieux oublier les listes déroulantes ! Il est plus rapide pour les utilisateurs de taper les deux premières lettres d’un élément 😉

4/ Paiement facile sur mobile

Saisir ses données de carte de crédit n’est pas toujours une partie de plaisir ! Et encore plus sur mobile ! Il arrive parfois que l’on se trompe, ou alors tout simplement de ne pas avoir sa carte de crédit à proximité. Remercions alors les services qui nous simplifient la vie comme PayPal ou Apple Pay. 😉 Ces services, perçus comme étant plus fiables et plus sûrs, évitent aux utilisateurs de saisir les informations relatives à leur carte.

• Proposer des options de paiement adaptées au mobile, mais ne submergez pas l’utilisateur !

L’utilisateur aime avoir le choix, mais pas trop… car il peut vite être perdu et submergé d’informations ! Alors, lorsque vous proposez des options de paiement  reconnaissables telles que PayPal ou Apple Pay, ça suffit ! Et pour chacune de ces options, veillez à faire clairement la distinction entre chacune d’entre elles. La procédure de paiement la plus courante doit être plus visible que les autres, ou alors mise en première position. 

Et si l’utilisateur aime avoir le choix, il aime aussi savoir où il va ! C’est pour cette raison qu’il est préférable de signaler à l’utilisateur que pour saisir ses coordonnées de paiement, il sera retiré du site et redirigé vers une autre page.

• Proposer l’option caméra pour les données de carte de crédit

Au lieu de saisir les données de carte bancaire, certaines options comme AutoFill Credit Card (proposée par Safari), permettent à l’utilisateur de prendre une photo de sa carte de crédit, ce qui remplit automatiquement les champs. Et cette option en ravit plus d’un 😉

En clair, ce qui distingue une excellente expérience de paiement sur mobile d’une autre, ce sont les détails ! Sur mobile, chaque élément est important, et doit être choisi avec réflexion pour optimiser l’expérience utilisateur. C’est de cette manière que vous rendrait vos utilisateurs heureux 😉

Via : Nielsen Norman Group, The Mobile Checkout Experience.

Il n’y a pas si longtemps, je vous ai parlé du 8ème principe d’utilisabilité dicté par Jakob Nielsen, celui sur le minimalisme et l’esthétique. Eh bien, aujourd’hui, parlons du principe de visibilité ! Ce principe permet d’indiquer l’état actuel du système, et ainsi de donner aux utilisateurs l’impression qu’ils maîtrisent le système, et c’est ce sentiment de maîtrise qui vous permettra de bâtir une relation de confiance 😉

Voici quatre méthodes de rétroaction visuelle que vous pouvez utiliser afin d’indiquer l’état du système : 

1/ Le retour visuel qui indique à l’utilisateur où il se trouve

Où suis-je ?

Personne n’aime être perdu, que ce soit dans le monde réel ou le monde numérique. Faire savoir aux utilisateurs là où ils se trouvent sur l’interface ou sur l’application est essentiel pour créer une bonne expérience de navigation. Il est alors important de mettre en avant l’option de navigation actuellement choisie afin d’aider les utilisateurs à comprendre là où ils sont !

Combien d’étapes sont-elles nécessaires pour terminer une action ? 

Savoir combien d’étapes sont nécessaires à l’accomplissement d’une action aide l’utilisateur à estimer le temps requis pour terminer sa tâche.

2/ Le retour visuel qui confirme l’action de l’utilisateur 

Il est primordial de fournir un retour visuel à chaque interaction. Un retour visuel immédiat prévient l’utilisateur que l’application à pris en compte son action. Cela renforcera donc son sentiment de maîtrise, et le retiendra de commettre d’éventuelles erreurs, comme appuyer plusieurs fois sur le même bouton…

En clair, il est impératif d’indiquer que le système a bien pris en considération tel ou tel clic.

Dans certains cas cependant, il peut être important de changer l’état du bouton lui-même. Dans de tels cas, le retour visuel transmettra aussi le résultat de l’interaction, le rendant à la fois visible et intelligible. Voici quelques exemples : 

• Appuyer sur le bouton “J’aime”
• Activer/ désactiver un élément. Le changement de couleur du bouton donnera à l’utilisateur une indication sur l’état actuel de l’élément en question.
• Mettre un élément en favori
• Ajouter un objet au panier. Dans ce cas, le retour visuel indique à l’utilisateur que l’article a été ajouté au panier. 

3/ Le retour visuel qui indique l’état du système 

Montrer que le système est actif 

Lorsqu’il faut plus de quelques secondes pour que le système se charge, il est important de donner à l’utilisateur un retour immédiat. En fonction de l’attente, il est recommandé d’employer des indicateurs de chargement tels que :

• Des boucles de chargement (généralement pour les opérations qui prennent moins de 10 secondes)
• Des barres de chargement (pour les opérations qui prennent plus de 10 secondes). 

Ces indicateurs alertent l’utilisateur sur le fait que le système est en cours. Grâce à ces indicateurs, plus de doutes ! Michou n’a pas à se demander s’il va attendre quelques secondes ou 3 heures 😉

Pour les applications mobiles, il est aussi possible de présenter des écrans d’accueil animés durant le chargement initial. Un écran d’accueil bien conçu instaurera une atmosphère positive dans laquelle baigneront les nouveaux utilisateurs et leur fera oublier l’attente.

Cela vous rappelle quelque chose ? Il s’agit du principe de l’aversion pour l’oisiveté dont nous vous avons parlé dans notre dernier article sur Netflix 📺

Le contenu en cours de chargement

Lorsque le chargement de contenu prend du temps, il est recommandé d’employer un certain type d’affichage : l’écran-squelette. Cet affichage de contenu temporaire a pour fonction d’atténuer le temps d’attente et peut être rempli avec des données réelles dès que les données sont accessibles.

Cet affichage fonctionne aussi bien sur ordinateur que sur téléphone portable. 

4/ Évènements déclenchés 

Notifications et indicateurs 

Les notifications ont pour fonction de focaliser l’attention de l’utilisateur sur un nouvel évènement. L’attention de l’utilisateur est naturellement dirigée vers les choses animées, c’est pourquoi il est de bon aloi d’employer des animations subtiles pour les notifications !

Les requêtes lors des actions de l’utilisateur

Il existe beaucoup de situations lors desquelles un système peut avoir recours aux données de l’utilisateur pour effectuer son action. Par exemple, lorsqu’un utilisateur remplit un formulaire avec des informations erronées. Ou encore lorsqu’un utilisateur choisit un mot de passe qui n’est pas assez complexe, lorsqu’il renseigne une adresse mail invalide. Il est toujours préférable de prévenir l’utilisateur de ces problèmes ou erreurs. Comment faire ? Communiquer un retour visuel approprié !

L’ensemble des indicateurs visuels sont essentiels à la création d’une bonne conception. Lorsqu’un utilisateur interagit avec une interface web, il a besoin de prévisibilité et surtout de contrôle ! Vous savez désormais quoi faire pour apporter à vos utilisateurs une expérience digne de ce nom 😉

Via : 4 Ways to Communicate the Visibility of System Status in UI