Agence WEX

Catégorie : Actualités

  • Quel ecommerce pour la crise ?

    Le retour au confinement dans notre pays marque à nouveau la nécessité de produire des expériences digitales parfaites pour les clients des entreprises, que ce soit en B2C ou en B2B .

    Pourquoi cette nécessité ? Parce que le temps passé devant nos smartphones et devant nos ordinateurs va encore exploser. Créant pour nous tous une extraordinaire tension cérébrale pour laquelle nos cerveaux n’ont pas été conçus.

    Imaginez… et souvenez-vous qu’avant l’ère d’Internet, nos moyens de nous connecter entre nous étaient beaucoup moins intrusifs et oppressants. Nous n’étions pas soumis à cette pression permanente des notifications qui existe aujourd’hui.

    Animation by Michiel Kloppenburg.

    Mails, SMS, chats, alertes sur notre smartphone, conversations dans Slack, vidéo conférences, mobile/desktop, téléphone… Chaque journée devant un ordinateur ou un smartphone nous voit recevoir plusieurs dizaines, voire plusieurs centaines d’inputs auxquelles, la plupart du temps, nous nous sentons obligés de répondre, du moins d’aller regarder, perturbant en permanence notre activité principale.

    Cette occupation permanente de notre cerveau a un réel impact sur notre capacité de concentration, et, in fine, de notre capacité d’attention. Cette fameuse capacité, dont les réseaux sociaux, se sont fait fort d’en accaparer la majeure partie. Mais ce n’est pas tout.

    Volonté de ne plus lutter avec les interfaces !

    Les conséquences de cette sollicitation permanente se font aussi ressentir sur la manière dont les utilisateurs/consommateurs/clients surfent sur les sites webs en diminuant chez eux de plus en plus leur envie de « lutter » avec une interface.

    Quand j’utilise le terme de « lutte », c’est bien parce que j’estime que le fait de devoir parfois comprendre ce qui se passe sur un site, le fait de devoir chercher dans son cerveau des solutions pour arriver à le faire comprendre ou pour arriver à accomplir une action, s’apparente de plus en plus à une lutte, à un combat, que l’utilisateur cherche de plus en plus à éviter, et qu’il cherchera de plus en plus à éviter à l’avenir, car, aujourd’hui, abandonner une tâche en cours sur un site, n’est pas un problème, car il y a toujours mieux ailleurs.

    Autrement dit, instinctivement, de plus en plus, les utilisateurs n’hésitent pas à passer d’un site à l’autre, d’un ecommerce à l’autre, d’un eservice à l’autre, si l’un d’entre eux les obligent à lutter et à essayer de « comprendre » l’interface. Pour cela, il n’a plus la force ni l’envie, et la profusion que lui offre Internet, lui permet facilement d’aller trouver les sites qui lui demandent le moins d’efforts.

    Et le contexte du confinement par lequel nous devons à nouveau passer va encore accentuer ce comportement de « batifolage » facile d’un site à l’autre jusqu’à trouver celui qui offrira l’expérience lui demandant le moins d’efforts pour trouver un produit ou passer une commande.

    Les ecommerçants, ou les entreprises qui ne sauront pas offrir cette facilité, cette simplicité, ou cette efficacité de leurs interfaces, seront celles qui ne sauront pas profiter du confinement, ou, du moins, qui ne sauront pas se « sortir de l’eau » du confinement en obligeant leurs clients à vivre des expériences négatives.

    Offrir des expériences qualitatives, ce n’est plus une option, mais une nécessité !

    On l’a déjà vu lors du premier confinement. Les entreprises qui pouvaient délester une partie de leur activité sur le numérique ont bien mieux su tirer leur épingle du jeu que celles qui ne le permettaient pas. On pourrait même jusqu’à dire que celles qui n’ont pas pu passer au canal numérique rapidement et de manière optimale n’ont pas sur franchir le cap du confinement. Et cela sera à nouveau vrai durant cette nouvelle période.

    Dans ce contexte de surutilisation du digital ou du numérique par les consommateurs/utilisateurs, offrir des expériences qualitatives ne relèvent pas d’un luxe, mais bien d’une nécessité vitale. Exposer ses clients à des bugs, des mystères dans la compréhension de l’interface, de la complexité les conduit inexorablement à aller vers les plus offrants en terme d’UX. Et croyez-moi, ils existent. Ce sont les leaders du marché : Amazon, Fnac, Boulanger, et quelques autres encore, qui, depuis des années, consacrent des budgets conséquents à analyser et comprendre l’expérience utilisateur.

    Toutes ces marques ont su franchir allégrement le cap du premier confinement et elles passeront allégrement le cap du deuxième confinement, en gagnant même des parts de marché et en distanciant encore plus leur concurrence. Parce qu’elles ont compris depuis longtemps qu’offrir une bonne expérience utilisateur n’était pas une lubie venue d’ailleurs, mais bien une nécessité impérieuse, aussi impérieuse que celle d’offrir des services numériques capables de suppléer et de compléter même leurs services physiques.

    Est-il déjà trop tard pour les marques qui auraient oublié d’investir dans l’UX ?

    Oui et non. Mais quelque soit la situation d’une entreprise, il est temps aujourd’hui qu’elle se penche sérieusement sur la qualité de ses expériences utilisateurs, sous peine, encore une fois, de voir ses clients s’éloigner ailleurs, vers des concurrents offrants de meilleures expériences.

    Et cet enjeu, cet aspect de la dimension numérique de vos services doit se travailler aujourd’hui et de manière permanente. Mettre l’UX au centre de sa stratégie business est devenu incontournable. 😉

  • Pourquoi l’application TikTok est-elle si addictive ? L’explication UX !

    TikTok compte aujourd’hui plus de 500 millions d’utilisateurs. En effet, elle est devenue l’une des plus grandes plateformes de divertissement, et surtout l’une des plus téléchargées en un temps record.

    Et si de nombreuses applications similaires à TikTok ont vu le jour au cours de ces dernières années comme Dubsmash ou encore Vine, elles n’ont jamais été aussi populaires !

    Qu’est-ce qui donc fait que l’application TikTok marche si bien ? Qu’est-ce qui la rend meilleure que les autres ? Pour répondre à cette question, regardons du côté UX ce qui se passe 😉

    Le niveau d’engagement

    Tout utilisateur de TikTok, ou même juste ceux qui connaissant l’application, connaît son mode de fonctionnement. Faire défiler le plus possible de vidéos, encore et encore ! Le niveau d’engagement sur Tiktok est encore plus élevé que sur Netflix. En effet, après chaque vidéo, Netflix donne au moins 5 secondes pour que la vidéo suivante démarre, mais sur Tiktok, c’est pire ! Un véritable cercle vicieux ! L’application fait tourner en boucle la même vidéo jusqu’à ce que l’utilisateur interagisse avec elle.

    C’est ce design interactif qui en fait une application si populaire. Et pour la génération actuelle, la communication n’est plus entre un communiquant et un public, elle est entre un utilisateur et la technologie, autrement dit, une interface.

    En fait, la technologie contrôle nos sentiments, c’est aussi pourquoi un utilisateur attend de la technologie qu’elle communique avec lui et l’interface de TikTok répond parfaitement à ce besoin.

    Notre esprit observe en permanence des modèles visuels et nous communique ensuite le comportement de telle ou telle application. L’attention des utilisateurs est limitée, c’est pourquoi moins il doit faire attention, meilleure est la communication. L’interface de TikTok permet aux utilisateurs d’accorder une attention très simple mais aussi très rapide aux informations importantes comme le profil, le partage, les commentaires, etc.

    Une interface utilisateur super simple

    En arrivant sur l’interface, l’utilisateur tombe sur un flux de vidéos. Et plus il fait défiler la page, plus des vidéos correspondant à ses intérêts, ses préférences, lui sont proposées. On retrouve cette technique sur de nombreuses applications, mais TikTok l’utilise d’autant plus ! L’application encourage davantage l’utilisateur à faire défiler les vidéos, encore et encore.

    La chose la plus innovante de cette application est la possibilité de regarder des vidéos sans s’abonner à telle ou telle personne.

    La fidélisation des utilisateurs

    Afin de fidéliser les utilisateurs de l’application, TikTok fait en sorte de rendre la création de contenu facile, interactive et créative. En effet, TikTok produit un contenu basé sur le modèle du contenu généré par l’utilisateur, ce qui permet aux utilisateurs de leur rester fidèles.

    En plus de cela, l’application offre aux utilisateurs la possibilité d’ajouter à leur compte d’autres profils réseaux sociaux, ce qui permet de promouvoir facilement une chaîne YouTube, un profil Instagram ou une page professionnelle. Certains utilisateurs affirment que cette fonctionnalité leur a permis d’attirer plus de trafic sur leurs autres réseaux sociaux !

    La création de contenu sur TikTok, il n’y a rien de plus simple ! Pourquoi ? Grâce à la présence de fonctionnalités qui simplifie la création : reconnaissance faciale, filtres personnalisés, collaboration vidéo, montage vidéo simplifié, ajout d’un large choix de musique possible, etc. Ces fonctionnalités permettent aux utilisateurs de gagner du temps lors de montage vidéo, et leur apportent ainsi un sentiment d’excitation pour créer davantage de contenus 😉

    La suggestion de bandes son personnalisées

    Grâce à un algorithme, TikTok propose à ses utilisateurs de découvrir une multitude de vidéo mais également de bandes son personnalisés pour aider les utilisateurs à créer du contenu, pour les aider à trouver de l’inspiration !

    Aussi, la page audio permet aux utilisateurs de savoir le nombre de personne qui a déjà créé du contenu à partir de telle ou telle musique. Si des milliers d’utilisateurs ont créé une vidéo à partir d’une bande son particulière, de nombreux créateurs de contenu voudront en faire de même ! Les utilisateurs voit cela comme un défi 😉

    Pour conclure cet article, vous l’aurez compris, TikTok utilise de nombreuses techniques pour satisfaire ses utilisateurs dans le but de les rendre addicts et de les faire revenir encore et encore. Et ce n’est pas la seule application à le faire ! On vous conseille par exemple de consulter notre article sur la stratégie de recommandation Netflix 😉

    Via UX Planet : What makes Tiktok so addictive ?

  • 5 bonnes pratiques issues de grandes chaînes de restauration pour améliorer l’UX !

    Avec la crise sanitaire du Covid-19 qui montre que les clients font de plus en plus appel aux commandes en ligne, les sites web des restaurants doivent devenir d’impressionnantes interfaces numériques avec lesquelles interagissent les clients ! En effet, ce contexte les oblige à repenser leur interface, à réorganiser leur application mobile, en bref, à les rendre meilleures.

    Pour cela, on vous présente 5 conseils à mettre en oeuvre pour que les restaurants améliorent leur l’expérience utilisateur 😉

    1/ Avoir une interface responsive n’est plus une option

    Prenons l’exemple du restaurant In-N-Out-Burger. En plus d’avoir réussi à mettre en place un design moderne,  ils ont réussi à concevoir une interface responsive, c’est-à-dire qui s’adapte à toutes les tailles d’écran. Les utilisateurs peuvent donc, à partir de n’importe quel support (ordinateur, tablette ou mobile) regarder les menus proposés et passer une commande en toute tranquillité 😉

    Voici l’exemple de leur interface mobile : 

    2/ Proposer des animations attractives

    Les utilisateurs aiment se trouver face à une interface qui retient leur attention. Pour cela, rien de plus simple ! Vous pouvez faire appel aux animations. En effet, en plus de susciter l’intérêt, ces dernières rendent l’expérience utilisateur plus agréable, car attractive. Elles permettent de tuer le principe de “l’aversion pour l’oisiveté”. (Si ça ne vous dit rien, vous pouvez consulter notre article sur Uber 👌)

    C’est ce que fait Domino’s Pizza avec son “Live Tracker Pizza” ! Après avoir commandé vos délicieuses pizza, une animation apparaît et permet de suivre en temps réel sa préparation de votre commande. Désormais, on peut même observer son livreur pédaler jusqu’à chez soi. 

    Voilà donc une petite astuce pour faire patienter les utilisateurs de manière plus agréable ! 

    3/ Soigner les visuels du site internet

    L’image de marque a toute son importance, et les concepteurs peuvent participer à son élaboration grâce à l’aspect visuel qui permet de garantir une certaine cohérence ! 

    La très célèbre chaîne de restauration Burger King parvient avec succès à se démarquer et à s’imposer sur le marché des fast food de par son originalité, ses packaging, ses phrases amusantes, et donc sa personnalité !

    Burger King offre par exemple à ses clients, via son application mobile, une présentation des offres qui s’avère plus qu’attrayante ! Colorée, précise et détaillée, cette présentation séduit et donne envie, ce qui permet de faire augmenter les ventes !

    Chaque produit est accompagné d’un visuel de bonne qualité, et c’est un excellent moyen pour mettre l’eau à la bouche des clients ! Les détails textuels ont également leur importance, ils informent les clients et les aident dans leur choix.

    4/ Retranscrire l’ambiance du restaurant

    Si les visuels ont toute leur importance, comme dit précédemment, c’est aussi parce qu’ils permettent de retranscrire une ambiance, un décor, une atmosphère. L’utilisateur apprécie toujours de pouvoir se sentir, à travers une interface, dans un lieu particulier. 

    Prenons l’exemple de Big Mamma. Tout le monde connaît ces restaurants à l’architecture travaillée, aux cuisines ouvertes,  aux décors vintage mais à la fois tendance ! L’identité de ce restaurant est minutieusement travaillée, et cela se reflète sur l’interface web qui nous plonge dans un univers qui leur est propre. Mais ce n’est pas tout !

    Si ce groupe français de restaurants italiens fait autant fureur, c’est aussi parce qu’il sait comment satisfaire ses clients, et les rassurer quant aux produits proposés. Big Mamma propose à ses clients de pouvoir retracer ses aliments. Cela signifie qu’ils peuvent retracer le cheminement d’un produit tout au long de sa chaîne de production et de la distribution. Quoi de mieux pour assurer une sécurité alimentaire à ses clients ? 😉

    5/ Diversifier les options de « commande en ligne« 

    Avec la crise du Covid-19, les clients commandent de plus en plus, et c’est pourquoi il est important de leur offrir du choix, de la nouveauté parmi les options de commandes en ligne.

    Outre les options traditionnelles de commande en ligne, certains restaurants vont plus loin, et font preuve de créativité comme avec cette bannière de Snooze Eatery

    Comme dit précédemment, certaines personnes souhaitent commander de la nourriture en ligne, mais d’autres désirent la préparer à la maison. Se faisant, les restaurants élargissent leurs offres pour y inclure des kits de repas de type familiaux, ainsi que des produits d’épicerie.

    En bref, pour améliorer l’expérience client des restaurants en cette période de crise, tout bon concepteur devra créer des interfaces modernes, intuitives, et alléchantes ! On espère que cet article vous a plu ! Maintenant, à vous de jouer 😉

  • ba&sh vous livre ses secrets pour innover toujours plus !

    Visuel sur ba&sh.fr

    Focus sur la marque ba&sh

    ba&sh, la célèbre marque de vêtements pour femmes, et créée par des femmes Barbara Boccara et Sharon Krief, est aujourd’hui présente dans plus de 250 points de vente à travers le monde.

    Pour se démarquer de ses concurrents, en mai dernier, ba&sh propose à ses clients de vivre une expérience innovante, une expérience shopping unique nommée ba&sh ON AIR 😉

    Pour faire simple, en direct du site ba&sh, une styliste présente une nouvelle collection de vêtements, donne des conseils d’experte et échange avec les utilisateurs connectés. L’objectif est de leur donner la possibilité de découvrir de nouveaux produits, mais surtout de les acheter en temps réel !

    L’opération est un succès, mais qu’en pensent nos experts du digital ?

    L’avis de Marie Pourcher, la Directrice des études Wexperience.

    “Je trouve qu’il s’agit d’un projet extrêmement bien pensé. L’utilisateur a la possibilité de voir les produits portés, et pas seulement sur une simple photo !

    L’Interface est facilement utilisable, même avec un écran de petite résolution.

    En terme d’UX, quelques réflexions sont tout de même à soulever :

    • Quelle est l’utilité d’insérer le tunnel de conversion (panier, livraison et paiement) sur la même page que live ?
    • Pourquoi ne pas l’insérer dans un nouvel onglet ?
    • Naviguer sur une seule et unique page, cela n’enferme t-il pas l’utilisateur ?  

    En effet, le fait d’être sur une seule et unique page, cela peut donner l’impression à l’utilisateur d’être figé, et d’être obligé d’acheter des produits dans l’immédiat. Pourquoi ne pas lui donner la possibilité de consulter les produits sur une page à part ? Cela permettrait d’avoir un meilleur accès aux fiches produits, mais également au reste du site internet de ba&sh. “

    L’avis de Martin Champetier, Directeur associé de Digitaleez.

    “Pour tracker des informations sur ce live, il faut tout d’abord savoir quels produits ont été vus par les utilisateurs, quels sont ceux qui ont été ajoutés, etc. En fait, toutes les informations qui remontent de ce live doivent être stockées dans un seul et même groupe de données afin d’en dégager les différentes performances

    Focus sur la fonctionnalité enhanced-e-commerce

    Dans Google Analytics, on pourrait utiliser la fonctionnalité enhanced e-commerce (“e-commerce amélioré”) afin de faire remonter tous les produits qui ont été vus pendant le live, qui ont été ajoutés au panier, et ensuite dessiner le processus de check-out (panier, livraison, paiement) pour avoir la performance des taux de passage de chacun des utilisateurs.

    Le but de cette analyse du check-out est de pouvoir dire : autant de personne sont venues sur le panier, autant de personne sont venues sur l’étape livraison, et autant sur la phase de paiement. Il faut aussi tracker la page de confirmation qui est la preuve que les utilisateurs sont allés jusqu’au bout.

    En clair, la fonctionnalité enhanced e-commerce, paramétré avec des Data Layer, permet de tracer le parcours utilisateur de ce live. On track alors les impressions produits, le nombre d’ajout panier via le live, et le processus de check-out.

    L’importance de l’analyse du check-out

    Analyser ce processus de check-out permet de savoir si un utilisateur change d’étape, c’est-à-dire du panier à la livraison ou alors s’il décide de s’arrêter lors d’une étape particulière. Cela permet de mesurer la performance du tunnel de conversion. 

    L’objectif principal c’est, à terme, de pouvoir comparer les performances de différents live, pour observer ce qui fonctionne le mieux et ce qui fonctionne le moins. En fait, la fonctionnalité enhanced e-commerce va nous permettre de construire une réflexion intelligente à 3 tiroirs :

    • Comparer l’espace live et le reste du site marchand (performance live/ site),
    • Comparer les performances et les statistiques de chaque live,
    • Analyser les performances d’un seul live. »

    Pour conclure….

    Sachez que ba&sh ne s’arrête pas là ! Afin de poursuivre sa stratégie digitale pour améliorer l’expérience client, la marque décide de lancer une opération QR Codes 😉 Cette opération consiste à faciliter la prise de rendez-vous, l’accès au service d’un « personal shopper », mais également à faire découvrir l’univers ba&sh au plus grand nombre ! Vous pouvez découvrir cette nouveauté depuis le mois de septembre dans une dizaine de boutiques ba&sh en France !

  • Google améliore les fonctionnalités de recherche à destination des voyageurs

    Les consommateurs ont l’habitude de se tourner vers Google pour effectuer une recherche, notamment sur les restrictions de voyage liées à la pandémie. Cette habitude montre que Google s’installe dans leur esprit comme la première source d’information, comme LE moteur de recherche par lequel planifier un voyage. Ou, du moins, c’est ce que Google espère…

    Nouvelles fonctionnalités sur Google Trips

    Google a mis en place une fonctionnalité pour aider les voyageurs à trouver des informations liées à la pandémie sur les vols, les hôtels et les réservations vers des destinations telles que les États-Unis ou le Royaume-Uni, et cela en temps réel.

    « Les utilisateurs peuvent désormais voir le pourcentage d’hôtels ouverts avec les disponibilité et vols » Richard Holden, vice-président de Google, gestion des produits, voyages. 

    Les données de Google se basent sur les recherches effectuées par les consommateurs concernant les vols et les hôtels de tel ou tel pays. Ces données sont mises à jour continuellement.

    Google a également ajouté un filtre qui permet de savoir plus rapidement quels hôtels et locations de vacances ont des tarifs remboursables sur Google Trips.

    Google s’impose comme le 1er moteur de recherche 

    Comme dit précédemment, de nombreux consommateurs sont habitués à se tourner vers Google pour effectuer des recherches sur un sujet qu’ils ne connaissent pas. Beaucoup se sont alors tournés vers Google pour comprendre les restrictions de voyage dues au Covid-19. Cette préférence pour le moteur de recherche qu’est Google montre une certaine tendance de la part des consommateurs, qui pourrait avoir des répercussions à long terme sur le secteur du voyage. 

    En effet, puisque Google apparaît sur la majorité des recherches effectuées par un utilisateur, toutes les autres plateformes sont évincées, notamment celles du secteur de voyage. De plus, contrairement aux comparateurs de prix de voyage tels que Kayak ou Skyscanner, Google publie depuis des mois des conseils pour les voyageurs ainsi que des informations sur les restrictions dues au Covid-19.

    Cela fait bien évidemment écho à notre webinar réalisé avec WAM-Référencement “En 2020, votre page d’accueil est Google !”, 

    [youtube width= »60%] »https://www.youtube.com/watch?v=q-MQOd7VmuE&feature=emb_title« [/youtube]

    Les consommateurs de Google Travel ont accès aux informations concernant les hôtels, les vols, les réservations et même les tarifs remboursables en lien avec la crise du Covid-19. Ne manquant d’aucune information, les voyageurs se sentent rassurés, et hésitent de moins en moins à réserver des voyages.

    Et vous, pensez-vous que l’expérience offerte par Google va lui permettre de ravir la place de leader sur les recherches de voyages ? N’hésitez pas à nous donner votre avis sur cet article via Twitter ou LinkedIn 😉

  • 7 règles fondamentales pour les call-to-action

    Les boutons, autrement dit les call-to-action sont des éléments essentiels à l’interaction d’une interface. Ils ont un rôle primordial à jouer dans la conversation entre l’utilisateur et l’interface. Pour créer des call-to-action efficaces, voici sept principes de base à connaître impérativement !

    Image : Pablo Serrano.

    1/ Faire que les call-to-action ressemblent à des call-to-action

    Lorsqu’un utilisateur interagit avec une interface, il doit pouvoir reconnaître instantanément les éléments « cliquables » de ceux qui ne le sont pas. Chaque élément issu d’une interface fait l’objet d’analyse de la part de l’utilisateur. Et en général, plus un utilisateur a besoin de temps pour décoder cette interface, moins celle-ci lui apparaît efficace et utilisable.

    Mais comment un utilisateur peut-il reconnaître si tel ou tel élément est interactif ou non ?

    Pour cela, il utilise son expérience antérieure ainsi que des signifiants visuels pour clarifier la signification de l’élément en question. Cela montre qu’il est important, lors de la conception, d’utiliser des signifiants visuels appropriés (la taille, la forme, la couleur, l’ombre, etc) pour que l’élément ressemble à ce qu’il doit être.

    Les signifiants visuels ont une valeur informative essentielle ; ils aident à créer des affordances dans l’interface. Malheureusement, les signifiants qui renvoient à l’interactivité sont faibles, et nécessitent un effort d’interaction, ce qui par conséquent réduit la possibilité de découverte. Si les éléments interactifs ne sont pas clairement définis, et que l’utilisateur s’échine à trouver ce qui est « cliquable » et ce qui ne l’est pas, peu importe la qualité de l’interface. Si cette dernière s’avère difficile à utiliser, l’utilisateur ne prendra pas plaisir à naviguer et n’en sera pas satisfait.

    La faiblesse des signifiants est un problème encore plus important pour les utilisateurs mobile. Pour savoir si un élément est interactif ou non, l’utilisateur sur desktop peut déplacer son curseur sur l’élément pour vérifier s’il change d’état. L’utilisateur mobile n’a pas cette possibilité. Il est obligé de toucher l’élément, et donc de cliquer pour s’assurer de son interactivité.

    Il ne faut jamais supposer qu’un élément de votre interface est évident pour l’utilisateur. Pour cette raison, vous devez toujours garder à l’esprit cette règle suivante :

    Pour finir ce premier point, voici quelques recommandations pour que vos CTA ressemblent à des CTA :

    • Bouton rempli avec des bordures carrées
    • Bouton rempli aux coins arrondis
    • Bouton rempli et ombré
    • Bouton fantôme

    Parmi ces exemples, le bouton ombré est la meilleure option pour l’utilisateur. Lorsqu’il voit un élément en « relief », il sait d’emblée qu’il peut cliquer dessus.

    N’oubliez pas les espaces blanc

    Les propriétés visuelles du bouton ne sont pas les seules à être importantes. Il y a également ce qui se trouve autour tels que les espaces blancs. Ces derniers permettent à l’utilisateur de comprendre plus facilement (ou difficilement) qu’il s’agit d’un élément interactif ou non. Dans l’exemple ci-dessous, certains utilisateurs pourraient confondre le bouton fantôme avec une boîte d’information.

    2/ Placer les call-to-action là où les utilisateurs s’y attendent

    Les call-to-action doivent être situés dans des endroits où l’utilisateur peut facilement les retrouver, voire même s’attendre à les trouver. N’obligez pas un utilisateur à devoir scruter son écran à la recherche d’un bouton.

    Utilisez autant que possible des mises en page traditionnelles ainsi que des design patterns.

    Si un bouton se situe à un endroit classique de l’interface, alors sa découverte sera plus facile et rapide. En effet, avec une mise en page traditionnelle, un utilisateur comprend plus facilement le rôle de chaque élément. Ajouter un design épuré et des espaces blancs, cela rend la disposition des éléments de l’interface plus compréhensible.

    3/ Bien libeller les call-to-action

    Les boutons portant des intitulés « génériques » peuvent parfois représenter une énorme source de frustration. Il est préférable de rédiger des libellés qui indiquent clairement ce que fait un call-to-action, c’est-à-dire son action. Cela permet aux utilisateurs de pouvoir anticiper ce qui va se passer lors du clic sur le bouton.

    Prenons un exemple : vous avez accidentellement déclenché une action de suppression et vous voyez maintenant le message d’erreur suivant.

    Les termes « OK » et « Annuler » ne sont pas clairs. La plupart des utilisateurs se demanderont « Que va-t-il se passer si je clique sur « Annuler » ? ». Pour éviter toute confusion, il est préférable d’utiliser l’intitulé « Supprimer » plutôt qu’un simple « OK ». Cela permet de clarifier l’action du bouton. Pour encore plus de clarté, si « Supprimer » est une action potentiellement dangereuse, vous pouvez utiliser la couleur rouge pour l’indiquer et donc prévenir l’utilisateur.

    Pour savoir davantage comment indiquer le rôle du call-to-action, vous pouvez vous référer à cet article : conseils sur l’écriture UX, qui peut permettre à l’utilisateur d’interagir plus facilement avec les boutons ! 😉

    4/ Dimensionner correctement les call-to-action

    La taille des boutons doit refléter la priorité et l’importance qu’on leur accorde. Un bouton de grande taille signifie une action importante.

    Hiérarchisation de l’importance des boutons

    Faites en sorte que le bouton le plus important ait bien l’air d’être le plus important. Pour cela, rendez plus visible et plus proéminent le bouton principal : en augmentant sa taille, et en utilisant une couleur qui contraste avec le reste de la page, dans le but d’attirer l’attention des utilisateurs.

    L’assurance Alan met en évidence la découverte de ses offres via un call-to-action qui ressort du reste de la page.

    Adapter les boutons pour les utilisateurs mobile

    Sur de nombreuses applications, les call-to-action son trop petits. Cela amène souvent les utilisateurs à faire des erreurs de frappe.

    L’étude du MIT Touch Lab a révélé que la taille appropriée d’un bouton pour les utilisateurs mobile est de 10 mm x 10 mm.

    5/ Eviter d’utiliser trop de boutons

    L’excès de boutons est un problème récurrent pour de nombreuses interfaces. En effet, lorsque vous proposez plusieurs offres sur une page, les utilisateurs se trouvent submergés par le nombre de boutons et finissent par ne cliquer sur aucun bouton.

    Pour remédier à cela, il faut absolument limiter le nombre de boutons visibles à l’écran. Par exemple, au dessus de la ligne de flottaison, ne mettez au maximum que deux boutons ; un primaire et un secondaire.

    6/ Compléter l’interaction par un retour visuel ou sonore

    Lorsqu’un utilisateur clique ou appuie sur un bouton, il peut s’attendre à ce que l’interface lui réponde avec un retour d’information approprié. Si ce n’est pas le cas, il peut penser que l’interface n’a pas pris en compte son action, et procédera une nouvelle fois à l’action. Cela entraîne des opérations inutiles.

    Après avoir interagi avec un objet, tout être humain s’attend à feedback (retour d’information). Il peut donc s’agir d’un changement de couleur de bouton, d’un changement de taille ou de libellé ou encore d’un bip sonore.

    7/ Eviter d’utiliser trop de boutons

    Et pour aller plus loin, afin de rendre vos formulaires plus accessibles, vous pouvez remplacer les boutons désactivés par une version opaque de la couleur principale de votre call-to-action afin que l’utilisateur déchiffre plus facilement et rapidement l’état du bouton.

    Visuel UX planet.

    Voilà, c’est tout pour aujourd’hui, j’espère que cet article vous a plus, et que la conception des call-to-action n’est plus un secret pour vous 😉 Si vous avez des questions, n’hésitez pas à nous contacter sur notre page Twitter ou Linkedin !

  • Conseils pratiques pour l’UX Writing

    L’UX writing consiste à rédiger des textes qui aident les utilisateurs à interagir plus facilement avec les interfaces numériques. En effet, le travail des rédacteurs est de faire en sorte qu’un utilisateur navigue avec succès sur un site, et donc à améliorer son expérience.

    Soigner l’UX writing, c’est aussi amener vos utilisateurs à effectuer une action précise. En effet, les mots, lorsqu’ils sont bien choisis, ont une importance toute particulière. Ils encouragent les utilisateurs à passer à l’action, ce qui vous permet d’augmenter votre conversion.

    Pour qu’un utilisateur ait accès à toutes les informations nécessaires, l’UX Writing comprend la rédaction des éléments suivants : étiquettes, menu, boutons, termes et conditions, messages d’erreur, etc

    Le rédacteur UX a plusieurs missions : 

    • Adopter une communication naturelle entre l’utilisateur et le produit
    • Simplifier et clarifier les données
    • Réduire au minimum les étapes nécessaires à l’accomplissement d’une tâche
    • Rendre la réalisation des tâches pratique et réussie
    • Rendre les utilisateurs satisfaits de leur utilisation du produit

    Conseil n°1  : Etre concis

    Il faut transmettre un message de manière efficace en utilisant le moins de mots possible. Chaque mot doit servir un objectif. Réduire les mots à un tel point signifie qu’enlever le moindre mot rendrait la phrase incomplète. 

    Conseil n°2 : Utiliser un langage simple

    Éviter d’utiliser un langage technique, qui pourrait ne pas être compris par les utilisateurs. Au contraire, il est préférable d’adopter des mots courants, c’est-à-dire plus ancrés dans le langage des utilisateurs. Par exemple, le terme “S’abonner” parle beaucoup plus à l’utilisateur que “Soumettre”, ce qui lui permet de se faire une idée plus précise de son action. 

    Conseil n°3 : Adopter un ton positif

    Utiliser des phrases qui ont une connotation positive induit un sentiment de gaieté, c’est pourquoi il est important d’éviter l’ajout de mots négatifs ou même de doubles négations telles que “Ne pas suivre”

    Un ton positif aide l’utilisateur à mieux comprendre le mot littéral, ainsi que les émotions qui lui sont associées. De plus, lorsque le vocabulaire utilisé sur l’interface correspond au vocabulaire de l’utilisateur, celui-ci se sent alors compris et confiant. Par exemple, l’utilisation de “Oups” témoigne d’une aimable excuse, alors qu’une simple “Erreur” signifie littéralement une erreur, et rien de plus. 

    Conseil n°4 : Utiliser la voix active

    Lorsqu’il interagit avec un produit, l’utilisateur doit se sentir à l’aise. L’utilisation de la voix passive dans une phrase donne à l’interface l’impression d’être une tierce personne, ce qui rend la communication peu naturelle. A contrario, l’utilisation de la voix active donne à l’utilisateur l’impression d’interagir avec une personne réelle. Le fait de désigner les utilisateurs par « Vous » et l’interface par “Nous” contribue à donner un aspect plus naturel et humain !

    Conseil n°5 : Utiliser le temps présent

    Lorsqu’un utilisateur effectue une action, il attend une réponse immédiate et apprécie davantage avoir un retour d’information au présent. Cela témoigne de la fin de la tâche et donc de sa réalisation !

    Conseil n°6 : Simplifier les chiffres

    Après avoir recueilli des données, l’utilisateur ne veut pas perdre de temps à les traiter pour obtenir les informations qu’il désire. Il est important de fournir des informations directes, comme par exemple “aujourd’hui”, “demain”, ou “hier” pour indiquer les événements proches ou passés. 

    Conseil n°7 : Utiliser le langage des utilisateurs

    Lors de la conception d’une interface, il est essentiel de se demander quelles sont les attentes de l’utilisateur, ses besoins, mais aussi ses habitudes. Plus l’utilisateur est compris, plus l’interface lui paraîtra simple, intuitive et efficace. Et utiliser le langage propre à l’utilisateur, c’est lui montrer que ses besoins, ses attentes et ses habitudes sont prises en considération.

    L’assurance Heyme.care, destinée uniquement aux jeunes, utilise par exemple un langage léger, décontracté et simple. Ils n’hésitent pas à se mettre à la place de l’utilisateur, et donc à le tutoyer, ce qui est fortement apprécié chez les jeunes !

    Conseil n°8 : Rendre les informations claires

    Un utilisateur est toujours un peu sceptique quant à l’utilisation des interfaces numériques. Pour améliorer la compréhension d’une action à effectuer, il convient de clarifier au maximum les informations données.

    Les humains sont avant tout des êtres visuels, d’où l’intérêt, par exemple, de faire appel à des pictogrammes ou des images. Toutefois, dans certains cas, l’utilisation d’un simple pictogramme peut s’avérer insuffisant à la compréhension d’une action. Il est alors préférable, dans ce cas-là, d’apporter du texte afin de mieux transmettre l’information et ainsi apporter une navigation plus fluide et agréable.

    La véritable clé, c’est se mettre à la place de l’utilisateur, pour savoir quel complément d’information lui apporter !

    Cet exemple montre parfaitement l’importance du texte. Il clarifie les différentes actions illustrées par les pictogrammes.
    Pimkie.fr

    Afin d’appliquer au mieux ces différentes pratiques, le rédacteur UX travaille les textes aux côtés d’un UX designer, de manière à concevoir des interfaces digitales les plus efficaces possible. Mettre les utilisateurs en confiance et les rendre satisfaits, c’est pouvoir augmenter vos chances de conversion.

    Via UX Magazine : Tips for UX Writing.

  • Nos conseils UX pour les pages produits des sites e-commerce !

    Avouez-le, pendant les périodes de soldes, on aime traîner dans les magasins pour choisir quelle paire de chaussures suivra avec notre nouveau pull ! Mais contrairement à un client qui se rend en magasin, le client qui achète en ligne désire une chose : ne pas passer 3 heures à choisir le produit qui lui convient ! 

    Pour l’e-commerce, les pages produits sont donc essentielles à la réussite d’un site. Il s’agit des pages où le client va prendre la décision d’acheter ou non. Pour ce faire, il faut satisfaire ses clients en leur apportant toutes les informations dont ils ont besoin. La précision est de rigueur !

    Voici quelques conseils à mettre en place pour présenter avec précision vos produits et ainsi ne pas perdre vos clients :

    1/ Les éléments nécessaires sur une page produit 

    Pour inciter le client à acheter sur votre site e-commerce, il est important de faire les choses bien ! Et pour ça, il y a certains Must Have à ne surtout pas négliger car il s’agit des éléments de base à faire figurer sur vos pages produits : le nom du produit et une image descriptive. Il est important aussi que le client puisse effectuer un zoom sur l’image en question. Veillez à fournir toutes les options nécessaires comme la couleur, la taille et la disponibilité du produit. Le client doit également pouvoir ajouter ses articles au panier de manière rapide et facile. En bref, une description concise et claire du produit !

    Deux autres catégories d’éléments peuvent également apparaître sur vos pages produits : les éléments dits « agréables à avoir » (Nice to Have), et les éléments dits plus « sophistiqués » (Fancy Features). Pour mieux comprendre à quoi correspondent ces éléments, voici un tableau récapitulatif :

    Comme dit précédemment, les éléments nécessaires sur une page produit doivent être organisées correctement. Et c’est cette hiérarchisation qui permet de convertir plus ! Vous pouvez d’ailleurs consulter notre étude de cas sur Electrodepot.fr 😉

    2/ Anticiper et répondre aux questions des clients

    Il est essentiel de ne pas négliger les interrogations des utilisateurs. De nombreux sites, qui n’offrent pas assez d’informations, laissent filer leurs clients et donc de potentielles opportunités d’achat. C’est pas malin ça ! Ce manque d’informations peut également amener un client à retourner son produit. Pour empêcher cela, c’est simple : efficacité et précision. Un utilisateur doit être en mesure de savoir comment s’utilise le produit, à quoi il ressemble, quelles sont ses fonctionnalités. En d’autres termes, il faut aller droit au but. Rappelez-vous que le client en ligne n’a pas de temps à perdre.

    Prenons l’exemple d’Apple qui anticipe les potentielles questions qu’un utilisateur pourrait se poser lorsqu’il s’apprête à acheter le tout nouvel Iphone 11 !

    Sous chaque produit Apple fait figurer un onglet Questions et réponses qui permet d’apporter à l’utilisateur le maximum d’informations.

    3/ Donner la possibilité aux clients de comparer les produits

    Certains sites varient l’affichage des informations ou la conception des pages, ce qui oblige les utilisateurs à prendre du temps pour chercher l’information dont ils ont besoin. Ce n’est pas la chose à faire ! En effet, les utilisateurs ont tendance à vouloir comparer le produit qui les intéresse avec un autre du site. Pour cela, il est important que pour chaque produit du site, on retrouve les détails similaires pour toutes les marques et tous les modèles. Garder une cohérence et logique dans la répartition des informations ! 

    [youtube width= »70% »]https://www.youtube.com/watch?v=wlpiZClmwmM&feature=youtu.be[/youtube]

    4/ Apporter aux clients des retours d’expérience

    Même si les descriptions de vos produits se veulent les plus complètes possible, un utilisateur demandera toujours des retours d’expérience. Pour ça, les commentaires sont nos amis ! Ils constituent aux yeux de l’utilisateur des critiques solides, et provenant d’autres clients ou experts, ils lui apportent des informations supplémentaires. L’utilisateur peut alors se faire une idée de l’utilisation du produit ou encore de sa qualité. Toutefois, il est important de filtrer ces avis afin de distinguer clairement les avis positifs des avis négatifs.

    Et même les critiques négatives ont leur importance. Elles permettent à l’utilisateur de se faire son propre avis, d’autant plus que bien souvent, les critiques positives l’emportent sur les négatives. Il n’est donc pas nécessaire de les cacher !

    5/ Faciliter le processus d’achat

    La dernière étape du processus d’achat est l’ajout des articles au panier. Et beaucoup d’utilisateurs rencontrent des difficultés lors de cette étape : un panier vide alors que vous pensiez qu’il était rempli, des articles en double, etc. La meilleure solution pour éviter ces problèmes est d’afficher une fenêtre pour avertir l’utilisateur que l’article a bien été ajouté à son panier

    En bref, les pages produits sont les pages à réussir ! Elles sont les pages sur lesquelles les utilisateurs vont décider ou non d’acheter le produit qui répond à leur besoin.

    Ces best-practices sont applicables, bien évidemment, pour l’ensemble des sites e-commerce, mais il est tout de même important de penser à se distinguer ! Pour en savoir plus, vous pouvez consulter notre article suivant : Tous les sites de ecommerce doivent-ils nécessairement se ressembler ?

    Via Nielsen Norman Group, UX Guidelines for Ecommerce Product Pages.

  • Les couleurs et les contrastes : en finir avec les “on-dit” !

    Les designers ont pour mission de rendre les interfaces accessibles à tous les utilisateurs, c’est-à-dire de prendre en compte les besoins de chaque personne. Mais attention, méfiance ! Il existe de nombreux mythes concernant le contraste des couleurs, mythes perpétués par des personnes souvent mal-informées. On va alors rectifier le tir, et mettre fin à tout ces “on-dit”!

    FAUX

    1/ Les exigences du WCAG sont toujours optimales

    Le WCAG (Les Règles pour l’accessibilité des contenus Web) présente des règles à suivre afin de rendre les contenus Web plus accessibles, comme par exemple pour les personnes en situation de handicap. Toutefois, on trouve parmi ces règles à suivre une petite coquille ! Il s’agit du cas où se trouve un texte blanc et un texte noir sur un bouton de couleur. La majorité des utilisateurs diront que le texte blanc est plus facile à lire, mais en réalité c’est faux, les rapports de contraste le disent !

    2/ Le texte doit répondre à l’exigence du AAA, sinon il est inaccessible

    Le WCAG, repris par le RGAA (Référentiel Général d’Accessibilité pour les Administrations), définit 3 niveaux d’accessibilité. Beaucoup de gens estiment que le texte doit être conforme au niveau le plus élevé (AAA), mais en réalité ce n’est pas le cas ! Ce troisième niveau s’applique à un groupe d’utilisateurs restreints :  ceux qui ont une perte de vision importante, comme par exemple les personnes âgées, ce qui n’est donc pas le cas de l’ensemble des utilisateurs. Et si l’on regarde de plus près, le WCAG recommande de ne pas satisfaire toutes les exigences de l’AAA car il n’est tout simplement pas possible de le faire !

    3/ Les composants de l’interface ont le même rapport de contraste que le texte

    Une erreur de plus : mettre les composants d’une interface au même niveau de contraste que le texte ! Eh non, détrompez-vous, ces niveaux de contraste doivent être différents.

    Le texte nécessite un contraste plus élevé afin de faciliter et de rendre plus agréable la lecture des utilisateurs. En effet, de nombreuses nuances affectent le contraste du texte, comme la taille ou la graisse de la police.

    4/ Le texte et les boutons gris sont inaccessibles et semblent désactivés

    De nombreux utilisateurs pensent que le texte gris n’est pas lisible. Parfois c’est vrai, mais pas toujours ! Si l’on regarde le bouton ci-dessous, vous pourrez voir, grâce à un vérificateur de contraste, que le texte gris est bel et bien conforme à la norme AA.

    Le vérificateur de contraste confirme que ce bouton est conforme à la norme AA, mais aussi que le ratio est bien supérieur à la norme.

    5/ Les daltoniens ne savent pas faire la différence entre les couleurs contrastées

    Il existe un mythe selon lequel si un designer utilise le contraste des couleurs pour transmettre des informations, alors les utilisateurs daltoniens ne remarqueront pas la différence. FAUX ! Ces utilisateurs n’ont pas de difficultés à percevoir les différences de contraste, mais les teintes de couleurs (vous pouvez aller jeter un oeil à notre article dédié au daltonisme). Grâce à un simulateur de daltonisme, on peut voir que ce type d’utilisateur perçoit clairement s’il s’agit du rouge ou du vert.

    6/ L’utilisation d’un repère de couleur ne suffit pas à transmettre l’information

    Détrompez vous, indiquer à vos utilisateurs une information par une couleur ne suffit pas ! Une des règles d’accessibilité stipule que la couleur ne doit pas être utilisée comme seul moyen visuel pour transmettre une information. Eh oui, mettez-vous par exemple dans la peau d’une personne ayant une déficience de la vision. Si vous choisissez d’afficher l’état actif d’un bouton ou d’un champ par la couleur rouge, une personne daltonienne ne sera pas capable de le voir. Il est alors important d’ajouter un repère supplémentaire comme du texte ou une icône.

    7/ Une interface accessible répond aux besoins de TOUS les utilisateurs

    C’est évident, en tant que designer on aimerait bien rendre tous nos utilisateurs heureux et satisfaits ! Toutefois, il est impossible de pouvoir répondre aux exigences et aux besoins de l’ensemble des utilisateurs dans la mesure où il y a toujours quelques personnes qui trouveront votre design gênant à leurs yeux. Vouloir atteindre un idéal pour tout le monde est illusoire ! Il faut tout simplement se concentrer sur une majorité d’utilisateurs mais pas sur tous.

    L’accessibilité doit toujours être une priorité lors de la conception d’interfaces. Et pour aider les designers à concevoir ces interfaces de manière la plus optimisée possible, les lignes directrices du WCAG (Web Content Accessibility Guidelines) sont des outils essentiels !

    Cet outil, tout comme le RGAA, ne sont pas à l’origine de ces « on-dit », ils sont le fait de personnes qui les interprètent mal, les déforment et en font un mauvais usage. Il est temps de mettre fin à ces mythes pour produire des interfaces qui satisferont la majorité des utilisateurs !

    Via UX Movement, The Myths of Color Contrast Accessibility

  • L’application Tinkiet : 3 semaines pour co-concevoir, tester et développer une application pour les “éloignés” du numérique

    Voilà un projet, dont on est bien fier avec toute l’équipe MARKOPOLO, notre nouvelle agence partenaire ! Une application à destination des personnes en difficulté avec le numérique. Créée de toute pièce en 3 semaines, elle a requis la participation de plus de 8 professionnels de l’innovation et a d’ores et déjà permis à plusieurs centaines de bordelais d’accéder via le numérique à des services d’aide municipaux et de loisirs, grâce à leur smartphone. Je vous explique en détail :

    Comment concevoir dans l’urgence une nouvelle application ?


    Pour la plupart d’entre nous, l’utilisation des outils numériques va de soi, nos sites ou appli préférés nous facilitent la vie de tous les jours. Au point qu’on se demande parfois comment on faisait “avant”…

    Et pourtant, 20% de la population n’est pas utilisatrice du numérique selon une étude récente de Bordeaux Métropole. Et 40% parmi les bénéficiaires de l’action sociale sont de fait “éloignés” du numérique.

    Alors que l’immense majorité d’entre eux ont un smartphone avec une connexion internet, ils n’utilisent pas aujourd’hui les services numériques. Par difficulté à comprendre le français, à appréhender les outils, par rejet ou crainte de la technologie…

    Cette inégalité d’accès contribue à amplifier les difficultés de populations déjà fragilisées, et s’est révélée avec une violence particulière dans le contexte de la crise du Covid et du confinement.

    Face à ce constat plusieurs associations Bordelaises, aidées de la Mairie de Bordeaux et Bordeaux Métropole, ont décidé d’agir. L’idée : créer une application qui facilite la vie des personnes éloignées du numérique, en leur simplifiant l’accès aux principaux services numériques.

    Markopolo, une agence d’aide à l’innovation, de l’idée au projet


    Dans ce cadre, c’est notre agence partenaire, Markopolo, qui a été sollicitée pour accompagner les équipes et mener à bien le projet.

    Détail de la méthodologie Pocfab de l’agence Markopolo

    Pour cela nous avons mis en oeuvre la solution méthodologie POCFab :

    • Diagnostic : établir un état de la situation et identifier les principaux freins et obstacles, définir la problématique, constituer l’équipe projet et caler le calendrier
    • Co-conception: ateliers collaboratifs associant “Design Sprint” et “Lean Startup” pour analyser la problématique, imaginer et co-concevoir une solution en équipe
    • Prototypage : concrétiser la solution imaginée pour pouvoir la tester auprès des utilisateurs
    • Evaluation : test du prototype auprès des utilisateurs pour identifier les points d’amélioration et adapter la solution

    Le résultat prend en compte toutes les contraintes d’un public cible en difficulté

    Résultat : l’application TINKIET, une pwa (Progressive Web App) a été co-conçue et développée en moins de 3 semaines.

    Capture d’écran de l’application mobile Tinkiet

    Les principales caractéristiques de l’application TINKIET :

    • Aide à la recherche/navigation via des entrées directes par “besoin”
    • Interface ultra simple et intuitive pour une compréhension immédiate du contenu
    • Assistance vocale pour confirmer les choix de navigation
    • Traduction en 9 langues disponibles
    • Personnalisation de certains contenus sans avoir à créer de compte
    • Curation de contenu : sélection de 3 à 6 applications/outils “cibles” par catégorie

    Ceci est une première version “expérimentale” amenée à évoluer et à s’enrichir. Elle couvre aujourd’hui 7 catégories de service : “Manger”, “Me soigner”, “Discuter”, “S’amuser”, “Ma journée”, “Mes informations”, et “Besoin d’aide”.

    Une démonstration des capacités de notre agence partenaire


    Tinkiet est un projet mené de bout en bout par notre agence partenaire Markopolo, et démontre notre capacité, non seulement, à prendre en main rapidement une problématique donnée et lui apporter une réponse tout aussi rapide. Mais aussi et surtout à valider nos méthodologies créatives et collaboratives, dont le but est d’assurer la création de produits en adéquation avec un besoin. Tinkiet n’est pas une killer app, mais elle résoud un réel problème de terrain et transforme un problème en solution. N’hésitez pas à nous solliciter pour vous aider à dépasser le stade de l’idée des nombreux projets qui restent dans vos cartons.

    Tinkiet vu par la presse

    Pour découvrir le projet en images :