Étiquette : webdesign

88 %.

C’est le nombre d’internautes qui ne reviendront plus jamais sur votre plateforme après y avoir vécu une expérience utilisateur catastrophique (source).

En plus de l’esthétique de vos interfaces, le ressenti utilisateur se base largement sur la qualité de l’expérience utilisateur proposée. Parfois bien plus que sur le fait de répondre ou non aux besoins des utilisateurs.

Alors pas question de la négliger. Et pour proposer une UX UI agréable et unique, vous allez devoir maximiser les points suivants :

• l’esthétique de vos éléments graphiques et de vos illustrations ;
• la lisibilité de vos contenus via une mise en page soignée ;
• l’ergonomie et le design de vos pages web ;
• la satisfaction des attentes de l’utilisateur ;
• l’interactivité.

Tout ceci en respectant les contraintes techniques mentionnées dans le cahier des charges du projet.

Oui, ça fait beaucoup.

Mais heureusement, il existe des astuces que vous pouvez utiliser pour booster vos taux de conversion et améliorer votre parcours-client. Des « cheats codes » connus par tous les passionnés de graphisme, de web-design et de conception d’interfaces : les lois de l’UX design.

Il existe des centaines de règles de design. Parmi elles, nous en avons sélectionné 32 que vous pouvez appliquer dès maintenant pour offrir une meilleure expérience utilisateur.

Let’s go !

Sommaire

• Pourquoi négliger l’UX design de vos applications va conduire votre entreprise à la faillite ? (5 raisons + statistiques)
• Les 5 Règles de base
  • 1 – l’affordance
  • 2 – Créer un chemin de navigation intuitif
  • 3 – Miser sur la simplicité
  • 4 – la règle des 3 clics
  • 5 – la règle des 5 secondes
• Les 10 règles de Raina Van Cleave et Nick Finck
  • 1 – Comprendre l’utilisateur
  • 2 – L’utilisateur a raison
  • 3 – la forme découle du fond
  • 4 – Évitez les solutions déjà faites
  • 5 – innover
  • 6 – Le contenu prime
  • 7 – L’interface doit être accessible à tous
  • 8 – Ne pas créer sans imaginer
  • 9 – Comprendre les objectifs
  • 10 – Savoir apprendre de ses erreurs
• Les 17 lois de la conception d’une expérience utilisateur
  • Les 5 lois de la Gestalt
    • 1 – la loi de Prägnanz
    • 2 – la loi de la proximité
    • 3 – la loi de similarité
    • 4 – la loi de clôture
    • 5 – La loi de la symétrie
  • 5 lois de l’UX design qui exploitent les biais cognitifs
    • 1 – L’effet Zeigarnik
    • 2 – La loi Von Restorff
    • 3 – La loi de Serial Position Effect
    • 4 – la loi Peak-end
    • 5 – l’effet IKEA, ou le biais de justification de l’effort
  • 7 lois pour capter l’attention de vos utilisateurs et jouer sur la perception des mouvements
    • 1 – La loi de Tesler
    • 2 – La loi de Hick
    • 3 – La loi de Miller
    • 4 – La loi de Parkinson
    • 5 – La loi de Fitts
    • 6 – La loi de Jakob
    • 7 – Le rasoir d’Occam
• Conclusion

Pourquoi négliger l’UX design de vos applications va conduire votre entreprise à la faillite ? (5 raisons + statistiques)

Si vous êtes ici, c’est que vous savez que vos ventes dépendent grandement de la qualité de votre parcours utilisateur.

Pas du point de vue business, mais du point de vue centré sur l’utilisateur. Peu importe à quel point votre produit est génial, s’il est pénible à utiliser, vous ferez faillite.

Doutez-vous ?

Voici 5 statistiques qui convaincront même les décisionnaires les plus récalcitrants de vous allouer un budget pour l’amélioration du design de votre plateforme :

• 38 % des internautes cesseront d’interagir avec votre plateforme si son contenu ou sa mise en page est raté ;
• Vous pouvez booster vos taux de conversion de 400 % ;
• 88 % des internautes ne reviendront plus jamais sur votre plateforme après une mauvaise expérience ;
• 75 % des consommateurs jugent la crédibilité d’un site web en se basant uniquement sur son esthétique ;
• 13 % de vos clients mécontents vont raconter leurs mésaventures sur votre plateforme à au moins 15 personnes.

Cerise sur le gâteau : l’UX design à un ROI de 10.000 % !

Oui, vous avez bien lu. En investissant 1€ dans l’amélioration de vos interfaces, vous pouvez avoir un ROI de 100 €. À titre de comparaison, l’email marketing, aka le roi des canaux de vente, n’a qu’un « petit » ROI de 4.200% 🙄​.

Allez, voyons maintenant comment atteindre ce retour sur investissement astronomique grâce aux règles de design.

Les 5 Règles de base

Que vous soyez un professionnel de l’UX ou non, certaines erreurs de conception sont si flagrantes qu’elles sautent aux yeux de tous. Et dans « tous », il y a bien sûr vos clients.

Voici cinq règles de base de l’UX design à maîtriser absolument.

1 – l’affordance

Même si ce mot peut sembler très technique, il n’en est rien : l’affordance désigne simplement la capacité d’une interface à faire comprendre subtilement aux utilisateurs ce qu’ils peuvent et ne peuvent pas faire.

Et j’insiste sur le mot « subtilement ».

En effet, dès qu’un utilisateur doit réfléchir pour comprendre les fonctionnalités que vous proposez, il risque de partir.

