En plus de l\u2019esth\u00e9tique de vos interfaces, le ressenti utilisateur se base largement sur la qualit\u00e9 de l\u2019exp\u00e9rience utilisateur propos\u00e9e. Parfois bien plus que sur le fait de r\u00e9pondre ou non aux besoins des utilisateurs.<\/p>\n
Alors pas question de la n\u00e9gliger. Et pour proposer une UX UI agr\u00e9able et unique, vous allez devoir maximiser les points suivants\u00a0:<\/p>\n
- \n
- l\u2019esth\u00e9tique de vos \u00e9l\u00e9ments graphiques et de vos illustrations\u00a0;<\/li>\n
- la lisibilit\u00e9 de vos contenus via une mise en page soign\u00e9e\u00a0;<\/li>\n
- l\u2019ergonomie et le design de vos pages web\u00a0;<\/li>\n
- la satisfaction des attentes de l\u2019utilisateur\u00a0;<\/li>\n
- l\u2019interactivit\u00e9.<\/li>\n<\/ul>\n
Tout ceci en respectant les contraintes techniques mentionn\u00e9es dans le cahier des charges du projet<\/a>.<\/p>\n
Oui, \u00e7a fait beaucoup.<\/p>\n
Mais heureusement, il existe des astuces que vous pouvez utiliser pour booster vos taux de conversion et am\u00e9liorer votre parcours-client<\/a>. Des \u00ab\u00a0cheats codes\u00a0\u00bb connus par tous les passionn\u00e9s de graphisme, de web-design et de conception d\u2019interfaces\u00a0: les lois de l\u2019UX design.<\/p>\n
Il existe des centaines de r\u00e8gles de design. Parmi elles, nous en avons s\u00e9lectionn\u00e9 32 que vous pouvez appliquer d\u00e8s maintenant pour offrir une meilleure exp\u00e9rience utilisateur.<\/p>\n
Let\u2019s go\u00a0!<\/p>\n
Sommaire<\/b><\/p>\n
- \n
- Pourquoi n\u00e9gliger l\u2019UX design de vos applications va conduire votre entreprise \u00e0 la faillite ? (5 raisons + statistiques)<\/li>\n
- Les 5 R\u00e8gles de base\n
- \n
- 1 \u2013 l\u2019affordance<\/li>\n
- 2 \u2013 Cr\u00e9er un chemin de navigation intuitif<\/li>\n
- 3 \u2013 Miser sur la simplicit\u00e9<\/li>\n
- 4 \u2013 la r\u00e8gle des 3 clics<\/li>\n
- 5 \u2013 la r\u00e8gle des 5 secondes<\/li>\n<\/ul>\n<\/li>\n
- Les 10 r\u00e8gles de Raina Van Cleave et Nick Finck\n
- \n
- 1 \u2013 Comprendre l\u2019utilisateur<\/li>\n
- 2 \u2013 L\u2019utilisateur a raison<\/li>\n
- 3 \u2013 la forme d\u00e9coule du fond<\/li>\n
- 4 \u2013 \u00c9vitez les solutions d\u00e9j\u00e0 faites<\/li>\n
- 5 \u2013 innover<\/li>\n
- 6 \u2013 Le contenu prime<\/li>\n
- 7 \u2013 L\u2019interface doit \u00eatre accessible \u00e0 tous<\/li>\n
- 8 \u2013 Ne pas cr\u00e9er sans imaginer<\/li>\n
- 9 \u2013 Comprendre les objectifs<\/li>\n
- 10 \u2013 Savoir apprendre de ses erreurs<\/li>\n<\/ul>\n<\/li>\n
- Les 17 lois de la conception d\u2019une exp\u00e9rience utilisateur\n
- \n
- Les 5 lois de la Gestalt\n
- \n
- 1 \u2013 la loi de Pr\u00e4gnanz<\/li>\n
- 2 \u2013 la loi de la proximit\u00e9<\/li>\n
- 3 \u2013 la loi de similarit\u00e9<\/li>\n
- 4 \u2013 la loi de cl\u00f4ture<\/li>\n
- 5 – La loi de la sym\u00e9trie<\/li>\n<\/ul>\n<\/li>\n
- 5 lois de l\u2019UX design qui exploitent les biais cognitifs\n
- \n
- 1 \u2013 L\u2019effet Zeigarnik<\/li>\n
- 2 – La loi Von Restorff<\/li>\n
- 3 – La loi de Serial Position Effect<\/li>\n
- 4 \u2013 la loi Peak-end<\/li>\n
- 5 \u2013 l\u2019effet IKEA, ou le biais de justification de l\u2019effort<\/li>\n<\/ul>\n<\/li>\n
- 7 lois pour capter l\u2019attention de vos utilisateurs et jouer sur la perception des mouvements\n
- \n
- 1 – La loi de Tesler<\/li>\n
- 2 – La loi de Hick<\/li>\n
- 3 – La loi de Miller<\/li>\n
- 4 – La loi de Parkinson<\/li>\n
- 5 – La loi de Fitts<\/li>\n
- 6 – La loi de Jakob<\/li>\n
- 7 – Le rasoir d\u2019Occam<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n
- Conclusion<\/li>\n<\/ul>\n
Pourquoi n\u00e9gliger l\u2019UX design de vos applications va conduire votre entreprise \u00e0 la faillite\u00a0? (5 raisons + statistiques)<\/h2>\n
Si vous \u00eates ici, c\u2019est que vous savez que vos ventes d\u00e9pendent grandement de la qualit\u00e9 de votre parcours utilisateur.<\/p>\n
Pas du point de vue business, mais du point de vue centr\u00e9 sur l\u2019utilisateur. Peu importe \u00e0 quel point votre produit est g\u00e9nial, s\u2019il est p\u00e9nible \u00e0 utiliser, vous ferez faillite.<\/p>\n
Doutez-vous ?<\/p>\n
Voici 5 statistiques qui convaincront m\u00eame les d\u00e9cisionnaires les plus r\u00e9calcitrants de vous allouer un budget pour l\u2019am\u00e9lioration du design de votre plateforme\u00a0:<\/p>\n
- \n
- 38 %<\/a> des internautes cesseront d\u2019interagir avec votre plateforme si son contenu ou sa mise en page est rat\u00e9\u00a0;<\/li>\n
- Vous pouvez booster vos taux de conversion de 400 %\u00a0<\/a>;<\/li>\n
- 88 %<\/a> des internautes ne reviendront plus jamais sur votre plateforme apr\u00e8s une mauvaise exp\u00e9rience\u00a0;<\/li>\n
- 75 %<\/a> des consommateurs jugent la cr\u00e9dibilit\u00e9 d\u2019un site web en se basant uniquement sur son esth\u00e9tique\u00a0;<\/li>\n
- 13 %<\/a> de vos clients m\u00e9contents vont raconter leurs m\u00e9saventures sur votre plateforme \u00e0 au moins 15 personnes.<\/li>\n<\/ul>\n
Cerise sur le g\u00e2teau\u00a0: l\u2019UX design \u00e0 un ROI de 10.000 %\u00a0!<\/p>\n
Oui, vous avez bien lu. En investissant 1\u20ac dans l\u2019am\u00e9lioration de vos interfaces, vous pouvez avoir un ROI de 100 \u20ac.<\/a> \u00c0 titre de comparaison, l\u2019email marketing, aka le roi des canaux de vente, n\u2019a qu\u2019un \u00ab\u00a0petit\u00a0\u00bb ROI de 4.200%<\/a> \ud83d\ude44\u200b.<\/p>\n
Allez, voyons maintenant comment atteindre ce retour sur investissement astronomique gr\u00e2ce aux r\u00e8gles de design.<\/p>\n
Les 5 R\u00e8gles de base<\/h2>\n
Que vous soyez un professionnel de l\u2019UX ou non, certaines erreurs de conception sont si flagrantes qu\u2019elles sautent aux yeux de tous. Et dans \u00ab\u00a0tous\u00a0\u00bb, il y a bien s\u00fbr vos clients.<\/p>\n
Voici cinq r\u00e8gles de base de l\u2019UX design \u00e0 ma\u00eetriser absolument.<\/p>\n
![\"5](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/5-regles-de-base-pour-une-UX-qui-Claque--410x1024.jpg\")
5 r\u00e8gles de base pour r\u00e9ussir son UX design<\/figcaption><\/figure>\n 1 \u2013 l\u2019affordance<\/h3>\n
M\u00eame si ce mot peut sembler tr\u00e8s technique, il n\u2019en est rien\u00a0: l\u2019affordance d\u00e9signe simplement la capacit\u00e9 d\u2019une interface \u00e0 faire comprendre subtilement aux utilisateurs ce qu\u2019ils peuvent et ne peuvent pas faire.<\/p>\n
Et j\u2019insiste sur le mot \u00ab\u00a0subtilement\u00a0\u00bb.<\/p>\n
En effet, d\u00e8s qu\u2019un utilisateur doit r\u00e9fl\u00e9chir pour comprendre les fonctionnalit\u00e9s que vous proposez, il risque de partir.<\/p>\n
Raison pour laquelle le choix de l\u2019emplacement, de la couleur, de la forme, la mise en page de vos boutons et ic\u00f4nes doivent \u00eatre soign\u00e9s. N\u2019h\u00e9sitez pas non plus \u00e0 rajouter un petit texte explicatif qui appara\u00eet en survolant l\u2019ic\u00f4ne.<\/p>\n
2 \u2013 Cr\u00e9er un chemin de navigation intuitif<\/h3>\n
\u00c0 ce stade, votre prospect sait ce que vous attendez de lui.<\/p>\n
Il va maintenant commencer \u00e0 se balader sur votre application, \u00e0 parcourir les diff\u00e9rents onglets et \u00e0 cliquer sur les boutons.<\/p>\n
C\u2019est \u00e0 ce moment que l\u2019intuitivit\u00e9 de la navigation entre en jeu\u00a0: votre utilisateur doit pouvoir comprendre intuitivement comment se d\u00e9placer entre vos interfaces et consommer votre contenu.<\/p>\n
3 \u2013 Miser sur la simplicit\u00e9<\/h3>\n
On reparlera de la simplicit\u00e9 plus bas.<\/p>\n
Pour l\u2019heure, retenez simplement qu\u2019il faut \u00e0 tout prix \u00e9viter les \u00e9l\u00e9ments superflus et inutilement complexes.<\/p>\n
Dans la m\u00eame veine, privil\u00e9giez autant que possible la cr\u00e9ation d\u2019interfaces claires, coh\u00e9rentes avec des couleurs, polices et contrastes adapt\u00e9s.<\/p>\n
C\u2019est pour cette raison que le minimalisme fait fureur dans le webdesign depuis tant de d\u00e9cennies\u00a0: moins, c\u2019est plus.<\/p>\n
4 \u2013 la r\u00e8gle des 3 clics<\/h3>\n
Cette r\u00e8gle tient autant de l\u2019architecture de l\u2019information que de l\u2019UX design.<\/p>\n
Elle stipule ceci\u00a0: tout contenu doit toujours \u00eatre \u00e0 au plus trois clics de votre page d\u2019accueil. Sinon, l\u2019internaute risque de se sentir frustr\u00e9 et ira chercher le contenu qui l\u2019int\u00e9resse ailleurs.<\/p>\n
C\u2019est pour cette raison que beaucoup de sites d\u2019e-commerces segmentent leurs contenus en cat\u00e9gories et sous-cat\u00e9gories. \u00c7a permet aux fiches produits d\u2019\u00eatre toujours \u00e0 trois clics maximum de la page d\u2019accueil.<\/p>\n
5 \u2013 la r\u00e8gle des 5 secondes<\/h3>\n
Selon une \u00e9tude de Microsoft, l\u2019Homo sapiens connect\u00e9 est capable de se concentrer sur un site web pendant huit secondes maximum.<\/p>\n
D\u2019o\u00f9 cette r\u00e8gle\u00a0: vos visiteurs doivent \u00eatre capables de comprendre le but et l\u2019int\u00e9r\u00eat de vos plateformes en cinq secondes max. Pass\u00e9 ce d\u00e9lai, l\u2019internaute va simplement aller ailleurs.<\/p>\n
Les 10 r\u00e8gles de Raina Van Cleave et Nick Finck<\/h2>\n
![\"10](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/10-principes-de-lUX-design-edictees-au-SXSW-interactive-2010-par-Raina-Van-Cleave-et-Nick-Finck-410x1024.jpg\")
10 principes de l’UX design de Raina Van Cleave et Nick Finck<\/figcaption><\/figure>\n Maintenant que vous avez des notions de base en UX design, passons maintenant \u00e0 des principes plus \u00e9labor\u00e9s\u00a0: ceux du SXSW interactive 2010.<\/p>\n
Si vous n\u2019\u00eates pas de l\u2019industrie cr\u00e9ative, SXSW ne vous dit probablement rien.<\/p>\n
Le South by Southwest est l\u2019un des plus grands rassemblements de cr\u00e9atifs au monde. Musiciens, cin\u00e9philes et cr\u00e9atifs s\u2019y donnent rendez-vous chaque ann\u00e9e depuis 1987.<\/p>\n
L\u2019\u00e9dition 2010 a marqu\u00e9 un tournant majeur dans l\u2019industrie de l\u2019UX design et du Customer eXperience (CX).<\/p>\n
La cause : Nick Finck et Raina Van Cleave, deux designers de renomm\u00e9e mondiale, ont \u00e9nonc\u00e9 10 principes \u00e0 suivre pour cr\u00e9er une exp\u00e9rience utilisateur r\u00e9ussie<\/b>. Depuis, ces principes sont devenus des mantras pour les ux designers et autres concepteurs de produits.<\/p>\n
Les voici\u00a0:<\/p>\n
- \n
- Comprendre l\u2019utilisateur\u00a0;<\/li>\n
- L\u2019utilisateur a raison\u00a0;<\/li>\n
- La forme d\u00e9coule du fond\u00a0;<\/li>\n
- \u00c9viter autant que possible les solutions d\u00e9j\u00e0 faites\u00a0;<\/li>\n
- Innover\u00a0;<\/li>\n
- Le contenu prime\u00a0;<\/li>\n
- L\u2019interface doit \u00eatre accessible \u00e0 tous\u00a0;<\/li>\n
- Ne pas cr\u00e9er sans imaginer\u00a0;<\/li>\n
- Comprendre les objectifs\u00a0;<\/li>\n
- Savoir apprendre de ses erreurs.<\/li>\n<\/ol>\n
Voyons-les plus en d\u00e9tail tout de suite.<\/p>\n
1 \u2013 Comprendre l\u2019utilisateur<\/h3>\n
Pour qui est-ce que vous voulez cr\u00e9er votre application mobile\u00a0?<\/p>\n
\u00c0 cette question, toutes les \u00e9quipes marketing et celles charg\u00e9es du d\u00e9veloppement d\u2019applications r\u00e9pondent (presque) toujours\u00a0: pour leurs clients.<\/p>\n
Mais QUI sont ces clients\u00a0? Est-ce que c\u2019est l\u2019utilisateur final\u00a0? Le N+1 du d\u00e9veloppeur web\u00a0? La soci\u00e9t\u00e9 qui finance pour la cr\u00e9ation de l\u2019application\u00a0?<\/p>\n
Ce n\u2019est aucun d\u2019entre eux.<\/p>\n
Vos vrais clients sont les utilisateurs finaux<\/b>. S\u2019ils n\u2019adoptent pas vos produits digitaux, vous aurez beau d\u00e9ployer des prouesses techniques, votre application fera un flop sur les app stores.<\/p>\n
Et c\u2019est justement le but de ce principe\u00a0: toujours chercher \u00e0 comprendre le client final et concevoir une exp\u00e9rience utilisateur centr\u00e9e sur l\u2019utilisateur<\/b>.<\/p>\n
Concr\u00e8tement, cela se traduit par deux \u00e9l\u00e9ments\u00a0:<\/p>\n
- \n
- adoptez une d\u00e9marche centr\u00e9e utilisateur durant la phase de conception ;<\/li>\n
- acceptez de remettre en cause votre vision pour cr\u00e9er un produit qui saura satisfaire vos utilisateurs finaux.<\/li>\n<\/ul>\n
Alors comment mettre ce principe en pratique\u00a0? Voici 2 choses que vous pouvez faire d\u00e8s \u00e0 pr\u00e9sent pour y arriver\u00a0:<\/p>\n
- \n
- basez vos cr\u00e9ations sur des donn\u00e9es r\u00e9colt\u00e9es aupr\u00e8s de clients r\u00e9els. Si vous n\u2019en avez pas, alors optez plut\u00f4t pour des personas (lisez cet article de Sales Odyssey<\/a> pour apprendre \u00e0 cr\u00e9er vos personas marketing) ;<\/li>\n
- v\u00e9rifiez toutes vos hypoth\u00e8ses une \u00e0 une en cr\u00e9ant un MVP avant de lancer le produit final (voici un article qui d\u00e9taille tout ce qu\u2019il y a \u00e0 savoir sur le MVP + sa cr\u00e9ation<\/a>).<\/li>\n<\/ul>\n
Ce qui nous conduit au point suivant.<\/p>\n
2 \u2013 L\u2019utilisateur a raison<\/h3>\n
Rien n\u2019est plus \u00e9nervant que lorsque vous reportez un bug \u00e0 une \u00e9quipe technique et celle-ci la minimise ou la nie.<\/p>\n
Nier ou minimiser une erreur est quelque chose de naturel pour beaucoup d\u2019agences de d\u00e9veloppement web.<\/p>\n
Elles ont pass\u00e9 beaucoup d\u2019heures \u00e0 cr\u00e9er ce chef-d’\u0153uvre de code informatique. Alors, \u00e0 chaque fois qu\u2019un client signale un bug ou une erreur de mise en page, certaines personnes peuvent se sentir personnellement vis\u00e9es.<\/p>\n
Elles ont l\u2019impression que le client remet en doute leurs comp\u00e9tences, ce qui n\u2019est pas vrai. M\u00eame les produits des GAFAM ont leurs lots de pannes logicielles.<\/p>\n
Si vous faites partie de ces personnes, ce principe est fait pour vous\u00a0: l\u2019utilisateur a toujours raison<\/b>.<\/p>\n
M\u00eame si votre \u00e9go en prend un coup, c\u2019est plus rassurant pour vos clients de savoir qu\u2019ils peuvent compter sur vous en cas de p\u00e9pins. Plut\u00f4t qu\u2019\u00e0 l\u2019inverse, en cas de bug, ils soient livr\u00e9s \u00e0 eux-m\u00eames.<\/p>\n
3 \u2013 la forme d\u00e9coule du fond<\/h3>\n
Ce principe pourrait \u00eatre reformul\u00e9 comme suit\u00a0: l\u2019UI design est l\u00e0 pour mettre en valeur le contenu de la plateforme num\u00e9rique, pas l\u2019inverse<\/b>.<\/p>\n
Clairement, il vous invite \u00e0 temp\u00e9rer votre fibre artistique lorsque vous cr\u00e9ez les graphismes de vos pages.<\/p>\n
Les graphismes et autres \u00e9l\u00e9ments visuels sont l\u00e0 pour souligner le contenu de votre application. Ils ne sont pas l\u00e0 pour impressionner vos clients ou montrer votre talent.<\/p>\n
Ce principe ressemble trait pour trait \u00e0 l\u2019un des 10 commandements de Dieter Rams : un bon design est discret<\/a>.<\/p>\n
4 \u2013 \u00c9vitez les solutions d\u00e9j\u00e0 faites<\/h3>\n
Est-ce que vous connaissez les templates\u00a0?<\/p>\n
Il s\u2019agit de mod\u00e8les de sites web et d\u2019applications mobiles qui fleurissent sur le web. Leur promesse est simple\u00a0: vous n\u2019avez qu\u2019\u00e0 copier-coller vos contenus dans les cases pr\u00e9vues, et pouf\u00a0votre plateforme est pr\u00eate.<\/p>\n
Certains d\u2019entre eux ont fait leur preuve dans des soci\u00e9t\u00e9s valoris\u00e9es \u00e0 plusieurs millions de dollars. Alors, vous n\u2019avez plus qu\u2019\u00e0 les recopier pour que \u00e7a fonctionne aussi pour vous, n\u2019est-ce pas\u00a0?<\/p>\n
Ne faites surtout pas \u00e7a.<\/p>\n
En effet, peu importe \u00e0 quel point votre business model est similaire \u00e0 celui d\u2019une autre entreprise, vous avez vos particularit\u00e9s.<\/p>\n
Et m\u00eame si des mod\u00e8les et bouts de code pr\u00eats \u00e0 l\u2019emploi pullulent, prenez toujours le temps de concevoir vos propres solutions logicielles.<\/p>\n
Rien ne vous emp\u00eache d\u2019utiliser des templates, mais personnalisez-les en d\u00e9tails pour qu\u2019ils correspondent aux besoins sp\u00e9cifiques de ce projet.<\/p>\n
5 \u2013 innover<\/h3>\n
L\u2019innovation.<\/p>\n
Si vous \u00eates une startup ou que vous devez lutter face \u00e0 des mastodontes, ce point est fait pour vous.<\/p>\n
Innover rien que dans son UX peut vous fournir un avantage d\u00e9cisif, comme le prouve le cas de la plateforme Medium.<\/p>\n
Si vous voulez en apprendre davantage sur ce point, lisez notre article consacr\u00e9 aux 10 commandements du webdesign par Dieter Ram<\/a>. Vous y verrez comment, rien que par l\u2019UI et l\u2019UX design de vos produits, vous pouvez devenir leader de votre segment de march\u00e9.<\/p>\n
6 \u2013 Le contenu prime<\/h3>\n
Les exemples de refontes visuelles de plateformes qui ont rendu leurs contenus et leurs services moins accessibles, voire inutilisables, sont l\u00e9gion.<\/p>\n
Tr\u00e8s souvent, \u00e7a partait de bonnes intentions.<\/p>\n
Yahoo! avait d\u00e9cid\u00e9 d\u2019offrir une surprise \u00e0 ses abonn\u00e9s pour son 16\u1d49 anniversaire en 2013\u00a0: une nouvelle interface plus moderne.<\/p>\n
Sauf que, vous vous en doutez, si nous en parlons, c\u2019est parce que la surprise est tr\u00e8s mal pass\u00e9e aupr\u00e8s du public. En effet, les utilisateurs du service email de la boite ont vite commenc\u00e9 \u00e0 remarquer un lot de bugs technique et UI\u00a0:<\/p>\n
- \n
- ils ne pouvaient plus voir les diff\u00e9rents fichiers tant qu\u2019ils n\u2019avaient pas quitt\u00e9 leur bo\u00eete de r\u00e9ception\u00a0;<\/li>\n
- les nouveaux mails n\u2019\u00e9taient plus en gras\u00a0;<\/li>\n
- le bouton de suppression \u00e9tait dangereusement plac\u00e9 \u00e0 c\u00f4t\u00e9 du nom du destinataire\u00a0;<\/li>\n
- le bouton de sauvegarde des brouillons des mails avait \u00e9t\u00e9 remplac\u00e9 par un bouton \u00ab\u00a0X\u00a0\u00bb incompr\u00e9hensible, etc.<\/li>\n<\/ul>\n
Bref, c\u2019\u00e9tait un d\u00e9sastre.<\/p>\n
En tentant de moderniser ses interfaces, Yahoo! a n\u00e9glig\u00e9 l\u2019accessibilit\u00e9 de son contenu et sacrifier l\u2019ergonomie de son service.<\/p>\n
Si vous voulez en apprendre plus sur ce cas d\u2019\u00e9cole, voici une archive du NY Times qui lui est consacr\u00e9<\/a> et une autre de sitepoint.com<\/a> .<\/p>\n
Yahoo! n\u2019est pas la seule entreprise technologique \u00e0 s’\u00eatre tir\u00e9e une balle dans le pied \u00e0 cause d\u2019une refonte.<\/p>\n
YouTube a aussi commis cette bourde en 2017. L\u00e0 aussi, la principale frustration des utilisateurs \u00e9tait la disparition et la difficult\u00e9 d\u2019acc\u00e9der \u00e0 certains contenus \u2013 dont le compteur de vues et le bouton dislike.<\/p>\n
Et le service de vid\u00e9o a refait exactement la m\u00eame chose avec sa refonte de 2022<\/a>.<\/p>\n
Alors, quelle le\u00e7on tirer de ces deux fails\u00a0? R\u00e9ponse\u00a0: le contenu prime toujours sur l\u2019interface.<\/p>\n
Ainsi, lorsque vous modifiez l\u2019une de vos interfaces, assurez-vous que toutes les informations restent toujours autant lisibles et accessibles<\/b>.<\/p>\n
7 \u2013 L\u2019interface doit \u00eatre accessible \u00e0 tous<\/h3>\n
Tous vos clients doivent pouvoir utiliser votre application. Et pour y arriver, vous allez vous assurer qu\u2019il n\u2019y ait pas de probl\u00e8mes de compatibilit\u00e9\u00a0:<\/p>\n
- \n
- avec les diff\u00e9rents p\u00e9riph\u00e9riques\u00a0: ordinateurs, tablettes, smartphones, montres connect\u00e9es, etc\u00a0;<\/li>\n
- avec les diff\u00e9rents navigateurs\u00a0: Google Chrome, Microsoft Edge, Firefox, Safari, Opera, etc\u00a0;<\/li>\n
- Enfin, avec les diff\u00e9rents formats et r\u00e9solution d\u2019\u00e9cran.<\/li>\n<\/ul>\n
C\u00f4t\u00e9 humain, ce principe de l\u2019UX vous pousse aussi \u00e0 prendre en compte les personnes qui souffrent d\u2019un ou plusieurs handicaps.<\/p>\n
8 \u2013 Ne pas cr\u00e9er sans imaginer<\/h3>\n
Au fond de vous, br\u00fble une passion cr\u00e9atrice que vous voulez laisser s\u2019exprimer directement sur votre toile Photoshop ou Figma.<\/p>\n
Ne faites pas \u00e7a.<\/p>\n
Avant m\u00eame d\u2019ouvrir votre Figma ou votre logiciel de maquettage pr\u00e9f\u00e9r\u00e9<\/a>, posez-vous et r\u00e9fl\u00e9chissez profond\u00e9ment sur votre projet<\/b>. Gr\u00e2ce \u00e0 cela, vous allez pouvoir \u00eatre certain que vos cr\u00e9ations seront r\u00e9ellement align\u00e9es avec votre projet<\/b>.<\/p>\n
9 \u2013 Comprendre les objectifs<\/h3>\n
Votre application a un objectif. Et c\u2019est votre devoir en tant qu\u2019UX designer de cr\u00e9er une exp\u00e9rience utilisateur qui vous aidera vous, ainsi que vos utilisateurs, \u00e0 l’atteindre.<\/p>\n
Raison pour laquelle ce principe vous invite \u00e0 chercher \u00e0 comprendre le projet sur lequel vous travaillez en profondeur.<\/p>\n
N\u2019h\u00e9sitez pas \u00e0 poser des questions sur le mod\u00e8le \u00e9conomique, les personas, la plus-value, l\u2019argument diff\u00e9renciateur et tout ce qui tourne de pr\u00e8s ou de loin autour du projet de cr\u00e9ation d\u2019application.<\/p>\n
10 \u2013 Savoir apprendre de ses erreurs<\/h3>\n
H\u00e9las, il est impossible de concevoir des interfaces et un parcours clients qui font mouche d\u00e8s le premier coup.<\/p>\n
Il y aura toujours quelque chose \u00e0 perfectionner pour am\u00e9liorer les performances de l\u2019app ou une autre m\u00e9trique de votre tableau de bord.<\/p>\n
Ce qui nous am\u00e8ne \u00e0 ce principe\u00a0: apprenez \u00e0 bien apprendre de vos erreurs<\/b>.<\/p>\n
Pourquoi pr\u00e9cisons-nous bien\u00a0? Parce qu\u2019il n\u2019est pas rare que les d\u00e9veloppeurs d\u2019une app se basent uniquement sur le nombre de souscriptions pour d\u00e9terminer si leur derni\u00e8re mise \u00e0 jour est r\u00e9ussie.<\/p>\n
Sauf que cela ne suffit pas.<\/p>\n
Est-ce que le nombre d\u2019utilisateurs \u00e0 varier \u00e0 cause de l\u2019effet de r\u00e9seau ou d\u2019un \u00e9v\u00e9nement ext\u00e9rieur\u00a0?<\/p>\n
Est-ce qu\u2019il suit juste sa courbe de croissance normale\u00a0?<\/p>\n
S\u2019il a baiss\u00e9, quelle est la cause de cette baisse\u00a0?<\/p>\n
Sans un tableau de bord pr\u00e9cis et des KPI pertinents, vous serez incapable de r\u00e9pondre \u00e0 ces questions<\/b>. Et donc, vous ne pourrez pas non plus savoir quels points sont \u00e0 am\u00e9liorer ou \u00e0 revoir au sein de votre UX.<\/p>\n
Notre conseil\u00a0: cr\u00e9ez un MVP et proc\u00e9dez via la m\u00e9thode Lean Startup. Si vous ne connaissez pas ces deux mots, voici le livre d\u2019Erick Ries qui en parle<\/a>.<\/p>\n
Les 17 lois de la conception d\u2019une exp\u00e9rience utilisateur<\/h2>\n
Jusqu\u2019\u00e0 pr\u00e9sent, nous avons couvert les concepts de base de l\u2019UX design.<\/p>\n
Maintenant, place \u00e0 ceux qui sont plus avanc\u00e9s dans la technique. Nous les avons regroup\u00e9s en trois grandes cat\u00e9gories\u00a0:<\/p>\n
- \n
- les 5 lois de la Gestalt\u00a0;<\/li>\n
- 6 lois de l\u2019UX design d\u00e9di\u00e9es aux biais cognitifs\u00a0;<\/li>\n
- 7 lois pour capter l\u2019attention des utilisateurs en jouant sur leur perception du mouvement.<\/li>\n<\/ul>\n
Sans plus tarder, entrons dans le vif du sujet.<\/p>\n
Les 5 lois de la Gestalt<\/h3>\n
N\u00e9e en Allemagne au 20e si\u00e8cle, la gestalt ou psychologie de la forme, est une th\u00e9orie psychologique qui s\u2019int\u00e9resse \u00e0 la mani\u00e8re dont nous percevons les formes.<\/p>\n
![\"5](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/5-lois-de-la-Gestalt-appliquees-a-lUX-design-410x1024.jpg\")
5 lois de la Gestalt<\/figcaption><\/figure>\n Son principe est simple\u00a0: nous percevons davantage les formes dans leur ensemble plut\u00f4t que comme la juxtaposition ou l\u2019addition de formes plus simples<\/b>.<\/p>\n
C\u2019est un avantage plut\u00f4t pratique pour la conception des exp\u00e9riences utilisateur. En effet, notre cerveau va chercher \u00e0 attribuer un sens \u00e0 des repr\u00e9sentations visuelles qui n\u2019en ont pas.<\/p>\n
![\"Image](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Image-illustrant-la-Gestalt.gif\")
Image montrant un ensemble de points<\/figcaption><\/figure>\n En France, Carrefour est l\u2019exemple le plus connu d\u2019utilisation du gestaltisme dans sa charte graphique, comme en t\u00e9moigne son logo.<\/p>\n
![\"logo](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/logo-de-Carrefour.png\")
logo de carrefour<\/figcaption><\/figure>\n En regardant ce logo, le \u00ab\u00a0C\u00a0\u00bb de la marque vous saute aux yeux, n\u2019est-ce pas\u00a0?<\/p>\n
Pourtant, regardez-le en d\u00e9tails et quelque chose va vous sauter aux yeux\u00a0: il n\u2019y a aucun \u00ab\u00a0C\u00a0\u00bb dans ce logo.<\/p>\n
C\u2019est cette th\u00e9orie, coupl\u00e9e au minimalisme, qui explique le fait que beaucoup de logos de grandes marques \u00e9liminent le plus de d\u00e9tails possibles. Comme en t\u00e9moignent les logos d\u2019Apple et de McDonald.<\/p>\n
![\"\u00e9volution](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Evolution-du-logo-dApple.jpg\")
\u00e9volution du logo d’Apple<\/figcaption><\/figure>\n ![\"Evolution](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Evolution-du-logo-de-MacDonald-depuis-les-annees-30.png\")
Evolution du logo de MacDonald depuis les ann\u00e9es 30<\/figcaption><\/figure>\n Bon, maintenant que vous \u00eates curieux\u00b7se d\u2019en apprendre plus, voyons comment utiliser la gestalt dans votre UX design.<\/p>\n
1 \u2013 la loi de Pr\u00e4gnanz<\/i><\/h4>\n
Si vous n\u2019arrivez pas \u00e0 prononcer Pr\u00e4gnanz, dites simplement la loi de la simplicit\u00e9.<\/p>\n
Cette loi stipule que les utilisateurs per\u00e7oivent et interpr\u00e8tent les formes complexes comme des formes plus simples parce qu\u2019elles n\u00e9cessitent moins de charge mentale<\/b>.<\/p>\n
Vous souvenez-vous des logos plus haut\u00a0? C\u2019est ce principe qu\u2019ils appliquent.<\/p>\n
Voici comment l\u2019utiliser dans votre conception centr\u00e9e sur l\u2019utilisateur\u00a0:<\/p>\n
- \n
- \u00e9vitez de cr\u00e9er des formes complexes dans vos interfaces, les utilisateurs ne se souviendront pas des d\u00e9tails (et \u00e7a vous prendra un temps monstrueux)\u00a0;<\/li>\n
- all\u00e9gez vos \u00e9l\u00e9ments graphiques de tous les d\u00e9tails graphiques superflus, moins, c\u2019est plus<\/b>\u00a0;<\/li>\n
- cr\u00e9ez des mises en page qui utilisent des sch\u00e9mas connus par les clients de votre niche.<\/li>\n<\/ul>\n
S\u2019il faut r\u00e9sumer cette loi en une phrase\u00a0: cr\u00e9ez des interfaces claires, simples, pr\u00e9cises<\/b> et que vos utilisateurs pourront rapidement et intuitivement comprendre.<\/p>\n
2 \u2013 la loi de la proximit\u00e9<\/i><\/h4>\n
Est-ce que vous avez d\u00e9j\u00e0 remarqu\u00e9 que les interfaces des logiciels sont toutes segment\u00e9es en blocs\u00a0?<\/p>\n
Et que chacun de ces blocs contient un type d\u2019information pr\u00e9cis\u00a0(boutons, ic\u00f4nes, contenus, etc.) ?<\/p>\n
La raison vient de la loi de la proximit\u00e9. Voici ce qu\u2019elle stipule\u00a0: le cerveau regroupe ensemble les objets qui sont proches<\/b>.<\/p>\n
Facebook est l\u2019un des meilleurs exemples d\u2019utilisation de ce principe. Admirez sa page d\u2019accueil.<\/p>\n
![\"Page](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Page-daccueil-de-Facebook-1024x618.jpg\")
Page d’accueil de Facebook<\/figcaption><\/figure>\n Tous les \u00e9l\u00e9ments ayant \u00e0 peu pr\u00e8s le m\u00eame sens sont regroup\u00e9s en blocs.<\/p>\n
Vous aussi, vous pouvez utiliser ce principe de deux fa\u00e7ons\u00a0:<\/p>\n
- \n
- en cr\u00e9ant des espaces vides entre les \u00e9l\u00e9ments qui ne sont pas li\u00e9es, vos utilisateurs comprendront rapidement qu\u2019il s\u2019agit de deux types d\u2019information distincts\u00a0;<\/li>\n
- \u00c0 l\u2019inverse, pour montrer que des \u00e9l\u00e9ments ou des contenus ont presque les m\u00eames fonctionnalit\u00e9s, regroupez-les.<\/li>\n<\/ul>\n
Maintenant, passons \u00e0 la loi suivante.<\/p>\n
3 \u2013 la loi de similarit\u00e9<\/i><\/h4>\n
![\"loi](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/2-groupes-de-point-un-bleu-et-lautres-gris.jpg\")
loi de similarit\u00e9 Gestaltisme<\/figcaption><\/figure>\n \u00ab\u00a0Qui se ressemble, s\u2019assemble\u00a0\u00bb. Cet adage d\u00e9crit parfaitement cette loi.<\/p>\n
En effet, le cerveau a tendance \u00e0 regrouper ensemble les \u00e9l\u00e9ments visuels qui ont la m\u00eame forme, couleur, taille ou orientation<\/b>. Elle est tr\u00e8s utile pour pr\u00e9senter visuellement l\u2019architecture de vos contenus.<\/p>\n
Vous utilisez constamment cette loi de la gestalt lorsque vous surfez sur le web et cherchez des liens hypertextes.<\/p>\n
![\"Capture](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/capture-decran-de-larticle-de-Poyesis-sur-les-10-commandements-de-Dieter-Ram-1024x584.png\")
Capture d’\u00e9cran de l’article de l’article de Poyesis sur les 10 commandements d’un bon design de Dieter Ram<\/figcaption><\/figure>\n Avez-vous r\u00e9ussi \u00e0 trouver les quatre liens hypertextes de cet article sur le webdesign ?<\/p>\n
Pour l\u2019utiliser, rien de plus simple : donnez toujours la m\u00eame couleur et \u00e9ventuellement la m\u00eame forme aux \u00e9l\u00e9ments visuels de votre IHM partageant la m\u00eame fonctionnalit\u00e9.<\/p>\n
4 \u2013 la loi de cl\u00f4ture<\/i><\/h4>\n
![\"Logo](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/logo-de-IBM.jpg\")
Logo d’IBM<\/figcaption><\/figure>\n \u00c0 coup s\u00fbr, vous avez reconnu le logo d\u2019IBM.<\/p>\n
D\u2019ailleurs, vous lisez distinctement \u00ab\u00a0I\u00a0\u00bb\u00a0\u00ab\u00a0B\u00a0\u00bb\u00a0\u00ab\u00a0M\u00a0\u00bb. Sauf qu\u2019aucune de ces lettres n\u2019est \u00e9crite.<\/p>\n
Votre cerveau a reconstitu\u00e9 l\u2019information manquante et \u00e0 compl\u00e9ter ces lettres\u00a0: c\u2019est le principe de la loi de cl\u00f4ture.<\/p>\n
Face \u00e0 une forme incompl\u00e8te, le cerveau humain va imaginer les parties manquantes pour cr\u00e9er une forme enti\u00e8re.<\/p>\n
Raison pour laquelle vous arrivez \u00e0 voir un panda sur le logo de l\u2019association WWF.<\/p>\n
![\"Logo](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/logo-de-lassociation-WWF.png\")
Logo de la WWF<\/figcaption><\/figure>\n Ou encore un chien se d\u00e9pla\u00e7ant alors que ce n\u2019est qu\u2019un amas de points qui bougent.<\/p>\n
![\"\"](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Animation-dun-chien-anime-utilisant-la-theorie-de-Gestalt.gif\")
source : Gizmodo<\/figcaption><\/figure>\n Alors comment utiliser la loi de la cl\u00f4ture dans votre UX design\u00a0? Voici quelques pistes\u00a0:<\/p>\n
- \n
- en cr\u00e9ant des animations stylis\u00e9es comme celle plus haut.<\/li>\n
- en cr\u00e9ant des boutons et ic\u00f4nes stylis\u00e9es\u00a0;<\/li>\n
- suscitez la curiosit\u00e9 de l\u2019utilisateur en ne lui montrant qu\u2019une partie d\u2019un contenu.<\/li>\n<\/ul>\n
![\"Interface](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Interface-mobile-de-Lucid.png\")
Interface mobile de Lucid. Source : https:\/\/www.nngroup.com\/articles\/principle-closure\/<\/figcaption><\/figure>\n Par contre, attention \u00e0 ne pas retirer trop de d\u00e9tails, sinon l\u2019utilisateur ne parviendra pas \u00e0 reconstituer l\u2019information.<\/p>\n
5 – La loi de la sym\u00e9trie<\/i><\/h4>\n
Voici ce qu\u2019elle dit\u00a0:\u00a0\u00ab\u00a0le cerveau humain tend \u00e0 percevoir les formes sym\u00e9triques comme des unit\u00e9s coh\u00e9rentes et stables\u00a0<\/b>\u00bb.<\/p>\n
Vous pouvez en servir pour cr\u00e9er une exp\u00e9rience utilisateur harmonieuse et intuitive comme le fait Apple Music.<\/p>\n
![\"Interface](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Interface-Mac-de-Apple-Music.jpg\")
Interface de Apple Music<\/figcaption><\/figure>\n Ou encore pour donner \u00e0 vos interfaces IHM un aspect plus professionnel et renforcer la cr\u00e9dibilit\u00e9 de votre entreprise. Soci\u00e9t\u00e9 G\u00e9n\u00e9rale est un bon exemple d\u2019usage de la sym\u00e9trie \u00e0 cet usage.<\/p>\n
![\"Page](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Page-daccueil-de-Societe-Generale-France-1024x500.gif\")
Page d’accueil de Soci\u00e9t\u00e9 G\u00e9n\u00e9rale France<\/figcaption><\/figure>\n Vous pouvez aussi utiliser la sym\u00e9trie pour cr\u00e9er une identit\u00e9 visuelle inoubliable comme le fait city-dog.uk.<\/p>\n
![\"Page](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Page-daccueil-du-site-City-dog.uk_-1024x485.png\")
Page d’accueil du site City-dog.uk<\/figcaption><\/figure>\n Si vous voulez d\u00e9couvrir comment utiliser encore plus la sym\u00e9trie dans vos design, UX360 en a fait un bon article<\/a>.<\/p>\n
5 lois de l\u2019UX design qui exploitent les biais cognitifs<\/h3>\n
![\"5](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/5-lois-UX-qui-jouent-sur-les-biais-cognitifs-410x1024.jpg\")
5 lois de l’UX qui jouent sur les biais cognitifs des utilisateurs<\/figcaption><\/figure>\n Lorsque nous sommes face \u00e0 une grande quantit\u00e9 d\u2019information et que nous devons faire des choix, notre cerveau a tendance \u00e0 prendre des raccourcis\u00a0: les biais cognitifs.<\/p>\n
Et bonne nouvelle, vous pouvez les utiliser pour offrir une exp\u00e9rience utilisateur immersive \u00e0 vos clients gr\u00e2ce \u00e0 5 lois\u00a0:<\/p>\n
- \n
- l\u2019effet Zeigarnik\u00a0;<\/li>\n
- la loi Von Restorff\u00a0;<\/li>\n
- la loi Peak-End\u00a0;<\/li>\n
- l\u2019effet IKEA\u00a0;<\/li>\n
- la loi de Serial Position Effect.<\/li>\n<\/ul>\n
Voyons-les en d\u00e9tail tout de suite.<\/p>\n
1 \u2013 L\u2019effet Zeigarnik<\/i><\/h4>\n
![\"Meme](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Meme-de-Sheldon-Cooper-montrant-leffet-Zeigarnik.png\")
Meme de Sheldon Cooper montrant l’effet Zeigarnik<\/figcaption><\/figure>\n L\u2019effet Zeigarnik d\u00e9signe notre facult\u00e9 \u00e0 mieux nous souvenir des t\u00e2ches en cours plut\u00f4t que des t\u00e2ches finies.<\/p>\n
C\u2019est ce qui explique le fait que vous arrivez toujours \u00e0 vous souvenir des t\u00e2ches non-termin\u00e9es de votre to-do list plut\u00f4t que celles que vous avez faites.<\/p>\n
Ou encore que vous regardiez des s\u00e9ries Netflix pendant des heures, tout \u00e7a parce qu\u2019\u00e0 la fin de chaque \u00e9pisode, la plateforme vous fait comprendre que ce n\u2019est pas fini<\/b>.<\/p>\n
![\"Meme](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Meme-montrant-leffet-Zeigarnik.jpg\")
Meme montrant l’effet Zeigarnik (source : https:\/\/sydologie.com\/2023\/05\/ux-et-apprentissage-leffet-zeigarnik\/)<\/figcaption><\/figure>\n Alors, comment l\u2019utiliser pour concevoir votre exp\u00e9rience utilisateur\u00a0? Voici quelques r\u00e9ponses\u00a0:<\/p>\n
- \n
- incitez vos utilisateurs \u00e0 vouloir aller plus loin en leur teasant la prochaine \u00e9tape via un cliffhanger (comme Netflix). Si vous pr\u00e9sentez beaucoup de contenus textuels, essayez de mettre les \u00ab \u2026 \u00bb \u00e0 la fin de certains blocs de texte ;<\/li>\n<\/ul>\n
![\"page](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/page-daccueil-du-site-web-marketing-1024x486.png\")
page d’accueil du site web-marketing<\/figcaption><\/figure>\n - \n
- donnez la possibilit\u00e9 \u00e0 vos lecteurs de consommer une partie de vos contenus, puis coupez-les brutalement. C\u2019est ce que font les m\u00e9dias en ligne pour vous inciter \u00e0 payer un abonnement\u00a0;<\/li>\n<\/ul>\n
![\"Capture](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Capture-decran-dun-article-de-Le-Monde-1024x481.png\")
Capture d’\u00e9cran d’un article de Le Monde<\/figcaption><\/figure>\n - \n
- demandez \u00e0 l\u2019internaute de cr\u00e9er son profil et montrez-lui sa progression via une barre de t\u00e2che. M\u00eame si ce n\u2019est pas n\u00e9cessaire \u00e0 l\u2019usage de votre application, l\u2019effet Zeigarnik le poussera \u00e0 compl\u00e9ter l\u2019action\u00a0;<\/li>\n
- montrez les \u00e9tapes manquantes pour r\u00e9aliser une action (cf. les steppers des sites e-commerces).<\/li>\n<\/ul>\n
Attention quand m\u00eame, l\u2019effet Zeigarnik \u00e0 ses limites\u00a0: si l\u2019utilisateur juge que vos demandes g\u00e2chent son exp\u00e9rience, il va tout simplement aller sur une autre plateforme<\/b>.<\/p>\n
2 – La loi Von Restorff<\/i><\/h4>\n
![\"Campagne](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/campagne-de-protection-du-thon-bleu-de-WWF-utilisant-leffet-Zeigarnik-1024x668.png\")
Campagne de publicit\u00e9 de la WWF utilisant l’effet Von Restorff<\/figcaption><\/figure>\n Aussi appel\u00e9 loi de l\u2019isolation, elle stipule ceci\u00a0: \u00ab\u00a0lorsqu\u2019il y a plusieurs objectifs, l\u2019utilisateur va automatiquement \u00eatre attir\u00e9 par celui qui diff\u00e8re des autres et va le garder en m\u00e9moire\u00a0\u00bb.<\/p>\n
Ok, \u00e7a a l\u2019air assez th\u00e9orique, alors on va prendre un exemple.<\/p>\n
Regardez l\u2019image suivante. Quel cercle est le plus facile \u00e0 m\u00e9moriser\u00a0?<\/p>\n
![\"\"](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Groupe-de-points-avec-1-point-different.png\")
source : https:\/\/www.radiant.digital\/the-von-restorff-effect-in-ux-design\/<\/figcaption><\/figure>\n Les cinq rouges ou le seul qui soit vert\u00a0?<\/p>\n
La couleur n\u2019est pas la seule caract\u00e9ristique visuelle que vous pouvez utiliser pour mettre en valeur un de vos items. Vous pouvez aussi utiliser\u00a0:<\/p>\n
- \n
- la forme\u00a0;<\/li>\n
- le formatage du texte\u00a0: gras, italique, surlign\u00e9, soulign\u00e9, barr\u00e9, etc\u00a0;<\/li>\n
- les espaces entre les \u00e9l\u00e9ments\u00a0;<\/li>\n
- la taille, etc.<\/li>\n<\/ul>\n
Un autre exemple d\u2019utilisation de l\u2019effet Von Restorff qui est bien connu, ce sont les publicit\u00e9s types pop-ups<\/strong>.<\/p>\n
![\"Pop-ups\"](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Pop-up.jpg\")
Pop-ups<\/figcaption><\/figure>\n Oui, nous savons que vous les d\u00e9testez et que juste \u00e0 les voir, vos poils se h\u00e9rissent. Pourtant, ce sont des bijoux d\u2019utilisation de l\u2019effet Von Restorff.<\/p>\n
Et voici pourquoi\u00a0:<\/p>\n
- \n
- ils mettent en valeur leurs contenus en misant sur des couleurs criardes et des animations qui attirent le regard\u00a0;<\/li>\n
- ils sont volumineux et se placent dans des endroits strat\u00e9giques de notre champ de vision\u00a0;<\/li>\n
- certains pop-ups arborent un gros call to action avec des couleurs fortement contrast\u00e9es.<\/li>\n<\/ul>\n
Vous aurez beau faire tous les efforts du monde pour les ignorer pendant votre navigation, vous ne pouvez pas.<\/p>\n
Alors, comment utiliser l\u2019effet Von Restorff pour parfaire votre UX\/UI design\u00a0? Voici 8 astuces que vous pouvez utiliser\u00a0:<\/p>\n
- \n
- rendez les informations importantes<\/b> (ou l\u2019action que vous voulez que l\u2019utilisateur fasse) visuellement distinctes des autres<\/b>\u00a0;<\/li>\n
- utilisez les techniques de mise en valeur des \u00e9l\u00e9ments avec parcimonie<\/b> pour que l\u2019utilisateur ne soit pas distrait ;<\/li>\n
- cr\u00e9ez des ic\u00f4nes color\u00e9es\u00a0;<\/li>\n
- cr\u00e9ez une hi\u00e9rarchie entre vos contenus en misant sur la typographie et la couleur des textes\u00a0;<\/li>\n
- utilisez des animations subtiles pour attirer l\u2019attention\u00a0;<\/li>\n
- si vos interfaces Homme-machine comportent beaucoup de textes, utilisez des infographies pour mettre en valeur les informations pertinentes\u00a0;<\/li>\n
- n\u2019h\u00e9sitez pas \u00e0 rajouter une information visuelle sur l\u2019\u00e9l\u00e9ment le plus important\u00a0;<\/li>\n
- ne rendez pas distinguables les boutons permettant de r\u00e9aliser les actions que vous ne voulez pas que l\u2019utilisateur r\u00e9alise ;<\/li>\n<\/ul>\n
Pour vous inspirer, n\u2019h\u00e9sitez pas \u00e0 admirer la conception graphique du site web Canva.<\/p>\n
![\"Rien](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Page-daccueil-de-Canva-1024x485.png\")
Rien qu’avec les couleurs, Canva met en valeur les actions les plus int\u00e9ressantes<\/figcaption><\/figure>\n ![\"les](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Page-de-pricing-de-Canva-1024x486.png\")
les offres payantes de Canva attirent imm\u00e9diatement l’\u0153il<\/figcaption><\/figure>\n Cerise sur le g\u00e2teau\u00a0: l\u2019effet Von Restorff ne s\u2019applique pas qu\u2019aux visuels<\/strong>.<\/p>\n
Vous pouvez aussi l\u2019utiliser sous la forme de textes comme le fait Airbnb en vous proposant des maisons troglodytes et des tiny houses.<\/p>\n
![\"Page](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Homepage-de-AirBnb-1024x501.png\")
<\/p>\n3 – La loi de Serial Position Effect<\/i><\/h4>\n
Si vous ne devez retenir qu\u2019une loi, c\u2019est celle-ci\u00a0: les humains ont tendance \u00e0 mieux se souvenir du premier et du dernier \u00e9l\u00e9ment d\u2019une liste<\/b>. On peut scinder cette loi en deux\u00a0:<\/p>\n
- \n
- l\u2019effet de primaut\u00e9\u00a0;<\/li>\n
- l\u2019effet de r\u00e9cence.<\/li>\n<\/ul>\n
Le premier dit ceci\u00a0: le premier \u00e9l\u00e9ment d\u2019une liste \u00e0 toujours plus d\u2019importance que le reste \u00e0 nos yeux<\/b>. En effet, c\u2019est lui qui donne le ton du reste du contenu, par cons\u00e9quent, on s\u2019y attarde plus.<\/p>\n
Le second stipule que l\u2019on a mieux tendance \u00e0 se souvenir du dernier \u00e9l\u00e9ment que l\u2019on a vu parmi une foule d\u2019\u00e9l\u00e9ments.<\/p>\n
C\u2019est \u00e0 cause de cette loi psychologique que nous mettons autant d\u2019efforts pour faire une bonne premi\u00e8re impression \u00e0 autrui. Et que les restaurants mettent toujours les plats \u00e0 la carte \u2013 souvent les plus rentables \u2014 en premier.<\/p>\n
Les UX designers utilisent abondamment ce principe. Voici comment vous pouvez faire de m\u00eame\u00a0:<\/p>\n
- \n
- mettez toutes les caract\u00e9ristiques n\u00e9gatives ou \u00e0 faible valeur de vos produits en milieu de page, jamais au d\u00e9but ni \u00e0 la fin\u00a0;<\/li>\n
- placez vos CTA au d\u00e9but et \u00e0 la fin de la page\u00a0;<\/li>\n
- utilisez les m\u00eames boutons \u00e0 la m\u00eame place sur toutes vos pages\u00a0;<\/li>\n
- cr\u00e9ez les menus les plus courts possibles \u2013 pas plus de 3 ou 5 items \u2013 ou utilisez un menu hamburger.<\/li>\n<\/ul>\n
Adobe utilise parfaitement ce principe pour vendre son offre Adobe Creative Cloud.<\/p>\n
![\"les](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Page-daccueil-de-Adobe-Creative-Cloud-1024x500.gif\")
les CTA les plus importants sont plac\u00e9s \u00e0 la fin du menu et \u00e0 la fin de la page<\/figcaption><\/figure>\n Dropbox, le g\u00e9ant de l\u2019h\u00e9bergement de fichiers en ligne, fait de m\u00eame sur sa homepage.<\/p>\n
![\"Page](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Haut-de-la-homepage-de-Dropbox-1024x485.png\")
Page d’accueil de Dropbox, le CTA \u00e9tant plac\u00e9 au d\u00e9but de la page dans le menu et \u00e0 la fin<\/figcaption><\/figure>\n Le bouton \u201ccommencer\u201d est plac\u00e9 \u00e0 la fin du menu et \u00e0 la fin du contenu. Et que trouve-t-on \u00e0 la fin de la page\u00a0?<\/p>\n
![\"Bas](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Bas-de-la-homepage-de-DropBox-1024x486.png\")
Bas de la homepage de Dropbox se terminant par un appel \u00e0 l’action<\/figcaption><\/figure>\n Un gros bouton qui vous redirige vers la page des forfaits.<\/p>\n
4 \u2013 la loi Peak-end<\/i><\/h4>\n
Vous \u00eates vous d\u00e9j\u00e0 demand\u00e9 comment est-ce que les gens jugent leurs exp\u00e9riences\u00a0?<\/p>\n
\u2026<\/p>\n
Ils le font en se basant grandement sur le pic et la fin plut\u00f4t que sur la moyenne de tous les moments qu\u2019ils ont v\u00e9cus<\/b>.<\/p>\n
C\u2019est 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 \u00e9voqu\u00e9es.<\/p>\n
En tant qu\u2019UX designer ou gestionnaire de produits, vous pouvez jouer sur ce principe pour am\u00e9liorer la satisfaction des utilisateurs.<\/p>\n
Premi\u00e8rement, identifiez les pics. Les pics correspondent \u00e0 ces moments o\u00f9 vos clients se demandent comment est-ce qu\u2019ils ont fait pour vivre sans votre produit<\/b>.<\/p>\n
Ensuite, gamifiez-le pour le rendre m\u00e9morable. \u00c0 ce jeu-l\u00e0, Mailchimp et l\u2019animation du singe qui transpire \u00e0 grosse goutte lorsque vous lancez votre campagne e-mail est imbattable.<\/p>\n
![\"Animation](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/animation-mailchimp-lors-de-lenvoi-dune-campagne-de-mail.gif\")
Animation du singe qui transpire \u00e0 grosse goutte lors de l’envoi d’un email sur Mailchimp<\/figcaption><\/figure>\n Ensuite, soignez la fin de votre user journey. Assurez-vous que l\u2019utilisateur soit satisfait et souvenez-vous que les gens se souviennent plus facilement des mauvaises exp\u00e9riences.<\/p>\n
Libre \u00e0 vous de faire parler votre cr\u00e9ativit\u00e9. IKEA est devenue une r\u00e9f\u00e9rence de l\u2019UX design\u2026 en proposant des cr\u00e8mes glac\u00e9es \u00e0 leurs clients \u00e0 la sortie du magasin.<\/p>\n
Subitement, IKEA ne vend plus des meubles, mais une exp\u00e9rience de shopping.<\/p>\n
Et hop, parfaite transition pour la derni\u00e8re loi.<\/p>\n
5 \u2013 l\u2019effet IKEA, ou le biais de justification de l\u2019effort<\/i><\/h4>\n
Jusqu\u2019\u00e0 pr\u00e9sent, toutes les lois que nous vous avons montr\u00e9es vous incitent \u00e0 r\u00e9duire les frictions dans votre user journey.<\/p>\n
Mais est-ce qu\u2019un peu de difficult\u00e9 ne ferait pas du bien\u00a0?<\/p>\n
L\u2019effet IKEA r\u00e9pond oui\u00a0: les gens tombent ais\u00e9ment amoureux des produits qu\u2019ils ont pris de la peine \u00e0 concevoir<\/b>.<\/p>\n
From Software, un \u00e9diteur de jeux vid\u00e9o nippon, l\u2019a bien compris avec sa s\u00e9rie Dark Souls. Dans ce jeu, rien n\u2019est fait pour vous faciliter la vie. La mort vous attend \u00e0 chaque d\u00e9tour de la carte et m\u00eame les ennemis de bases sont coriaces.<\/p>\n
Un v\u00e9ritable ovni dans l\u2019univers du jeux-vid\u00e9o qui se tourne de plus en plus vers les jeux tous publics.<\/p>\n
![\"Dans](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/meme-sur-Dark-Soul-1024x576.png\")
Dans DarkSoul, vous allez mourir beaucoup de fois<\/figcaption><\/figure>\n Pourtant, \u00e7a a fait mouche. Les joueurs de tous niveaux ont ador\u00e9 son gameplay justement parce qu\u2019il est punitif.<\/p>\n
![\"D\u00e8s](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Meme-sur-Darksoul-2.png\")
D\u00e8s l’entr\u00e9e le jeu vous fait clairement comprendre que vous allez y laisser des larmes. Source : 9gag<\/figcaption><\/figure>\n C\u2019est exactement \u00e7a l\u2019effet IKEA\u00a0: plus un utilisateur s\u2019investit dans la cr\u00e9ation d\u2019un produit, plus il en tombe amoureux<\/b>.<\/p>\n
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\u00e9sultat soit pr\u00e9visible, les gens en sont fiers.<\/p>\n
Alors comment l\u2019utiliser pour augmenter le taux de r\u00e9tention de vos app\u00a0? Voici quelques pistes\u00a0:<\/p>\n
- \n
- demandez \u00e0 l\u2019utilisateur de compl\u00e9ter son profil\u00a0;<\/li>\n
- offrez des possibilit\u00e9s de customisation aux utilisateurs finaux\u00a0;<\/li>\n
- offrez des r\u00e9ductions en guise de \u00ab\u00a0vraies\u00a0\u00bb r\u00e9compenses \u00e0 vos clients.<\/li>\n<\/ul>\n
Maintenant, passons aux prochaines lois.<\/p>\n
7 lois pour capter l\u2019attention de vos utilisateurs et jouer sur la perception des mouvements<\/h3>\n
Pour cr\u00e9er une exp\u00e9rience utilisateur r\u00e9ussie et m\u00e9morable, vous devez jouer avec l\u2019attention des utilisateurs.<\/p>\n
Si vous la sollicitez trop, votre prospect va quitter votre plateforme. \u00c0 l\u2019inverse, si vous ne r\u00e9ussissez pas \u00e0 garder son attention durant toute sa navigation, il va s\u2019ennuyer sur votre plateforme et vos ventes vont plonger.<\/p>\n
Bref, vous devez manier aussi bien l\u2019attention qu\u2019un ma\u00eetre jedi mani son sabre. Raison pour laquelle nous vous proposons ces 7 lois de l\u2019UX design\u00a0:<\/p>\n
- \n
- la loi de Tesler\u00a0;<\/li>\n
- la loi de Miller\u00a0;<\/li>\n
- la loi de Parkinson\u00a0;<\/li>\n
- la loi de Jakob\u00a0;<\/li>\n
- la loi de Fitt\u00a0;<\/li>\n
- la loi de Hick\u00a0;<\/li>\n
- le rasoir d\u2019Occam.<\/li>\n<\/ul>\n
Voyons-les en d\u00e9tail.<\/p>\n
1 – La loi de Tesler<\/i><\/h4>\n
Aussi appel\u00e9e la loi de la conservation de la complexit\u00e9, elle stipule ceci\u00a0: il existe un degr\u00e9 de complexit\u00e9 en dessous duquel vous ne pourrez jamais r\u00e9duire un syst\u00e8me<\/b>.<\/p>\n
L\u2019exemple direct qui me vient en t\u00eate, ce sont les sites de r\u00e9servations d\u2019h\u00f4tel.<\/p>\n
\u00c0 l\u2019heure du minimalisme et de la r\u00e9duction du nombre de champs de formulaire, les sites de r\u00e9servation sont des exceptions. Ils vous demanderont toujours au moins quatre champs.<\/p>\n
![\"Page](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Page-daccueil-de-booking.com_-1024x504.png\")
Page d’accueil de Booking.com<\/figcaption><\/figure>\n Apr\u00e8s, complexit\u00e9 ne rime pas avec mauvaise exp\u00e9rience utilisateur.<\/p>\n
Comme le d\u00e9montre le site 16personnalities.com qui vous demande quand-m\u00eame de r\u00e9pondre \u00e0 60 questions pour \u00e9valuer votre profil psychologique. Ce qui en fait une parfaite transition pour la loi suivante.<\/p>\n
2 – La loi de Hick<\/i><\/h4>\n
Voici ce qu\u2019elle dit\u00a0: \u00ab\u00a0le temps pris pour faire un choix augmente proportionnellement au nombre d\u2019options disponibles<\/b>.\u00a0\u00bb.<\/p>\n
En effet, plus vous donnez de choix \u00e0 votre utilisateur, plus il va tenter de comparer ses alternatives. Fatalement, cela va lui demander beaucoup d\u2019efforts et il risque de remettre \u00e0 plus tard.<\/p>\n
Mais bon, vous et moi le savons, plus tard signifie tr\u00e8s souvent jamais<\/b>, ce qui repr\u00e9sente un vrai manque \u00e0 gagner.<\/p>\n
Comme si \u00e7a ne suffisait pas, s\u2019il y a trop d\u2019options, gardez en t\u00eate qu\u2019il peut tout simplement d\u00e9cider de quitter votre plateforme et de ne plus y revenir.<\/p>\n
Heureusement, en tant qu\u2019UX designer, vous pouvez limiter l\u2019impact de la loi de Hick en d\u00e9coupant le parcours utilisateur en grandes \u00e9tape<\/b>s.<\/p>\n
Vous souvenez-vous du site 16personnalities.com dont on parlait plus haut\u00a0? Plut\u00f4t que de vous mettre face \u00e0 un questionnaire de 60 cases \u00e0 cocher, il les segmente par groupe de 6.<\/p>\n
![\"Page](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Page-daccueil-du-site-16personnalities.com_-1024x499.png\")
Page d\u2019accueil de 16Personalities<\/figcaption><\/figure>\n Spotify aussi le fait en ne vous proposant que quelques cat\u00e9gories de musique sur sa page d\u2019accueil.<\/p>\n
![\"Page](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/page-daccueil-Spotify-1024x493.png\")
Page d’accueil de Spotify ne vous montrant que quelques cat\u00e9gories de musique<\/figcaption><\/figure>\n D\u00e8s que vous choisissez votre cat\u00e9gorie, les sous-cat\u00e9gories s\u2019affichent et ainsi de suite jusqu\u2019\u00e0 ce que vous trouviez une m\u00e9lodie qui vous pla\u00eet.<\/p>\n
3 – La loi de Miller<\/i><\/h4>\n
\u00c9nonc\u00e9e pour la premi\u00e8re fois en 1956, la loi de Miller affirme que nous ne pouvons garder en m\u00e9moire que 5 ou 7 \u00e9l\u00e9ments<\/b>. Pas plus.<\/p>\n
Vous utilisez constamment ce principe sans vous en rendre compte. Essayez d’\u00e9noncer votre num\u00e9ro de t\u00e9l\u00e9phone \u00e0 haute voix. Vous verrez que vous le d\u00e9coupez instinctivement en groupe de trois chiffres.<\/p>\n
Pour revenir au webdesign, c\u2019est cette loi qui explique que les d\u00e9veloppeurs cr\u00e9ent rarement des menus \u00e0 plus de sept \u00e9l\u00e9ments.<\/p>\n
L\u2019une des mises en pratique les plus c\u00e9l\u00e8bres de la loi de Miller est la refonte graphique du site web de La Redoute. Voici \u00e0 quoi ressemblait sa page d\u2019accueil en 2009.<\/p>\n
![\"Page](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Page-daccueil-du-site-web-de-La-Redoute-en-2009-e1698454540546.png\")
Page d’accueil de la Redoute en 2009<\/figcaption><\/figure>\n Faisons l\u2019impasse sur son esth\u00e9tique. Attaquons-nous plut\u00f4t au nombre de cat\u00e9gories pr\u00e9sent\u00e9es en haut de page.<\/p>\n
Page d’accueil de la Redoute en 2009<\/figcaption><\/figure>\n Il y en a 16\u00a0!<\/strong><\/p>\n
Essayez de toutes les lire et de vous en souvenir (sans inclure celles qui sont en d\u00e9but et en fin de liste).<\/p>\n
\u2026<\/p>\n
Combien de cat\u00e9gories vous reviennent en t\u00eate\u00a0? Surement moins de la moiti\u00e9. Heureusement, l\u2019entreprise a depuis fait plusieurs refontes graphiques qui ont corrig\u00e9 ce probl\u00e8me.<\/p>\n
![\"Homepage](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Page-daccueil-de-La-Redoute-2023-1024x500.png\")
Homepage de La Redoute en 2023 avec un bien meilleur menu<\/figcaption><\/figure>\n Le nombre de cat\u00e9gories a grandement chut\u00e9. Seules sept sont pr\u00e9sent\u00e9es. Les autres \u00e9tant masqu\u00e9s sous un menu hamburger.<\/p>\n
Voici comment vous pouvez l\u2019utiliser sur vos plateformes\u00a0num\u00e9riques :<\/p>\n
- \n
- divisez vos contenus en petits morceaux\u00a0;<\/li>\n
- cr\u00e9ez une hi\u00e9rarchie visuelle gr\u00e2ce \u00e0 des titres et des sous-titres (\u00e7a fonctionne aussi avec les cat\u00e9gories et sous-cat\u00e9gories)\u00a0;<\/li>\n
- retirez tous les \u00e9l\u00e9ments superflus de vos interfaces\u00a0;<\/li>\n
- \u00e9vitez les ic\u00f4nes difficiles \u00e0 comprendre.<\/li>\n<\/ul>\n
Pour finir, vous pouvez aussi vous inspirer de la plateforme de streaming Netflix.<\/p>\n
![\"Page](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Page-daccueil-de-Netflix-1024x740.jpg\")
Page d’accueil de Netflix<\/figcaption><\/figure>\n Malgr\u00e9 son catalogue de films impressionnant, la plateforme n\u2019en affiche que quelques-uns visuellement regroup\u00e9s en petits groupes.<\/p>\n
4 – La loi de Parkinson<\/i><\/h4>\n
![\"Loi](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Graphe-montrant-la-loi-de-Parkinson.png\")
Loi de Parkinson (source : Source : https:\/\/kanbanzone.com\/2020\/how-to-use-parkinsons-law-to-get-more-done-in-less-time\/)<\/figcaption><\/figure>\n Toute t\u00e2che prolong\u00e9e est prolong\u00e9e jusqu\u2019\u00e0 prendre tout le temps que nous lui allouons<\/b>.<\/p>\n
Si vous vous int\u00e9ressez \u00e0 la productivit\u00e9, cette loi vous est famili\u00e8re. Bonne nouvelle, elle peut aussi \u00eatre utilis\u00e9e pour peaufiner l\u2019exp\u00e9rience propos\u00e9e par votre plateforme.<\/p>\n
En effet, plus vous exigerez que vos visiteurs fassent des actions complexes, plus ils prendront de temp<\/b>s. Sauf qu\u2019en tant qu\u2019UX designer, vous savez que plus de temps signifie aussi plus de chance qu\u2019il abandonne et quitte la plateforme.<\/p>\n
Concr\u00e8tement, voici quelques techniques que vous pouvez utiliser pour maximiser ce principe\u00a0:<\/p>\n
- \n
- proposez le remplissage automatique du maximum de champs possibles sur vos formulaires\u00a0;<\/li>\n
- proposez des m\u00e9thodes de paiement rapides et intuitives\u00a0;<\/li>\n
- montrez \u00e0 vos utilisateurs le temps n\u00e9cessaire pour terminer l\u2019action en cours\u00a0;<\/li>\n
- Pr\u00e9-remplissez les barres de recherche du moteur de recherche int\u00e9gr\u00e9 de votre app.<\/li>\n<\/ul>\n
5 – La loi de Fitts\u00a0<\/i><\/h4>\n
Est-ce que vous avez d\u00e9j\u00e0 r\u00eav\u00e9 de pouvoir pr\u00e9dire les actions des internautes\u00a0?<\/p>\n
Gr\u00e2ce \u00e0 la loi de Fitts, vous pouvez essayer. Voici ce qu\u2019elle dit\u00a0: \u00ab\u00a0Le temps n\u00e9cessaire \u00e0 l’acquisition d’une cible est fonction de la distance et de la taille de la cible<\/b>\u00a0\u00bb. Autrement dit, si vos boutons d\u2019appel \u00e0 l\u2019action sont petits et \u00e9loign\u00e9s de son doigt, l\u2019utilisateur risque de les rater.<\/p>\n
Pour appliquer la loi de Fitts dans votre UX design, suivez ces r\u00e8gles\u00a0:<\/p>\n
- \n
- cr\u00e9ez des boutons suffisamment gros (au moins 44 x 44 pixels CSS)\u00a0;<\/li>\n
- laissez des espaces suffisamment larges entre vos \u00e9l\u00e9ments graphiques pour diminuer le taux d\u2019erreur\u00a0;<\/li>\n
- ajoutez des labels explicatifs \u00e0 vos ic\u00f4nes\u00a0;<\/li>\n
- ajoutez des espaces blancs en plus des padding autour de vos ic\u00f4nes\u00a0;<\/li>\n
- \u00e9loignez autant que possible les boutons qui permettent de r\u00e9aliser des actions que vous ne voulez pas (quitter l\u2019application, retour en arri\u00e8re, etc.)\u00a0;<\/li>\n
- placez les cibles li\u00e9es entre elles proches les unes des autres.<\/li>\n<\/ul>\n
Uber applique ce principe avec succ\u00e8s dans toutes ses interfaces.<\/p>\n
![\"interface](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/interface-mobile-de-Uber-1024x683.jpg\")
interface de Uber Charter<\/figcaption><\/figure>\n \u00a0<\/i><\/p>\n
Avez-vous remarqu\u00e9\u00a0? Le bouton pour entamer la course remplit tout le bas de l\u2019\u00e9cran et arbore un bouton d\u2019appel \u00e0 l\u2019action travaill\u00e9. Clairement, c\u2019est le bouton que vous toucherez le plus facilement avec le pouce.<\/p>\n
\u00c0 l\u2019inverse, le bouton pour annuler la course est situ\u00e9 en haut \u00e0 gauche de l\u2019\u00e9cran du smartphone. Impossible d\u2019y acc\u00e9der sans avoir \u00e0 sortir votre autre main de votre poche. Si vous transportez un colis, vous devrez carr\u00e9ment le d\u00e9poser pour annuler.<\/p>\n
6 – La loi de Jakob<\/i><\/h4>\n
Si vous voulez innover dans le design graphique et dans l\u2019agencement des \u00e9l\u00e9ments de vos interfaces, cette loi est faite pour vous.<\/p>\n
Voici ce qu\u2019elle dit\u00a0: le meilleur moyen de cr\u00e9er quelque chose de nouveau est de regarder les r\u00e9f\u00e9rences<\/b>.<\/p>\n
Autrement dit\u00a0: l\u2019ui de votre plateforme doit reprendre certains \u00e9l\u00e9ments de vos concurrents sans pour autant \u00eatre une p\u00e2le copie.<\/p>\n
La raison est simple, les clients de votre march\u00e9 utilisent d\u00e9j\u00e0 des plateformes de vos concurrents directs ou indirects. Ce qui leur a laiss\u00e9 le temps de se forger des habitudes de navigation.<\/p>\n
Alors si vous d\u00e9barquez avec des interfaces trop r\u00e9volutionnaires et difficiles \u00e0 comprendre pour eux\u2026 ils vont retourner chez vos concurrents.<\/p>\n
C\u2019est pour cette raison que si vous fr\u00e9quentez r\u00e9guli\u00e8rement les sites d\u2019e-commerce, o\u00f9 que vous soyez dans le monde, vous saurez comment vous en servir.<\/p>\n
![\"Homepage](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/page-daccueil-de-Amazon-desktop-1024x487.png\")
Homepage d’Amazon<\/figcaption><\/figure>\n ![\"Page](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Page-daccueil-de-Cdiscount-1024x487.png\")
Page d’accueil de Cdiscount<\/figcaption><\/figure>\n ![\"HomePage](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/Page-daccueil-de-Taobao-1024x483.png\")
HomePage de Taibao (Chine)<\/figcaption><\/figure>\n ![\"Page](\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2023\/10\/page-daccueil-Rakuten-Japon-1024x481.png\")
Page d’accueil de Rakuten Japon<\/figcaption><\/figure>\n Par cons\u00e9quent, si vous voulez cr\u00e9er votre propre site d\u2019e-commerce<\/a>, un conseil : organisez vos contenus en suivant la m\u00eame grille.<\/p>\n
- utilisez les techniques de mise en valeur des \u00e9l\u00e9ments avec parcimonie<\/b> pour que l\u2019utilisateur ne soit pas distrait ;<\/li>\n
- rendez les informations importantes<\/b> (ou l\u2019action que vous voulez que l\u2019utilisateur fasse) visuellement distinctes des autres<\/b>\u00a0;<\/li>\n
- donnez la possibilit\u00e9 \u00e0 vos lecteurs de consommer une partie de vos contenus, puis coupez-les brutalement. C\u2019est ce que font les m\u00e9dias en ligne pour vous inciter \u00e0 payer un abonnement\u00a0;<\/li>\n<\/ul>\n
- incitez vos utilisateurs \u00e0 vouloir aller plus loin en leur teasant la prochaine \u00e9tape via un cliffhanger (comme Netflix). Si vous pr\u00e9sentez beaucoup de contenus textuels, essayez de mettre les \u00ab \u2026 \u00bb \u00e0 la fin de certains blocs de texte ;<\/li>\n<\/ul>\n
- cr\u00e9ez des mises en page qui utilisent des sch\u00e9mas connus par les clients de votre niche.<\/li>\n<\/ul>\n
- v\u00e9rifiez toutes vos hypoth\u00e8ses une \u00e0 une en cr\u00e9ant un MVP avant de lancer le produit final (voici un article qui d\u00e9taille tout ce qu\u2019il y a \u00e0 savoir sur le MVP + sa cr\u00e9ation<\/a>).<\/li>\n<\/ul>\n
- basez vos cr\u00e9ations sur des donn\u00e9es r\u00e9colt\u00e9es aupr\u00e8s de clients r\u00e9els. Si vous n\u2019en avez pas, alors optez plut\u00f4t pour des personas (lisez cet article de Sales Odyssey<\/a> pour apprendre \u00e0 cr\u00e9er vos personas marketing) ;<\/li>\n
- Vous pouvez booster vos taux de conversion de 400 %\u00a0<\/a>;<\/li>\n
- 38 %<\/a> des internautes cesseront d\u2019interagir avec votre plateforme si son contenu ou sa mise en page est rat\u00e9\u00a0;<\/li>\n
- Les 5 lois de la Gestalt\n