{"id":871,"date":"2024-03-04T07:30:40","date_gmt":"2024-03-04T07:30:40","guid":{"rendered":"https:\/\/poyesis.fr\/blogs\/?p=871"},"modified":"2025-02-03T07:57:16","modified_gmt":"2025-02-03T07:57:16","slug":"audit-ux-site-web","status":"publish","type":"post","link":"https:\/\/poyesis.fr\/blogs\/audit-ux-site-web\/","title":{"rendered":"Comment faire l&rsquo;audit UX d&rsquo;un site web sans \u00eatre expert UX ?"},"content":{"rendered":"<p>Est-ce que vous vous \u00eates d\u00e9j\u00e0 demand\u00e9 pourquoi IKEA vend de la glace \u00e0 la sortie de ces magasins\u00a0?<\/p>\n<p>\u2026<\/p>\n<p>C\u2019est pour cr\u00e9er une exp\u00e9rience utilisateur inoubliable et introuvable chez un autre vendeur de meubles.<\/p>\n<p>Sauf que bon, vous n\u2019\u00eates pas IKEA, et le titre de l\u2019article, c&rsquo;est \u201ccomment faire l\u2019audit UX de son site web\u201d. Pas de son magasin de meubles.<\/p>\n<p>Bonne nouvelle, \u00e7a s\u2019applique aussi \u00e0 vos plateformes num\u00e9riques (dont vos applications web).<\/p>\n<p>Et si vous souhaitez booster l\u2019exp\u00e9rience v\u00e9cue par vos clients, vous devez commencer par auditer l\u2019UX que vous proposez.<\/p>\n<p>Justement, voici comment le faire en 9 \u00e9tapes.<\/p>\n<h2>Qu\u2019est-ce que l\u2019exp\u00e9rience utilisateur ?<\/h2>\n<figure id=\"attachment_878\" aria-describedby=\"caption-attachment-878\" style=\"width: 881px\" class=\"wp-caption aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" class=\"size-full wp-image-878\" src=\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2024\/03\/image8.png\" alt=\"Importance des couleurs des boutons en UX design\" width=\"881\" height=\"881\" srcset=\"https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/image8.png 881w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/image8-300x300.png 300w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/image8-150x150.png 150w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/image8-768x768.png 768w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/image8-75x75.png 75w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/image8-350x350.png 350w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/image8-750x750.png 750w\" sizes=\"(max-width: 881px) 100vw, 881px\" \/><figcaption id=\"caption-attachment-878\" class=\"wp-caption-text\">Importance des couleurs des boutons en UX design<\/figcaption><\/figure>\n<p>L\u2019User eXperience d\u00e9signe toutes les \u00e9motions, perceptions, r\u00e9actions physiques et psychologiques de vos utilisateurs. Et surtout, l\u2019exp\u00e9rience utilisateur concerne toutes les \u00e9tapes du parcours client, y compris avant et apr\u00e8s qu\u2019il n\u2019ait utilis\u00e9 votre produit\/service.<\/p>\n<p>Selon Peter Morville, l\u2019un des pionniers de l\u2019architecture informationnelle, l\u2019UX est compos\u00e9e de 7 facteurs\u00a0:<\/p>\n<ol>\n<li aria-level=\"1\"><strong>L\u2019utilisabilit\u00e9<\/strong>\u00a0: est-ce que votre site web ou application mobile est facile \u00e0 utiliser\u00a0?<\/li>\n<li aria-level=\"1\"><strong>L\u2019utilit\u00e9<\/strong> : vos services r\u00e9pondent \u00e0 un besoin de votre cible ?<\/li>\n<li aria-level=\"1\"><strong>La d\u00e9sirabilit\u00e9<\/strong>\u00a0: est-ce que vos plateformes num\u00e9riques suscitent une \u00e9motion positive\u00a0? Sont-elles esth\u00e9tiquement r\u00e9ussies\u00a0?<\/li>\n<li aria-level=\"1\"><strong>La trouvabilit\u00e9<\/strong>\u00a0: vos contenus sont ais\u00e9s \u00e0 trouver\u00a0?<\/li>\n<li aria-level=\"1\"><strong>L\u2019accessibilit\u00e9<\/strong>\u00a0: tous les internautes peuvent consommer vos contenus\u00a0?<\/li>\n<li aria-level=\"1\"><strong>La cr\u00e9dibilit\u00e9<\/strong>\u00a0: est-ce que votre marque fait figure d\u2019autorit\u00e9\u00a0(coucou Google EEAT\ud83d\ude0f)\u00a0?<\/li>\n<li aria-level=\"1\"><strong>La valeur<\/strong>\u00a0: est-ce que vous apportez une r\u00e9elle valeur \u00e0 vos prospects\u00a0?<\/li>\n<\/ol>\n<p>Aussi simples soient-ils, ces 7 \u00e9l\u00e9ments peuvent faire toute la diff\u00e9rence entre une entreprise prosp\u00e8re et un d\u00e9p\u00f4t de bilan.<\/p>\n<h2>L\u2019UX design est un investissement, pas une d\u00e9pense (ou\u00a0 7 statistiques qui vont convaincre votre boss d\u2019investir dans l\u2019UX)<\/h2>\n<figure id=\"attachment_882\" aria-describedby=\"caption-attachment-882\" style=\"width: 450px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-882\" src=\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2024\/03\/ROI-de-lUX-design-source-eficode.com_.jpg\" alt=\"ROI de l'UX design source eficode.com\" width=\"450\" height=\"675\" \/><figcaption id=\"caption-attachment-882\" class=\"wp-caption-text\">ROI de l&rsquo;UX design source eficode.com<\/figcaption><\/figure>\n<p><i>Source : https:\/\/www.eficode.com\/blog\/achieving-roi-with-ux-design<\/i><\/p>\n<p>Si vous avez lu notre billet sur <a href=\"https:\/\/poyesis.fr\/blogs\/lois-ux\/\" target=\"_blank\" rel=\"noopener\">les 32 lois de l\u2019UX design<\/a>, aucun doute que vous \u00eates convaincu de l\u2019importance de l\u2019UX.<\/p>\n<p>Oui, mais certains de vos collaborateurs ne le sont pas. Right\u00a0?<\/p>\n<p>Il n\u2019est pas rare que l\u2019UX UI design soit rel\u00e9gu\u00e9 \u00e0 une t\u00e2che \u00e0 faire lorsque l\u2019on aura le temps. Pire encore, si l\u2019entreprise cherche d\u00e9sesp\u00e9r\u00e9ment de nouveaux clients\u00a0: il y a de fortes chances que tout ce qui ne fasse pas rentrer le cash imm\u00e9diatement soit mis de c\u00f4t\u00e9.<\/p>\n<p>Et am\u00e9liorer l\u2019UX design de ses plateformes num\u00e9riques tombe souvent dans la deuxi\u00e8me case.<\/p>\n<p>Sauf que c\u2019est une erreur.<\/p>\n<p>Et voici 7 raisons pour lesquelles vous et vos collaborateurs devriez prendre le temps de faire un audit UX design.<\/p>\n<h3>1 &#8211; Son ROI explose celui de tous vos canaux marketing (et de loin)<\/h3>\n<p>Autant commencer par le nerf de la guerre, le retour sur investissement.<\/p>\n<p>En effet, lorsque certaines entreprises veulent augmenter leur CA, elles investissent massivement dans la publicit\u00e9.<\/p>\n<p>Et quel est le ROI des canaux de webmarketing\u00a0?<\/p>\n<ul>\n<li aria-level=\"1\">L\u2019e-mail\u00a0: 1 \u20ac investi = 42 \u20ac en retour\u00a0;<\/li>\n<li aria-level=\"1\">Le SEO\u00a0: 317 % pour les e-commerces ;<\/li>\n<li aria-level=\"1\">Les publicit\u00e9s Google Ads\u00a0: 1 \u20ac investi = 2 \u20ac en retour\u00a0;<\/li>\n<li aria-level=\"1\">Instagram Ads\u00a0: 1 \u20ac investi = 3.50\u20ac ;<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>Et notre star du jour, <a href=\"https:\/\/www.forrester.com\/report\/The-Six-Steps-For-Justifying-Better-UX\/RES117708\" target=\"_blank\" rel=\"noopener\">l\u2019UX design a un ROI astronomique de 9\u00a0900 %<\/a>.<\/p>\n<p>1 \u20ac investi dans un UX designer = 99 \u20ac en plus dans votre tr\u00e9sorerie.<\/p>\n<p>Le site ESPN.com a fait le pari de l\u2019UX design en retravaillant son site web en fonction de ses users personas. Verdict\u00a0: <a href=\"https:\/\/blog.adobe.com\/en\/publish\/2020\/12\/17\/mind-blowing-stats-user-experience-design\" target=\"_blank\" rel=\"noopener\">ses revenus ont grimp\u00e9 de 35 %\u00a0<\/a>!<\/p>\n<p>Et ESPN.com n\u2019est pas la seule boite \u00e0 miser \u00e0 fond sur l\u2019UX pour se diff\u00e9rencier (et booster ses ventes). En moyenne, <a href=\"https:\/\/truelist.co\/blog\/ux-statistics\/\" target=\"_blank\" rel=\"noopener\">les entreprises qui adoptent un fonctionnement centr\u00e9 sur l\u2019utilisateur sur-performent l\u2019indice S&amp;P de 35 % chaque ann\u00e9e<\/a>.<\/p>\n<h3>2 \u2013 Vous \u00e9viterez la cause d\u2019\u00e9chec de 70 % des business en ligne<\/h3>\n<p>Oui oui, vous avez bien lu.<\/p>\n<p>70 % des entreprises online finissent par mettre la cl\u00e9 sous le paillasson \u00e0 cause\u2026 d\u2019une exp\u00e9rience utilisateur d\u00e9sastreuse (<a href=\"https:\/\/uxeria.com\/en\/15-statistics-that-will-convince-your-boss-to-invest-in-ux\/\" target=\"_blank\" rel=\"noopener\">source<\/a>).<\/p>\n<p>Faites partie des 30 % de gagnant en pensant UX.<\/p>\n<h3>3 \u2013 Vos taux de conversion vont exploser (et vos ventes avec)<\/h3>\n<p>L\u2019UX design vise \u00e0 augmenter la satisfaction utilisateur.<\/p>\n<p>Et un utilisateur satisfait est un client qui ach\u00e8te.<\/p>\n<p>C\u2019est la conclusion d&rsquo;une \u00e9tude de Forrester research, les entreprises qui soignent leur exp\u00e9rience utilisateur voient leurs CRO bondir de +400 % (<a href=\"https:\/\/www.forrester.com\/report\/The+Six+Steps+For+Justifying+Better+UX\/-\/E-RES117708\" target=\"_blank\" rel=\"noopener\">source<\/a>).<\/p>\n<p>Enfin, regardez ce qu\u2019il se passe lorsque vous n\u2019offrez pas une bonne exp\u00e9rience utilisateur \u00e0 vos mobinautes.<\/p>\n<p>Plus exactement, si votre site\/application a un temps de chargement \u00e9lev\u00e9\u00a0:<\/p>\n<figure id=\"attachment_877\" aria-describedby=\"caption-attachment-877\" style=\"width: 700px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-877\" src=\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2024\/03\/image7.jpg\" alt=\"Nombre d'utilisateurs qui quittent une appli en fonction de son temps de chargement. Source : Statista\" width=\"700\" height=\"410\" srcset=\"https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/image7.jpg 700w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/image7-300x176.jpg 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><figcaption id=\"caption-attachment-877\" class=\"wp-caption-text\">Nombre d&rsquo;utilisateurs qui quittent une appli en fonction de son temps de chargement. Source : Statista<\/figcaption><\/figure>\n<p>Ce graphe de <a href=\"https:\/\/www.statista.com\/statistics\/276115\/user-patience-with-website-loading-speeds-on-mobile-phones\/\">Statista<\/a> est assez parlant\u00a0:<\/p>\n<ul>\n<li aria-level=\"1\">20 % des mobinautes quitteront votre app si elle met 2 secondes \u00e0 charger une interface\u00a0;<\/li>\n<li aria-level=\"1\">36 % des utilisateurs s&rsquo;ils doivent atteindre 3 secondes\u00a0;<\/li>\n<li aria-level=\"1\">74 % si son temps de chargement atteint 5 secondes.<\/li>\n<\/ul>\n<p>Et les d\u00e9g\u00e2ts caus\u00e9s par leur fureur vont franchement entacher votre image de marque.<\/p>\n<h3>4 \u2013 Prot\u00e9gez et renforcez votre image de marque (+ votre score EEAT aux yeux de Google)<\/h3>\n<p>Imaginez un instant\u2026<\/p>\n<p>Vous arrivez dans votre bureau, et l\u2019un de vos collaborateurs se met \u00e0 vous raconter ses d\u00e9boires de la matin\u00e9e.<\/p>\n<p>Apparemment, il a voulu faire une simple transaction et le service a \u00e9t\u00e9 tellement d\u00e9sagr\u00e9able qu\u2019il a tourn\u00e9 ses talons.<\/p>\n<p>\u00c7a vous para\u00eet familier\u00a0?<\/p>\n<p>C\u2019est le lot de tous les humains sociaux sur terre \u2013 dont vos consommateurs et vos futurs potentiels prospects.<\/p>\n<p>L\u2019\u00eatre humain a tendance \u00e0 raconter davantage ses exp\u00e9riences n\u00e9gatives \u00e0 son entourage\u2026 et \u00e0 diffuser son opinion n\u00e9gative sur votre marque.<\/p>\n<p>Face \u00e0 une exp\u00e9rience utilisateur d\u00e9sagr\u00e9able avec un service, <a href=\"https:\/\/truelist.co\/blog\/ux-statistics\/\" target=\"_blank\" rel=\"noopener\">13 % des gens vont la raconter \u00e0 au moins 15 %.<\/a><\/p>\n<p>Et autant le bouche-\u00e0-bouche \u2013 ou referral \u2013 est un excellent moyen de convertir facilement un prospect, autant il peut \u00eatre d\u00e9vastateur.<\/p>\n<h3>5 \u2013 Vous ne perdrez pas (plus) 89 % de vos nouveaux visiteurs<\/h3>\n<p>Attirer des prospects sur son site web est difficile.<\/p>\n<p>Les faire rester jusqu\u2019\u00e0 les convertir l\u2019est encore plus.<\/p>\n<p>Surtout lorsque l\u2019on sait que <a href=\"https:\/\/www.webfx.com\/blog\/web-design\/user-experience-matters-marketing\/\" target=\"_blank\" rel=\"noopener\">89 % des consommateurs d\u00e9serteront vos interfaces s\u2019ils vivent une mauvaise exp\u00e9rience<\/a> \ud83d\ude2d.<\/p>\n<h2>Qu\u2019est-ce que l\u2019audit UX\u00a0?<\/h2>\n<p>Maintenant que vous \u00eates convaincu\u00b7e de l\u2019importance de l\u2019UX exp\u00e9rience, reste plus qu\u2019\u00e0 r\u00e9pondre \u00e0 la question\u00a0: qu\u2019est-ce que l\u2019audit UX\u00a0?<\/p>\n<p>Un audit UX est une analyse de l\u2019exp\u00e9rience utilisateur qui repose sur 2 briques essentielles\u00a0:<\/p>\n<ul>\n<li aria-level=\"1\">L\u2019analyse de l\u2019ergonomie de vos interfaces\u00a0;<\/li>\n<li aria-level=\"1\">L\u2019analyse comportementale de vos utilisateurs.<\/li>\n<\/ul>\n<p>\u00c0 la fin de l\u2019audit UX UI, vous conna\u00eetrez\u00a0:<\/p>\n<ul>\n<li aria-level=\"1\">les points de friction qui emp\u00eachent vos utilisateurs de vivre un parcours fluide (en plus d\u2019\u00e9loigner leurs CB de vos formulaires d\u2019achats)\u00a0;<\/li>\n<li aria-level=\"1\">leurs besoins r\u00e9els (besoins \u2260 d\u2019envies) ;<\/li>\n<li aria-level=\"1\">comment optimiser vos processus d\u2019onboarding\u00a0;<\/li>\n<li aria-level=\"1\">comment am\u00e9liorer vos KPIs business et la performance de votre plateforme\u00a0;<\/li>\n<li aria-level=\"1\">enfin, vous d\u00e9couvrirez comment am\u00e9liorer vos taux de conversion.<\/li>\n<\/ul>\n<p>Sans transition, voici 9 \u00e9tapes pour mener l\u2019audit UX de vos plateformes num\u00e9riques.<\/p>\n<h2>9 \u00e9tapes pour mener son audit UX<\/h2>\n<p>En suivant ces quelques instructions, vous devriez r\u00e9ussir sans grand mal \u00e0 faire un audit rapide de vos interfaces.<\/p>\n<p>Let\u2019s go.<\/p>\n<h3>1 &#8211;\u00a0 D\u00e9finissez l\u2019objectif de l\u2019audit et les KPI \u00e0 monitorer<\/h3>\n<p>Est-ce que vous allez auditer une caract\u00e9ristique de votre app\u00a0? Une interface\u00a0? Un parcours utilisateur\u00a0? Ou alors tout votre syst\u00e8me\u00a0?<\/p>\n<p>Faire un audit UX demande \u00e9norm\u00e9ment de temps (en plus d\u2019avoir un co\u00fbt non n\u00e9gligeable).<\/p>\n<p>Par cons\u00e9quent, si votre site web contient beaucoup d\u2019interfaces et de fonctionnalit\u00e9s, vous allez devoir choisir.<\/p>\n<p>Armez-vous d\u2019un stylo et d\u2019une feuille et r\u00e9pondez aux trois questions suivantes\u00a0:<\/p>\n<ul>\n<li aria-level=\"1\">Quelles fonctionnalit\u00e9s vais-je auditer\u00a0?<\/li>\n<li aria-level=\"1\">Quelle(s) m\u00e9trique(s) business, je souhaite am\u00e9liorer\u00a0: CTR\u00a0? Nombre de leads\u00a0? Nombre de nouveaux clients\u00a0? Valeur moyenne d\u2019un panier\u00a0? La lifetime value\u00a0? Taux de r\u00e9tention d\u2019un segment utilisateur pr\u00e9cis\u00a0?<\/li>\n<li aria-level=\"1\">Enfin, quelles KPI vous allez monitorer pour atteindre votre objectif\u00a0?<\/li>\n<\/ul>\n<p>Concernant les KPI, voici une liste non exhaustive que vous pouvez utiliser\u00a0:<\/p>\n<ul>\n<li aria-level=\"1\">le taux de rebond\u00a0;<\/li>\n<li aria-level=\"1\">la dur\u00e9e des sessions utilisateurs\u00a0;<\/li>\n<li aria-level=\"1\">le taux d\u2019abandon de panier\u00a0;<\/li>\n<li aria-level=\"1\">le trafic par page\u00a0;<\/li>\n<li aria-level=\"1\">le nombre de clics de rage (c-a-d les clics r\u00e9p\u00e9t\u00e9s sur un \u00e9l\u00e9ment graphique en une courte p\u00e9riode de temps \u2013 c\u2019est un sympt\u00f4me typique d\u2019un bug, d\u2019une erreur JavaScript ou d\u2019un point de friction qui \u00e9nerve votre internaute)\u00a0;<\/li>\n<li aria-level=\"1\">les micros conversions.<\/li>\n<\/ul>\n<p>Apr\u00e8s \u00e7a, vous n\u2019avez plus qu\u2019\u00e0 mettre les membres de votre \u00e9quipe dans le bain. Typiquement, voici les profils dont vous aurez besoin\u00a0:<\/p>\n<ul>\n<li aria-level=\"1\">1 UX designer, qui va d\u00e9celer les pains points et les points de friction pour proposer des solutions fluides ;<\/li>\n<li aria-level=\"1\">1 ou plusieurs d\u00e9veloppeurs pour mettre en \u0153uvre les recommandations de l\u2019audit\u00a0;<\/li>\n<li aria-level=\"1\">Les membres de votre support client, car c\u2019est chez eux que vos clients parlent de ce qu\u2019ils n\u2019appr\u00e9cient pas dans vos services\u00a0;<\/li>\n<li aria-level=\"1\">1 product manager qui va vous apporter des insights pertinents gr\u00e2ce \u00e0 sa connaissance de vos clients, des objectifs du produit et de sa vision cr\u00e9atrice.<\/li>\n<\/ul>\n<p>M\u00eame si \u00e7a peut sembler tentant de le faire tout seul, souvenez-vous d\u2019une chose\u00a0: vous n\u2019\u00eates pas du tout objectif.<\/p>\n<p>Car apr\u00e8s tout, c\u2019est votre produit, vous avez assist\u00e9 \u00e0 sa conception et y \u00eates \u00e9motionnellement li\u00e9. Avoir les visions d\u2019autres personnes pour vous recadrer est donc imp\u00e9ratif.<\/p>\n<p>Une fois que c\u2019est pr\u00eat, vous \u00eates pr\u00eat pour la prochaine \u00e9tape.<\/p>\n<h3>2 &#8211; (Re)faites une recherche utilisateur et cr\u00e9er vos personas utilisateurs<\/h3>\n<figure id=\"attachment_872\" aria-describedby=\"caption-attachment-872\" style=\"width: 564px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-872\" src=\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2024\/03\/Citation-Jakob-Nielsen.jpg\" alt=\"Citation Jakob Nielsen\" width=\"564\" height=\"564\" srcset=\"https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Citation-Jakob-Nielsen.jpg 564w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Citation-Jakob-Nielsen-300x300.jpg 300w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Citation-Jakob-Nielsen-150x150.jpg 150w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Citation-Jakob-Nielsen-75x75.jpg 75w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Citation-Jakob-Nielsen-350x350.jpg 350w\" sizes=\"(max-width: 564px) 100vw, 564px\" \/><figcaption id=\"caption-attachment-872\" class=\"wp-caption-text\">Citation Jakob Nielsen<\/figcaption><\/figure>\n<p>L\u00e0, vous vous dites peut-\u00eatre que vous connaissez d\u00e9j\u00e0 parfaitement vos personas marketing. Et donc faire une recherche sur eux est inutile.<\/p>\n<p>Erreur.<\/p>\n<p>Parce qu\u2019il ne s\u2019agit pas de vos buyer persona. Mais de vos personas utilisateurs.<\/p>\n<p>L\u00e0 o\u00f9 un persona marketing se focalise sur l\u2019acheteur, le persona en UX design est orient\u00e9 sur les comportements et les biais cognitifs de l\u2019utilisateur (pas de l\u2019acheteur).<\/p>\n<figure id=\"attachment_884\" aria-describedby=\"caption-attachment-884\" style=\"width: 778px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-884\" src=\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2024\/03\/user-persona-source-dribbble.com_.jpg\" alt=\"user persona (source dribbble.com)\" width=\"778\" height=\"568\" srcset=\"https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/user-persona-source-dribbble.com_.jpg 778w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/user-persona-source-dribbble.com_-300x219.jpg 300w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/user-persona-source-dribbble.com_-768x561.jpg 768w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/user-persona-source-dribbble.com_-750x548.jpg 750w\" sizes=\"(max-width: 778px) 100vw, 778px\" \/><figcaption id=\"caption-attachment-884\" class=\"wp-caption-text\">user persona (<a href=\"https:\/\/dribbble.com\/shots\/14948770-Trip-Mate-User-Persona\" target=\"_blank\" rel=\"noopener\">source dribbble.com<\/a>)<\/figcaption><\/figure>\n<p>Voici 4 \u00e9l\u00e9ments essentiels de vos personas UX\u00a0:<\/p>\n<ul>\n<li aria-level=\"1\">son objectif\u00a0: qu\u2019est-ce que votre persona d\u00e9sire obtenir en utilisant votre produit\u00a0?<\/li>\n<li aria-level=\"1\">sa motivation\u00a0: Pourquoi est-ce qu\u2019il veut atteindre cet objectif en particulier\u00a0?<\/li>\n<li aria-level=\"1\">son approche\u00a0: comment est-ce qu\u2019il compte atteindre leur objectif\u00a0?<\/li>\n<li aria-level=\"1\">Sa frustration\u00a0: qu\u2019est-ce qui l\u2019emp\u00eache d\u2019atteindre son objectif\u00a0?<\/li>\n<\/ul>\n<p>Sans ces informations, vos designers auront du mal \u00e0 concevoir des cartes d&#8217;empathie et des experiences map. Autrement dit, ils n\u2019arriveront pas \u00e0 cr\u00e9er des parcours qui vont d\u00e9clencher des \u00e9motions chez vos utilisateurs.<\/p>\n<p>Pour cr\u00e9er vos personas UX, voici les \u00e9tapes \u00e0 suivre\u00a0:<\/p>\n<ul>\n<li aria-level=\"1\">faites des hypoth\u00e8ses sur vos utilisateurs\u00a0: qui sont-ils\u00a0? Comment se comportent-ils face \u00e0 vos interfaces\u00a0?<\/li>\n<li aria-level=\"1\">s\u00e9lectionnez un panel d\u2019utilisateurs et faites leur passer des entretiens un \u00e0 un\u00a0;<\/li>\n<li aria-level=\"1\">effectuez des tests utilisateurs et recueillez les feedbacks\u00a0;<\/li>\n<li aria-level=\"1\">affinez vos hypoth\u00e8ses en vous basant sur vos donn\u00e9es utilisateur\u00a0: gr\u00e2ce \u00e0 des outils marketing comme <a href=\"https:\/\/marketingplatform.google.com\/intl\/fr\/about\/analytics\/\" target=\"_blank\" rel=\"noopener\">Google Analytics<\/a>, <a href=\"https:\/\/www.kissmetrics.io\/\" target=\"_blank\" rel=\"noopener\">Kissmetrics<\/a>, <a href=\"https:\/\/www.crazyegg.com\/\" target=\"_blank\" rel=\"noopener\">Crazy Egg<\/a>, etc.\u00a0;<\/li>\n<li aria-level=\"1\">enfin, n\u2019h\u00e9sitez pas \u00e0 espionner vos concurrents pour analyser leur exp\u00e9rience utilisateur.<\/li>\n<\/ul>\n<p>Point important pour la suite\u00a0: connectez au moins un outil d\u2019UX \u00e0 votre logiciel. C\u2019est capital pour la suite.<\/p>\n<p>Une fois que c\u2019est pr\u00eat, passons \u00e0 la prochaine \u00e9tape.<\/p>\n<h3>3 &#8211; Identifiez les chemins suivis par vos utilisateurs<\/h3>\n<figure id=\"attachment_874\" aria-describedby=\"caption-attachment-874\" style=\"width: 564px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-874\" src=\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2024\/03\/Experience-utilisateur-vs-les-parcours-concus.jpg\" alt=\"Exp\u00e9rience utilisateur vs les parcours con\u00e7us\" width=\"564\" height=\"564\" srcset=\"https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Experience-utilisateur-vs-les-parcours-concus.jpg 564w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Experience-utilisateur-vs-les-parcours-concus-300x300.jpg 300w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Experience-utilisateur-vs-les-parcours-concus-150x150.jpg 150w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Experience-utilisateur-vs-les-parcours-concus-75x75.jpg 75w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Experience-utilisateur-vs-les-parcours-concus-350x350.jpg 350w\" sizes=\"(max-width: 564px) 100vw, 564px\" \/><figcaption id=\"caption-attachment-874\" class=\"wp-caption-text\">Exp\u00e9rience utilisateur vs les parcours con\u00e7us<\/figcaption><\/figure>\n<p>Si vous avez d\u00e9j\u00e0 con\u00e7u une app, vous vous reconna\u00eetrez s\u00fbrement dans cette image.<\/p>\n<p>Supposez que vous conceviez un processus de checkout pour un site e-commerce. Vous faites les hypoth\u00e8ses suivantes\u00a0:<\/p>\n<ul>\n<li aria-level=\"1\">l\u2019utilisateur parcourt vos fiches produits\u00a0;<\/li>\n<li aria-level=\"1\">s\u00e9lectionne quelques items puis les mets dans son panier\u00a0;<\/li>\n<li aria-level=\"1\">ensuite, il rentre ses informations de paiements\u00a0;<\/li>\n<li aria-level=\"1\">puis son mode de livraison pr\u00e9f\u00e9r\u00e9\u00a0;<\/li>\n<li aria-level=\"1\">apr\u00e8s quoi, il pr\u00e9visualise sa commande\u00a0;<\/li>\n<li aria-level=\"1\">et il paie.<\/li>\n<\/ul>\n<p>Voil\u00e0.<\/p>\n<p>\u00c7a vous semble logique et vous vous dites que vos clients suivront (logiquement) ce processus.<\/p>\n<p>Sauf que, plot twist, certains vont cr\u00e9er des itin\u00e9raires non-pr\u00e9vus.<\/p>\n<p>Par exemple\u00a0:<\/p>\n<ul>\n<li aria-level=\"1\">apr\u00e8s avoir mis des articles dans son panier, l\u2019utilisateur d\u00e9cide finalement de les retirer\u00a0;<\/li>\n<li aria-level=\"1\">au moment de rentrer ses informations de paiement, beaucoup d\u2019utilisateurs quittent votre site web sans raison\u00a0;<\/li>\n<li aria-level=\"1\">ou encore il s\u2019arr\u00eate pendant qu\u2019il remplit ses coordonn\u00e9es.<\/li>\n<\/ul>\n<p>Bref, rien, absolument rien, ne vous garantit que les utilisateurs de vos plateformes vont suivre les chemins que vous avez cr\u00e9\u00e9s.<\/p>\n<p>D\u2019o\u00f9 l\u2019importance de confronter vos hypoth\u00e8ses avec des donn\u00e9es r\u00e9elles.<\/p>\n<p>Et c\u2019est l\u00e0 qu\u2019entre en jeu Google Analytics.<\/p>\n<p>Gr\u00e2ce \u00e0 lui, vous obtiendrez des insights inestimables pour approfondir votre compr\u00e9hension de vos utilisateurs\u00a0:<\/p>\n<ul>\n<li aria-level=\"1\">le taux de rebond par page sp\u00e9cifique\u00a0;<\/li>\n<li aria-level=\"1\">la heatmap (carte montrant comment les internautes naviguent sur vos interfaces)\u00a0;<\/li>\n<li aria-level=\"1\">les p\u00e9riph\u00e9riques via lesquels les internautes acc\u00e8dent \u00e0 vos contenus\u00a0;<\/li>\n<li aria-level=\"1\">les chemins utilisateurs (regardez dans l\u2019onglet \u00ab\u00a0Navigation summary\u00a0\u00bb)\u00a0;<\/li>\n<li aria-level=\"1\">la dur\u00e9e de chaque session\u00a0;<\/li>\n<li aria-level=\"1\">le suivi des \u00e9v\u00e8nements (ex\u00a0: t\u00e9l\u00e9charger un PDF, regarder une vid\u00e9o, cliquer sur un lien, et bien d\u2019autres micro-conversions).<\/li>\n<\/ul>\n<p>Et cette liste est loin d\u2019\u00eatre exhaustive.<\/p>\n<p>Alors un conseil\u00a0: foncez rapidement sur vos rapports <a href=\"https:\/\/marketingplatform.google.com\/intl\/fr\/about\/analytics\/\">Google Analytics<\/a>.<\/p>\n<h3>4 &#8211; Evaluez votre r\u00e9putation en ligne<\/h3>\n<p>\u00c0 ce niveau, vous avez une meilleure connaissance de vos utilisateurs.<\/p>\n<p>Et si vous sortiez un peu la t\u00eate de votre site web\u00a0?<\/p>\n<p>Car oui, l\u2019exp\u00e9rience utilisateur de vos clients d\u00e9bute bien avant qu\u2019ils ne commencent \u00e0 utiliser vos produits.<\/p>\n<p>Tous les points de contacts situ\u00e9s en amont \u2013 r\u00e9seaux sociaux, publicit\u00e9s, Google Ads, contenu marketing, etc. &#8211; doivent aussi \u00eatre v\u00e9rifi\u00e9s.<\/p>\n<p>Pourquoi\u00a0? Parce que vos consommateurs n\u2019interagissent pas qu\u2019avec les features de vos produits, mais avec l\u2019histoire que votre marque raconte.<\/p>\n<figure id=\"attachment_873\" aria-describedby=\"caption-attachment-873\" style=\"width: 450px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-873\" src=\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2024\/03\/Citation-Seth-Godin.jpg\" alt=\"Citation Seth Godin\" width=\"450\" height=\"450\" srcset=\"https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Citation-Seth-Godin.jpg 450w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Citation-Seth-Godin-300x300.jpg 300w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Citation-Seth-Godin-150x150.jpg 150w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Citation-Seth-Godin-75x75.jpg 75w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Citation-Seth-Godin-350x350.jpg 350w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><figcaption id=\"caption-attachment-873\" class=\"wp-caption-text\">Citation Seth Godin<\/figcaption><\/figure>\n<p>Si l\u2019histoire racont\u00e9e par votre marque est incoh\u00e9rente ou ne correspond pas aux croyances de votre utilisateur\u2026 votre UX et vos ventes vont en prendre un coup.<\/p>\n<p>Non pas qu\u2019elle soit mauvaise, non.<\/p>\n<p>Seulement, vos prospects vont \u00eatre frapp\u00e9s de dissonance cognitive.<\/p>\n<p>Concr\u00e8tement, votre site web ne fonctionnera pas comme ils pensent qu\u2019il doit fonctionner.<\/p>\n<p>Cette situation finit par cr\u00e9er une tension dans l\u2019esprit du client qui va choisir de s\u2019\u00e9vader de vos plateformes.<\/p>\n<p>Si vous souhaitez en apprendre davantage sur ce sujet, <a href=\"https:\/\/www.linkedin.com\/pulse\/dissonnance-cognitive-un-freindans-le-retail-mais-frein-vermersch\/?originalSubdomain=fr\" target=\"_blank\" rel=\"noopener\">lisez cet excellent article de Beno\u00eet Vermersch consacr\u00e9 \u00e0 l\u2019impact de la dissonance cognitive dans le retail<\/a>.<\/p>\n<p>Pour en revenir \u00e0 <del>nos moutons<\/del> \u00e0 notre audit UX, voici les points \u00e0 v\u00e9rifier\u00a0:<\/p>\n<ul>\n<li aria-level=\"1\">l\u2019image de marque renvoy\u00e9e par vos r\u00e9seaux sociaux est identique sur tous vos supports de communication (site web inclut)\u00a0;<\/li>\n<li aria-level=\"1\">les informations disponibles ailleurs sur le web correspondent \u00e0 celles pr\u00e9sentes sur vos plateformes\u00a0;<\/li>\n<li aria-level=\"1\">votre communication est coh\u00e9rente avec vos avis clients.<\/li>\n<\/ul>\n<p>Maintenant, revenons sur votre site internet.<\/p>\n<h3>5 &#8211; V\u00e9rifiez vos crit\u00e8res Core Web Vital<\/h3>\n<p>Lanc\u00e9s en 2021 par Google, les Core Web Vitals, ou Signaux Web Essentiels dans la langue de Moli\u00e8re, sont les indicateurs de la qualit\u00e9 de l\u2019UX propos\u00e9e par une plateforme selon Google.<\/p>\n<p>En testant l\u2019URL d\u2019une de vos pages web sur l\u2019<a href=\"https:\/\/pagespeed.web.dev\/?hl=fr\" target=\"_blank\" rel=\"noopener\">outil Google pagespeed Insights<\/a>, vous obtiendrez 3 m\u00e9triques\u00a0:<\/p>\n<ul>\n<li aria-level=\"1\">Largest Contentful Paint (LCP)\u00a0;<\/li>\n<li aria-level=\"1\">First Input Delay (FID)\u00a0;<\/li>\n<li aria-level=\"1\">Cumulative Layout Shift (CLS).<\/li>\n<\/ul>\n<p>A chaque m\u00e9trique, vous verrez une couleur associ\u00e9e\u00a0:<\/p>\n<ul>\n<li aria-level=\"1\">Vert = parfait\u00a0;<\/li>\n<li aria-level=\"1\">Orange = \u00e0 am\u00e9liorer\u00a0;<\/li>\n<li aria-level=\"1\">Rouge = convoquez votre d\u00e9veloppeur\/SEO tout de suite\u00a0!<\/li>\n<\/ul>\n<p>Il existe une m\u00e9thode ultra-simple pour am\u00e9liorer vos scores Page Experience\u00a0: <a href=\"https:\/\/poyesis.fr\/blogs\/creer-site-internet-minimaliste\/\" target=\"_blank\" rel=\"noopener\">cr\u00e9er un site web minimaliste<\/a>\u00a0\ud83d\ude0a<\/p>\n<p>Allez, voyons les plus en d\u00e9tails.<\/p>\n<h4><i>Le Largest Contentful Paint<\/i><\/h4>\n<p>Ce crit\u00e8re mesure la vitesse de chargement de vos pages. Pour obtenir une excellente note, l\u2019\u00e9l\u00e9ment le plus volumineux de votre page doit se charger en moins de 2.5 secondes.<\/p>\n<p>Le LCP est majoritairement impact\u00e9 par trois types d\u2019\u00e9l\u00e9ments\u00a0:<\/p>\n<ul>\n<li aria-level=\"1\">Une vid\u00e9o auto-h\u00e9berg\u00e9e sur vos serveurs\u00a0;<\/li>\n<li aria-level=\"1\">Une tr\u00e8s grande image\/infographie\u00a0;<\/li>\n<li aria-level=\"1\">Voire un paragraphe de texte vraiment tr\u00e8s grand.<\/li>\n<\/ul>\n<p>Si vous souhaitez am\u00e9liorer votre score LCP,<a href=\"https:\/\/www.hostinger.fr\/tutoriels\/largest-contentful-paint#:~:text=%C3%89liminez%20les%20JavaScript%20et%20CSS%20qui%20bloquent%20le%20rendu.,-Niveau%20de%20difficult%C3%A9&amp;text=Pour%20cette%20raison%2C%20l'%C3%A9limination,r%C3%A9duire%20le%20taux%20de%20rebond.\" target=\"_blank\" rel=\"noopener\"> jetez un \u0153il \u00e0 ce billet de Hostinger<\/a>.<\/p>\n<h4><i>Le First Input Delay<\/i><\/h4>\n<p>Pour Google, vous devez \u00eatre plus rapide que <del>votre ombre<\/del> vos internautes, point.<\/p>\n<p>Le FID mesure le temps de r\u00e9ponse de votre page suite \u00e0 une action de l\u2019utilisateur.<\/p>\n<p>Si votre site met 100 millisecondes ou moins \u00e0 r\u00e9agir, alors c\u2019est OK.<\/p>\n<p>Par contre, s\u2019il d\u00e9passe les 300 millisecondes, votre voyant FID sera rouge.<\/p>\n<p><a href=\"https:\/\/www.semjuice.com\/blog\/core-web-vitals-zoom-indicateur-fid-m81\" target=\"_blank\" rel=\"noopener\">Semjuice a r\u00e9dig\u00e9 un excellent billet sur comment am\u00e9liorer votre score FID<\/a>.<\/p>\n<h4><i>Le Cumulative Layout Shift Delay<\/i><\/h4>\n<p>De tous les indicateurs de l\u2019algorithme Page Experience, le CLS est le seul qui ne se mesure pas en temps.<\/p>\n<p>Et c\u2019est aussi celui qui vise le plus vos pop-ups, formulaires et autres publicit\u00e9s invasives g\u00e2chant l\u2019exp\u00e9rience utilisateur.<\/p>\n<p>Son objectif\u00a0: que votre page reste stable du d\u00e9but du chargement jusqu\u2019\u00e0 la fin.<\/p>\n<p>Pour le mesurer, Google s\u2019appuie sur une formule math\u00e9matique\u00a0:<\/p>\n<pre><i>Layout shift score = impact fraction * distance fraction<\/i><\/pre>\n<p>Si vous souhaitez en apprendre plus, <a href=\"https:\/\/www.fasterize.com\/fr\/core-web-vitals-cumulative-layout-shift\/\" target=\"_blank\" rel=\"noopener\">faites un tour sur cet article de fasterize.com<\/a>.<\/p>\n<h3>6 \u2013 V\u00e9rifiez que la navigation est fluide, intuitive et mobile-friendly<\/h3>\n<p>Sachant que la plupart des internautes sont des mobinautes, devinez quel est le meilleur moyen de pourrir leur exp\u00e9rience utilisateur\u00a0?<\/p>\n<p><strong>Avoir un site web non-responsive design.<\/strong><\/p>\n<figure id=\"attachment_876\" aria-describedby=\"caption-attachment-876\" style=\"width: 563px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-876\" src=\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2024\/03\/Graphic-design-non-responsive.jpg\" alt=\"Graphic design non responsive\" width=\"563\" height=\"402\" srcset=\"https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Graphic-design-non-responsive.jpg 563w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Graphic-design-non-responsive-300x214.jpg 300w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Graphic-design-non-responsive-120x86.jpg 120w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Graphic-design-non-responsive-350x250.jpg 350w\" sizes=\"(max-width: 563px) 100vw, 563px\" \/><figcaption id=\"caption-attachment-876\" class=\"wp-caption-text\">Graphic design non responsive (source : <a href=\"https:\/\/marketoonist.com\/2017\/02\/mobiledesign.html\" target=\"_blank\" rel=\"noopener\">marketoonist.com<\/a>)<\/figcaption><\/figure>\n<p>\u00c0 leurs yeux, un contenu qui ne s\u2019affiche pas correctement est une vraie incitation \u00e0 passer chez vos concurrents.<\/p>\n<p>L\u2019usabilit\u00e9 sur smartphone est diff\u00e9rente de celles sur PC. On n&rsquo;interagit pas de la m\u00eame mani\u00e8re sur desktop qu\u2019avec un smartphone. Et \u00e7a se ressent dans vos parcours UX.<\/p>\n<figure id=\"attachment_883\" aria-describedby=\"caption-attachment-883\" style=\"width: 563px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-883\" src=\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2024\/03\/Usabilite-mobile-source-denisaweb3-.jpg\" alt=\"Usabilit\u00e9 mobile (source denisaweb3 )\" width=\"563\" height=\"621\" srcset=\"https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Usabilite-mobile-source-denisaweb3-.jpg 563w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Usabilite-mobile-source-denisaweb3--272x300.jpg 272w\" sizes=\"(max-width: 563px) 100vw, 563px\" \/><figcaption id=\"caption-attachment-883\" class=\"wp-caption-text\">Usabilit\u00e9 mobile (source : <a href=\"https:\/\/linktr.ee\/denisaweb3\" target=\"_blank\" rel=\"noopener\">denisaweb3<\/a> )<\/figcaption><\/figure>\n<p>Si vous voulez vraiment \u00e9nerver vos consommateurs et faire couler vos ventes, vous pouvez faire pire\u00a0:<\/p>\n<ul>\n<li aria-level=\"1\">rendez votre site non-ergonomique\u00a0;<\/li>\n<li aria-level=\"1\">cr\u00e9ez des parcours de navigation totalement contre-intuitifs\u00a0;<\/li>\n<li aria-level=\"1\">n\u00e9gligez la mise en forme de vos contenus afin de les rendre d\u00e9sagr\u00e9ables \u00e0 lire.<\/li>\n<\/ul>\n<p>Vous l\u2019avez compris, \u00e0 cette \u00e9tape, vous devez v\u00e9rifier tous ces \u00e9l\u00e9ments.<\/p>\n<h3>7 &#8211; Examiner vos \u00e9l\u00e9ments graphiques et vos \u00e9l\u00e9ments de branding<\/h3>\n<p>Oui, l\u2019UX passe aussi par les \u00e9l\u00e9ments visuels de vos interfaces utilisateur.<\/p>\n<p>La typographie, les palettes de couleurs, le style graphique, le ton, les \u00e9motions g\u00e9n\u00e9r\u00e9es par vos ic\u00f4nes\u2026 tout y passe.<\/p>\n<p>Bon, commen\u00e7ons par la base\u00a0: faites plaisir aux yeux de vos lecteurs en respectant <a href=\"https:\/\/poyesis.fr\/blogs\/webdesign-10-commandements-dun-bon-design-par-dieter-ram\/\" target=\"_blank\" rel=\"noopener\">les 10 commandements d\u2019un bon design (selon la l\u00e9gende Dieter Ram).<\/a><\/p>\n<p>Ensuite, voici quelques \u00e9l\u00e9ments sur lesquels vous devez \u00eatre particuli\u00e8rement attentif\u00a0:<\/p>\n<ul>\n<li aria-level=\"1\">la coh\u00e9rence ;<\/li>\n<li aria-level=\"1\">l\u2019accessibilit\u00e9 de l\u2019information\u00a0;<\/li>\n<li aria-level=\"1\">l\u2019esth\u00e9tique de votre UI design.<\/li>\n<\/ul>\n<p>Voyons-les en profondeur tout de suite.<\/p>\n<h4><i>1 \u2013 La coh\u00e9rence<\/i><\/h4>\n<p>J\u2019ai une mauvaise nouvelle \u00e0 vous annoncer\u00a0: vous n\u2019\u00eates pas le seul sur votre march\u00e9.<\/p>\n<p>Ah, vous le saviez d\u00e9j\u00e0\u00a0?<\/p>\n<p>Par contre, avez-vous anticip\u00e9 que cela signifie que vos prospects s\u2019attendent \u00e0 ce que votre logiciel fonctionne d\u2019une certaine mani\u00e8re.<\/p>\n<p>Oui, je parle des standards.<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_879\" aria-describedby=\"caption-attachment-879\" style=\"width: 700px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-879\" src=\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2024\/03\/Interface-dAdobe-Photoshop.jpg\" alt=\"Interface d'Adobe Photoshop\" width=\"700\" height=\"437\" srcset=\"https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Interface-dAdobe-Photoshop.jpg 700w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Interface-dAdobe-Photoshop-300x187.jpg 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><figcaption id=\"caption-attachment-879\" class=\"wp-caption-text\">Interface d&rsquo;Adobe Photoshop<\/figcaption><\/figure>\n<figure id=\"attachment_880\" aria-describedby=\"caption-attachment-880\" style=\"width: 700px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-880\" src=\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2024\/03\/Interface-de-The-GIMP.jpg\" alt=\"Interface de The GIMP\" width=\"700\" height=\"437\" srcset=\"https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Interface-de-The-GIMP.jpg 700w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Interface-de-The-GIMP-300x187.jpg 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><figcaption id=\"caption-attachment-880\" class=\"wp-caption-text\">Interface de The GIMP<\/figcaption><\/figure>\n<p>Remarquez \u00e0 quel point les interfaces d&rsquo;Adobe Photoshop et celles de son concurrent The GIMP se ressemblent.<\/p>\n<p>Ainsi, un designer sait \u00e0 peu pr\u00e8s quel bouton donne acc\u00e8s \u00e0 quelle fonctionnalit\u00e9, peu importe l\u2019outil.<\/p>\n<p>En plus de respecter les standards graphiques et fonctionnels de votre industrie, vous devez aussi veiller \u00e0 la coh\u00e9rence entre vos pages.<\/p>\n<p>Coh\u00e9rence graphique (toutes vos pages doivent suivre la m\u00eame charte graphique et avoir les m\u00eames sch\u00e9mas de couleurs) et coh\u00e9rence fonctionnelle (les m\u00eames \u00e9l\u00e9ments de l\u2019UI doivent avoir les m\u00eames fonctions sur toutes vos interfaces).<\/p>\n<p>Garantir la coh\u00e9rence au sein de votre site web a deux avantages\u00a0:<\/p>\n<ul>\n<li aria-level=\"1\">faciliter la prise en main de votre logiciel par les nouveaux utilisateurs et ceux qui sont d\u00e9j\u00e0 habitu\u00e9s \u00e0 une solution concurrente\u00a0;<\/li>\n<li aria-level=\"1\">diminuer le risque que l\u2019utilisateur soit perdu ou frustr\u00e9.<\/li>\n<\/ul>\n<p>Si vous souhaitez apprendre comment garantir la coh\u00e9rence de vos \u00e9l\u00e9ments d\u2019UI UX design, <a href=\"https:\/\/academy.lotincorp.biz\/le-principe-de-coherence-et-standards-dans-le-design-dinterface-utilisateur\/\" target=\"_blank\" rel=\"noopener\">lisez cet article<\/a>.<\/p>\n<h4><i>2 \u2013 L\u2019accessibilit\u00e9 de l\u2019information<\/i><\/h4>\n<p>Comme dit plus haut, vos contenus doivent \u00eatre parfaitement lisibles, aussi bien sur PC, tablettes et smartphones.<\/p>\n<figure id=\"attachment_881\" aria-describedby=\"caption-attachment-881\" style=\"width: 385px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-881\" src=\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2024\/03\/Jaime-comment-votre-site-web-est-impossible-a-lire-sur-mon-smartphone.jpg\" alt=\"J'aime comment votre site web est impossible \u00e0 lire sur mon smartphone\" width=\"385\" height=\"385\" \/><figcaption id=\"caption-attachment-881\" class=\"wp-caption-text\">J&rsquo;aime comment votre site web est impossible \u00e0 lire sur mon smartphone<\/figcaption><\/figure>\n<p>Voici les points \u00e0 surveiller\u00a0:<\/p>\n<ul>\n<li aria-level=\"1\">La taille de la police\u00a0;<\/li>\n<li aria-level=\"1\">Le contraste entre la couleur des textes et leurs arri\u00e8re-plans\u00a0;<\/li>\n<li aria-level=\"1\">L\u2019espace entre les paragraphes\u00a0;<\/li>\n<li aria-level=\"1\">La position des informations importantes.<\/li>\n<\/ul>\n<h4><i>3 \u2013 Est-ce que votre site transmet visuellement l\u2019\u00e9motion que vous souhaitez\u00a0?<\/i><\/h4>\n<p>Votre image de marque et votre communication racontent une histoire \u00e0 laquelle vos consommateurs d\u00e9cident de croire.<\/p>\n<p>Mais pour qu\u2019ils y croient, il faut que tous les \u00e9l\u00e9ments forment un tout coh\u00e9rent.<\/p>\n<p>Ok, jusque-l\u00e0, c\u2019est th\u00e9orique et un peu philosophique.<\/p>\n<p>Alors, on va prendre un exemple concret.<\/p>\n<p>Imaginez un peu le site de votre banque classique aux couleurs joyeuses de McDonald&rsquo;s. Bizarre n\u2019est-ce pas\u00a0?<\/p>\n<p>Clairement, vos attentes (fiabilit\u00e9, expertise, confiance) ne matcheraient pas avec les \u00e9motions renvoy\u00e9es par McDo (joie, fun, venez comme vous \u00eates).<\/p>\n<p>Et qu\u2019est-ce que vous allez faire\u00a0? Vous irez voir ailleurs.<\/p>\n<p>C\u2019est exactement la m\u00eame chose avec vos prospects.<\/p>\n<p>Si les visuels de votre plateforme ne correspondent pas \u00e0 leurs attentes et \u00e0 l\u2019image qu\u2019ils ont de votre marque\u2026 vous connaissez la suite.<\/p>\n<h3>8 \u2013 Examinez l\u2019architecture de l\u2019information<\/h3>\n<figure id=\"attachment_875\" aria-describedby=\"caption-attachment-875\" style=\"width: 684px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-875\" src=\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2024\/03\/Good-UX-path-vs-Bad-UX-path.png\" alt=\"Good UX path vs Bad UX path\" width=\"684\" height=\"1022\" srcset=\"https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Good-UX-path-vs-Bad-UX-path.png 684w, https:\/\/poyesis.fr\/wp-content\/uploads\/2024\/03\/Good-UX-path-vs-Bad-UX-path-201x300.png 201w\" sizes=\"(max-width: 684px) 100vw, 684px\" \/><figcaption id=\"caption-attachment-875\" class=\"wp-caption-text\">Good UX path vs Bad UX path<\/figcaption><\/figure>\n<p>L\u2019architecture de l\u2019information repr\u00e9sente la mani\u00e8re avec laquelle votre contenu est agenc\u00e9.<\/p>\n<p>\u00c7a fait r\u00e9f\u00e9rence aussi bien au maillage interne entre vos diff\u00e9rentes pages, qu\u2019\u00e0 la mise en page de chaque interface.<\/p>\n<p>Ici, il n\u2019y a qu\u2019un seul mot d\u2019ordre\u00a0: v\u00e9rifier que les informations de votre site soient pr\u00e9sent\u00e9es de mani\u00e8re claire, logique et facilement compr\u00e9hensible.<\/p>\n<p>Et si vous voulez aller encore plus loin, appliquez les lois UX suivantes\u00a0:<\/p>\n<ul>\n<li aria-level=\"1\"><strong>La loi de Hick<\/strong>\u00a0: plus le nombre de choix augmente, plus le temps de d\u00e9cision de l\u2019utilisateur s\u2019allonge et au final il ne fait rien. En cons\u00e9quence, limitez toujours le nombre de choix par interface\u00a0;<\/li>\n<li aria-level=\"1\"><strong>La loi de Miller<\/strong>\u00a0: l\u2019\u00eatre humain ne peut pas garder en m\u00e9moire plus de 5 ou 7 \u00e9l\u00e9ments. Ainsi, mettez toujours les \u00e9l\u00e9ments importants au d\u00e9but et \u00e0 la fin de vos listes, jamais au milieu.<\/li>\n<\/ul>\n<p>Vous pouvez aller encore plus loin gr\u00e2ce \u00e0 ce petit <a href=\"https:\/\/poyesis.fr\/blogs\/lois-ux\/\" target=\"_blank\" rel=\"noopener\">guide sur les 32 lois essentielles de l\u2019UX design<\/a>.<\/p>\n<h3>9\u00a0\u2013 Optimisez votre SAV<\/h3>\n<p>Petit bonus pour la fin\u00a0: auditez aussi votre service apr\u00e8s-vente.<\/p>\n<p>En effet, une grande partie des \u00e9motions dont vos clients se souviendront viendra de leurs interactions avec votre SAV.<\/p>\n<p>Ainsi, lorsque vous auditez votre site, posez-vous les questions suivantes\u00a0:<\/p>\n<ul>\n<li aria-level=\"1\">Est-ce que la FAQ est bien visible\u00a0? Et mes CGV\u00a0? Mes mentions l\u00e9gales\u00a0?<\/li>\n<li aria-level=\"1\">Est-ce qu\u2019il y a des options de prises de contacts\u00a0? Sont-elles facilement accessibles\u00a0?<\/li>\n<\/ul>\n<h2>Pour aller plus loin\u00a0: analysez votre site selon les heuristiques<\/h2>\n<p>En appliquant la m\u00e9thode d\u00e9taill\u00e9e plus haut, vous obtiendrez un aper\u00e7u rapide de la bonne sant\u00e9 UX de votre site web.<\/p>\n<p>Apr\u00e8s quoi, vous pouvez souhaiter aller plus loin et obtenir des insights encore plus pertinents.<\/p>\n<p>Et c\u2019est l\u00e0 qu\u2019entrent en jeu les heuristiques d\u2019utilisabilit\u00e9.<\/p>\n<p>Les heuristiques sont des principes servants \u00e0 \u00e9valuer les interfaces utilisateur. Elles sont un peu les boussoles des UX designer.<\/p>\n<p>Voici les plus connues\u00a0:<\/p>\n<ul>\n<li aria-level=\"1\"><a href=\"https:\/\/www.nngroup.com\/articles\/ten-usability-heuristics\/\" target=\"_blank\" rel=\"noopener\">10 heuristiques de Jakob Nielsen<\/a> (le premier post date de 1994 et est toujours d\u2019actualit\u00e9)\u00a0;<\/li>\n<li aria-level=\"1\"><a href=\"https:\/\/bootcamp.uxdesign.cc\/ux-heuristics-a-closer-look-at-bastien-and-scapin-cd2d8a9001a4\" target=\"_blank\" rel=\"noopener\">8 heuristiques de Bastien et Scapin\u00a0<\/a>;<\/li>\n<li aria-level=\"1\"><a href=\"https:\/\/capian.co\/fr\/arhippainen-10-heuristiques-ux\" target=\"_blank\" rel=\"noopener\">10 heuristiques UX d\u2019Arhippainen<\/a>.<\/li>\n<\/ul>\n<p>Maintenant que vous \u00eates arm\u00e9 de toutes les connaissances n\u00e9cessaires pour auditer l\u2019UX de votre site web, vous n\u2019avez plus qu\u2019une chose \u00e0 faire\u00a0: passer \u00e0 l\u2019action.<\/p>\n<p>Et si vous souhaitez discuter de votre projet UX, <a href=\"https:\/\/poyesis.fr\/contactez-nous\/\">l\u2019oreille attentive de notre chef de projet informatique est l\u00e0 pour vous<\/a>\u00a0\ud83d\ude0a<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Est-ce que vous vous \u00eates d\u00e9j\u00e0 demand\u00e9 pourquoi IKEA vend de la glace \u00e0 la sortie de ces magasins\u00a0? \u2026 C\u2019est pour cr\u00e9er une exp\u00e9rience utilisateur inoubliable et introuvable chez un autre vendeur de meubles. Sauf que bon, vous n\u2019\u00eates pas IKEA, et le titre de l\u2019article, c&rsquo;est \u201ccomment faire l\u2019audit UX de son site [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":885,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jnews-multi-image_gallery":[],"jnews_single_post":{"format":"standard","override":[{"template":"7","single_blog_custom":"553","parallax":"1","fullscreen":"1","layout":"no-sidebar-narrow","sidebar":"default-sidebar","second_sidebar":"default-sidebar","sticky_sidebar":"1","share_position":"floatbottom","share_float_style":"share-normal","show_share_counter":"1","show_view_counter":"1","show_featured":"1","show_post_meta":"1","show_post_author":"1","show_post_author_image":"1","show_post_date":"1","post_date_format":"default","post_date_format_custom":"Y\/m\/d","show_post_category":"1","post_reading_time_wpm":"300","post_calculate_word_method":"str_word_count","show_zoom_button":"0","zoom_button_out_step":"2","zoom_button_in_step":"3","number_popup_post":"1","show_post_related":"1"}],"image_override":[{"single_post_thumbnail_size":"crop-500","single_post_gallery_size":"crop-500"}],"trending_post_position":"meta","trending_post_label":"Trending","sponsored_post_label":"Sponsored by","disable_ad":"0","subtitle":""},"jnews_primary_category":[],"jnews_override_bookmark_settings":{"override_bookmark_button":"0","override_show_bookmark_button":"0"},"jnews_override_counter":{"view_counter_number":"0","share_counter_number":"0","like_counter_number":"0","dislike_counter_number":"0"},"footnotes":""},"categories":[36],"tags":[219,174,220,178,179],"class_list":["post-871","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech","tag-audit","tag-experience-utilisateur","tag-site-web","tag-user-experience","tag-ux"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/posts\/871","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/comments?post=871"}],"version-history":[{"count":1,"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/posts\/871\/revisions"}],"predecessor-version":[{"id":1186,"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/posts\/871\/revisions\/1186"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/media\/885"}],"wp:attachment":[{"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/media?parent=871"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/categories?post=871"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/tags?post=871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}