Raison pour laquelle le choix de l’emplacement, de la couleur, de la forme, la mise en page de vos boutons et icônes doivent être soignés. N’hésitez pas non plus à rajouter un petit texte explicatif qui apparaît en survolant l’icône.

2 – Créer un chemin de navigation intuitif

À ce stade, votre prospect sait ce que vous attendez de lui.

Il va maintenant commencer à se balader sur votre application, à parcourir les différents onglets et à cliquer sur les boutons.

C’est à ce moment que l’intuitivité de la navigation entre en jeu : votre utilisateur doit pouvoir comprendre intuitivement comment se déplacer entre vos interfaces et consommer votre contenu.

3 – Miser sur la simplicité

On reparlera de la simplicité plus bas.

Pour l’heure, retenez simplement qu’il faut à tout prix éviter les éléments superflus et inutilement complexes.

Dans la même veine, privilégiez autant que possible la création d’interfaces claires, cohérentes avec des couleurs, polices et contrastes adaptés.

C’est pour cette raison que le minimalisme fait fureur dans le webdesign depuis tant de décennies : moins, c’est plus.

4 – la règle des 3 clics

Cette règle tient autant de l’architecture de l’information que de l’UX design.

Elle stipule ceci : tout contenu doit toujours être à au plus trois clics de votre page d’accueil. Sinon, l’internaute risque de se sentir frustré et ira chercher le contenu qui l’intéresse ailleurs.

C’est pour cette raison que beaucoup de sites d’e-commerces segmentent leurs contenus en catégories et sous-catégories. Ça permet aux fiches produits d’être toujours à trois clics maximum de la page d’accueil.

5 – la règle des 5 secondes

Selon une étude de Microsoft, l’Homo sapiens connecté est capable de se concentrer sur un site web pendant huit secondes maximum.

D’où cette règle : vos visiteurs doivent être capables de comprendre le but et l’intérêt de vos plateformes en cinq secondes max. Passé ce délai, l’internaute va simplement aller ailleurs.

Les 10 règles de Raina Van Cleave et Nick Finck

Maintenant que vous avez des notions de base en UX design, passons maintenant à des principes plus élaborés : ceux du SXSW interactive 2010.

Si vous n’êtes pas de l’industrie créative, SXSW ne vous dit probablement rien.

Le South by Southwest est l’un des plus grands rassemblements de créatifs au monde. Musiciens, cinéphiles et créatifs s’y donnent rendez-vous chaque année depuis 1987.

L’édition 2010 a marqué un tournant majeur dans l’industrie de l’UX design et du Customer eXperience (CX).

La cause : Nick Finck et Raina Van Cleave, deux designers de renommée mondiale, ont énoncé 10 principes à suivre pour créer une expérience utilisateur réussie. Depuis, ces principes sont devenus des mantras pour les ux designers et autres concepteurs de produits.

Les voici :

1. Comprendre l’utilisateur ;
2. L’utilisateur a raison ;
3. La forme découle du fond ;
4. Éviter autant que possible les solutions déjà faites ;
5. Innover ;
6. Le contenu prime ;
7. L’interface doit être accessible à tous ;
8. Ne pas créer sans imaginer ;
9. Comprendre les objectifs ;
10. Savoir apprendre de ses erreurs.

Voyons-les plus en détail tout de suite.

1 – Comprendre l’utilisateur

Pour qui est-ce que vous voulez créer votre application mobile ?

À cette question, toutes les équipes marketing et celles chargées du développement d’applications répondent (presque) toujours : pour leurs clients.

Mais QUI sont ces clients ? Est-ce que c’est l’utilisateur final ? Le N+1 du développeur web ? La société qui finance pour la création de l’application ?

Ce n’est aucun d’entre eux.

Vos vrais clients sont les utilisateurs finaux. S’ils n’adoptent pas vos produits digitaux, vous aurez beau déployer des prouesses techniques, votre application fera un flop sur les app stores.

Et c’est justement le but de ce principe : toujours chercher à comprendre le client final et concevoir une expérience utilisateur centrée sur l’utilisateur.

Concrètement, cela se traduit par deux éléments :

• adoptez une démarche centrée utilisateur durant la phase de conception ;
• acceptez de remettre en cause votre vision pour créer un produit qui saura satisfaire vos utilisateurs finaux.

Alors comment mettre ce principe en pratique ? Voici 2 choses que vous pouvez faire dès à présent pour y arriver :

• basez vos créations sur des données récoltées auprès de clients réels. Si vous n’en avez pas, alors optez plutôt pour des personas (lisez cet article de Sales Odyssey pour apprendre à créer vos personas marketing) ;
• vérifiez toutes vos hypothèses une à une en créant un MVP avant de lancer le produit final (voici un article qui détaille tout ce qu’il y a à savoir sur le MVP + sa création).

Ce qui nous conduit au point suivant.

2 – L’utilisateur a raison

Rien n’est plus énervant que lorsque vous reportez un bug à une équipe technique et celle-ci la minimise ou la nie.

Nier ou minimiser une erreur est quelque chose de naturel pour beaucoup d’agences de développement web.

Elles ont passé beaucoup d’heures à créer ce chef-d’œuvre de code informatique. Alors, à chaque fois qu’un client signale un bug ou une erreur de mise en page, certaines personnes peuvent se sentir personnellement visées.

Elles ont l’impression que le client remet en doute leurs compétences, ce qui n’est pas vrai. Même les produits des GAFAM ont leurs lots de pannes logicielles.

