Agence WEX

Catégorie : Actualités

  • L’UX doit-elle changer l’organisation des entreprises ?

    Dans un post récent, je réagissais à un passionnant article d’un des fondateurs de l’UX, JJ Garett, dont la déception vis à vis du rôle de l’UX dans les entreprises était sans doute à l’hauteur de ses espoirs de jeune homme.

    Son article posait une question intéressante. A savoir, l’UX a-t-elle besoin de modifier l’organisation d’une entreprise pour pouvoir être appliquée pleinement ? Et du moins, doit-elle influencer et faire évoluer les méthodes de conception de produit numérique au sein des entreprises ?

    Je ne parlerai que pour ma chapelle : celle du ecommerce. C’est à dire d’une UX au service du « profit ». Car, ne nous berçons pas d’illusions. Dans le ecommerce, comme dans d’autres domaines de l’entreprise privée, c’est bien le profit, qui au bout du chemin, mène les réflexions, influe sur les choix et détermine les objectifs d’un UX Designer.

    Est-ce bien ? Est-ce mal ? Je ne placerai pas mon propos au niveau du rôle de l’entreprise capitalistique dans notre monde, mais plutôt sur celui du rôle de l’UX designer et de sa mission au sein des entreprises.

    Quel est le rôle de l’UX designer au sein de ces entreprises ?

    Si l’on en croit l’objet d’une transaction commerciale, c’est bien d’aider chaque client et chaque entreprise à nouer la meilleure affaire possible. Celle qui lie à parts égales les intérêts des deux parties. D’une part, le client qui cherche à acquérir un service ou un produit pour son profit. D’autre part, une entreprise qui essaie de lui apporter le meilleur service ou produit, tout en retirant la possibilité de générer un bénéfice.

    Dans cette relation, il semble évident que le rôle de l’UX Design est bien de permettre à chacune des parties d’accomplir ces objectifs de la manière la plus efficace, efficiente, rapide, simple, agréable possible. Ce sont les objectifs de l’UX.

    Si l’on comprend cela, on comprend, en tant que UX designer, que notre rôle n’est pas tant d’infléchir les modalités de création de richesse de la société en s’attaquant à son symbole le plus impérieux, mais bien de servir au mieux un acte nécessaire et plus qu’antédiluvien, le commerce.

    De cette première réponse découle une autre interrogation qui n’a pas forcément partie liée à la première.

    L’UX doit-elle influencer le mode de fonctionnement de l’entreprise dans sa capacité à servir ses clients ?

    Je pense sincèrement que oui, mais… avec un certain septicisme.

    Car les UX Designers croient un peu trop souvent qu’ils détiennent une sorte de vérité, sans vraiment détenir toutes les clés du problème. J’apporterai donc une réponse nuancée à cette question.

    Je reste persuadé que beaucoup trop de projets sont encore pensés sans réellement se préoccuper du confort et de la satisfaction des utilisateurs.

    Je suis assez d’accord pour dire que les UX Designers appliquent un peu trop souvent des recettes toutes faites, sans vraiment se préoccuper du contexte particulier de chaque projet.

    Bien entendu, lorsque l’on conçoit un site de ecommerce, on ne va pas réinventer le ecommerce. Il s’agit de suivre une voie déjà bien balisée, mais, pour autant, ça n’est pas une raison pour ne pas prendre un peu de recul à chaque projet.

    Car chaque projet possède son propre contexte duquel, en l’étudiant dans les détails, on peut extraire des « insights », des trouvailles, des « tips » qui sont autant de petits points créatifs qui, non seulement, feront l’originalité d’un site, mais amélioreront sa capacité à produire ce qu’il doit produire : de la satisfaction.

    On ne peut donc concevoir une interface qu’en appliquant des méthodes. Un vrai travail de conception nécessite forcément d’aller au delà de la simple culture UX, mais bien de s’intéresser à ce qu’on peut appeler vulgairement « le métier ». A savoir, connaître le produit, le service, ses utilisateurs ou usagers, etc… Combien d’équipes UX poussent le vice à aller jusque là ?

    Et je dirais, pour bien faire la part des choses : combien d’entreprises sont-elles également prêtes à donner aux UX designers les moyens d’aller jusque là ?

    C’est peut-être là le point d’achoppement de l’UX aujourd’hui. Non pas un manque de reconnaissance du métier, mais bien un manque d’audace, de courage, de curiosité de la part des entreprises (que l’on finit toujours par traduire par un manque de moyen) qui permettent vraiment aux UX Designers de pratiquer leur métier.

    Encore trop souvent aujourd’hui, on réduit leur rôle à celui de UI designers, en occultant totalement la partie recherche ou, du moins, en ne la laissant pas suffisamment respirer.

    Cependant, une des raisons qui pousse aussi à refréner les UX designers dans leurs ardeurs, c’est que leur vision a souvent tendance à remettre en question les méthodes de travail des équipes en charge de la création des produits numériques. Là, d’ailleurs, se trouve peut-être aussi la fameuse déception de JJ Garett.

    Pour ma part, j’ai la conviction que le rôle de l’UX doit se trouver au niveau de la direction générale d’une entreprise. J’ai cette conviction intime qu’elle devrait de plus en plus influencer la vision du dirigeant. Penser utilisateur/client, et ne plus penser marché. Penser besoin, et ne plus penser chiffre d’affaire. Penser satisfaction et ne pas penser vente.

    Il ne s’agit pas ici de remettre en question la machinerie capitalistique, mais simplement de regarder le marché et de l’aborder sous un autre angle. Une autre vision. Une vision centrée utilisateur. Où, à l’instar d’un bébé, celui là devrait être satisfait dans ses moindres désirs.

    Vous riez ?

    Eh bien pourtant, sachez que c’est bien ce genre de philosophie qui anime les plans stratégiques d’un Uber, d’un AirBNB ou d’un Apple. Toutes ces sociétés pensent utilisateur avant de penser marché. Comment le satisfaire ? Comme lui complaire ? Comment lever toutes ses indispositions ? Comment lui rendre la moins contraignante possible la route jusqu’à sa satisfaction ?

    Je pense que beaucoup trop d’entreprises en France n’ont pas compris cela et perde des clients face à celles qui sont déjà entrées dans ce paradigme. Et je pense notamment à une entreprise avec laquelle chaque interaction que j’ai à titre personnel, me tire un sourire de satisfaction.

    C’est la MAIF.

    C’est bluffant.

    C’est absolument la seule entreprise avec qui je retire une expérience satisfaisante à chacun de mes contacts.

    Je ne me sens ni agressé commercialement. Je suis valorisé. Les personnes que j’ai au bout du fil ont toute l’air intelligente et de faire un métier qui les passionne. Leur site est simple, facile à utiliser, et mixe parfaitement le fameux couple humain/numérique.

    Non. Ce n’est pas un post sponsorisé par la MAIF 🙂

    Mais je vous invite vraiment à essayer.

    Cette entreprise est vraiment au niveau des Apple ou Amazon en terme d’expérience (ce que j’appelle UX dans un sens large du terme où le numérique se mêle au physique, et qui sont désormais deux dimensions indissociables de l’expérience utilisateur/client.)

    Conclusion

    Deux choses.

    Oui, je crois en l’UX en tant que force transformatrice. Mais non pas du capitalisme ou de l’entreprise dans son essence, mais bien comme manière de raisonner dans la manière d’aborder le marché, en prenant au premier rang des préoccupations de l’entreprise la satisfaction utilisateur.

    Lorsque beaucoup d’entreprises l’auront compris – et c’est au plus haut niveau que ça se passe – l’UX prendra une nouvelle envergure et sera une véritable méthode de pensée, plus équilibrée, pour créer de la valeur dans nos sociétés.


    Photo par Mark König

  • Améliorez votre design avec de la couleur !

    La couleur est l’un des outils les plus importants qu’un designer ait à sa disposition. Celle-ci donne le ton et influence la réception de l’image, attire l’attention des utilisateurs, joue sur leurs émotions et accroît la facilité de la prise en main. 

    À la découverte du disque des couleurs

    Le terme de couleurs désigne un certain mode de perception de différentes longueurs d’ondes. En 1666, le grand Isaac Newton identifie trois groupes de couleur :

    • les couleurs primaires : jaune, rouge, bleu,
    • les couleurs secondaires : orange, violet, vert (combinaisons des couleurs primaires) 
    • les couleurs tertiaires : jaune orangé, rouge orangé, rouge violacé, etc (combinaisons des couleurs primaires et secondaires). 

    Jusque là, rien de nouveau… Et Newton a placé les couleurs sur un disque afin de mettre en évidence les relations entre elles. 

    Parlons de la théorie des couleurs 

    Dans les arts visuels, on peut rencontrer diverses tentatives pour expliquer l’association des couleurs – connues sous le nom de théories des couleurs. Même si je ne compte pas vous faire un cours sur la théorie des couleurs (vous n’êtes pas là pour ça), il est important de savoir que cette théorie repose sur l’harmonie des couleurs : les couleurs doivent être associées de bonne façon. 

    Vous pouvez envisager les harmonies de couleur comme les fondations ou le modèle sous-jacent d’une palette de couleur. En voici quelques-unes :

    • l’harmonie d’analogie : des couleurs voisines sur le disque. Cette harmonie créée un léger contraste de couleur. 
    • l’harmonie de complémentarité : des couleurs opposées sur le disque, et qui produisent un fort contraste. 
    • l’harmonie de complémentarité adjacente : une couleur combinée avec deux couleurs se trouvant d’un côté et de l’autre de sa couleur complémentaire. 
    • l’harmonie triadique : trois couleurs équidistantes sur le disque des couleurs (à 120° les unes des autres). 
    • l’harmonie monochromatique : tons et nuances d’une seule teinte. 
    Visuel de Pinterest.

    Il existe d’autres harmonies qui mobilisent quatre couleurs. Cependant, plus vous introduisez des couleurs, plus il est difficile d’équilibrer et d’organiser la hiérarchie visuelle ! En clair, contentez-vous d’utiliser deux ou trois couleurs 😉

    Le sens des couleurs 

    Bien qu’on puisse trouver sur internet une kyrielle d’articles populaires parlant du sens des couleurs, on trouve peu de recherches fournissant la preuve d’un effet universel de certaines couleurs sur les émotions. En règle générale, même si, grâce à l’avènement de la mondialisation, certaines couleurs ont pu se voir attribuer un sens déterminé (par exemple le rouge pour “stop”), l’interprétation des couleurs varie d’une culture à une autre. Il faut aussi garder à l’esprit que certains individus atteints de maladies peuvent ne pas distinguer certaines couleurs. Je vous en ai d’ailleurs déjà parlé dans l’un de mes précédents articles dédié à l’UX et au daltonisme.  

    Si vous avez pour objectif de donner un sens particulier à votre design par le biais des couleurs, il vous faut :

    1. prêter attention au fait qu’il ne fonctionnera pas dans le monde entier  
    2. organiser des tests utilisateurs afin de vous assurer que votre interprétation des couleurs corresponde à celle de vos utilisateurs

    Employer les couleurs dans votre design 

    Les palettes de couleur sont des séries de couleurs qui ont été sélectionnées pour un projet particulier ou pour un ensemble de design. Chaque couleur est méticuleusement choisie et l’ensemble des couleurs vient mettre en lumière les produits et votre interface. 

    Création d’une palette de couleurs

    La création d’une palette de couleurs peut être un défi. Les directives suivantes vous aideront à créer une bonne palette de couleurs : 

    • Choisissez une harmonie de couleurs (parmi celles proposées ci-dessus) et itérez sur les couleurs individuelles. Un schéma monochromatique est généralement le plus facile à créer et appliquer, donc si vous n’avez aucune expérience des couleurs, commencez par cette harmonie. Une fois l’harmonie choisie, alternez les différentes couleurs pour voir comment elles fonctionnent et comment elles se présentent ensemble, jusqu’à obtenir une combinaison gagnante qui fonctionne correctement avec votre design. Bien sûr, on n’y arrive jamais du premier coup ! Si vous ne savez pas par où commencer, inspirez vous de palettes déjà existantes comme sur Adobe Color par exemple 😉 La technique, c’est aussi de comprendre pourquoi vous aimez un jeu de couleurs en particulier. Est-ce la saturation en couleurs ? La légèreté des couleurs ? Leur chaleur ou leur froideur ? Les réponses vous aideront à créer votre palette de couleurs !
    Après avoir réalisé plusieurs tests utilisateurs sur le site Fleurance Nature, l’entièreté de la charte graphique a été revue. Les couleurs ont été modifiées pour plus d’harmonie et de cohérence en lien avec les valeurs de la marque.

    Vous pouvez consulter notre étude de cas sur le sujet 😉
    • Limitez votre palette à trois couleurs. Un nombre limité de couleurs renforce la hiérarchie visuelle, ce qui distrait beaucoup moins l’attention des utilisateurs. Par exemple : avez-vous déjà passé un temps infini à rechercher une boîte spécifique de céréales dans les rayons du magasin ? Bien évidemment ! Et c’est tout simplement parce qu’on y trouve une ribambelle de couleurs ! Eh oui, toutes les couleurs sont en concurrence pour mobiliser votre attention. C’est la même chose dans les designs… Plus ou moins !
    • Restez dans le ton donné par votre couleur principale. Quand vous créez une palette de couleurs, suivez toujours les recommandations. Non seulement votre travail s’en trouvera facilité, mais en plus de cela l’expérience de marque en sera plus forte et cohérente.  Si vous n’avez pas de lignes directrices, regardez les designs existants et tentez de les incorporer dans votre palette. 
    Le site Le Page utilise une palette de couleurs monochromatiques minimales : noir, blanc et doré. Ce choix de couleurs permet aux utilisateurs de se concentrer sur les produits et les photos de produits.

    Utilisation de la palette de couleurs

    Une fois que vous avez votre palette de couleurs, il est temps de l’appliquer à votre design et de voir le résultat ! Voici quelques conseils :

    • Utilisez la règle des 60-30-10. Cette règle signifie tout simplement que les couleurs doivent être utilisées dans 60%, 30% et 10% de votre zone de conception. Utilisez 60% pour la couleur dominante, 30% pour la couleur secondaire et 10% pour une couleur d’accentuation. Ces proportions permettent de créer un équilibre parfait, et évite d’obtenir un ensemble coloré en désordre et chaotique ! En général, les couleurs dominantes et secondaires doivent être relativement neutres. Réservez la couleur d’accentuation pour les éléments que vous voulez faire ressortir, comme les call-to-action.
    • Appliquez puis itérez. Une fois la règle des 60-30-10 appliquée, modifiez vos couleurs afin d’améliorer l’esthétique et faire ressortir les éléments importants. Ensuite, posez vous les bonnes questions : 
    1. Vos choix de couleurs contribuent-ils à créer la bonne hiérarchie visuelle ?
    2. L’œil est-il attiré vers les éléments de votre conception que vous souhaitiez mettre en avant ?
    3. Vos choix de couleurs créent-ils un équilibre et un contraste dans votre conception
    • Utilisez les couleurs de manière cohérente dans votre interface. Si vous utilisez un bleu vif pour vos CTA sur une page, cette même couleur devra être appliquée sur les autres pages pour le reste de vos CTA. Si vous utilisez le rouge comme couleur d’avertissement sur une page, cette couleur ne doit pas être utilisée pour signifier autre chose sur une autre page. Eh oui, soyez cohérent ! Et qui dit cohérence, dit compréhension des couleurs par vos utilisateurs !
    Le site Heyme utilise trois couleurs (le bleu, le jaune et le rouge) qui contribue à la hiérarchie visuelle du site. Chaque couleur correspond à une offre, et comme on peut le voir, les éléments importants (CTA) sont tous de la même couleur : en bleu.

    Test de la palette de couleurs

    • Testez votre conception. Une fois que vous avez appliqué votre palette de couleurs à votre design, faites quelques tests d’utilisabilité.

      Pourquoi ? Tout simplement, parce que les couleurs peuvent modifier l’efficacité des boutons, des liens ou de tout autre type d’éléments. Prenons l’exemple des fameux boutons gris qui semblent parfois désactivés alors qu’ils ne sont pas censés l’être. Vérifiez également les problèmes de lisibilité et d’accessibilité, liés à la fois au contraste et au daltonisme. Vous pouvez utiliser accessible-colors.com pour tester l’accessibilité de différentes combinaisons texte-fond.

      De plus, si vos tests d’utilisabilité suggèrent que certaines de vos couleurs de tiennent pas la route, revenez en arrière et reprenez dès le début.
    Sur le site du Printemps.com, la couleur verte « flashy » empêche une lisibilité correcte, et aïe aïe aïe les yeux de l’utilisateur…

    Le choix d’une palette de couleurs et son application à votre design ne sont pas de simples accidents heureux ! Il faut de la répétition et une application minutieuse pour réellement tirer profit de la couleur sur votre interface utilisateur. Une utilisation appropriée des couleurs peut améliorer la perception que les utilisateurs ont de votre marque, attirer l’attention, encourager les interactions, et avoir un impact sur les émotions des utilisateurs 😉

    Via : Using Color to Enhance Your Design

  • Tout savoir sur les menus de navigation verticaux !

    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.

    Le menu vertical de Brico Depôt propose des catégories et sous-catégories précises de manière à bien orienter l’utilisateur.
    • 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.

    Le menu vertical du site la Fnac permet de proposer un nombre important de catégorie aux utilisateurs.
    • 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 😉

    Visuel issu du BDM.
    • 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 ! 

    Sur le site Exaprint, réalisé par Wexperience, les choix de conception visuelle sont les mêmes sur desktop que sur mobile. On retrouve dans le menu les mêmes catégories.

    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 😉

    Le site du restaurant Big Mamma utilise des couleurs qui contrastent avec le fond « grisé » du site de manière à avoir un menu de navigation bien visible.
    • 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é.

    Le site d’échec Chess propose à ses utilisateurs un menu vertical avec des icônes, mais il est possible d’y ajouter via une option les libellés, ce qui est une excellente chose pour les joueurs débutants qui ne connaissent pas encore l’interface.
    Icônes et libellés du menu.

    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

  • Comment les internautes regardent-ils les pages web mobiles ?

    On a mené une étude sur plusieurs sites de e-commerce depuis le mois de janvier et ce que nous avons découvert est vraiment très intéressant.

    L’eye-tracking

    Grâce à l’outil de eye-tracking que nous avons utilisé, nous avons pu regarder comment les internautes français regardaient les pages web et ce que nous avons pu voir avec cet outil nous a conforté dans nos convictions, mais nous a également fait découvrir comment cela se passait, en réalité, quand un internaute interagit avec une page sur son mobile.

    Comme nous l’ont appris les études de eye-tracking de NNG Group, les internautes ont l’habitude de picorer du regard une page à la recherche d’informations qui pourraient leurs être utiles. Exactement comme lorsque l’on fouille du regard la pelouse à la recherche d’œufs en chocolat.

    Sauf que ce ne sont pas des œufs en chocolat que l’on trouve, mais des indices, des informations, qui vont nous permettre d’avancer dans nos objectifs. Objectifs, d’ailleurs, pas toujours très conscients.

    Pour cette raison, il est assez facile de comprendre comment doit être construite une page web. Notamment dans sa structure.

    3 conseils rapides :

    • D’une certaine manière, la page doit être simple et ne pas présenter trop d’objets à visualiser en même temps. Une photo, un texte, un bouton, cela suffit déjà amplement.
    • Bien sûr, une page web, c’est toujours plus compliquée que cela et il y a forcément besoin d’y mettre beaucoup plus d’informations. C’est pour cette raison qu’il faut vraiment apprendre à hiérarchiser l’information pour que toutes les informations ne puissent être découvertes qu’au fur et à mesure de la fouille.
    • Il y a aussi un ordre du regard. Les habitudes des internautes sont prises sur les sites ou les applications qu’ils utilisent le plus souvent. Dans leurs têtes, ils finissent par former des schémas mentaux qui constituent, ce à quoi ils s’attendent lorsqu’ils vont visiter un nouveau site. Pour cette raison également, il est donc extrêmement important de connaître ces schémas mentaux et d’y adapter votre interface. Pourquoi faire ? Eh bien, tout simplement pour leur épargner de la sueur et leur faciliter le chemin vers leurs objectifs.

    Exemple de ce que risque de voir un utilisateur :

    Les 3 points que vous voyez correspondent aux 3 points que l’utilisateur voit lorsqu’il arrive sur la page.
    Même si l’utilisateur voit toute la page d’un coup, son cerveau a déjà été attiré par les points saillants de la page.

    Comment se visualisent ces enseignements ?

    Vous pouvez le découvrir grâce à l’un de nos précédents webinars, en compagnie de Wam-réféfencement, intitulé « De Google à la page de paiement, comment les Français achètent en ligne !? ».

    Nous vous donnons 4 conseils exclusifs pour construire des interfaces web performantes qui facilitent la navigation et rendent plus facile à atteindre les objectifs des internautes.

  • Les headers sticky : 5 façons de les améliorer !

    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 cet exemple, on remarque que la taille header du site Decathlon est correctement adaptée. Le header ne gêne pas la lecture de la page, contrairement à celui du site Lollar Guitars.

    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

  • La recherche avant la recherche : la sélection de mots-clés !

    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é. 

    Résultats Google Shopping pour la recherche « Long Cardigan ».

    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. 

    Options de filtrage sur Boulanger qui permettent à l’utilisateur de trouver facilement le bon produit.

    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.

  • L’expérience utilisateur des sites d’immobilier

    En complément de notre webinar dédié aux sites d’immobilier, voici un petit laïus sur l’UX des sites immobiliers…

    Des sites pas franchement innovants

    A n’en pas douter, la recherche d’un bien immobilier s’est trouvée grandement facilitée par les immenses possibilités du Web. Or, étonnamment, le marché n’a pas été franchement innovant dans ce domaine. Leboncoin et Seloger semblent se disputent largement le marché, mais en terme d’expérience utilisateur, on ne peut pas dire que ces deux sites envoient du rêve, comme on dit. Même si ils ont chacun développé des fonctionnalités spécifiques à la recherche de biens immobiliers, ils n’atteignent pas, loin de là, le firmament de l’expérience digitale. Au contraire même, tout reste extrêmement planplan, ennuyeux, compliqué, fastidieux, sans compter les pléthores de photos mal prises au téléphone, les textes parfois, il faut bien le dire, pathétique des agences immobilières, tentant de faire de la littérature, mais avec des réussites plus que mitigées.

    Ok, ok, je suis méchant, mais qui aime bien châtie bien, et je ne maudis pas la profession d’agent immobilier, je constate simplement que la qualité de l’expérience n’est souvent pas au rendez-vous sur la plupart des sites immobiliers, faisant régresser les avantages du digital par rapport au papier.

    L’inspiration vient des sites haut-de-gamme

    Évidemment, il suffit d’aller chercher sur les sites haut-de-gamme qu’on trouve parfois (en cherchant bien sur Google) pour rencontrer des expériences un peu plus riantes, avec des photos prises par des professionnels, des mises en page un peu plus classieuses, et des textes sobrement, mais efficacement rédigés. Mais cela reste l’exception et j’ai un peu du mal à comprendre pourquoi le tout-venant reste aussi désespérément aussi séduisant qu’un flyer publicitaire pour mon boucher d’à côté.

    Il y a bien bienici.com qui a permis de franchir un nouveau cap avec notamment l’inclusion d’une carte en 3D (mais qui n’apporte pas franchement grand chose en terme d’information), et une mise en page un peu plus fonctionnelle que celle de Seloger, mais tout cela reste très technique, et pensé par des informaticiens plutôt que par de vrais UX.

    Et c’est bien dommage !

    Et l’Amérique ?

    Il y a longtemps, j’avais écrit un ou deux articles sur ce qui se faisait sur le continent nord-américain, toujours en avance d’un cran, par rapport au marché européen. Mais ce qui se fait là bas n’infuse que lentement ou pas du tout chez nous… Sans doute à cause d’un autre rapport à l’immobilier, les américains, je pense savoir, déménageant beaucoup plus souvent que les européens, réminiscence de la culture du colon.

    Que faudrait-il faire pour améliorer l’UX des sites immobiliers ?

    Nous le verrons mardi, mais en attendant, je peux vous donner mes quelques idées simples à mettre en oeuvre. Qui ne ressortent pas vraiment de la disruption, mais font plutôt assaut de simple bon sens, ou du moins de simples bonnes règles basiques permettant de rappeler ce que sont, justement, les basiques du ecommerce.

    Quelques recommandations

    Faites vraiment de belles photos !

    En immobilier comme en retail, le merchandising compte et l’apparence des choses attire ou repousse le regard selon le soin que l’on prend à le faire. Stop aux photos au flash vignettées et mal colorées ! Stop au chien-chien à sa mémère qui apparait subrepticement dans le coin d’une pièce ou dans l’entrebâillement d’une porte ! Stop aux annonces sans photo de façade ou de situation ! Les photos sont la première impression d’un bien. Et même si parfois, elles ne plaident pas en faveur du produit, alors demandez-vous bien quels sont les points forts de ce produit (il y en a forcément) et mettez-les en avant. Et si, comme tout le monde, vous utilisez un smartphone pour prendre vos photos, apprenez à les recadrer et à les mettre à l’horizontal dans un grand format. C’est un minimum.

    Textes : pas besoin d’être littéraire.

    Soyez factuel ! Les textes à la première personne sont à proscrire… « Je suis une belle demeure… » Non, ce que les gens veulent savoir, c’est ce qu’ils ne peuvent pas voir sur les photos, et ce sont des informations qui complètent une information visuelle.
    Soyez riche en informations, mais ne collez pas le tout dans un bloc sans aucune mise en forme. Rien de mieux pour rejeter le regard. Travaillez votre mise en forme selon les règles d’écriture du Web, bien définie maintenant depuis plus de 20 ans, et dont on se demande pourquoi si peu de gens les connaissent encore de nos jours.

    Simplicité : mon mantra depuis toujours.

    Votre interface doit être simple, épurée, sans être inondée d’éléments graphiques disparates, et, si possible sans bannières publicitaires. Offrez un espace de respiration et de tranquillité pour amener vos utilisateurs à s’engager et à rester plus longtemps. Que ce soit pour Seloger ou Leboncoin, la fatigue nerveuse arrive toujours rapidement tant ces sites sont surchargés d’informations visuelles hétéroclites… Or, fatiguer vos futurs clients n’est pas ce que vous voulez… Mais bien de les mettre en confiance et de leur donner le plaisir de rêver à vos biens.

    Navigation : ne vous éloignez pas des standards

    J’insiste sur ce point. J’ai vu de nombreux sites immobiliers sur lesquels la navigation et la recherche tombaient dans des schémas alambiqués… Non ! Là encore, il faut faire simple et classique. Les internautes ont des habitudes, qu’il ne faut pas tenter de rompre ou de changer. Beaucoup s’y sont cassés les dents. Adoptez une présentation simple, à l’instar des leaders du marché et ne tentez pas des effets qui pourraient avoir l’air séduisant, comme des animations au survol ou au scroll… contentez-vous d’arranger vos produits comme sur une belle étagère, cela sera déjà largement suffisant.

    Soignez vos demandes de contact

    Là, je parle par expérience personnelle. Pourquoi les gens des agences ne répondent jamais aux demandes des sites ? Une boîte email se consulte tous les jours et les réponses doivent se faire le plus vite possible. L’internaute est par nature impatient, il a besoin de réponse tout de suite. Une demi-journée est presque déjà trop longue pour répondre. Créez-vous des alertes et soyez réactifs. Cela peut réellement se révéler productif !

    Conclusion : de la marge pour innover

    J’ai l’impression que l’immobilier est un secteur qui tire encore assez peu parti des possibilités du numérique. Peut-être n’en a-t-il pas besoin, mais ma conviction est contraire. Je crois encore qu’il est possible d’inventer quelque chose sur ce marché, bien qu’il paraisse évident qu’une démarche innovante soit difficile à résoudre économiquement. Mais comme on dit, qui ne tente rien, n’a rien. Alors, à vous d’inventer quelque chose de nouveau, il en ressortira peut-être des merveilles 🙂 L’immobilier attend toujours son « disrupteur » !

    Photo par Tierra Mallorca

  • Susciter des émotions positives via des stratégies de surprise et de ravissement

    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 AcademyCe 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.

  • Ne jamais faire passer le plaisir de vos utilisateurs au second plan !

    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.

  • Une expérience de navigation optimale ? Voici les clés !

    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.
    Le soulignage montre bien que l’utilisateur se trouve dans « Notre carte », et le contraste de couleur signifie qu’il se trouve plus précisément dans les « Nouveautés ».
    • 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.
    Decathlon indique à l’utilisateur où il se trouve via les étiquettes situées en haut à gauche : Decathlon > Homme > Vêtements > Pantalons.
    • 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. 
    Sur Wexperience, une fois arrivé en bas de page, le menu de navigation est toujours visible et accessible.

    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.
    La Redoute propose ici un sous-menu pour présenter les différentes catégories existantes dans la rubrique « Maison » du menu principal.
    • 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.