🏆 Deux trophées pour Wexperience : prix de l’interface numérique et de design graphique !
Les lauréats du Com’en Or Trophy ont été annoncés il y a peu… Et c’est avec une immense fierté que nous vous annonçons que la team Wexperience remporte non pas un, mais deux trophées !
Nous recevons le prix de l’Interface numérique et du Design graphique pour notre projet sur Heyme.care, site de mutuelle et assurance dédié aux étudiants et jeunes actifs.
Notre belle team de vainqueurs !
Ce projet, mené avec Sabrina Leroy, Directrice Innovation et Projets chez Heyme, consistait en la création d’un site web à la fois sur mobile et desktop. Refonte de site, design graphique, création de parcours utilisateur, découvrez l’ensemble de notre projet présenté juste ici 👇
Et pour découvrir le site c’est par ici 👇
Un grand merci au Com’en Or Trophy ainsi qu’aux membres du jury Sandrine Deprez, Christian Pawlowski, et Yann Kervarec !
Les détails visuels tels que la police, la couleur ou encore l’alignement créent une expérience conviviale et expriment, d’une certaine manière, les valeurs de votre marque.
Il est facile de regarder un design et de remarquer qu’il est beau. En revanche, il est plus difficile de déterminer pourquoi il l’est. Mais nous… On vous dit tout ! Et pour cela, nous analyserons trois interfaces utilisateurs afin d’examiner les principes de conception visuelle qui les rendent attrayantes 😉
Exemple 1 : Typographie et espacement
Prenons l’exemple de Medium.com, une plateforme américaine pleine de contenus intéressants. Cette conception utilise une grille, des espaces blancs et un système typographique afin de créer une expérience de lecture à la fois confortable et agréable.
Alignement sur une grille. On remarque via le schéma ci-dessous une grille de colonnes. Cette grille de colonnes fournit des lignes d’ancrage verticales sur lesquelles différents éléments sont alignés. Dans la barre latérale, celle tout à gauche de l’écran, on remarque que les éléments (auteurs, commentaires, etc) sont alignés à gauche. Et cela permet de rendre le contenu plus net, et plus facile à lire. Le texte de l’article est également aligné à gauche sur une ligne de la colonne.
En clair, lors de votre conception, il est important d’établir une grille de colonnes et de veiller à ce que l’alignement soit cohérent, entre les différentes pages de votre site, mais aussi entre les différents éléments. Ne perdez donc plus de temps… Définissez vos propres règles pour être le plus cohérent possible 😉
Variations typographiques. Pour différencier les types de contenus, le site Medium utilise différents styles de caractères de la même police (gras, italique, souligné, etc) ainsi que des couleurs différentes, mais pas trop ! Un peu de noir, et un peu de gris, c’est le combo parfait. Eh oui, une trop grande variété de typographies, que ce soit le style ou la couleur, peut donner un aspect désordonné à votre site.
La clé pour un design cohérent, c’est simple. Une variante = un objectif ! Prenons l’exemple des petites capitales “WRITTEN BY”. Ici, ce choix de typographie indique clairement qu’il s’agit d’un titre de section.
Espaces entre les lignes de texte. Il n’y a rien de pire que de lire un texte lorsque les lignes sont trop collées, n’est-ce-pas ? Il faut plisser les yeux et au bout de 2 min, on en a marre ! Ici, sur Medium, la distance entre chaque ligne de texte est légèrement augmentée par rapport à l’espacement par défaut qui est généralement supérieur de 2px à la taille de la police. La méthode adoptée par ce site permet de créer un bloc de texte bien aéré et agréable visuellement.
Ajustement du crénage. Pour ceux qui se le demandent, le crénage consiste à agrandir ou diminuer l’espace entre des paires de lettres spécifiques. Vous l’avez sûrement déjà remarqué, notamment dans les titres, l’espace entre les lettres est plus apparent, notamment entre les lettres qui forment un angle. Dans l’exemple ci-dessus, l’espace entre les lettres a été légèrement comprimé. Si la plupart du temps, le crénage est ajusté automatiquement, pensez à le faire manuellement 😉
Ces 4 points, qui peuvent vous sembler être des détails, sont très importants ! Ils rendent votre interface plus belle, tout en accomplissant l’objectif principal d’une page web : être facilement lisible et agréable.
Exemple 2 : Hiérarchie et couleur
Notre deuxième exemple est celui de Heyme.care, site d’assurance et de mutuelle. Le design de leur site utilise la hiérarchie, les couleurs et les images de manière à créer une expérience visuelle attrayante.
Une palette de couleur colorée. La palette de couleur se compose de trois couleurs : le bleu, le rouge et le jaune qui sont des couleurs complémentaires classiques. Ces trois couleurs contribuent à l’attrait du design, elles attirent l’œil sans l’agresser, et apportent une certaine légèreté, une certaine gaieté ! Tout ce qu’il faut pour ravir l’œil de l’utilisateur 😉
En clair, lorsque vous choisissez des nuances de couleurs pour votre design, n’hésitez pas à créer plusieurs palettes, et à les ajuster de manière à voir ce qui se marie le mieux tout en ayant quelque chose de raffiné !
Site Heyme.care conçu par Wexperience.
Une hiérarchie visuelle claire. La hiérarchie visuelle guide l’œil de l’utilisateur et indique les éléments importants d’une page web. Dans le cas Heyme, l’œil est d’abord attiré par ce bandeau bleu qui indique qu’il s’agit d’une site de mutuelle et d’assurances dédié aux étudiants et jeunes actifs. La cible est d’emblée indiquée à l’utilisateur.
Ensuite, notre attention se focalise sur les 3 offres proposées par Heyme : assurance, mutuelle et santé à l’étranger. Et vous savez pourquoi ces offres nous sautent aux yeux ? C’est parce que pour chaque offre, une couleur est associée. 🎨
Notez également le traitement typographique avec des polices en gras pour mettre en avant l’expertise de la marque et les avantages des offres proposées. De cette manière, l’utilisateur voit en un coup d’œil les caractéristiques de la marque.
Mais attention, lorsque vous mélangez les traitements de caractères, il faut veiller à :
Utiliser deux traitements de polices maximum dans un même titre.
Utiliser le gras pour le ou les mots les plus importants et l’italique pour les mots secondaires.
Etre cohérent dans le style d’une page à l’autre.
Utilisation d’images de haute qualité. Les visuels doivent apporter des informations précieuses sur vos produits, vos services, ou plus généralement votre marque. En fait, les visuels doivent aider les utilisateurs à comprendre quelque chose, et à leur faire ressentir quelque chose. Les visuels ne doivent pas être de simples décorations pour embellir votre interface. Les visuels du site Heyme.care reflète à merveille l’univers de mutuelle et assurance dédié à la jeune génération !
Notre troisième exemple est tiré de l’application mobile Spotify. La conception de cette application utilise de manière efficace une cohérence du traitement visuel, afin de créer une expérience d’écoute efficace et agréable !
Un traitement visuel cohérent. Un design n’aura pas l’air professionnel et manquera d’élégance si les éléments visuels sont mal utilisés. Et ce n’est clairement pas le cas pour l’application Spotify. On remarque de nombreux éléments qui restent cohérents sur l’ensemble des pages : espacement entre les colonnes, alignement des en-têtes traitement typographiques… tout est ordonné et réfléchi !
Aussi, chaque catégorie de musique est représentée par en encart avec un visuel personnalisé. Et même si chaque catégorie possède une couleur et un visuel différent, la disposition et la hiérarchie des encarts sont cohérentes en tout point. Le nom de chaque catégorie se trouve au même endroit, et il en est de même pour les visuels. Ces détails donnent à l’ensemble de l’interface un aspect cohérent, soigné, et clair.
Sachez que si vous trouvez telle ou telle interface belle et agréable, ce n’est pas par hasard ! Chaque décision doit être prise avec réflexion, car même s’il n’existe pas de règles à proprement parler, certaines bonnes pratiques vous seront très utiles 😉
Dans la conception e-commerce, le passage du paiement est l’une des parties les plus étudiées du parcours de l’utilisateur. Et de manière minutieuse ! Cette étape est très importante puisqu’elle influence la perception de la marque, la propension à revenir et la capacité à générer des revenus en ligne.
Avec le nombre croissant d’utilisateurs qui font leurs achats sur mobile, il est impératif de concevoir un parcours de paiement qui non seulement respecte les bonnes pratiques e-commerce, mais qui soit également optimisé.
Dans cet article, on vous propose une petite analyse des différentes manières de concevoir le processus de paiement sur mobile, et ce de manière la plus optimale possible 😉
1/ L’étape du panier et des options de paiement
Bien souvent, le processus de commande débute par une visite du panier, durant laquelle on contrôle si tout va bien, si les articles ajoutés sont bien les bons, etc. Et cette étape où l’on peut modifier son panier doit être, pour l’utilisateur, sans obstacles, sans difficultés.
Comment s’y prendre ?
Fournir un accès rapide au panier
Lorsque l’utilisateur appuie sur le panier, cela indique qu’il veut s’y rendre immédiatement, il n’a pas de temps à perdre avec des étapes inutiles qui pourraient le gêner pendant son parcours. Ce que l’utilisateur veut, il doit l’obtenir 😉 Pour le combler davantage, vous pouvez éviter les retards liés aux performances de votre site.
Faciliter la mise à jour du panier
Parcourir des pages pendant des heures, en changeant sans cesse son panier, on le fait tous ! Et cela nous arrive même d’ajouter par inadvertance deux fois le même article… C’est pour cette raison qu’il est important de permettre à l’utilisateur de modifier facilement le contenu de son panier.
Ajouter l’option supprimer à côté de chaque article
Lorsqu’un utilisateur doit supprimer l’un de ses articles et qu’il est obligé de réduire la quantité à zéro, cela ne fait pas bon ménage ! Il est préférable, pour ne pas frustrer l’utilisateur, d’ajouter l’option « Supprimer » devant chacun des articles ajoutés au panier. Sinon, ne vous étonnez pas si vos utilisateurs préfèrent passer par Amazon pour effectuer tel ou tel achat…
N’utiliser pas de bouton “Mise à jour” pour modifier son panier.
Certains sites obligent l’utilisateur à cliquer sur un bouton de “Mise à jour” pour actualiser les modifications ajoutées au panier. Si Michou décide finalement d’acheter 2 pulls en laine plutôt que 3, il devra indiquer la nouvelle quantité souhaitée, appuyer sur le bouton “Mettre à jour” pour mettre à jour son panier. Quel périple !
Cette méthode n’est pas très optimale… Et pour deux raisons !
L’utilisateur doit effectuer deux actions pour modifier son panier au lieu d’une seule !
L’utilisateur peut oublier d’appuyer sur ce fameux bouton “Mettre à jour”, soit parce qu’il oublie, soit parce qu’il ne sait pas qu’il est obligé de le faire.
En clair, il vaut mieux simplifier la vie de vos utilisateurs !
Favoriser la continuité de l’expérience d’achat sur différents canaux
Si les marques continuent de se développer sur les différents canaux existants, les attentes des utilisateurs en matière de facilité d’accès et de flexibilité ne cessent aussi d’augmenter. On a tous tendance à faire des allers-retours entre l’ordinateur et le téléphone, et c’est ça qu’il est important de pouvoir “switcher” entre les deux tout en retrouvant le contenu que l’on était en train de consulter.
Les utilisateurs d’Apple peuvent bénéficier d’une fonction appelée “Handoff” qui permet d’entreprendre une activité sur un appareil et de la poursuivre sur un autre. En clair Michou peut prospecter les pulls en laine à partir de son iPhone, et procéder à l’achat sur son Mac (ou vice-versa) ! Ingénieux, n’est-ce pas 😉
Faire en sorte que le paiement sans création de compte soit facile à trouver
On connaît tous ce fameux moment de doute en remplissant un mot de passe sur tel ou tel site… Eh bien évidemment on se trompe ! Dans ce cas-là, il est bien plus facile et rapide de passer au paiement sans création de compte. Cela évite de renvoyer un nouveau mot de passe, de se rendre sur sa boîte mail pour le récupérer et ainsi de suite… N’oubliez donc pas de proposer cette option à vos utilisateurs !
2/ Récapitulatif de commande et options de livraison
Les utilisateurs n’apprécient pas les inexactitudes ou les prix peu clairs et sont de plus en plus frustrés lorsque le coût de leur panier augmente de manière inattendue. Lorsque cela se produit, ils abandonnent leur panier et vont chercher ailleurs leurs articles pour éviter les frais supplémentaires d’expédition et de livraison. Pour éviter ce genre de chose, voici deux best-practices que vous pouvez mettre en place sur mobile :
Faire en sorte que le récapitulatif de commande soit facilement accessible
Il est important d’accorder une attention toute particulière à l’emplacement du récapitulatif de commande sur mobile. En raison de l’espace limité de l’écran, ces frais supplémentaires apparaissent parfois en bas de la page et peuvent alors être ignorés par l’utilisateur. Pour éviter toute mauvaise surprise, pensez alors à afficher le récapitulatif bien en évidence, c’est-à-dire en haut de page. Ne faites pas défiler l’utilisateur pour trouver ces informations !
Sur le site Adidas, on peut voir que le récapitulatif de commande est trop bas sur la page pour être facilement visible.
Sur Vente Privée, le récapitulatif de commande est bien visible car bien placé au-dessus de la ligne de flottaison. Les utilisateurs peuvent consulter leurs articles sans faire défiler.
Utiliser l’emplacement de l’utilisateur pour déterminer la TVA, les frais et les options de livraison
Les frais de livraison et la taxe dépendent généralement de l’adresse de livraison associée à la commande, c’est-à-dire à l’utilisateur. Dans la mesure du possible, les détaillants doivent utiliser cet emplacement pour estimer les frais de livraison et la taxe avant même que l’utilisateur n’ait saisi son adresse de livraison.
L’emplacement de l’utilisateur peut également servir à localiser les points de retrait situés aux alentours de son domicile, s’il s’agit de l’option sélectionnée. Et surtout ! Demandez toujours à l’utilisateur la permission d’utiliser son emplacement actuel, et laissez lui la possibilité de le modifier et de le mettre à jour facilement.
Grâce à votre localisation, Amazon peut rapidement vous proposer les différents points de retrait près de chez vous.
Vous souhaitez en savoir davantage sur le tunnel de commande ? On vous conseille de consulter l’un de nos précédents webinar dédié aux sites marchands de gastronomie ! On y parle livraison, création de compte et pas que 😉
3/ Champs du formulaire et interactions de saisie
Remplir des formulaire sur mobile peut prendre du temps, et être source d’erreurs. Réduire le nombre de champs du formulaire et ajouter le remplissage automatique des champs peut considérablement faciliter le processus de paiement. Voici quelques conseils que nous pouvons vous donner :
Présenter le bon clavier pour chaque champ
Utilisez un pavé numérique pour les données telles que les numéros de carte de crédit ou numéros de téléphone. Pour les champs d’adresse électronique, utilisez un clavier optimisé pour la saisie, c’est-à-dire un clavier sur lequel l’utilisateur peut facilement retrouver les caractères spécifiques.
Zalando utilise un clavier adapté pour la saisie de carte bancaire.
Remplir automatiquement les champs en fonction des données préalablement saisies
Les champs tels que l’adresse, la ville, ou encore l’Etat peuvent être remplis automatiquement en fonction des autres données saisies par l’utilisateur. Quoi de mieux quand quelqu’un fait le travail à votre place ? 😉 Alors au lieu de demander à l’utilisateur de taper lui-même certaines informations, faites-le à sa place ! Il en sera ravi !
Le remplissage automatique du navigateur et les données enregistrées fonctionnent sur les champs suivants : nom, prénom, adresse électronique, numéro de téléphone, mot de passe et carte de crédit. Et franchement, ça, on adore !
Utiliser un champ de formulaire ouvert, et non une liste de sélection lorsque vous demandez à l’utilisateur d’entrer son État et la date d’expiration de son carte de crédit
Les longues listes déroulantes sont particulièrement difficiles à utiliser pour les utilisateurs mobiles, notamment ceux qui utilisent iOS. Lorsque la liste déroulante occupe la moitié de l’écran, seuls quelques éléments apparaissent, et cela amène parfois l’utilisateur à se tromper. Il faut alors faire défiler cette longue liste plusieurs fois… En clair, il vaut mieux oublier les listes déroulantes ! Il est plus rapide pour les utilisateurs de taper les deux premières lettres d’un élément 😉
Saisir ses données de carte de crédit n’est pas toujours une partie de plaisir ! Et encore plus sur mobile ! Il arrive parfois que l’on se trompe, ou alors tout simplement de ne pas avoir sa carte de crédit à proximité. Remercions alors les services qui nous simplifient la vie comme PayPal ou Apple Pay. 😉 Ces services, perçus comme étant plus fiables et plus sûrs, évitent aux utilisateurs de saisir les informations relatives à leur carte.
Proposer des options de paiement adaptées au mobile, mais ne submergez pas l’utilisateur !
L’utilisateur aime avoir le choix, mais pas trop… car il peut vite être perdu et submergé d’informations ! Alors, lorsque vous proposez des options de paiement reconnaissables telles que PayPal ou Apple Pay, ça suffit ! Et pour chacune de ces options, veillez à faire clairement la distinction entre chacune d’entre elles. La procédure de paiement la plus courante doit être plus visible que les autres, ou alors mise en première position.
Et si l’utilisateur aime avoir le choix, il aime aussi savoir où il va ! C’est pour cette raison qu’il est préférable de signaler à l’utilisateur que pour saisir ses coordonnées de paiement, il sera retiré du site et redirigé vers une autre page.
Zalando propose correctement plusieurs modes de paiement, et indique à l’utilisateur que l’option PayPal le redirigera sur une autre interface.
Proposer l’option caméra pour les données de carte de crédit
Au lieu de saisir les données de carte bancaire, certaines options comme AutoFill Credit Card (proposée par Safari), permettent à l’utilisateur de prendre une photo de sa carte de crédit, ce qui remplit automatiquement les champs. Et cette option en ravit plus d’un 😉
En clair, ce qui distingue une excellente expérience de paiement sur mobile d’une autre, ce sont les détails ! Sur mobile, chaque élément est important, et doit être choisi avec réflexion pour optimiser l’expérience utilisateur. C’est de cette manière que vous rendrait vos utilisateurs heureux 😉
Il n’y a pas si longtemps, je vous ai parlé du 8ème principe d’utilisabilité dicté par Jakob Nielsen, celui sur le minimalisme et l’esthétique. Eh bien, aujourd’hui, parlons du principe de visibilité ! Ce principe permet d’indiquer l’état actuel du système, et ainsi de donner aux utilisateurs l’impression qu’ils maîtrisent le système, et c’est ce sentiment de maîtrise qui vous permettra de bâtir une relation de confiance 😉
Voici quatre méthodes de rétroaction visuelle que vous pouvez utiliser afin d’indiquer l’état du système :
1/ Le retour visuel qui indique à l’utilisateur où il se trouve
Où suis-je ?
Personne n’aime être perdu, que ce soit dans le monde réel ou le monde numérique. Faire savoir aux utilisateurs là où ils se trouvent sur l’interface ou sur l’application est essentiel pour créer une bonne expérience de navigation. Il est alors important de mettre en avant l’option de navigation actuellement choisie afin d’aider les utilisateurs à comprendre là où ils sont !
Combien d’étapes sont-elles nécessaires pour terminer une action ?
Savoir combien d’étapes sont nécessaires à l’accomplissement d’une action aide l’utilisateur à estimer le temps requis pour terminer sa tâche.
2/ Le retour visuel qui confirme l’action de l’utilisateur
Il est primordial de fournir un retour visuel à chaque interaction. Un retour visuel immédiat prévient l’utilisateur que l’application à pris en compte son action. Cela renforcera donc son sentiment de maîtrise, et le retiendra de commettre d’éventuelles erreurs, comme appuyer plusieurs fois sur le même bouton…
En clair, il est impératif d’indiquer que le système a bien pris en considération tel ou tel clic.
Dans certains cas cependant, il peut être important de changer l’état du bouton lui-même. Dans de tels cas, le retour visuel transmettra aussi le résultat de l’interaction, le rendant à la fois visible et intelligible. Voici quelques exemples :
Activer/ désactiver un élément. Le changement de couleur du bouton donnera à l’utilisateur une indication sur l’état actuel de l’élément en question.
Mettre un élément en favori
Ajouter un objet au panier. Dans ce cas, le retour visuel indique à l’utilisateur que l’article a été ajouté au panier.
3/ Le retour visuel qui indique l’état du système
Montrer que le système est actif
Lorsqu’il faut plus de quelques secondes pour que le système se charge, il est important de donner à l’utilisateur un retour immédiat. En fonction de l’attente, il est recommandé d’employer des indicateurs de chargement tels que :
Des boucles de chargement (généralement pour les opérations qui prennent moins de 10 secondes)
Des barres de chargement (pour les opérations qui prennent plus de 10 secondes).
Ces indicateurs alertent l’utilisateur sur le fait que le système est en cours. Grâce à ces indicateurs, plus de doutes ! Michou n’a pas à se demander s’il va attendre quelques secondes ou 3 heures 😉
Pour les applications mobiles, il est aussi possible de présenter des écrans d’accueil animés durant le chargement initial. Un écran d’accueil bien conçu instaurera une atmosphère positive dans laquelle baigneront les nouveaux utilisateurs et leur fera oublier l’attente.
Cela vous rappelle quelque chose ? Il s’agit du principe de l’aversion pour l’oisiveté dont nous vous avons parlé dans notre dernier article sur Netflix 📺
Le contenu en cours de chargement
Lorsque le chargement de contenu prend du temps, il est recommandé d’employer un certain type d’affichage : l’écran-squelette. Cet affichage de contenu temporaire a pour fonction d’atténuer le temps d’attente et peut être rempli avec des données réelles dès que les données sont accessibles.
Cet affichage fonctionne aussi bien sur ordinateur que sur téléphone portable.
Les notifications ont pour fonction de focaliser l’attention de l’utilisateur sur un nouvel évènement. L’attention de l’utilisateur est naturellement dirigée vers les choses animées, c’est pourquoi il est de bon aloi d’employer des animations subtiles pour les notifications !
Il existe beaucoup de situations lors desquelles un système peut avoir recours aux données de l’utilisateur pour effectuer son action. Par exemple, lorsqu’un utilisateur remplit un formulaire avec des informations erronées. Ou encore lorsqu’un utilisateur choisit un mot de passe qui n’est pas assez complexe, lorsqu’il renseigne une adresse mail invalide. Il est toujours préférable de prévenir l’utilisateur de ces problèmes ou erreurs. Comment faire ? Communiquer un retour visuel approprié !
L’ensemble des indicateurs visuels sont essentiels à la création d’une bonne conception. Lorsqu’un utilisateur interagit avec une interface web, il a besoin de prévisibilité et surtout de contrôle ! Vous savez désormais quoi faire pour apporter à vos utilisateurs une expérience digne de ce nom 😉
La crise du Covid-19 nous a plongé dans un monde où la transformation digitale a toute son importance. La diminution de nombreux points de ventes montrent en effet que les stratégies de transformation digitale sont désormais essentielles pour les entreprises. La majorité des gens ont accepté de passer au numérique, et d’adopter de nouveaux modes de vie.
Amazon a doublé ses bénéfices, les épiceries et autres commerces se sont tournés vers le numérique, les écoles ont opté pour un apprentissage 100% en ligne, et les entreprises ont mis en place des plans pour accroître leur visibilité numérique et augmenter leurs bénéfices.
Et il va sans dire que les entreprises sensibles à l’impact de la croissance du digital, qui se soucient de leurs utilisateurs, et qui ajoutent cette valeur à l’entreprise, ont plus de chance de survivre dans ce nouveau contexte 😉
Et lorsque cette valeur signifie changer la vie des utilisateurs, et leur apporter la meilleure expérience possible, la notion d’accessibilité prend tout son sens !
L’accessibilité est un moyen de répondre aux besoins réels de l’utilisateur, de forger des liens plus solides, et d’innover via des nouveaux services web et produits.
Concernant l’accessibilité….
L’accessibilité numérique, c’est simple ! C’est la capacité d’un site web ou d’une application mobile à être facilement perçu, compris et utilisable par la majorité des utilisateurs, y compris les personnes handicapées.
En clair, l’accessibilité profite à tous ! Elle peut aider ceux qui ont des connexions réseau lentes, les parents qui utilisent une appli pour la première fois, ou encore les personnes qui décident de passer sur les sites e-commerce pour leurs achats habituels.
Malheureusement, l’accessibilité n’est pas pris en compte par tout le monde, et ce malgré l’accélération du numérique.
Pourquoi avons-nous besoin d’accessibilité ?
Pour répondre à cette question, parlons un peu chiffres et regardons de plus près ce qui se passe autour de nous 😉
Selon la Banque Mondiale, plus de 1,3 milliard de personnes, soit 15% de la population mondiale vit avec une forme de handicap. On estime donc que les personnes handicapées et leurs familles contrôlent 8 milles milliards d’euros. Cela représente pour les entreprises une énorme opportunité d’innover !
Sachez qu’en 2021 les affaires liées à l’accessibilité ont augmenté de près de 25% par rapport à l’année précédente. En 2020, le nombre total de procès liés à l’accessibilité dépassait les 3500. La tendance est donc à la hausse.
Les poursuites pour accessibilité ont encore augmenté en 2020, de plus de 20% par rapport à 2019.
Mais attention, ça ne s’arrête pas là…
Selon WebAIM, en 2020, 98,1% des pages d’accueil de 1 million de sites web dits “populaires” ne répondent pas aux normes légales d’accessibilité. Vous vous en rendez compte ?
Selon les centres de contrôle et de prévention des maladies, les personnes handicapées représentent environ 26% des adultes aux Etats-Unis. Soit un quart de la population !
Selon l’Organisation caritative britannique Purple, 75% des personnes handicapées ont dû quitter un magasin ou un site web, faute de pouvoir terminer leur achat.
Une enquête réalisée en 2029 a révélé que 69% des consommateurs handicapés tombent en un seul clic sur un site web difficile à utiliser, tandis que 86% choisissent de payer plus cher un produit ou service sur un site plus accessible.
Pour inclure tout le monde, certaines marques s’assurent que les personnes handicapées et tous ceux qui ont besoin de fonctionnalités web accessibles sont inclus dans les processus de recherche et de développement. Eh oui, lors de votre conception, il est extrêmement important de penser à tout le monde 😉
Google a par exemple présenté Lookout, une application qui aide les malvoyants à identifier les objets, et donc qui leur permet d’accomplir des tâches de manière plus rapide et plus simple.
Mise à jour en 2020, la dernière version d’iOS d’Apple a également ajouté des fonctions intelligentes destinées aux personnes souffrant de troubles de l’audition et de la vision.
Fable a créé une plateforme en ligne qui met en relation les chercheurs, les concepteurs/ designers ainsi que les développeurs avec les personnes handicapées.
En 2019, Microsoft a lancé Immersive Reader qui permet aux personnes souffrant d’autisme, de dyslexie, de déficience visuelle de disposer de plusieurs outils les aidant à se concentrer durant une lecture.
WalkinVR est un nouveau logiciel qui rend les jeux de réalité virtuelle plus accessible aux personnes handicapées.
Le contexte actuel et ses conséquences ont mis en exergue la fragilité des expériences, l’importance de la communication et la nécessité d’une relation plus holistique entre les personnes et le numérique. C’est pour cette raison que l’accessibilité peut améliorer le parcours utilisateur, et ce grâce à des sites web mieux conçus et plus ouverts à un monde inclusif.
En clair, l’accessibilité ne doit plus être une réflexion, elle doit être une action de la part des entreprises. Alors pour créer des design inclusifs, et faire de votre marque une marque honnête, humaine, créative, et éthique, c’est à vous de jouer, vous savez quoi faire 😉
Et n’oubliez surtout pas que l’accessibilité n’est pas une contrainte ! C’est un élément qui ne peut que rendre l’expérience utilisateur plus belle !
La crise du Covid a entraîné une accélération de la digitalisation des entreprises, mais aussi une transformation des habitudes clients.
Même si un retour à la normale viendra, tout ne sera pas comme avant. Des habitudes auront été prises, mais aussi un nouveau contexte économique sera installé, où la présence de l’imprévu devra être intégré dans la marche de l’entreprise.
Une chose est certaine : 2021 sera une année de transformation indispensable aux entreprises qui voudront survivre dans le monde post-covid.
Petit focus sur ce qui s’est passé en 2020
La crise sanitaire a entraîné au sein de plusieurs entreprises la nécessité de mettre en place de nouveaux processus digitaux. Toutefois, le manque de temps, de préparation ou encore de moyen, ont fait que ces nouveaux processus n’étaient pas toujours réalisés de la meilleure des manières.
Une autre nécessité est également apparue : celle de réinventer le point de vente afin de prendre en compte les contraintes sanitaires, et donc toutes les règles à respecter.
Ces évolutions dues à la crise sanitaire ont entraîné une hausse des clients en ligne, mais qui sont d’une certaine manière néophytes et infidèles. En effet, certains doivent faire face à cette nouvelle tendance qui est de consommer en ligne.
Il apparaît aussi nécessaire de réaliser des économies et d’optimiser sa rentabilité.
Pour faire face à ces nouvelles tendances, nous avons essayé, à travers notre veille, de vous montrer les actions qui nous semblent importantes à mettre en œuvre en 2021.
La transformation nécessite à la fois des investissements technologiques, mais aussi une transformation des RH, et des manières de penser le client.
👉 Soyez authentique et montrez vos valeurs
En B2C, les clients attendent de plus en plus que les entreprises respectent des valeurs sociétales. Même si c’est loin d’être le critère le plus déterminant, le prix reste le 1er, vous devez montrer votre qualité, votre authenticité.
Soyez transparent sur vos processus de fabrication, de sourcing, sur l’origine de vos produits
Soyez aussi transparent et clair sur votre SAV, vos conditions. Soignez votre legal design.
👉 Rencontrez vos client là où ils sont
Le Covid a maintenu les gens chez eux pendant longtemps et est en train de leur faire prendre de nouvelles habitudes de contact avec les entreprises. Ils continueront à aller en physique, mais utiliseront plus le digital.
Vous devez encore accélérer sur le digital
Dématérialisez le plus possible vos procédures
Améliorez tous vos canaux de contact : téléphone et réseaux sociaux
Unifiez votre vision du parcours client
Premier drive Boulanger à Englos (Nord) ouvert en Octobre 2020.
👉 Réimaginez l’expérience client dans un monde post-Covid
Les parcours clients ne seront pas les mêmes que ceux d’avant la crise. Il va vous falloir réimaginer comment servir les clients différemment et selon leurs nouvelles habitudes.
Démarrez l’année en faisant une expérience map globale
Interrogez vos clients à travers des focus group, des tests, les réseaux sociaux
Mettez en place des ateliers de Design thinking pour inventer de nouveaux parcours
Le parcours utilisateur post-covid pensé dans cette infographie dynamique mêle nouvelles technologies et nouveaux parcours.
👉 Construisez des capacités pour vivre dans un environnement qui peut changer rapidement
Maintenir une bonne expérience client dans un environnement de plus en plus volatil… (et on peut sans doute dire qu’il le sera de plus en plus) nécessite de mettre, dès cette année, des moyens pour rebondir rapidement.
Utilisez des nouvelles manières d’identifier des nouvelles tendances, des nouveaux comportements
Apprenez à écouter mieux vos employés avec de nouveaux outils
Mettez en place de l’innovation agile
Tik Tok ne sera pas que la plateforme des ados en 2021, mais la plateforme des influenceurs. Et pourquoi pas une plateforme e-commerce en devenir ? Suivez les comptes influents et détectez les tendances.
👉 Faites le ménage dans vos données et utilisez l’IA pour améliorer votre connaissance client
Vous utilisez sans doute encore les mêmes tableaux de bords, mais il y a de fortes chances qu’ils ne vous donnent plus les bonnes clés de lecture. Il est temps de faire le ménage :
Recenser l’ensemble de vos sources de données
Vérifiez et validez la qualité de l’information remontée
La transformation digitale implique que de nombreux salariés voient leur job désuet en frontal. Imaginez et réinventez leur métier pour apporter plus d’humain dans les parcours clients :
Formez vos collaborateurs à de nouveaux outils digitaux
Transformez leur métier en fonction des nouveaux parcours utilisateurs
À lire également : Walmart met à l’essai une nouvelle organisation en magasin, en utilisant dans certains cas moins de managers de niveau intermédiaire pour superviser les employés tout en augmentant la rémunération et les responsabilités de ces postes.
👉 Aidez vos clients à se digitaliser
Tous vos clients ne sont pas des experts
Avec la mise en place de nouveaux services, beaucoup de vos clients risques d’être perdus ou mal à l’aise. Accompagnez-les aussi dans votre transformation digitale
Mettez les en relation avec vos collaborateurs quand ils ont besoin d’aide
N’hésitez pas à gérer le changement (voir ma conférence de l’année dernière)
Ce qui peut vous empêcher d’accélérer ? Une mauvaise organisation interne. Mettre en place une organisation avec plus de “faiseurs” que de “vérificateurs” est la clé, mais comment faire ?
Utilisez les apports du télétravail pour les libérer les énergies sur certains métiers
Mettez en place des Usines Digitales (équipes transversales multi-métiers numériques focalisées sur les objectifs de l’entreprise)
Mettre en place le télétravail pour certaines de vos équipes peut libérer leur productivité. Photo by Brian Wangenheim on Unsplash.
👉 Utilisez les réseaux sociaux pour la relation client
Le confinement et le télétravail ont augmenté les interactions digitales avec les entreprises, souvent par les réseaux sociaux… mais ces canaux d’accès sont encore très mal pris en compte par les entreprises :
Mettez en place une véritable politique de réponses sur les réseaux sociaux
Formez vos forces de ventes, et vos centres de relation client aux réseaux sociaux
Utilisez les nouveaux outils proposés par les GAFAS.
Google Business Message est le nouveau service de Google qui permet de contacter une entreprise directement depuis la SERP de Google.
👉 Améliorez le canal téléphonique
Quand ça ne va pas où que c’est trop compliqué, l’utilisateur requiert naturellement au téléphone, et encore aujourd’hui, de façon massive. Mais bien souvent, le téléphone est devenu un parcours du combattant, désespérant les utilisateurs les moins à l’aise avec le numérique (ou les autres aussi).
Analysez vos conversations
Mettez en place des outils d’IA capable de gérer les appels les plus courants
Rendez l’accès à des humains plus facile
👉 Réalisez des économies, mais sans sacrifier l’expérience
En temps de crise, il faut réaliser des économies : mais ne sacrifiez pas l’expérience client ! La solution, la plupart du temps : généraliser la digitalisation des services.
Une étude de Forrester a montré que les entreprises qui investissaient le plus dans l’expérience client pendant la crise de 2008 avaient été beaucoup plus rentables.
On espère que cet article vous a plu et que ces 10 priorités vous aideront à transformer du mieux possible votre expérience client, pour 2021, mais pour toutes les autres années à venir 😉
En cette période de crise sanitaire et surtout durant le confinement, on peut se le dire, Netflix est notre meilleur ami ! Avouez-le ! Et c’est pour cette raison que j’ai décidé de vous refaire un petit article sur ce service de streaming, qui compte aujourd’hui plus de 160 millions d’abonnés.
Avant toute chose, rappelons que Netflix était à l’origine, en 1997, un service de livraison de DVD. Et si ce service en est là où il est aujourd’hui, ce n’est pas pour rien. En plus de son évolution au fil des années, la conception actuelle de Netflix rend l’expérience utilisateur beaucoup plus transparente et intéressante. Notamment grâce aux principes psychologiques utilisés.
Je vous avais, dans un précédent article, parlé du principe de réciprocité, sur lequel je reviendrai mais cette fois-ci, je vous en fais découvrir davantage !
1/ L’effet de dotation
J’imagine que certains d’entre vous ont commencé à utiliser Netflix grâce à l’essai gratuit d’une durée de 30 jours. Avec cette période d’essai je parie que vous avez utilisé Netflix presque tous les jours. Et maintenant, vous ne pouvez plus vous en passer ! Netflix est devenu votre activité favorite, et c’est là que vous prolongez vers l’abonnement payant 😉
Le principe est simple ! Puisque vous étiez abonnés à Netflix, et que vous avez dû entrer vos coordonnées pour avoir accès à la version gratuite, il semble plus facile de prolonger votre abonnement plutôt que de vous désabonner. Si vous aviez dû sortir la carte bancaire dès le début, sans même connaître l’interface, l’abonnement ne vous aurait pas autant fait de l’œil ! Mais après avoir vécu 30 jours fabuleux avec Netflix, vous y tenez !
Nous avons tous des biens inestimables dont nous ne voulons pas nous séparer. C’est ce qui explique l’effet de dotation. En clair, nous avons tendance à préférer les objets qui sont déjà en notre possession puisque nous leur accordons une importance particulière ! Et c’est ce principe psychologique qui stimule l’utilisateur à acheter tel produit ou tel service.
2/ Le principe de réciprocité
Quand Netflix a demandé à ses clients quelles informations ils aimeraient connaître avant de souscrire à un abonnement, la réponse était unanime : savoir les programmes disponibles ! Quelle est donc la meilleure solution ? Afficher une liste de films et de séries TV sur la page d’accueil ? Non ! Cela gâcherait tout le suspens ! Et si le film ou la série que l’utilisateur souhaite absolument regarder n’est pas disponible, c’est un utilisateur de perdu !
Netflix a alors opté pour la bannière en mode “teasing”, c’est-à-dire qui vous laisse apercevoir une sélection de films et séries. Il faut pouvoir susciter l’attention, la curiosité sans trop en dévoiler !
Ce principe de réciprocité est une des lois fondamentales de la psychologie sociale. Si Michou vous a fait une faveur, vous lui êtes redevable, tout comme vous êtes redevable à Netflix, qui vous a apporté un petit aperçu des contenus disponibles.
3/ L’aversion pour l’oisiveté
On croit souvent que les gens sont plus heureux lorsqu’ils n’ont rien à faire. Mais que nenni ! En réalité, et selon des études sur la psychologie humaine, les gens sont bien plus heureux lorsqu’ils sont occupés. Un utilisateur qui navigue sur son téléphone ou ordinateur et qui n’a rien à faire, a tendance à s’ennuyer et donc à fuir !
La solution ? La distraction !
On connaît tous le fameux dinosaure de Google Chrome qui permet de nous occuper en attendant le retour de la connexion internet.
Netflix utilise également ce principe de l’aversion pour l’oisiveté en jouant avec la lecture automatique de vidéos.
Lorsque votre souris passe sur tel ou tel contenu, une bande annonce se lance automatiquement, et c’est un excellent moyen pour aguicher les utilisateurs ! 😉 Un simple aperçu de quelques secondes peut donner envie à l’utilisateur de consulter l’épisode ou le film en question. Et même si dans la majorité des cas la lecture automatique de vidéo est énervante, on l’apprécie plutôt chez Netflix.
Vous êtes-vous déjà retrouvé face à une page web bondée d’éléments, à tel point que vous ne sachiez plus où donner de la tête ? A vrai dire, on connaît déjà la réponse… Évidemment ! Ça nous est tous déjà arrivé ! Le coupable ? Le manque de hiérarchie visuelle !
La hiérarchie visuelle d’une page permet à l’utilisateur de savoir où concentrer son attention, son regard. Cette hiérarchie ordonne l’information, et permet de guider l’utilisateur lors de son parcours !
Pour hiérarchiser les informations, plusieurs techniques peuvent être utilisées. Les voici :
Les couleurs et les contrastes
Les tailles des éléments
Les emplacements
1/ Les couleurs et les contrastes
Une bonne conception visuelle comprend de la couleur et des contrastes afin de créer une hiérarchie sur la page. Ces deux éléments permettent de faire ressortir certains éléments, et donc d’attirer l’attention de l’utilisateur ! Et comme vous le savez, nous accordons une importance toute particulière aux éléments qui nous sautent aux yeux ! 😉
Mais en réalité, ce n’est pas vraiment la couleur en elle-même qui attire l’attention, c’est plutôt le contraste qu’elle joue avec le reste de la page, c’est-à-dire avec les autres éléments qui l’entourent, mais aussi l’arrière-plan.
Le site de la mutuelle heyme (réalisé par Wexperience) utilise des couleurs différentes, notamment pour distinguer les éléments concernant la mutuelle santé, l’assurance, et la santé à l’étranger.
Ce qui fonctionne aussi très bien, c’est de jouer avec le contraste des caractères ! Il peut par exemple s’agir d’un traitement spécial de la police. Les polices de caractères ayant une graisse plus importante se distinguent bien plus facilement des polices plus légères. Et il en est de même pour les textes soulignés ou en italique, cela attire le regard.
Le site Renault utilise par exemple le gras sur sa police de caractère de manière à attirer le regard de l’utilisateur sur son offre CLIO. L’offre doit être la première chose à voir !
Voici quelques pratiques que l’on peut vous donner 😉
Tenez-compte de la saturation des couleurs. Les couleurs vives se distinguent naturellement, c’est pourquoi il est préférable de les appliquer sur des éléments importants. Le rouge par exemple ! Ce n’est pas pour rien que bien souvent il est là pour vous signaler un avertissement, une erreur, ou pire encore… un danger !
N’utilisez pas trop de couleurs. Les mélanges de couleurs, c’est parfois beau à regarder, mais ça peut aussi “piquer” les yeux ! Et lorsque trop de couleurs apparaissent sur une page web, la hiérarchie des éléments se trouve brouillée. Il s’avère alors difficile de distinguer les éléments les + importants. L’astuce ? 2 couleurs primaires, 2 couleurs secondaires 🎨
N’utilisez pas trop de variations de contraste. Si tout est contrasté, rien ne ressort ! Un design efficace comprend bien souvent des contrastes différents pour les titres, les sous-titres et le corps du texte.
Ne comptez pas que sur la couleur pour créer une hiérarchie visuelle. Les personnes atteintes de daltonisme peuvent ne pas percevoir les différences entre certains éléments de couleur.
2/ La taille des éléments
La taille des éléments est un point essentiel dans la hiérarchie visuelle d’une page web. Les éléments plus grands se distinguent davantage et attirent l’attention. Excellent moyen pour marquer l’importance !
Voici les meilleures manières de jouer sur les tailles :
N’utilisez pas plus de 3 tailles : petite, moyenne et grande. Trois tailles, c’est parfait ! Cela vous offre suffisamment de possibilités pour travailler. Toutefois, il est important d’avoir une certaine homogénéité. En règle générale, sur une interface, les tailles peuvent aller de 14 à 16px pour le corps d’une page, de 18 à 22px pour le sous-en-tête, et jusqu’à 32 px pour l’en-tête.
Faire en sorte que l’élément le plus important soit le plus grand. Et à contrario, réduisez la taille des éléments moins importants. Mais attention ! Limitez le nombre d’éléments de grande taille à deux maximum, afin de renforcer la hiérarchie visuelle de votre page.
Sur la page d’accueil du site Yves Rocher on peut y voir le contenu de droite affiché en plus grand, suivi d’un CTA « Je découvre » bien visible ! L’objectif est de concentrer l’attention de l’utilisateur vers leur nouveau produit !
3/ L’emplacement des éléments
L’emplacement des éléments aide les utilisateurs à voir la structure d’une page, et permet d’attirer l’attention sur certaines zones de l’écran, notamment sur les plus pertinentes. Sans ces emplacements prédéfinis, il est difficile de comprendre où se trouvent les zones standards telle que la navigation, le contenu, les publicités, etc.
Les publicités sont par exemple, dans la majorité des cas, situées sur le bloc de droite d’une page web, et c’est bien souvent pour cela que les utilisateurs ont tendance à ignorer cette partie !
Prenons un exemple !
Sur l’application Spotify, l’utilisateur voit d’emblée plusieurs blocs ! Les espaces entre ces différents blocs permettent de les rendre individuel et bien distincts. Les espaces également situés entre les titres et le contenu apporte plus de clarté, et rend la hiérarchie bien plus compréhensive pour l’utilisateur. 😉
Découvrez les meilleures pratiques pour les emplacements :
Laissez les éléments respirer ! Plus un élément est entouré d’espace blanc, plus il sautera au yeux de l’utilisateur. De cette manière, si vous souhaitez mettre en avant un bloc de votre page web, vous connaissez la technique !
Pensez aux encadrés ! Si l’ajout d’espace blanc ne suffit pas pour accentuer la hiérarchie de votre page web, ajoutez des éléments tels que des bordures, ou des arrières-plans. Toutefois utilisez ces éléments avec parcimonie, pour ne pas encombrer votre page 😉
Le test du strabisme 👁
Une technique imparable apprise dans les écoles de design, c’est le floutage ! Appliquer un léger flou à une page web permet d’avoir une idée des emplacements et de la hiérarchie visuelle.
Pour conclure, n’oubliez jamais, avant de concevoir une interface, de définir la hiérarchie visuelle et donc les éléments importants que vous souhaitez que l’utilisateur retienne ! Ensuite, à vous de jouer en appliquant les différents éléments tels que la couleur, la taille ou l’emplacement 😉
Pour vous faire plaisir et pour comprendre de quoi je vais vous parler aujourd’hui, commençons par un petit proverbe de William Morris, un homme à tout faire ! Designer textile, écrivain, poète, dessinateur, peintre ou encore architecte… 😉
“N’ayez rien dans votre maison que vous ne sachiez utile ou que vous ne jugiez beau.”
De William Morris
Pourquoi cette citation, me direz-vous ?
Eh bien, parce qu’elle illustre à merveille l’un des 10 principes d’utilisabilité dictés par Jakob Nielsen, du Nielsen Norman Group : le design esthétique et minimaliste, qui est la 8ème heuristique d’utilisabilité !
De quoi s’agit-il ? Le principe est simple ! Si une interface comprend un excès d’informations, les éléments pertinents se retrouvent noyés parmi ceux qui ne le sont pas. Et cela diminue la visibilité de l’utilisateur sur ce qui est plus important.
En clair, une interface doit se passer au maximum des informations qui ne sont pas indispensables !
Mêler l’esthétique et le minimaliste, une nécessité ?
Imaginez que demain se déroule l’entretien le plus important de votre vie ! L’une des premières choses que vous faites, c’est de vous apprêtez, et d’enfiler votre plus beau costume, n’est-ce pas ? Et pourquoi agit-on de la sorte ? Tout simplement, parce que la première impression est toujours la plus importante ! 😉
En UX, c’est pareil ! Le design de votre interface permet d’établir la première impression de vos utilisateurs. Et sachez qu’en moyenne, cette première impression se fait dans les 50 millisecondes dès l’arrivée des utilisateurs sur votre site. Compter uniquement sur les fonctionnalités ou les contenus ne suffit donc pas pour apporter une expérience de qualité !
L’expérience que l’on voit, que l’on regarde est parfois plus significative que l’expérience que l’on vit ! Et comme le dit très bien Don Norman, “Les choses attrayantes fonctionnent mieux”. Cette première impression est si forte qu’un utilisateur va se souvenir d’une belle interface, comme d’une interface facile à utiliser, et ce malgré les problèmes qui ont pu surgir durant l’expérience !
Aussi, il ne faut pas oublier que l’esthétique établit et renforce votre identité de marque. En effet, une marque ne peut exister sans une identité qui lui est propre, sans son propre univers graphique !
Qui dit conception minimaliste, dit utilité maximale !
Examinons de plus près la notion de design minimaliste !
Gardez à l’esprit que lorsque cette recommandation est apparue, c’est-à-dire en 1994, les conceptions de sites web minimalistes à proprement parler n’existaient pas ! Ici, la notion de minimalisme ne fait pas référence à celle que l’on emploie aujourd’hui, et qui renvoie à quelque chose de simple et d’épuré.
Et souvenez-vous (pour les plus vieux d’entre nous), à l’époque les sites web étaient surtout des pages web surchargées, pleines à craquer d’informations ! Et quand c’est trop, c’est trop !
Regardez donc cette ancienne page du site Web MSN. Source.
Et c’est bien pour cette raison que, selon l’heuristique écrite par Nielsen, une conception minimaliste cherche à simplifier les interfaces en supprimant les éléments inutiles.
De quoi d’autres ne peut se passer une conception minimaliste ?
Lorsqu’un utilisateur navigue sur votre interface, il doit pouvoir avoir en face de lui tous les éléments qui lui permettent de réaliser telle ou telle action. Une conception minimaliste doit donc apporter à l’utilisateur l’ensemble des éléments nécessaires à son parcours.
Et retenez bien cela ! Un manque d’informations diminue l’utilisabilité, mais un excès d’information également, dans la mesure où cet excès dissimule les éléments les plus pertinents.
Le site Amazon ne présente pas une esthétique très recherchée, mais apporte à l’utilisateur toutes les informations pertinentes dont il a besoin. La page de recherche Google, elle, présente une esthétique visuellement très épurée, claire, et simple.
Comment créer une interface minimaliste et esthétique ?
Communiquer visuellement via des principes de création
Pour créer une interface qui satisfasse visuellement l’utilisateur mais aussi qui optimise son expérience, les designers utilisent divers “principes” de conception visuelle. Cela peut être le contraste, l’équilibre, les lois de la Gestalt, la hiérarchie visuelle, les espaces blancs, les proportions, et bien d’autres encore 😉
Se concentrer sur cinq d’entre eux garantit, à coup sûr, une communication visuelle efficace !
Lors de la conception : limiter la saturation d’informations !
Limiter la saturation veut tout simplement dire privilégier les éléments à forte valeur informative. Comment procéder ? Eh bien, via un langage simple, des visuels de haute résolution, et du contenu clair, qui permet de guider l’utilisateur en toute simplicité et efficacité !
En clair, mettons les fioritures à la poubelle, cela ne fait qu’encombrer votre interface !
Un petit conseil pour les tâches un peu particulières, et qui demandent parfois plus d’informations ! Divulguer progressivement à l’utilisateur les éléments dont il a besoin. Doucement, mais sûrement, comme on dit ! 😉
Tirer parti des motifs visuels qui nous font du bien !
Les visuels nous procurent parfois des émotions, du plaisir, et donc de la joie ! Face au merveilleux paysage de la plage, du soleil, de la nature, du visage d’un enfant, d’un sourire ou encore de couleurs vives, de formes arrondies, les gens se sentent bien !
Et pourquoi ces visuels plaisent-ils autant aux utilisateurs ?
Parce qu’ils reflètent les besoins humains : la sécurité, le foyer, la nourriture, la chaleur, la famille, la communauté !
On parle ici du design persuasif et émotionnel ! Allez, on vous en parlera sûrement dans un autre article 😉
La beauté, c’est personnel, c’est comme ça !
Si certains vont adorer telle ou telle paire de basket, d’autres vont détester. Si certains vont trouver la nouvelle tendance du moment super cool, d’autres vont la trouver super ennuyeuse !
Pour les informations et les visuels c’est pareil. Une information pertinente pour Michel, ne l’est pas forcément pour Jacques. Et on n’y peut rien !
La meilleure manière de faire, c’est de garder en tête votre cible, vos personas et de concevoir pour la majorité !
Et n’oubliez surtout pas les différences culturelles. L’exemple des smileys est très significatif. Un petit bonhomme qui sourit 🙂 ne signifie pas pour tout le monde la joie, la bienveillance, le bonheur… En Chine il indique le mépris, la méfiance !
Ce qu’il faut retenir ? L’esthétique jour un rôle très important, elle impacte la perception des utilisateurs sur votre interface ! Quant au principe de minimalisme, il va beaucoup plus loin. Il optimise l’expérience utilisateur. Une image peut signifier plusieurs choses…. seulement si elle est utile ! 😉 C’était le mot de la fin !
Dans ce nouvel article, je vous propose de faire un petit tour des choses qui nous énervent le + sur les sites web ! Vous savez ces petites choses que l’on rencontre au quotidien en allant sur tel ou tel site et qui nous font sortir de nos gonds 😡
Jetons-y un œil ! Et bien sûr, en tant qu’expert, je vous donnerais les bonnes pratiques à mettre en place pour se débarrasser de ces frustrations, et ainsi rendre l’expérience utilisateur plus agréable !
C’est parti pour le TOP 10 des plus grandes frustrations ressenties par les utilisateurs du web !
10/ Les textes impossibles à lire !
La majorité des contenus que l’on trouve sur le web sont, pour la plupart, des formats écrits. Et pour cette unique raison, il est important de prêter attention au principe de lisibilité, qui est, rappelons le, essentiel pour une bonne UX.
La lisibilité d’un contenu, c’est avant tout le fait de pouvoir le lire facilement sur n’importe quel type d’écran, que ce soit desktop ou mobile. Eh oui, on en a marre de devoir plisser les yeux, ou de se croire presbyte…
Position oculaire conseillée !
Regardons quelques règles données par le Nielsen Norman Group pour éviter cela !
Utiliser une taille de police suffisamment grande, et donner aux utilisateurs la possibilité de la modifier selon leurs préférences.
Choisir un contraste élevé entre le texte et l’arrière plan, afin de pouvoir lire correctement le contenu.
Sélectionner une police de caractère « propre » et éviter les typographies gothiques, manuscrites, qui gênent la lisibilité.
En clair, la lisibilité d’un contenu repose sur de nombreuses règles. En plus du choix de la typographie, il s’agit de définir correctement la taille de la typo, la longueurs des lignes, les espacements entre les lignes, entre les lettres, etc.
9/ Les call-to-action bien trop petits !
Ce qui est petit est mignon !? Mais tout dépend pour quoi … pour l’expérience utilisateur, plus les éléments interactifs comme les liens ou les boutons sont petits, plus les utilisateurs sont susceptibles de commettre des erreurs. Il est donc important d’adapter correctement la taille des call-to-action !
Exemples de call-to-action trop petits, qui ne ressortent pas du reste de la page !
La performance d’un call-to-action dépend du fait qu’il soit facilement cliquable ou non.
Une étude du Massachussetts Institute of Technology Touch Lab a démontré que la largueur moyenne d’un doigt se situe entre 10 et 14mm, et celle du bout d’un doigt entre 8 et 10 mm. Par conséquent, la taille d’un élément interactif doit idéalement être de 10 mm par 10 mm.
Tout est une question de précision !
➡️ Pour en savoir davantage sur l’importance des call-to-action, je vous conseille d’aller lire notre article reprenant les 7 règles fondamentales à respecter 😉
8/ Les contenus qui surgissent à l’improviste
via BradFrost – Bullshit Overlays
Votre curseur se dirige tranquillement vers le lien sur lequel vous voulez cliquer, et là c’est le drame ! Au lieu de cliquer sur le lien voulu, une annonce apparaît et vous dérange dans la lecture de votre contenu ! Quelle plaie !
Ce changement de contenu soudain se produit généralement à la suite du chargement dynamique du contenu. Comme cette opération est asynchrone, le contenu dynamique est inséré dans la page et déplace le contenu existant, celui qui vous intéresse !
Pour épargner l’utilisateur de ce fléau, vous pouvez mesurer la hauteur du contenu dynamique et le coder en dur de manière à ne pas gêner la lecture du contenu.
Vous avez passé 10 bonnes minutes à remplir un formulaire, et une fois terminé, lorsque vous cliquez sur le bouton “Envoyer”, toutes vos données disparaissent… En actualisant la page Web, tout a été perdu, et vous vous retrouvez face à un message d’Erreur ! La frustration est grande…
Pour éviter cela, respectons l’un des mots d’ordre de la conception d’interface “Les données de l’utilisateur sont sacrées !”. Pour cette raison, il est important d’utiliser des techniques d’enregistrement de données telles que le localStorage.
6/ Dysfonctionnement du bouton “retour”
Selon Jakob Nielsen, cofondateur du Normal Nielsen Group, le contrôle et la liberté de l’utilisateur font partie des 10 principes fondamentaux du design interactif.
“Les utilisateurs effectuent parfois des actions par inadvertance. Ils ont, dans ces cas-là, besoin d’une issue de secours, qui leur permette de quitter rapidement et facilement l’action en cours.”
Le bouton “Retour” est une issue de secours ! Toutefois, il est préférable d’avertir les utilisateurs que cette action est susceptible d’entraîner une perte de données.
5/ Le détournement du défilement des pages
Détourner la fonction “scroll” c’est-à-dire le défilement des pages, consiste pour les concepteurs d’interface à lui attribuer une toute autre fonction, un comportement différent.
Toutefois, attention ! De jolies illustrations ou animations ne rendent pas l’expérience utilisateur meilleure ! En effet, en détournant la fonction du “scroll”, vous prenez le contrôle sur les actions de l’utilisateur. Il aura d’une certaine manière l’impression que le contenu défile sans sa participation. Et rappelez-vous, le contrôle de l’utilisateur est très important !
Faites alors comme Apple ! Lorsque l’utilisateur se trouve sur la page produit de l’Iphone 12, il a l’impression de faire apparaître de nouvelles informations au fur et à mesure qu’il défile. 😉
Pour utiliser tel ou tel service, les demandes d’inscription sont parfois obligatoires. Et sans abonnement ou création de compte, ces demandes vous empêchent d’accéder au contenu que vous vouliez consulter. Bien que cette contrainte relève du marketing, c’est énervant, n’est-ce pas ? Dans le fond, c’est un peu comme le « Pas de bras, pas de chocolat ! »…
De nombreux sites web, notamment les sites d’information, comme Le Monde, demandent un abonnement pour accéder à davantage de contenu. Toutefois, un principe est de rigueur ! Essayer avant d’acheter ! Si les utilisateurs peuvent consulter gratuitement certains articles, ils auront plus envie de s’abonner au contenu que vous proposez ! 😉
3/ La lecture automatiques des vidéos
Vous arrivez sur une page web, et tout à coup une vidéo se met en route sans votre permission ! Mais le pire dans tout ça… c’est le son qui va avec ! Dans ce cas-là, vous n’avez qu’un seul objectif : stopper la vidéo ! Mais parfois ce n’est pas aussi simple… Vous êtes obligés de chercher où elle se trouve pour pouvoir la mettre en pause ! Rien de plus agaçant ….
Le Figaro ou la fâcheuse tendance de la vidéo qui démarre sans prévenir…
Pour ne pas énerver vos utilisateurs, et surtout pour ne pas les faire fuir, sachez qu’il est possible d’utiliser le lecture automatique de vidéos, mais sans le son ! Si l’utilisateur souhaite, lui-même, la regarder, il pourra choisir d’activer le son. 😉
2/ Les envois de notifications
Lorsqu’elles sont correctement utilisées, les notifications sont un excellent outil, surtout pour les applications mobiles ! Elles informent l’utilisateur au quotidien, et les mettent au courant des dernières mises à jour 😉
Néanmoins, les notifications n’ont pas toujours le même effet ! Lorsqu’un site web demande à l’utilisateur une autorisation d’envoi de notifications, il refuse ! Et pourquoi ça ? Tout simplement parce que les utilisateurs ne sont pas intéressés. Alors, un petit conseil… Lorsque vous souhaitez envoyer des notifications aux utilisateurs, assurez-vous qu’ils aient en échange quelque chose à recevoir, un avantage !
1/ Le fameux « Je ne suis pas un robot » !
Certains sites web utilisent, pour assurer une certaine sécurité, ce que l’on appelle un Captcha ! Il s’agit d’un test qui permet de vérifier que les réponses apportées ne sont pas générées pas un ordinateur, mais bel et bien par un être humain !
Bien qu’on peut comprendre l’intérêt de ce fameux Captcha, cocher les cases nous fait toujours souffler, surtout quand on se trompe et/ou qu’on se retrouve à douter comme ici…. 👇
Que faire haha ?
En ayant connaissance des plus grandes frustrations des utilisateurs, l’expérience utilisateur ne peut qu’être améliorée ! À nous de mettre en place, en tant que designers, des solutions, des alternatives qui permettent de rendre plus agréable le parcours des utilisateurs 😉