Si vous faites partie de ces personnes, ce principe est fait pour vous : l’utilisateur a toujours raison.

Même si votre égo en prend un coup, c’est plus rassurant pour vos clients de savoir qu’ils peuvent compter sur vous en cas de pépins. Plutôt qu’à l’inverse, en cas de bug, ils soient livrés à eux-mêmes.

3 – la forme découle du fond

Ce principe pourrait être reformulé comme suit : l’UI design est là pour mettre en valeur le contenu de la plateforme numérique, pas l’inverse.

Clairement, il vous invite à tempérer votre fibre artistique lorsque vous créez les graphismes de vos pages.

Les graphismes et autres éléments visuels sont là pour souligner le contenu de votre application. Ils ne sont pas là pour impressionner vos clients ou montrer votre talent.

Ce principe ressemble trait pour trait à l’un des 10 commandements de Dieter Rams : un bon design est discret.

4 – Évitez les solutions déjà faites

Est-ce que vous connaissez les templates ?

Il s’agit de modèles de sites web et d’applications mobiles qui fleurissent sur le web. Leur promesse est simple : vous n’avez qu’à copier-coller vos contenus dans les cases prévues, et pouf votre plateforme est prête.

Certains d’entre eux ont fait leur preuve dans des sociétés valorisées à plusieurs millions de dollars. Alors, vous n’avez plus qu’à les recopier pour que ça fonctionne aussi pour vous, n’est-ce pas ?

Ne faites surtout pas ça.

En effet, peu importe à quel point votre business model est similaire à celui d’une autre entreprise, vous avez vos particularités.

Et même si des modèles et bouts de code prêts à l’emploi pullulent, prenez toujours le temps de concevoir vos propres solutions logicielles.

Rien ne vous empêche d’utiliser des templates, mais personnalisez-les en détails pour qu’ils correspondent aux besoins spécifiques de ce projet.

5 – innover

L’innovation.

Si vous êtes une startup ou que vous devez lutter face à des mastodontes, ce point est fait pour vous.

Innover rien que dans son UX peut vous fournir un avantage décisif, comme le prouve le cas de la plateforme Medium.

Si vous voulez en apprendre davantage sur ce point, lisez notre article consacré aux 10 commandements du webdesign par Dieter Ram. Vous y verrez comment, rien que par l’UI et l’UX design de vos produits, vous pouvez devenir leader de votre segment de marché.

6 – Le contenu prime

Les exemples de refontes visuelles de plateformes qui ont rendu leurs contenus et leurs services moins accessibles, voire inutilisables, sont légion.

Très souvent, ça partait de bonnes intentions.

Yahoo! avait décidé d’offrir une surprise à ses abonnés pour son 16ᵉ anniversaire en 2013 : une nouvelle interface plus moderne.

Sauf que, vous vous en doutez, si nous en parlons, c’est parce que la surprise est très mal passée auprès du public. En effet, les utilisateurs du service email de la boite ont vite commencé à remarquer un lot de bugs technique et UI :

• ils ne pouvaient plus voir les différents fichiers tant qu’ils n’avaient pas quitté leur boîte de réception ;
• les nouveaux mails n’étaient plus en gras ;
• le bouton de suppression était dangereusement placé à côté du nom du destinataire ;
• le bouton de sauvegarde des brouillons des mails avait été remplacé par un bouton « X » incompréhensible, etc.

Bref, c’était un désastre.

En tentant de moderniser ses interfaces, Yahoo! a négligé l’accessibilité de son contenu et sacrifier l’ergonomie de son service.

Si vous voulez en apprendre plus sur ce cas d’école, voici une archive du NY Times qui lui est consacré et une autre de sitepoint.com .

Yahoo! n’est pas la seule entreprise technologique à s’être tirée une balle dans le pied à cause d’une refonte.

YouTube a aussi commis cette bourde en 2017. Là aussi, la principale frustration des utilisateurs était la disparition et la difficulté d’accéder à certains contenus – dont le compteur de vues et le bouton dislike.

Et le service de vidéo a refait exactement la même chose avec sa refonte de 2022.

Alors, quelle leçon tirer de ces deux fails ? Réponse : le contenu prime toujours sur l’interface.

Ainsi, lorsque vous modifiez l’une de vos interfaces, assurez-vous que toutes les informations restent toujours autant lisibles et accessibles.

7 – L’interface doit être accessible à tous

Tous vos clients doivent pouvoir utiliser votre application. Et pour y arriver, vous allez vous assurer qu’il n’y ait pas de problèmes de compatibilité :

• avec les différents périphériques : ordinateurs, tablettes, smartphones, montres connectées, etc ;
• avec les différents navigateurs : Google Chrome, Microsoft Edge, Firefox, Safari, Opera, etc ;
• Enfin, avec les différents formats et résolution d’écran.

Côté humain, ce principe de l’UX vous pousse aussi à prendre en compte les personnes qui souffrent d’un ou plusieurs handicaps.

8 – Ne pas créer sans imaginer

Au fond de vous, brûle une passion créatrice que vous voulez laisser s’exprimer directement sur votre toile Photoshop ou Figma.

Ne faites pas ça.

Avant même d’ouvrir votre Figma ou votre logiciel de maquettage préféré, posez-vous et réfléchissez profondément sur votre projet. Grâce à cela, vous allez pouvoir être certain que vos créations seront réellement alignées avec votre projet.

9 – Comprendre les objectifs

Votre application a un objectif. Et c’est votre devoir en tant qu’UX designer de créer une expérience utilisateur qui vous aidera vous, ainsi que vos utilisateurs, à l’atteindre.

