Agence WEX

Blog

  • Recrutement pour tests utilisateurs – profils marketing et design

    Wexperience est à la recherche de 10 personnes :

    Pour la réalisation d’une série de tests utilisateurs, nous recherchons 10 personnes travaillant dans le secteur de l’ameublement et de la décoration d’intérieur. Nous souhaitons recueillir vos impressions sur un outil de création de visuels d’ambiance pour vos supports de communication (ex : site e-commerce, catalogues, réseaux sociaux…)

    Que vous soyez indépendant ou salarié, votre profil nous intéresse :

    • Designer produit
    • Créateur
    • Directeur artistique
    • Graphiste

      Mais aussi :
    • Responsable marketing
    • Chargé de communication
    • Directeur innovation
    • Merchandiser
    • Chef de produit…

    🕚 Date & lieu :

    • Ces tests auront lieu le 14 et 15 septembre, pour une durée de 45 min maximum. Ils seront réalisés à distance, via un outil de visio (ex : Google Meet, Zoom…)
    • Ces tests peuvent avoir lieu sur une autre date si nécessaire.

    💸 Récompense :

    Pour votre participation, vous recevrez 80€, alors si l’expérience vous intéresse, vous n’avez qu’une seule chose à faire, remplir le formulaire ci-dessous 👇

    Et si vous n’êtes pas disponible, n’hésitez surtout pas à partager l’info sur vos réseaux 😘

  • L’UX pour sauver la planète !

    Vous préférez écouter que lire ? Par ici 👇

    J’avoue que mon titre peut paraître un brin racoleur … 😊

    Les UX Designers et les concepteurs d’interface ont-ils réellement un rôle à jouer dans la préservation de l’environnement et la lutte contre le réchauffement climatique ?

    Le rôle des UX Designers

    Pour Tom Greenwood, auteur de Sustainable Web Design, cela ne fait aucun doute. En une centaine de pages, il décrit toutes les manières et techniques possibles pour rendre plus « légers » nos sites webs et applications. Plus légers : c’est à dire moins gourmands en énergie. Moins gourmands en énergie signifiant, moins consommateurs de ressources et moins émetteurs de CO2. Objectif principal aujourd’hui de l’écologie.

    Et il y a urgence ! Hier le GIEC, que tout le monde connait bien maintenant, publiait un énième rapport nous alertant sur l’urgence climatique.

    Oui, donc, les UX designers ont bien un rôle à jouer dans cette affaire qui devrait tous nous préoccuper. Mais la véritable question selon moi est : jusqu’où doit-on aller, en tant que concepteur d’application numérique, dans l’optimisation écologique ?

    Si l’on suivait à la lettre chaque recommandation de Tom Greenwood, il y aurait un très fort risque que tous les sites et applications se ressemblent et donnent une impression lancinante d’une immense monotonie. Mettant à bas toute la créativité graphique, la beauté du numérique, ses infinies possibilités. Et parfois, en occultant bien sûr, ses aspects marketings.

    Ça y est, j’ai lâché le gros mot.

    Environnement et marketing, pas compatibles ?

    S’il semble évident bien sûr qu’il faille réduire le code inutile, alléger les médias, réduire le nombre de vidéos, et encore bien d’autres actions… certaines recommandations paraissent antinomiques avec les impératifs de la vente en ligne : utiliser des fonds noirs, qui utilisent moins d’énergie… Afficher des images basses résolution en noir et blanc ou en monochrome. Remplacer les vidéos par des animations. Ne pas se servir de fontes personnalisées.

    Une frontière existe, fine, entre les impératifs de séduction commerciale et la préservation de l’environnement. Mais, avouons-le franchement, elle n’est pas facile à définir.

    Quels choix faire quand on veut appliquer les principes de l’éco-conception, mais que l’on doit également répondre à des impératifs de vente… et donc de séduction ? Quand on connait l’importance d’une photo dans le choix de l’utilisateur, il semble à peu près hors de question de les publier en basse définition ou en trame de couleur.

    La réponse à la question passe par la définition de l’UX : satisfaire un maximum les utilisateurs en leur fournissant des expériences claires, rapides, amusantes et efficientes. C’est le même mantra dont je parle depuis des années.

    Alors… bon… là, vous allez me dire que cela revient à ne rien faire du tout…

    Eh bien, non, en fait, car je crois que, la plupart du temps, comme des enfants gâtés, nous concevons des sites et des applications sans prêter la moindre attention à leur optimisation technique.

    Optimisation technique

    Il y a un vrai travail à réaliser en ce sens, dont je m’étais déjà fait l’écho dans un article sur l’optimisation de la performance des sites mobiles.

    Réduire le code inutile, l’optimiser, devrait être une de vos obsessions principales. Mais qu’est-ce que cela veut dire, plus prosaïquement ?

    • supprimer les scripts redondants
    • supprimer les scripts qui sont téléchargés, mais ne servent à rien
    • compresser le code envoyé au navigateur (css et javascript)

    D’autres choix peuvent être faits :

    • choisir un hébergeur proche de vos clients afin de réduire la distance entre vos données et leurs destinataires
    • utiliser de l’énergie peu émettrice de CO2. De ce point de vue là, nous avons de la chance en France… nous sommes dans un pays qui produit une des électricités les plus décarbonés du monde (avec le nucléaire, mais ne vous énervez pas)

    Quelle est la limite de ces optimisations ? Il n’y en a pas. Ce qui est une bonne nouvelle. Vous pouvez y aller à fond. Ça ne fera qu’améliorer votre UX et baisser vos émissions de CO2.

    Optimisation du design

    Parallèlement à ce travail, il faut aussi s’intéresser fortement à la compression des images qui sont, quand on mesure le taux d’émission en CO2 d’un site, les plus grosses pourvoyeuses de carbone. À la vérité, les images sont même le problème principal. Ce sont les plus gourmandes en bande passant et celles qui font travailler le plus le processeur de nos machines (téléphones et ordinateurs). Lutter contre leur surpoids doit donc être un devoir, une mission presque sacrée 🙂

    Jusqu’où les médias doivent être optimisés ?

    C’est difficile de le dire. Une chose est certaine, il faut faire un véritable travail de recherche et déterminer où et quand la compression des images dégrade nettement ou pas leur qualité. Il existe de nombreux formats de compression qui s’améliorent avec le temps, et notamment des formats spécifiques au web comme le WEBP, 30% plus léger que le jpeg à qualité égale… ou encore le AVIF (encore peu répandu), 50% plus léger que le WEBP. Gageons que ces algorithmes se perfectionneront encore plus avec le temps.

    Ce qui est intéressant dans ces actions d’optimisation, c’est qu’elles vont toutes non seulement dans le sens de la réduction d’émission de CO2, mais aussi de celui de l’amélioration de l’UX. Plus un site est léger, plus il est rapide à charger, meilleure et plus agréable sera la navigation. Ce de côté là, rien de nouveau, finalement, sous le soleil.

    Mais si je reviens à mes moutons, et à ma fameuse frontière… je n’ai toujours pas défini où elle devait réellement se trouver.

    Un indicateur intéressant

    Je trouve qu’il existe un indicateur intéressant qui pourrait bien nous permettre d’y voir un peu plus clair à ce sujet. C’est un indicateur qu’utilise aussi Google, le maître de ce monde numérique. Avec les fameux Core Web Vitals, il a défini un certains nombres de paramètres censés mesurer la qualité de l’UX. Je ne discuterai pas de leur pertinence, mais me permettrais d’attirer votre attention qu’ils sont, pour certains, basés sur un postulat : au delà d’une seconde de chargement, l’utilisateur ressent de la lenteur. Et l’utilisateur, la lenteur, il n’aime pas ça. Il veut du fluide, du réactif, pas de la bave de limace visqueuse qui s’écoule laborieusement entre les doigts.

    Ce « une seconde » provient de recherches scientifiques ancestrales, mais est bien attesté par de nombreux experts. Et l’on pourrait le traduire par : faites que toutes les pages de votre site s’affichent dans un délai inférieur à cette limite quelque soit le terminal et la vitesse de connexion de votre utilisateur.

    Sortez de votre grotte de digital native

    Ce qui fait qu’à ce stade, vous l’aurez compris, il va vous falloir sortir de votre grotte de digital native ou d’expert du numérique, de prendre votre vieux portable et d’aller faire un séjour au fin fond de la Corrèze. Là où la bande passante est aussi rare qu’une averse dans le désert.

    C’est un drame, et je le répète depuis des années, nous, concepteurs d’interface, ne faisons pas assez attention au monde qui nous entoure, et surtout à ceux, qui, contrairement à nous, ne sont pas équipés de fibre optique à 300Mo/s, de 4 ou de 5g sans limitation de forfait, ou d’iPhone dernière génération. Dans la nature, partout, le monde de nos utilisateurs est varié et pourtant nous concevons des sites comme si chaque utilisateur était armé pour le numérique avec une fusée intergalactique.

    C’est très loin d’être le cas, et il suffit souvent de regarder autour de soi (sa famille, par exemple) pour s’en rendre compte.

    Là, se trouve une véritable source d’optimisation, mesurable, et positive pour la planète.

    Concevons pour du mauvais matériel et de la mauvaise bande passante !

    Vous allez me dire que j’exagère.

    Pas tant que ça, au fond.

    Je crois que se dire que si toutes les pages d’un site sur un iphone 4 en 3G se chargent en moins de 3 secondes, nous aurons réussi quelque chose de bien pour les gens et pour la planète sur laquelle ils vivent.

    Tout en préservant le travail de conception et de design de notre site, si nous le passons à la moulinette de l’iphone 4 et de la 3G, nous pourrions bien être capables, nous designers, de bien remplir notre rôle de sauveur de la planète (la notre, pas Mars, pas encore, même si Elon Musk y travaille).

    Il faut donc étendre notre domaine de réflexion. En 2021, nous savons très bien créer des sites attractifs, amusants, facile à utiliser, efficients, mais… nous ne savons pas encore bien… ou nous ne passons pas encore suffisamment de temps à réduire leur impact environnemental.

    S’en préoccuper revient à faire un petit effort, conjoint, entre développeurs et designers, pour créer des interfaces non seulement plus légères, mais aussi plus inclusives. L’effort à accomplir ne semble pas si important que cela, et le surcoût de cet effort pourrait vite être absorbé par les bonnes habitudes obtenues.

    Alors, est-ce qu’on va tous s’y mettre ? (à sauver cette bon dieu de planète) 🙂

    Photo de l’article par Qingbao Meng

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

    Animation Dribble par Sarah Tanner.

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