{"id":876,"date":"2021-08-02T18:06:46","date_gmt":"2021-08-02T16:06:46","guid":{"rendered":"https:\/\/www.cherryfizz.fr\/blog\/?p=876"},"modified":"2021-08-02T18:17:42","modified_gmt":"2021-08-02T16:17:42","slug":"ameliorer-lexperience-de-vos-utilisateurs","status":"publish","type":"post","link":"https:\/\/www.cherryfizz.fr\/blog\/ameliorer-lexperience-de-vos-utilisateurs\/","title":{"rendered":"Am\u00e9liorez simplement l&rsquo;exp\u00e9rience de vos sites, applications et plateformes."},"content":{"rendered":"\n<p>C&rsquo;est en r\u00e9alisant des audits de sites, sites e-commerce, applications m\u00e9tiers, applications mobiles, que je me suis rendue compte qu&rsquo;il \u00e9tait possible de vous donner <strong>quelques conseils<\/strong> pour <strong>am\u00e9liorer l&rsquo;exp\u00e9rience de vos utilisateurs<\/strong> et vous permettant ainsi d&rsquo;\u00e9viter des erreurs simples lors de leur navigation.<\/p>\n\n\n\n<p>Lorsque nous faisons nos audits chez <a href=\"https:\/\/www.cherryfizz.fr\/\" target=\"_blank\" rel=\"noreferrer noopener\">Cherry Fizz<\/a> nous nous concentrons sur des \u00e9l\u00e9ments <strong>d&rsquo;utilisabilit\u00e9<\/strong>, <strong>d&rsquo;ergonomie<\/strong>, <strong>d&rsquo;architecture de l&rsquo;information<\/strong>, <strong>d&rsquo;accessibilit\u00e9<\/strong>, <strong>de graphisme<\/strong>, <strong>de mise en page<\/strong>,<strong> de r\u00e9dactionnel<\/strong>, de bonnes pratiques de type RGPD, e-commerce&#8230; <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">L&rsquo;utilisabilit\u00e9<\/h2>\n\n\n\n<p>Dans les ann\u00e9es 90, Jakob <a href=\"https:\/\/lagrandeourse.design\/blog\/lexique-ux\/criteres-de-nielsen\/\" target=\"_blank\" rel=\"noreferrer noopener\">Nielsen<\/a> cr\u00e9\u00e9 des <strong>crit\u00e8res heuristiques d&rsquo;utilisabilit\u00e9<\/strong> permettant une conception guid\u00e9e. On retrouve ces crit\u00e8res chez <a href=\"https:\/\/www.usabilis.com\/criteres-ergonomiques-bastien-et-scapin\/\">Bastien <\/a><a href=\"https:\/\/www.usabilis.com\/criteres-ergonomiques-bastien-et-scapin\/\" target=\"_blank\" rel=\"noreferrer noopener\">et Scapin<\/a>, r\u00e9dig\u00e9s un peu diff\u00e9remment.<\/p>\n\n\n\n<p>Pour n&rsquo;en citer que quelques uns :<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Visibilit\u00e9 de l&rsquo;\u00e9tat du syst\u00e8me, pr\u00e9vention des erreurs, contr\u00f4le du syst\u00e8me<\/h3>\n\n\n\n<p>La conception doit toujours<strong> tenir les utilisateurs inform\u00e9s<\/strong> de ce qu&rsquo;il se passe gr\u00e2ce \u00e0 un retour d&rsquo;information appropri\u00e9 dans un d\u00e9lai raisonnable. Concevoir en ce sens permet \u00e0 l&rsquo;utilisateur de se sentir en confiance et appr\u00e9hender simplement ses actions.<meta charset=\"utf-8\"><\/p>\n\n\n\n<p>Il est important de <strong>notifier dans les bons termes<\/strong> l&rsquo;utilisateur de son erreur ou de l&rsquo;action qu&rsquo;il ne peut pas r\u00e9aliser \u00e0 ce moment pr\u00e9cis. Toutefois, il est pr\u00e9f\u00e9rable de lui \u00e9viter de se retrouver dans ce cas de figure. Avant d&rsquo;engager votre utilisateurs dans des actions, pensez \u00e0 lui demander une confirmation (clic sur un bouton pour validation ou non, on trouve souvent le cas avant de supprimer un post par exemple).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"450\" src=\"https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/Capture-de\u0301cran-2021-08-02-a\u0300-17.21.19-1024x450.png\" alt=\"Exemple de demande de confirmation d'action - LinkedIn - am\u00e9liorer l'exp\u00e9rience de vos utilisateurs\" class=\"wp-image-898\" title=\"Exemple de demande de confirmation d'action - LinkedIn\" srcset=\"https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/Capture-de\u0301cran-2021-08-02-a\u0300-17.21.19-1024x450.png 1024w, https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/Capture-de\u0301cran-2021-08-02-a\u0300-17.21.19-300x132.png 300w, https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/Capture-de\u0301cran-2021-08-02-a\u0300-17.21.19-768x338.png 768w, https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/Capture-de\u0301cran-2021-08-02-a\u0300-17.21.19-600x264.png 600w, https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/Capture-de\u0301cran-2021-08-02-a\u0300-17.21.19.png 1169w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Exemple de demande de confirmation d&rsquo;action &#8211; LinkedIn<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Flexibilit\u00e9 et efficacit\u00e9 d&rsquo;utilisation<\/h3>\n\n\n\n<p>Le syst\u00e8me doit pouvoir permettre aux <strong>utilisateurs aguerris<\/strong> d&rsquo;utiliser des raccourcis comme aux <strong>utilisateurs novices<\/strong> de naviguer en mode d\u00e9couverte, ainsi personne n&rsquo;est p\u00e9nalis\u00e9 et chacun peut choisir son mode d&rsquo;utilisation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"tw-target-text\">Design esth\u00e9tique et minimaliste<\/h3>\n\n\n\n<p>Les interfaces ne doivent pas contenir d&rsquo;informations non pertinentes. Le graphisme de votre outil ne doit pas se faire au d\u00e9triment du contenu. La<strong> <a href=\"https:\/\/www.usabilis.com\/definition-theorie-de-gestalt\/\" target=\"_blank\" rel=\"noreferrer noopener\">th\u00e9orie de la Gestalt<\/a> <\/strong>peut vous \u00e0 am\u00e9liorer l&rsquo;exp\u00e9rience de vos utilisateurs.<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/loi-proximite\u0301-cherry-fizz.png\" alt=\"Loi de la proximit\u00e9 - am\u00e9liorer l'exp\u00e9rience de vos utilisateurs\" class=\"wp-image-896\" width=\"721\" height=\"538\" srcset=\"https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/loi-proximite\u0301-cherry-fizz.png 721w, https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/loi-proximite\u0301-cherry-fizz-300x224.png 300w, https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/loi-proximite\u0301-cherry-fizz-600x448.png 600w\" sizes=\"auto, (max-width: 721px) 100vw, 721px\" \/><figcaption><meta charset=\"utf-8\"> <a href=\"https:\/\/www.usabilis.com\/definition-theorie-de-gestalt\/\" target=\"_blank\" rel=\"noreferrer noopener\">th\u00e9orie de la Gestalt<\/a> &#8211; Loi de proximit\u00e9<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"619\" height=\"540\" src=\"https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/loi-similitude-cherry-fizz.png\" alt=\"Loi de la similitude - am\u00e9liorer l'exp\u00e9rience de vos utilisateurs\" class=\"wp-image-897\" srcset=\"https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/loi-similitude-cherry-fizz.png 619w, https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/loi-similitude-cherry-fizz-300x262.png 300w, https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/loi-similitude-cherry-fizz-600x523.png 600w\" sizes=\"auto, (max-width: 619px) 100vw, 619px\" \/><figcaption><meta charset=\"utf-8\"> <a href=\"https:\/\/www.usabilis.com\/definition-theorie-de-gestalt\/\" target=\"_blank\" rel=\"noreferrer noopener\">th\u00e9orie de la Gestalt<\/a> &#8211; Loi de similitude<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">l&rsquo;Ergonomie<\/h2>\n\n\n\n<p>La <a href=\"https:\/\/www.iso.org\/fr\/standard\/77520.html\" target=\"_blank\" rel=\"noreferrer noopener\">norme ISO 9241-210:2019<\/a> d\u00e9finit cinq <strong>crit\u00e8res d&rsquo;application<\/strong> et de mise en \u0153uvre de la d\u00e9marche&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>La prise en compte <strong>en amont des utilisateurs<\/strong>, de leurs t\u00e2ches et de leur environnement<\/li><li>La <strong>participation active des utilisateurs<\/strong>, garantissant la fid\u00e9lit\u00e9 des besoins et des exigences li\u00e9es \u00e0 leurs t\u00e2ches<\/li><li>La <strong>r\u00e9partition appropri\u00e9e des fonctions<\/strong> entre les utilisateurs et la technologie<\/li><li>L&rsquo;<strong>it\u00e9ration des solutions de conception<\/strong>, jusqu&rsquo;\u00e0 satisfaction des besoins et des exigences exprim\u00e9s par les utilisateurs<\/li><li><strong>L&rsquo;intervention d&rsquo;une \u00e9quipe de conception <\/strong>multidisciplinaire, visant une&nbsp;<a href=\"https:\/\/fr.wikipedia.org\/wiki\/Exp%C3%A9rience_utilisateur\" target=\"_blank\" rel=\"noreferrer noopener\">exp\u00e9rience utilisateur<\/a>&nbsp;optimale<\/li><\/ul>\n\n\n\n<p><sup>(Source Wikip\u00e9dia)<\/sup><\/p>\n\n\n\n<p>Pour vous guider : <\/p>\n\n\n\n<p>Il est important de garder \u00e0 l&rsquo;id\u00e9e que tous les utilisateurs n&rsquo;ont pas la <strong>m\u00eame connaissance des outils<\/strong>, les <strong>m\u00eames capacit\u00e9s physiques et cognitives<\/strong>, qu&rsquo;ils n&rsquo;utilisent pas les outils <strong>dans les m\u00eames conditions<\/strong>. M\u00eame l&rsquo;acc\u00e8s aux outils et moyens de connexion peut faire d\u00e9faut.<\/p>\n\n\n\n<p>Selon l&rsquo;\u00e2ge ou la culture on peut ne pas \u00eatre \u00e0 l&rsquo;aise avec son mobile. On peut devoir utiliser son mobile en situation de handicap comme on peut tout simplement \u00eatre dans une zone blanche (sans Internet), <strong>il existe presque autant de situations que de gens<\/strong>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Mais \u00e9videmment, s&rsquo;il n&rsquo;est pas possible de concevoir de mani\u00e8re individuelle, il faut garder \u00e0 l&rsquo;esprit qu&rsquo;il existe des situations diff\u00e9rentes et <strong>concevoir de mani\u00e8re plus inclusive<\/strong> afin de r\u00e9duire les \u00e9carts.<\/p><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">La l\u00e9gislation et la s\u00e9curit\u00e9<\/h2>\n\n\n\n<p>Dans tous les syst\u00e8mes, il est n\u00e9cessaire de donner acc\u00e8s aux informations claires de r\u00e8glementation et de s\u00e9curit\u00e9 pour <strong>assurer une navigation fiable \u00e0 vos utilisateurs<\/strong>.<\/p>\n\n\n\n<p>Que se soit pour : <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>La s\u00e9curit\u00e9 du paiement en ligne<\/li><li>Vos mentions l\u00e9gales et CGV<\/li><li>Le RGPD<\/li><li>Les cookies<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Le r\u00e9dactionnel &#8211; Wording<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Parlez la m\u00eame langue que vos utilisateurs !<\/h3>\n\n\n\n<p>Que vous vendiez \/ proposiez un service complexe ou un produit grand public, il est n\u00e9cessaire de parler la langue de vos utilisateurs. Je ne parle \u00e9videmment pas du fran\u00e7ais, mais de <strong>l&rsquo;utilisation de termes accessibles \/ compr\u00e9hensibles. <\/strong><\/p>\n\n\n\n<p>On trouve un bon exemple avec les contrats d&rsquo;assurance qui utilisent des termes complexes et non transparents.<\/p>\n\n\n\n<p>Un autre exemple parlant est la fameuse d\u00e9claration d&rsquo;imp\u00f4t qui a elle seule b\u00e9n\u00e9ficie d&rsquo;un mode d&#8217;emploi \u00e0 faire p\u00e2lir la plupart des boites de m\u00e9dicaments ! Et comme on ne d\u00e9clare qu&rsquo;une fois par an, on oublie r\u00e9guli\u00e8rement comme on a proc\u00e9d\u00e9 l&rsquo;ann\u00e9e pr\u00e9c\u00e9dente. Typiquement, le r\u00e9dactionnel et le remplissage en ligne ne sont pas <strong>conformes aux mod\u00e8les mentaux des utilisateurs <\/strong>(<a href=\"https:\/\/medium.com\/meetech\/comprendre-ses-utilisateurs-par-leurs-mod%C3%A8les-mentaux-1da4359cb326\" target=\"_blank\" rel=\"noreferrer noopener\">lire un article<\/a> sur les mod\u00e8les mentaux) et ceux-ci devront se replonger dedans chaque ann\u00e9e afin de ne pas faire d&rsquo;erreur.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/Capture-de\u0301cran-2021-08-02-a\u0300-15.31.10.png\" alt=\"Exemple de termes d'assurance -am\u00e9liorer l'exp\u00e9rience de vos utilisateu\" class=\"wp-image-877\" width=\"780\" height=\"284\" srcset=\"https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/Capture-de\u0301cran-2021-08-02-a\u0300-15.31.10.png 936w, https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/Capture-de\u0301cran-2021-08-02-a\u0300-15.31.10-300x109.png 300w, https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/Capture-de\u0301cran-2021-08-02-a\u0300-15.31.10-768x280.png 768w, https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/Capture-de\u0301cran-2021-08-02-a\u0300-15.31.10-600x219.png 600w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" \/><figcaption>Un exemple plut\u00f4t simple du site Empruntis<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Guidez l&rsquo;utilisateur avec des phrases et des termes simples et visibles<\/h3>\n\n\n\n<p>Les actions possibles de vos utilisateurs doivent \u00eatre \u00e9videntes par la navigation, via le design de l&rsquo;interface, les appels \u00e0 l&rsquo;action (CTA), et le wording. Si en plus vous arrivez \u00e0 lui proposer des alternatives alors c&rsquo;est parfait ! Comme ici sur le site de Weedoogift.<\/p>\n\n\n\n<p>Si pour les appels \u00e0 l&rsquo;action il est pr\u00e9f\u00e9rable de faire court, mais pas d\u00e9nu\u00e9 de personnalisation, autant pour le reste des textes, vous pouvez vous permettre d&rsquo;\u00e9changer plus humainement avec vos utilisateurs.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"454\" src=\"https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/Capture-de\u0301cran-2021-08-02-a\u0300-15.35.04-1024x454.png\" alt=\"Conception d'exp\u00e9rience\" class=\"wp-image-878\" srcset=\"https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/Capture-de\u0301cran-2021-08-02-a\u0300-15.35.04-1024x454.png 1024w, https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/Capture-de\u0301cran-2021-08-02-a\u0300-15.35.04-300x133.png 300w, https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/Capture-de\u0301cran-2021-08-02-a\u0300-15.35.04-768x340.png 768w, https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/Capture-de\u0301cran-2021-08-02-a\u0300-15.35.04-600x266.png 600w, https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/Capture-de\u0301cran-2021-08-02-a\u0300-15.35.04.png 1040w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Capture d&rsquo;\u00e9cran du site Weedoogift<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">La hi\u00e9rarchie de vos \u00e9l\u00e9ments et informations<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">L&rsquo;arborescence<\/h3>\n\n\n\n<p>Le contenu de votre site doit \u00eatre<strong> clairement cartographi\u00e9<\/strong> avant de le proposer \u00e0 l&rsquo;utilisateur si vous voulez qu&rsquo;il puisse comprendre le fonctionnement de votre site ainsi que son contenu. C&rsquo;est pour cela qu&rsquo;il est n\u00e9cessaire de savoir ce que vous souhaitez faire dans votre site ou app avant de le concevoir. Le designer saura vous accompagner sur la mise en forme du contenant, permettant ainsi de le remplir avec un contenu clair et pertinent et am\u00e9liorer l&rsquo;exp\u00e9rience de vos utilisateurs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">La mise en forme de votre texte<\/h3>\n\n\n\n<p>La mise en forme d&rsquo;une page web, d&rsquo;une application en ligne ou mobile est bien plus complexe qu&rsquo;il n&rsquo;y parait, mais avec quelques bases vous devriez pouvoir vous en sortir. Voici quelques \u00e9l\u00e9ments pour vous aider.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Utilisez diff\u00e9rentes tailles de textes<\/strong> pour diff\u00e9rentes fonctions : vous devez clairement diff\u00e9rencier un titre, d&rsquo;un sous-titre, d&rsquo;une citation, de votre texte courant. <\/li><li><strong>Utilisez diff\u00e9rentes graisses<\/strong> afin de rythmer la lecture de vos textes<\/li><li><strong>Ne changez pas de typographie<\/strong> inutilement et privil\u00e9giez du sans serif (sans empattement) pour rester lisible sur les dispositifs num\u00e9riques.<\/li><li><strong>R\u00e9digez des paragraphes courts<\/strong>, des phrases courtes pour ne pas perdre le lecteur.<\/li><li><strong>Rythmez la lecture par des contenus diff\u00e9renciants<\/strong> si n\u00e9cessaires, vid\u00e9os, images, illustrations, photos&#8230;<\/li><li><strong>Respectez des espaces<\/strong>, du vide, du blanc ! Laissez vos textes s&rsquo;a\u00e9rer. Par contre \u00e9vitez les grands espaces vides entre vos diff\u00e9rents \u00e9l\u00e9ments de contenus, je constate souvent cela quand un client monte son site seul, cela renvoie assez rapidement une image b\u00e2cl\u00e9e et peu professionnelle.<\/li><li><strong>Travaillez l&rsquo;interlignage de votre texte<\/strong> : n&rsquo;h\u00e9sitez pas \u00e0 espacer en hauteur.<\/li><li><strong>Gardez toujours un contraste \u00e9vident<\/strong> afin de faciliter la lecture du plus grand nombre et surtout \u00e9viter de p\u00e9naliser les utilisateurs avec des d\u00e9ficiences visuelles.<\/li><li><strong>Pensez \u00e0 respecter<\/strong> l&rsquo;esth\u00e9tique d&rsquo;un <a href=\"https:\/\/fr.wikipedia.org\/wiki\/Hyperlien\" target=\"_blank\" rel=\"noreferrer noopener\">lien hypertexte<\/a> : changement de couleur et soulignement.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"687\" height=\"770\" src=\"https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/mauvaise-mise-en-page-cherry-fizz.png\" alt=\"Mauvaise mise en page web - am\u00e9liorer l'exp\u00e9rience de vos utilisateurs\" class=\"wp-image-894\" title=\"Mauvaise mise en page web\" srcset=\"https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/mauvaise-mise-en-page-cherry-fizz.png 687w, https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/mauvaise-mise-en-page-cherry-fizz-268x300.png 268w, https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/mauvaise-mise-en-page-cherry-fizz-600x672.png 600w\" sizes=\"auto, (max-width: 687px) 100vw, 687px\" \/><figcaption>Exemple de mauvaise mise en page<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"679\" height=\"535\" src=\"https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/bonne-mise-en-page-cherry-fizz.png\" alt=\"Bonne mise en page Web - am\u00e9liorer l'exp\u00e9rience de vos utilisateurs\" class=\"wp-image-895\" title=\"Bonne mise en page Web\" srcset=\"https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/bonne-mise-en-page-cherry-fizz.png 679w, https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/bonne-mise-en-page-cherry-fizz-300x236.png 300w, https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/bonne-mise-en-page-cherry-fizz-600x473.png 600w\" sizes=\"auto, (max-width: 679px) 100vw, 679px\" \/><figcaption>Exemple de mise en page coh\u00e9rente<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Votre strat\u00e9gie<\/h3>\n\n\n\n<p>Elle va jouer sur le positionnement des \u00e9l\u00e9ments de votre site. Selon <strong>vos objectifs de conversion<\/strong>, les \u00e9l\u00e9ments pourront \u00eatre positionn\u00e9s diff\u00e9remment. Dans ce cas pr\u00e9cis, le designer sera le mieux plac\u00e9 pour vous accompagner dans cette partie qui est tout de m\u00eame technique.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">L&rsquo;accessibilit\u00e9<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Des situations h\u00e9t\u00e9rog\u00e8nes<\/h3>\n\n\n\n<p>Il est important de ne pas oublier que tout le monde n&rsquo;est pas log\u00e9 \u00e0 la m\u00eame enseigne avec les outils num\u00e9riques. Il existe <strong>des handicaps visibles, d&rsquo;autres non visibles, des communaut\u00e9s \u00e0 ne pas exclure, des personnes non initi\u00e9es, des personnes qui n&rsquo;ont pas internet, qui n&rsquo;ont pas les codes<\/strong>. Je vous propose d&rsquo;aller lire <a href=\"https:\/\/www.cherryfizz.fr\/blog\/quest-ce-que-lillectronisme-et-pourquoi-les-commanditaires-et-designers-de-services-numeriques-doivent-sen-soucier\/\" target=\"_blank\" rel=\"noreferrer noopener\">mon article ici<\/a> sur l&rsquo;<strong>illectronisme<\/strong>. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Temps de chargement et balises HTML<\/h3>\n\n\n\n<p>J&rsquo;ajouterais quelques \u00e9l\u00e9ments \u00e0 ne pas n\u00e9gliger :<strong> L&rsquo;optimisation des images de votre site<\/strong>, n&rsquo;oubliez pas le <strong>temps de chargement <\/strong>(Google p\u00e9nalise les sites trop longs \u00e0 charger). Pensez aussi \u00e0 remplir <strong>vos balises<\/strong> correctement afin de faciliter l&rsquo;accessibilit\u00e9, am\u00e9liorer l&rsquo;exp\u00e9rience de vos utilisateurs et au passage votre SEO (<a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Learn\/Accessibility\/HTML\" target=\"_blank\" rel=\"noreferrer noopener\">cet article de Mozilla est clair<\/a>).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Le graphisme ou l&rsquo;UI (User Interface)<\/h2>\n\n\n\n<p>Afin de mettre en avant vos produits et services, tous les \u00e9l\u00e9ments pr\u00e9c\u00e9demment mentionn\u00e9s sont port\u00e9s par le design de votre interface.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Limitez vos choix de couleurs<\/strong> pour garder une coh\u00e9rence et \u00e9viter de perdre les utilisateurs, par exemple si vos boutons ont une couleur unique, les utilisateurs les identifieront rapidement.<\/li><li>Eviter le texte sur fond de couleur ou alors <strong>v\u00e9rifiez que le contraste est valide<\/strong> (avec <a href=\"https:\/\/polypane.app\/color-contrast\/#fg=%23107db5&amp;bg=%23fff&amp;level=aa&amp;format=rgb\" target=\"_blank\" rel=\"noreferrer noopener\">cet outil<\/a> par exemple), il est important de privil\u00e9gier la lisibilit\u00e9 en toute circonstance.<\/li><li><strong>Unifiez les formes<\/strong> que vous utilisez : Coins carr\u00e9s ou coins arrondis, mais pas les deux.<\/li><li><strong>Conservez des espaces entre vos visuels. <\/strong><\/li><li><strong>Pr\u00e9parez-vous des guidelines<\/strong> (r\u00e8gles d&rsquo;utilisation de votre charge) afin de pouvoir la respecter dans toutes les pages de votre site ou application.<\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Nous esp\u00e9rons que cela pourra vous aider \u00e0 concevoir des outils plus conviviaux, plus accessibles et si vous avez besoin d&rsquo;aide nous sommes l\u00e0 chez <a href=\"https:\/\/cherryfizz.fr\" target=\"_blank\" rel=\"noreferrer noopener\">Cherry Fizz<\/a> pour vous accompagner \u00e0 am\u00e9liorer l&rsquo;exp\u00e9rience de vos utilisateurs &#x1f680;<\/p><\/blockquote>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/thecherryfizz.notion.site\/Cherry-Fizz-vous-accompagne-53c3fe15bcc94af9bb4429fb41e29b95\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"357\" height=\"385\" src=\"https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/Capture-de\u0301cran-2021-08-02-a\u0300-16.54.35.png\" alt=\"am\u00e9liorez l'exp\u00e9rience de vos utilisateurs avec Cherry Fizz\" class=\"wp-image-890\" srcset=\"https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/Capture-de\u0301cran-2021-08-02-a\u0300-16.54.35.png 357w, https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/Capture-de\u0301cran-2021-08-02-a\u0300-16.54.35-278x300.png 278w\" sizes=\"auto, (max-width: 357px) 100vw, 357px\" \/><\/a><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>C&rsquo;est en r\u00e9alisant des audits de sites, sites e-commerce, applications m\u00e9tiers, applications mobiles, que je me suis rendue compte qu&rsquo;il \u00e9tait possible de vous donner quelques conseils pour am\u00e9liorer l&rsquo;exp\u00e9rience de vos utilisateurs et vous permettant ainsi d&rsquo;\u00e9viter des erreurs simples lors de leur navigation. Lorsque nous faisons nos audits<\/p>\n","protected":false},"author":1,"featured_media":889,"comment_status":"closed","ping_status":"closed","sticky":true,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[12,15],"tags":[134,132,124,131,118,133],"class_list":["post-876","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-ux","category-web","tag-audit","tag-design-web","tag-ergonomie","tag-ui","tag-ux","tag-webdesign"],"views":4984,"jetpack_featured_media_url":"https:\/\/www.cherryfizz.fr\/blog\/wp-content\/uploads\/2021\/08\/Capture-de\u0301cran-2021-08-02-a\u0300-16.49.20.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.cherryfizz.fr\/blog\/wp-json\/wp\/v2\/posts\/876","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cherryfizz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cherryfizz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cherryfizz.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cherryfizz.fr\/blog\/wp-json\/wp\/v2\/comments?post=876"}],"version-history":[{"count":6,"href":"https:\/\/www.cherryfizz.fr\/blog\/wp-json\/wp\/v2\/posts\/876\/revisions"}],"predecessor-version":[{"id":901,"href":"https:\/\/www.cherryfizz.fr\/blog\/wp-json\/wp\/v2\/posts\/876\/revisions\/901"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cherryfizz.fr\/blog\/wp-json\/wp\/v2\/media\/889"}],"wp:attachment":[{"href":"https:\/\/www.cherryfizz.fr\/blog\/wp-json\/wp\/v2\/media?parent=876"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cherryfizz.fr\/blog\/wp-json\/wp\/v2\/categories?post=876"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cherryfizz.fr\/blog\/wp-json\/wp\/v2\/tags?post=876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}