Raison pour laquelle ce principe vous invite à chercher à comprendre le projet sur lequel vous travaillez en profondeur.

N’hésitez pas à poser des questions sur le modèle économique, les personas, la plus-value, l’argument différenciateur et tout ce qui tourne de près ou de loin autour du projet de création d’application.

10 – Savoir apprendre de ses erreurs

Hélas, il est impossible de concevoir des interfaces et un parcours clients qui font mouche dès le premier coup.

Il y aura toujours quelque chose à perfectionner pour améliorer les performances de l’app ou une autre métrique de votre tableau de bord.

Ce qui nous amène à ce principe : apprenez à bien apprendre de vos erreurs.

Pourquoi précisons-nous bien ? Parce qu’il n’est pas rare que les développeurs d’une app se basent uniquement sur le nombre de souscriptions pour déterminer si leur dernière mise à jour est réussie.

Sauf que cela ne suffit pas.

Est-ce que le nombre d’utilisateurs à varier à cause de l’effet de réseau ou d’un événement extérieur ?

Est-ce qu’il suit juste sa courbe de croissance normale ?

S’il a baissé, quelle est la cause de cette baisse ?

Sans un tableau de bord précis et des KPI pertinents, vous serez incapable de répondre à ces questions. Et donc, vous ne pourrez pas non plus savoir quels points sont à améliorer ou à revoir au sein de votre UX.

Notre conseil : créez un MVP et procédez via la méthode Lean Startup. Si vous ne connaissez pas ces deux mots, voici le livre d’Erick Ries qui en parle.

Les 17 lois de la conception d’une expérience utilisateur

Jusqu’à présent, nous avons couvert les concepts de base de l’UX design.

Maintenant, place à ceux qui sont plus avancés dans la technique. Nous les avons regroupés en trois grandes catégories :

• les 5 lois de la Gestalt ;
• 6 lois de l’UX design dédiées aux biais cognitifs ;
• 7 lois pour capter l’attention des utilisateurs en jouant sur leur perception du mouvement.

Sans plus tarder, entrons dans le vif du sujet.

Les 5 lois de la Gestalt

Née en Allemagne au 20e siècle, la gestalt ou psychologie de la forme, est une théorie psychologique qui s’intéresse à la manière dont nous percevons les formes.

Son principe est simple : nous percevons davantage les formes dans leur ensemble plutôt que comme la juxtaposition ou l’addition de formes plus simples.

C’est un avantage plutôt pratique pour la conception des expériences utilisateur. En effet, notre cerveau va chercher à attribuer un sens à des représentations visuelles qui n’en ont pas.

En France, Carrefour est l’exemple le plus connu d’utilisation du gestaltisme dans sa charte graphique, comme en témoigne son logo.

En regardant ce logo, le « C » de la marque vous saute aux yeux, n’est-ce pas ?

Pourtant, regardez-le en détails et quelque chose va vous sauter aux yeux : il n’y a aucun « C » dans ce logo.

C’est cette théorie, couplée au minimalisme, qui explique le fait que beaucoup de logos de grandes marques éliminent le plus de détails possibles. Comme en témoignent les logos d’Apple et de McDonald.

Bon, maintenant que vous êtes curieux·se d’en apprendre plus, voyons comment utiliser la gestalt dans votre UX design.

1 – la loi de Prägnanz

Si vous n’arrivez pas à prononcer Prägnanz, dites simplement la loi de la simplicité.

Cette loi stipule que les utilisateurs perçoivent et interprètent les formes complexes comme des formes plus simples parce qu’elles nécessitent moins de charge mentale.

Vous souvenez-vous des logos plus haut ? C’est ce principe qu’ils appliquent.

Voici comment l’utiliser dans votre conception centrée sur l’utilisateur :

• évitez de créer des formes complexes dans vos interfaces, les utilisateurs ne se souviendront pas des détails (et ça vous prendra un temps monstrueux) ;
• allégez vos éléments graphiques de tous les détails graphiques superflus, moins, c’est plus ;
• créez des mises en page qui utilisent des schémas connus par les clients de votre niche.

S’il faut résumer cette loi en une phrase : créez des interfaces claires, simples, précises et que vos utilisateurs pourront rapidement et intuitivement comprendre.

2 – la loi de la proximité

Est-ce que vous avez déjà remarqué que les interfaces des logiciels sont toutes segmentées en blocs ?

Et que chacun de ces blocs contient un type d’information précis (boutons, icônes, contenus, etc.) ?

La raison vient de la loi de la proximité. Voici ce qu’elle stipule : le cerveau regroupe ensemble les objets qui sont proches.

Facebook est l’un des meilleurs exemples d’utilisation de ce principe. Admirez sa page d’accueil.

Tous les éléments ayant à peu près le même sens sont regroupés en blocs.

Vous aussi, vous pouvez utiliser ce principe de deux façons :

• en créant des espaces vides entre les éléments qui ne sont pas liées, vos utilisateurs comprendront rapidement qu’il s’agit de deux types d’information distincts ;
• À l’inverse, pour montrer que des éléments ou des contenus ont presque les mêmes fonctionnalités, regroupez-les.

Maintenant, passons à la loi suivante.

3 – la loi de similarité

« Qui se ressemble, s’assemble ». Cet adage décrit parfaitement cette loi.

En effet, le cerveau a tendance à regrouper ensemble les éléments visuels qui ont la même forme, couleur, taille ou orientation. Elle est très utile pour présenter visuellement l’architecture de vos contenus.

