Auteur/autrice : guillaume

1/ L’utilisateur ne lit pas l’intégralité d’une page, il la « scanne » !

Lorsqu’un utilisateur arrive sur un site, il jette un coup d’œil rapide. Il ne lit pas, il scanne les informations. Cet écrémage est encore plus rapide s’il sait d’avance ce qu’il recherche. Dans le cas inverse, s’il ne sait pas exactement ce qu’il recherche, il scanne la page jusqu’à trouver un élément significatif.

Eh oui, ne soyez pas déçus si les utilisateurs ne prêtent pas attention à l’entièreté de votre interface. C’est un processus que tout le monde effectue, une habitude lorsqu’on se rend sur le web. Pour cette raison, les concepteurs se doivent de concevoir des interfaces, et surtout des pages qui se prêtent à la « numérisation » 😉

Cela ne demande pas beaucoup d’efforts. Il s’agit en règle générale de faire apparaître le logo en haut à gauche, le bouton de recherche en haut à droite, et de bien organiser les contenus pour une lecture plus simple. 

Toutefois, cela ne veut pas dire qu’il ne faut pas se lancer dans des conceptions différentes et créatives ! C’est ce que nous allons voir dans la suite !

2/ Réaliser autant de design créatifs, si cela s’avère utile !

Lors de projets importants, les concepteurs peuvent travailler avec des méthodes traditionnelles. Toutefois, les icônes de votre interface, les couleurs, les animations, les typographies, tout ces éléments ne doivent pas se ressembler. Vous pouvez surprendre vos utilisateurs, mais de manière positive. Prenons l’exemple du site Apple. A priori, tout à l’air minime. Mais regardons de plus près. En faisant défiler la page, une superbe animation apparaît, de quoi surprendre et plaire à l’utilisateur 😉

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

Mais comment savoir si ce design créatif est réellement utile ?

3/ Pour savoir ce qui plaît à l’utilisateur, faites des tests !

Si vous-même aimez vos réalisations, cela ne veut pas dire que l’utilisateur l’aimera également. Pour s’assurer de cela, il est important d’effectuer des tests utilisateurs à chaque étape de votre projet pour concevoir une interface qui répond aux attentes et besoins des utilisateurs. Tout doit être mis en lumière.

Chez Wexperience, nous utilisons presque systématiquement la méthodologie des tests utilisateurs dans nos projets de refonte ou d’optimisation.

4/ L’utilisateur doit comprendre le rôle de l’interface !

Il est normal qu’un utilisateur ne perçoive pas tous les messages que vous avez voulu donner à votre interface. Toutefois, l’utilisateur doit au moins comprendre l’objectif de l’interface, son rôle : un site de location de voiture, un blog technologique, un site ecommerce vendant des cadeaux ?

Cela vous paraît logique ? Vous avez raison ! Mais parfois, certains sites parlent trop ! Un excès de contenu peut perdre l’utilisateur. Il se demandera après avoir parcouru l’ensemble de l’interface “D’accord, mais quel est le produit/ le service proposé ?”.

Pour éviter cela, restez simple, et lors de la conception et la saisie du contenu, faites appel à quelqu’un qui n’a aucune idée de quoi traite votre site.

5/ Prêter attention à chaque page, et pas seulement à la page d’accueil !

Si vos utilisateurs comprennent de quoi traite votre site, il faut également penser aux utilisateurs qui viennent via des liens externes. Sachez qu’ils sont nombreux ! Et ces liens externes ne permettent pas de savoir sur quelle page du site tel ou tel utilisateur va arriver. C’est pour cette raison, qu’il est important de faire figurer des signes sur chaque page, afin de rappeler l’identité de votre site. Un utilisateur doit toujours comprendre où il se trouve 😉

6/ Un utilisateur ne se demande pas comment quelque chose fonctionne