Vous utilisez constamment cette loi de la gestalt lorsque vous surfez sur le web et cherchez des liens hypertextes.

Avez-vous réussi à trouver les quatre liens hypertextes de cet article sur le webdesign ?

Pour l’utiliser, rien de plus simple : donnez toujours la même couleur et éventuellement la même forme aux éléments visuels de votre IHM partageant la même fonctionnalité.

4 – la loi de clôture

À coup sûr, vous avez reconnu le logo d’IBM.

D’ailleurs, vous lisez distinctement « I » « B » « M ». Sauf qu’aucune de ces lettres n’est écrite.

Votre cerveau a reconstitué l’information manquante et à compléter ces lettres : c’est le principe de la loi de clôture.

Face à une forme incomplète, le cerveau humain va imaginer les parties manquantes pour créer une forme entière.

Raison pour laquelle vous arrivez à voir un panda sur le logo de l’association WWF.

Ou encore un chien se déplaçant alors que ce n’est qu’un amas de points qui bougent.

Alors comment utiliser la loi de la clôture dans votre UX design ? Voici quelques pistes :

• en créant des animations stylisées comme celle plus haut.
• en créant des boutons et icônes stylisées ;
• suscitez la curiosité de l’utilisateur en ne lui montrant qu’une partie d’un contenu.

Par contre, attention à ne pas retirer trop de détails, sinon l’utilisateur ne parviendra pas à reconstituer l’information.

5 – La loi de la symétrie

Voici ce qu’elle dit : « le cerveau humain tend à percevoir les formes symétriques comme des unités cohérentes et stables ».

Vous pouvez en servir pour créer une expérience utilisateur harmonieuse et intuitive comme le fait Apple Music.

Ou encore pour donner à vos interfaces IHM un aspect plus professionnel et renforcer la crédibilité de votre entreprise. Société Générale est un bon exemple d’usage de la symétrie à cet usage.

Vous pouvez aussi utiliser la symétrie pour créer une identité visuelle inoubliable comme le fait city-dog.uk.

Si vous voulez découvrir comment utiliser encore plus la symétrie dans vos design, UX360 en a fait un bon article.

5 lois de l’UX design qui exploitent les biais cognitifs

Lorsque nous sommes face à une grande quantité d’information et que nous devons faire des choix, notre cerveau a tendance à prendre des raccourcis : les biais cognitifs.

Et bonne nouvelle, vous pouvez les utiliser pour offrir une expérience utilisateur immersive à vos clients grâce à 5 lois :

• l’effet Zeigarnik ;
• la loi Von Restorff ;
• la loi Peak-End ;
• l’effet IKEA ;
• la loi de Serial Position Effect.

Voyons-les en détail tout de suite.

1 – L’effet Zeigarnik

L’effet Zeigarnik désigne notre faculté à mieux nous souvenir des tâches en cours plutôt que des tâches finies.

C’est ce qui explique le fait que vous arrivez toujours à vous souvenir des tâches non-terminées de votre to-do list plutôt que celles que vous avez faites.

Ou encore que vous regardiez des séries Netflix pendant des heures, tout ça parce qu’à la fin de chaque épisode, la plateforme vous fait comprendre que ce n’est pas fini.

Alors, comment l’utiliser pour concevoir votre expérience utilisateur ? Voici quelques réponses :

• incitez vos utilisateurs à vouloir aller plus loin en leur teasant la prochaine étape via un cliffhanger (comme Netflix). Si vous présentez beaucoup de contenus textuels, essayez de mettre les « … » à la fin de certains blocs de texte ;

• donnez la possibilité à vos lecteurs de consommer une partie de vos contenus, puis coupez-les brutalement. C’est ce que font les médias en ligne pour vous inciter à payer un abonnement ;

• demandez à l’internaute de créer son profil et montrez-lui sa progression via une barre de tâche. Même si ce n’est pas nécessaire à l’usage de votre application, l’effet Zeigarnik le poussera à compléter l’action ;
• montrez les étapes manquantes pour réaliser une action (cf. les steppers des sites e-commerces).

Attention quand même, l’effet Zeigarnik à ses limites : si l’utilisateur juge que vos demandes gâchent son expérience, il va tout simplement aller sur une autre plateforme.

2 – La loi Von Restorff

Aussi appelé loi de l’isolation, elle stipule ceci : « lorsqu’il y a plusieurs objectifs, l’utilisateur va automatiquement être attiré par celui qui diffère des autres et va le garder en mémoire ».

Ok, ça a l’air assez théorique, alors on va prendre un exemple.

Regardez l’image suivante. Quel cercle est le plus facile à mémoriser ?

Les cinq rouges ou le seul qui soit vert ?

La couleur n’est pas la seule caractéristique visuelle que vous pouvez utiliser pour mettre en valeur un de vos items. Vous pouvez aussi utiliser :

• la forme ;
• le formatage du texte : gras, italique, surligné, souligné, barré, etc ;
• les espaces entre les éléments ;
• la taille, etc.

Un autre exemple d’utilisation de l’effet Von Restorff qui est bien connu, ce sont les publicités types pop-ups.

Oui, nous savons que vous les détestez et que juste à les voir, vos poils se hérissent. Pourtant, ce sont des bijoux d’utilisation de l’effet Von Restorff.

Et voici pourquoi :

• ils mettent en valeur leurs contenus en misant sur des couleurs criardes et des animations qui attirent le regard ;
• ils sont volumineux et se placent dans des endroits stratégiques de notre champ de vision ;
• certains pop-ups arborent un gros call to action avec des couleurs fortement contrastées.

Vous aurez beau faire tous les efforts du monde pour les ignorer pendant votre navigation, vous ne pouvez pas.

Alors, comment utiliser l’effet Von Restorff pour parfaire votre UX/UI design ? Voici 8 astuces que vous pouvez utiliser :

• rendez les informations importantes (ou l’action que vous voulez que l’utilisateur fasse) visuellement distinctes des autres ;
• utilisez les techniques de mise en valeur des éléments avec parcimonie pour que l’utilisateur ne soit pas distrait ;
• créez des icônes colorées ;
• créez une hiérarchie entre vos contenus en misant sur la typographie et la couleur des textes ;
• utilisez des animations subtiles pour attirer l’attention ;
• si vos interfaces Homme-machine comportent beaucoup de textes, utilisez des infographies pour mettre en valeur les informations pertinentes ;
• n’hésitez pas à rajouter une information visuelle sur l’élément le plus important ;
• ne rendez pas distinguables les boutons permettant de réaliser les actions que vous ne voulez pas que l’utilisateur réalise ;

Pour vous inspirer, n’hésitez pas à admirer la conception graphique du site web Canva.

Cerise sur le gâteau : l’effet Von Restorff ne s’applique pas qu’aux visuels.

Vous pouvez aussi l’utiliser sous la forme de textes comme le fait Airbnb en vous proposant des maisons troglodytes et des tiny houses.

3 – La loi de Serial Position Effect

Si vous ne devez retenir qu’une loi, c’est celle-ci : les humains ont tendance à mieux se souvenir du premier et du dernier élément d’une liste. On peut scinder cette loi en deux :

• l’effet de primauté ;
• l’effet de récence.

Le premier dit ceci : le premier élément d’une liste à toujours plus d’importance que le reste à nos yeux. En effet, c’est lui qui donne le ton du reste du contenu, par conséquent, on s’y attarde plus.

Le second stipule que l’on a mieux tendance à se souvenir du dernier élément que l’on a vu parmi une foule d’éléments.

C’est à cause de cette loi psychologique que nous mettons autant d’efforts pour faire une bonne première impression à autrui. Et que les restaurants mettent toujours les plats à la carte – souvent les plus rentables — en premier.

Les UX designers utilisent abondamment ce principe. Voici comment vous pouvez faire de même :

• mettez toutes les caractéristiques négatives ou à faible valeur de vos produits en milieu de page, jamais au début ni à la fin ;
• placez vos CTA au début et à la fin de la page ;
• utilisez les mêmes boutons à la même place sur toutes vos pages ;
• créez les menus les plus courts possibles – pas plus de 3 ou 5 items – ou utilisez un menu hamburger.

Adobe utilise parfaitement ce principe pour vendre son offre Adobe Creative Cloud.

Dropbox, le géant de l’hébergement de fichiers en ligne, fait de même sur sa homepage.

Le bouton “commencer” est placé à la fin du menu et à la fin du contenu. Et que trouve-t-on à la fin de la page ?

Un gros bouton qui vous redirige vers la page des forfaits.

4 – la loi Peak-end

Vous êtes vous déjà demandé comment est-ce que les gens jugent leurs expériences ?

…

Ils le font en se basant grandement sur le pic et la fin plutôt que sur la moyenne de tous les moments qu’ils ont vécus.

C’est ce que vous faites lorsque vous racontez vos vacances. Vous parlez beaucoup des moments les plus intenses et de la fin. Les longues heures de planification sont rarement évoquées.

En tant qu’UX designer ou gestionnaire de produits, vous pouvez jouer sur ce principe pour améliorer la satisfaction des utilisateurs.

Premièrement, identifiez les pics. Les pics correspondent à ces moments où vos clients se demandent comment est-ce qu’ils ont fait pour vivre sans votre produit.

Ensuite, gamifiez-le pour le rendre mémorable. À ce jeu-là, Mailchimp et l’animation du singe qui transpire à grosse goutte lorsque vous lancez votre campagne e-mail est imbattable.

Ensuite, soignez la fin de votre user journey. Assurez-vous que l’utilisateur soit satisfait et souvenez-vous que les gens se souviennent plus facilement des mauvaises expériences.

Libre à vous de faire parler votre créativité. IKEA est devenue une référence de l’UX design… en proposant des crèmes glacées à leurs clients à la sortie du magasin.

Subitement, IKEA ne vend plus des meubles, mais une expérience de shopping.

Et hop, parfaite transition pour la dernière loi.

5 – l’effet IKEA, ou le biais de justification de l’effort

Jusqu’à présent, toutes les lois que nous vous avons montrées vous incitent à réduire les frictions dans votre user journey.

Mais est-ce qu’un peu de difficulté ne ferait pas du bien ?

L’effet IKEA répond oui : les gens tombent aisément amoureux des produits qu’ils ont pris de la peine à concevoir.

From Software, un éditeur de jeux vidéo nippon, l’a bien compris avec sa série Dark Souls. Dans ce jeu, rien n’est fait pour vous faciliter la vie. La mort vous attend à chaque détour de la carte et même les ennemis de bases sont coriaces.

Un véritable ovni dans l’univers du jeux-vidéo qui se tourne de plus en plus vers les jeux tous publics.

Pourtant, ça a fait mouche. Les joueurs de tous niveaux ont adoré son gameplay justement parce qu’il est punitif.

C’est exactement ça l’effet IKEA : plus un utilisateur s’investit dans la création d’un produit, plus il en tombe amoureux.