Un utilisateur ne se demande pas forcément si les choses fonctionnent bien ou mal. Il se demande simplement si cela fonctionne, et cela jusqu’à ce que vous lui apportez quelque chose de nouveau. Et lorsque vous apportez quelque chose de mieux à l’utilisateur, vous lui offrez une meilleure expérience et gagnez sa fidélité. Par exemple, sur un site de ecommerce de prêt-à-porter, l’utilisateur n’a pas besoin de savoir techniquement comment fonctionne le système de filtres. Si le système fonctionne bien, et que le design fait son effet, c’est dans la poche 😉

On espère que cet article vous a plus et on compte sur vous pour vous remémorer ces six méthodes lors de la conception de vos interfaces ! Cela ne peut que vous aider à en créer des meilleures 😉

Via UX Planet : 6 Methods to understand the user in web design.

Tout le monde se souvient de l’époque où la livraison de nourriture nécessitait un coup de téléphone, une visite au distributeur automatique, ou encore une attente interminable de l’arrivée du dîner ? L’application Uber Eats, lancée en 2015, a été conçue pour aider les utilisateurs à commander leurs plats préférés, sans effort. Aujourd’hui, les difficultés ont été supprimées et l’accès à l’application facilité. 

En discutant avec les utilisateurs les plus affamés, Uber sait que s’il est pratique (et satisfaisant) de passer une commande et de la suivre à chaque étape, trouver de la nourriture prend du temps, et s’avère parfois difficile. Pour cette raison, Uber Eats a totalement repensé son application et son site web ubereats.com pour aider les utilisateurs à trouver exactement ce qu’ils cherchent, de façon plus rapide.

Les enjeux sont importants à l’heure des repas – l’utilisateur peut être fatigué, stressé, anxieux ou en colère. De ce fait, chaque point de contact de la nouvelle application Uber Eats est encore plus important et, dans les semaines à venir, l’expérience Uber Eats sera très différente : 

1/  Trouver les restaurants et nouveaux commerçants avec de nouveaux raccourcis.

Ces raccourcis donnent un accès instantané aux restaurants préférés des utilisateurs mais également à de nouveaux commerçants comme les épiceries, les boucheries, les fleuristes, ou les animaleries, etc.

2/ Obtenir davantage d’informations sur les endroits locaux grâce à une carte de ramassage.

Il est possible de trouver des restaurants qui offrent des services de ramassage sans grandes difficultés.. Les repères visuels sur la carte permettent aux utilisateurs de trouver facilement les endroits où se rendre, les offres locales et de voir tous les restaurants à proximité en les classant.

3/ Commander à nouveau parmi ses favoris.

Plus l’utilisateur commande, plus ses recommandations sont adaptées, ce qui lui permet de passer moins de temps à choisir et plus de temps à manger. Et maintenant, il est très simple de commander à nouveau ses plats préférés en appuyant sur un simple bouton.

4/ Découvrir de nouveaux restaurants et des joyaux cachés sans avoir à faire défiler les menus à l’infini.

Lorsqu’un utilisateur cherche à découvrir un nouveau plat préféré, il verra une sélection de plats sélectionnés spécialement pour lui, ainsi que des plats familiaux avec des pack de nourriture pour rassasier toute l’équipe. Que de bonnes nouvelles ! 

5/ Passer plusieurs commandes en même temps.

Grâce à la commande groupée, plusieurs personnes peuvent désormais ajouter des articles en même temps dans un seul panier. Plus besoin de faire le « passe passe » avec le téléphone ou de noter à l’avance la commande de chacun !

6/ Voir ce que les gens commandent en ce moment dans les restaurants près de chez soi.

Les utilisateurs peuvent être inspirés par ce que les autres commandent, et ainsi pourquoi pas trouver une nouvelle adresse à ajouter à sa liste de restaurants à faire !

Cette nouvelle expérience Uber Eats permet à l’utilisateur de trouver et de choisir son prochain repas encore plus facilement qu’avant ! Et sachez aussi que lors de vos trajets en Uber, si vous avez une petite faim, vous pouvez switcher sur Eats pour vous commander un petit repas à l’aide de l’onget « Repas » 😉

Via : Arriving Now: The New Uber Eats.

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 ?

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 😉

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 !

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 😉

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 !

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.

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.

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 !

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 !

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.

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 !

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 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”!

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.

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