Ce principe tire son nom du magasin IKEA, qui laisse la charge de monter les meubles aux clients. Bien que ce soit difficile et que le résultat soit prévisible, les gens en sont fiers.

Alors comment l’utiliser pour augmenter le taux de rétention de vos app ? Voici quelques pistes :

• demandez à l’utilisateur de compléter son profil ;
• offrez des possibilités de customisation aux utilisateurs finaux ;
• offrez des réductions en guise de « vraies » récompenses à vos clients.

Maintenant, passons aux prochaines lois.

7 lois pour capter l’attention de vos utilisateurs et jouer sur la perception des mouvements

Pour créer une expérience utilisateur réussie et mémorable, vous devez jouer avec l’attention des utilisateurs.

Si vous la sollicitez trop, votre prospect va quitter votre plateforme. À l’inverse, si vous ne réussissez pas à garder son attention durant toute sa navigation, il va s’ennuyer sur votre plateforme et vos ventes vont plonger.

Bref, vous devez manier aussi bien l’attention qu’un maître jedi mani son sabre. Raison pour laquelle nous vous proposons ces 7 lois de l’UX design :

• la loi de Tesler ;
• la loi de Miller ;
• la loi de Parkinson ;
• la loi de Jakob ;
• la loi de Fitt ;
• la loi de Hick ;
• le rasoir d’Occam.

Voyons-les en détail.

1 – La loi de Tesler

Aussi appelée la loi de la conservation de la complexité, elle stipule ceci : il existe un degré de complexité en dessous duquel vous ne pourrez jamais réduire un système.

L’exemple direct qui me vient en tête, ce sont les sites de réservations d’hôtel.

À l’heure du minimalisme et de la réduction du nombre de champs de formulaire, les sites de réservation sont des exceptions. Ils vous demanderont toujours au moins quatre champs.

Après, complexité ne rime pas avec mauvaise expérience utilisateur.

Comme le démontre le site 16personnalities.com qui vous demande quand-même de répondre à 60 questions pour évaluer votre profil psychologique. Ce qui en fait une parfaite transition pour la loi suivante.

2 – La loi de Hick

Voici ce qu’elle dit : « le temps pris pour faire un choix augmente proportionnellement au nombre d’options disponibles. ».

En effet, plus vous donnez de choix à votre utilisateur, plus il va tenter de comparer ses alternatives. Fatalement, cela va lui demander beaucoup d’efforts et il risque de remettre à plus tard.

Mais bon, vous et moi le savons, plus tard signifie très souvent jamais, ce qui représente un vrai manque à gagner.

Comme si ça ne suffisait pas, s’il y a trop d’options, gardez en tête qu’il peut tout simplement décider de quitter votre plateforme et de ne plus y revenir.

Heureusement, en tant qu’UX designer, vous pouvez limiter l’impact de la loi de Hick en découpant le parcours utilisateur en grandes étapes.

Vous souvenez-vous du site 16personnalities.com dont on parlait plus haut ? Plutôt que de vous mettre face à un questionnaire de 60 cases à cocher, il les segmente par groupe de 6.

Spotify aussi le fait en ne vous proposant que quelques catégories de musique sur sa page d’accueil.

Dès que vous choisissez votre catégorie, les sous-catégories s’affichent et ainsi de suite jusqu’à ce que vous trouviez une mélodie qui vous plaît.

3 – La loi de Miller

Énoncée pour la première fois en 1956, la loi de Miller affirme que nous ne pouvons garder en mémoire que 5 ou 7 éléments. Pas plus.

Vous utilisez constamment ce principe sans vous en rendre compte. Essayez d’énoncer votre numéro de téléphone à haute voix. Vous verrez que vous le découpez instinctivement en groupe de trois chiffres.

Pour revenir au webdesign, c’est cette loi qui explique que les développeurs créent rarement des menus à plus de sept éléments.

L’une des mises en pratique les plus célèbres de la loi de Miller est la refonte graphique du site web de La Redoute. Voici à quoi ressemblait sa page d’accueil en 2009.

Faisons l’impasse sur son esthétique. Attaquons-nous plutôt au nombre de catégories présentées en haut de page.

Il y en a 16 !

Essayez de toutes les lire et de vous en souvenir (sans inclure celles qui sont en début et en fin de liste).

…

Combien de catégories vous reviennent en tête ? Surement moins de la moitié. Heureusement, l’entreprise a depuis fait plusieurs refontes graphiques qui ont corrigé ce problème.

Le nombre de catégories a grandement chuté. Seules sept sont présentées. Les autres étant masqués sous un menu hamburger.

Voici comment vous pouvez l’utiliser sur vos plateformes numériques :

• divisez vos contenus en petits morceaux ;
• créez une hiérarchie visuelle grâce à des titres et des sous-titres (ça fonctionne aussi avec les catégories et sous-catégories) ;
• retirez tous les éléments superflus de vos interfaces ;
• évitez les icônes difficiles à comprendre.

Pour finir, vous pouvez aussi vous inspirer de la plateforme de streaming Netflix.

Malgré son catalogue de films impressionnant, la plateforme n’en affiche que quelques-uns visuellement regroupés en petits groupes.

4 – La loi de Parkinson

Toute tâche prolongée est prolongée jusqu’à prendre tout le temps que nous lui allouons.

Si vous vous intéressez à la productivité, cette loi vous est familière. Bonne nouvelle, elle peut aussi être utilisée pour peaufiner l’expérience proposée par votre plateforme.

En effet, plus vous exigerez que vos visiteurs fassent des actions complexes, plus ils prendront de temps. Sauf qu’en tant qu’UX designer, vous savez que plus de temps signifie aussi plus de chance qu’il abandonne et quitte la plateforme.

Concrètement, voici quelques techniques que vous pouvez utiliser pour maximiser ce principe :

• proposez le remplissage automatique du maximum de champs possibles sur vos formulaires ;
• proposez des méthodes de paiement rapides et intuitives ;
• montrez à vos utilisateurs le temps nécessaire pour terminer l’action en cours ;
• Pré-remplissez les barres de recherche du moteur de recherche intégré de votre app.

5 – La loi de Fitts 

Est-ce que vous avez déjà rêvé de pouvoir prédire les actions des internautes ?

Grâce à la loi de Fitts, vous pouvez essayer. Voici ce qu’elle dit : « Le temps nécessaire à l’acquisition d’une cible est fonction de la distance et de la taille de la cible ». Autrement dit, si vos boutons d’appel à l’action sont petits et éloignés de son doigt, l’utilisateur risque de les rater.

Pour appliquer la loi de Fitts dans votre UX design, suivez ces règles :

• créez des boutons suffisamment gros (au moins 44 x 44 pixels CSS) ;
• laissez des espaces suffisamment larges entre vos éléments graphiques pour diminuer le taux d’erreur ;
• ajoutez des labels explicatifs à vos icônes ;
• ajoutez des espaces blancs en plus des padding autour de vos icônes ;
• éloignez autant que possible les boutons qui permettent de réaliser des actions que vous ne voulez pas (quitter l’application, retour en arrière, etc.) ;
• placez les cibles liées entre elles proches les unes des autres.

Uber applique ce principe avec succès dans toutes ses interfaces.

 

Avez-vous remarqué ? Le bouton pour entamer la course remplit tout le bas de l’écran et arbore un bouton d’appel à l’action travaillé. Clairement, c’est le bouton que vous toucherez le plus facilement avec le pouce.

À l’inverse, le bouton pour annuler la course est situé en haut à gauche de l’écran du smartphone. Impossible d’y accéder sans avoir à sortir votre autre main de votre poche. Si vous transportez un colis, vous devrez carrément le déposer pour annuler.

6 – La loi de Jakob

Si vous voulez innover dans le design graphique et dans l’agencement des éléments de vos interfaces, cette loi est faite pour vous.

Voici ce qu’elle dit : le meilleur moyen de créer quelque chose de nouveau est de regarder les références.

Autrement dit : l’ui de votre plateforme doit reprendre certains éléments de vos concurrents sans pour autant être une pâle copie.

La raison est simple, les clients de votre marché utilisent déjà des plateformes de vos concurrents directs ou indirects. Ce qui leur a laissé le temps de se forger des habitudes de navigation.

Alors si vous débarquez avec des interfaces trop révolutionnaires et difficiles à comprendre pour eux… ils vont retourner chez vos concurrents.

C’est pour cette raison que si vous fréquentez régulièrement les sites d’e-commerce, où que vous soyez dans le monde, vous saurez comment vous en servir.

Par conséquent, si vous voulez créer votre propre site d’e-commerce, un conseil : organisez vos contenus en suivant la même grille.

7 – Le rasoir d’Occam

Terminons avec la solution la plus simple pour éviter toute erreur dans la conception de vos produits : le rasoir d’Occam.

Voici ce qu’il dit : les solutions les plus simples sont presque toujours les meilleures.

En termes d’UX designer, on peut la reformuler comme ceci : « parmi tous les choix  aboutissant au même résultat qui sont proposés à un utilisateur, il choisira toujours celles qui reposent sur le moins d’hypothèses. ».

Heureusement, ce principe est assez simple à appliquer :

• concevez vos interfaces en n’y ajoutant que les éléments nécessaires ;
• retirez toutes les informations qui n’apportent pas assez de valeur ;
• analysez l’impact des ajouts sur vos interfaces UI et basez-vous sur les données pour décider de le garder ou pas ;
• analysez chaque élément et retirez-en autant que possible sans pour autant brider les fonctionnalités phares de votre logiciel.

Clairement, ce principe vous invite à faire preuve de minimaliste dans la conception de vos interfaces. Moins, c’est mieux.

L’une des entreprises qui applique le mieux ce principe, c’est le moteur de recherche Google.

Aucun élément superflu n’est présent. Vous venez pour faire une recherche et vous trouvez la barre de recherche parfaitement mise en évidence.

A contrario, lorsque vous voulez effectuer une recherche sur Yahoo!, vous risquez d’être distrait dès votre arrivée sur la plateforme.

Sans que vous n’ayez rien demandé, vous tombez sur une bannière publicitaire, un scroll infini de news people et une armada de publicités sponsorisées.

Conclusion

Si vous étiez hanté par l’idée de savoir comment créer une expérience utilisateur immersive et réussie, on espère vous avoir aidé à trouver des réponses.

Mais soyons honnêtes : appliquer toutes ces lois va vous demander beaucoup de temps.

Du temps que vous pouvez allouer au marketing, à l’amélioration de vos produits et autres.

On a une solution pour vous : venez discuter avec nous de l’ux design de vos futures plateformes.

Qu’elles soient au stade du prototypage, d’idée ou que votre service soit déjà déployé, notre chef de projet informatique vous aidera à l’améliorer.

Alors qu’attendez-vous ? C’est gratuit et ça se passe ici 😁.