{"id":13323,"date":"2017-11-06T14:44:56","date_gmt":"2017-11-06T13:44:56","guid":{"rendered":"https:\/\/academy.visiplus.com\/blog\/?p=13323"},"modified":"2019-10-28T10:08:38","modified_gmt":"2019-10-28T09:08:38","slug":"web-conversion-4-leviers-pour-ameliorer-lexperience-utilisateur","status":"publish","type":"post","link":"https:\/\/academy.visiplus.com\/blog\/articles-invites\/web-conversion-4-leviers-pour-ameliorer-lexperience-utilisateur-2017-11-06","title":{"rendered":"Web conversion : 4 leviers pour am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur"},"content":{"rendered":"<p>L&rsquo;exp\u00e9rience utilisateur (UX) est un \u00e9l\u00e9ment essentiel \u00e0 la conception d&rsquo;un site web performant. Elle vise \u00e0 structurer de mani\u00e8re aussi fluide que possible le parcours du client. Le but est de mettre en \u0153uvre les meilleures pratiques d&rsquo;optimisation de web conversion. 4 aspects sont concern\u00e9s : le design, l&rsquo;ergonomie, la vitesse et l&rsquo;adaptabilit\u00e9.<\/p>\n<h2>Levier 1 : \u00c9laborer un design efficace<\/h2>\n<p><strong>Adapter \u00e0 l&rsquo;\u0153il humain<\/strong><\/p>\n<p>Les \u00e9tudes d&rsquo;eye tracking mesurent le mouvement des yeux qui traduisent les processus cognitifs appel\u00e9s dans un contexte d&rsquo;une utilisation r\u00e9elle. Elles recueillent toutes les m\u00eames r\u00e9sultats aupr\u00e8s des utilisateurs occidentaux. La lecture commence en haut \u00e0 gauche. La loi de Gutenberg d\u00e9crit plus pr\u00e9cis\u00e9ment l&rsquo;habitude de lecture de gauche \u00e0 droite et de haut en bas. Pour ce qui est de la lecture rapide ou en mode \u00abscan\u00bb, la recherche visuelle d&rsquo;information dans une page s&rsquo;op\u00e8re suivant la forme d&rsquo;un F.<\/p>\n<p><strong>Pour susciter l&rsquo;\u00e9motion<\/strong><\/p>\n<p>Une bonne hi\u00e9rarchisation visuelle du contenu d\u00e9joue les \u00e9cueils du mode \u00abscan\u00bb. La qualit\u00e9 du contenu, pertinent et clair, am\u00e9liore la User experience et la conversion. L&rsquo;utilisation des titres, sous titres, chap\u00f4, paragraphes a\u00e9r\u00e9s, intertitres, citations, photos, infographies ou vid\u00e9os soutient l&rsquo;attention du visiteur et rythme la lecture. Les call to action peuvent se loger, plusieurs fois sous la ligne de flottaison.<\/p>\n<h2>Levier\u00a0 2 : Veiller \u00e0 l&rsquo;utilisabilit\u00e9 du site Web<\/h2>\n<p>Autrement dit, veillez \u00e0 offrir la meilleure ergonomie web possible pour garantir une utilisation fluide.<\/p>\n<ul>\n<li>Premiers tueurs de conversion, les pages d&rsquo;erreur 404 et autres bugs sont \u00e0 traquer. La Google Search Console fournit des premiers \u00e9l\u00e9ments de diagnostic. Apportez les corrections rapidement et surveillez les alertes. Profitez de cette page d&rsquo;Erreur 404 pour y mettre une touche d&rsquo;humour et offrir un champs de recherche. Le retour au site n&rsquo;en sera que facilit\u00e9!<\/li>\n<li>Le menu de navigation requiert clart\u00e9, pr\u00e9cision, efficacit\u00e9. Les zones chaudes lui sont r\u00e9serv\u00e9es. La s\u00e9mantique et choix des textes sont \u00e0 soigner et \u00e0 A\/B tester.<\/li>\n<li>Le champ de recherche est tenu d&rsquo;\u00eatre bien plac\u00e9, en haut \u00e0 gauche sous ou \u00e0 cot\u00e9 du logo. Les suggestions et filtres pertinents sont facilitateurs de conversion. \u00c9tudiez les cartes de chaleur. Elles permettent d&rsquo;identifier les filtres les plus utilis\u00e9s et de gard\u00e9s les meilleurs.<\/li>\n<li>Choisissez des cat\u00e9gories explicites et test\u00e9es. Une bonne cat\u00e9gorisation est primordiale pour une pr\u00e9sentation structur\u00e9e et claire de la page de r\u00e9sultats de recherche.<\/li>\n<li>Les formulaires sont principalement associ\u00e9s aux objectifs de conversion : d&rsquo;achat, de contact, de support, de demande d&rsquo;information, d&rsquo;inscription. Chaque champ doit \u00eatre soigneusement choisi et analys\u00e9.<\/li>\n<li>Privil\u00e9giez les champs indispensables ! Toute friction identifi\u00e9e a besoin d&rsquo;une optimisation ou d&rsquo;une solution corrective. Testez sur tous les navigateurs et appareils. Avec l&rsquo;outil Hotjar il est possible d&rsquo;identifier les h\u00e9sitations \u00e0 la milliseconde pr\u00e8s et les performances de chaque champ.<\/li>\n<li>CAPTCHA est utilis\u00e9 pour prot\u00e9ger votre site d&rsquo;envoi de formulaires automatiquement par un logiciel. Mais le visiteur peut lui aussi \u00eatre rebut\u00e9. Alors limitez en l&rsquo;usage et privil\u00e9gier le plus simple reCAPTCHA par Google.<\/li>\n<\/ul>\n<h2>Levier 3 : La vitesse du site<\/h2>\n<p>Pour l&rsquo;exp\u00e9rience utilisateur chaque seconde compte!<\/p>\n<p>Les internautes sont aujourd&rsquo;hui exigeants et \u00abmobiles\u00bb. En 2017, 47% des internautes s\u2019attendent \u00e0 un temps de chargement inf\u00e9rieur ou \u00e9gal \u00e0 2 secondes, 40% quittent un site apr\u00e8s un temps de chargement sup\u00e9rieur \u00e0 3 secondes1 et plus de 50% des internautes utilisent le search depuis leur mobile.<\/p>\n<p>Ces statistiques montrent l&rsquo;importance de monitorer efficacement la vitesse de chargement du site web. GT metrics, Dareboost et Page speed insights analysent les performances du site et livrent un rapport d\u00e9taill\u00e9 de statistiques sur le temps de chargement, les performances, les probl\u00e8mes identifi\u00e9s et des recommandations. Suivez les conseils, corrigez les erreurs&#8230; et devenez Google friendly !<\/p>\n<p>Ce qui importe c&rsquo;est la mise \u00e0 disposition du contenu, alors comment acc\u00e9l\u00e9rer un site ?<\/p>\n<ul>\n<li>Utiliser un h\u00e9bergeur rapide, un espace d\u00e9di\u00e9<\/li>\n<li>Utiliser le cache<\/li>\n<li>Utiliser des \u00ab Expires headers \u00bb pour tirer partie de la mise en cache navigateur<\/li>\n<li>Compresser les images et sp\u00e9cifier les dimensions des images dans le HTML (compressor.io)<\/li>\n<li>Compresser le code avec Gzip<\/li>\n<li>R\u00e9duire et nettoyer les redirections. (Tester au pr\u00e9alable avec redirection-web.net)<\/li>\n<li>Minifier le CSS et le JS. Il existe plusieurs outils pour minifier le CSS, JS et HTML2.<\/li>\n<li>Mettre le CSS en haut de page et JS en bas de page<\/li>\n<li>Utiliser les sprites CSS (spritecow.com)<\/li>\n<li>Minimiser les requ\u00eates HTTP<\/li>\n<\/ul>\n<h2>Levier 4 : L&rsquo;adaptabilit\u00e9 du site aux diff\u00e9rents navigateurs<\/h2>\n<p>Au del\u00e0 du choix strat\u00e9gique responsive ou adaptive, l&rsquo;optimisation du site pour les nombreux navigateurs desktop et mobile est une gageure. M\u00eame si la tendance est \u00e0 la normalisation avec le consortium W3C, l&rsquo;enjeu est de taille. Google Analytics fournit les rapports personnalis\u00e9s pour comparer les taux de rebond, taux de conversion marketing, temps pass\u00e9 sur la page. Il est important de v\u00e9rifier les probl\u00e8mes sur chaque navigateur web (r\u00e9solutions, OS, appareils). Le site <a href=\"https:\/\/www.caniuse.com\" target=\"_blank\" rel=\"noopener noreferrer\">www.caniuse.com<\/a> est une bonne ressource pour les d\u00e9veloppeurs. Ils peuvent comparer et choisir les meilleures fonctionnalit\u00e9s (CSS, HTML, JS,&#8230;) pour chaque navigateur.<\/p>\n<p>Auditez, identifiez, corrigez, testez, optimisez ! Pensez Conversion Rate Optimisation.<\/p>\n<p>Pour allez plus loin VISIPLUS academy propose une <a href=\"https:\/\/academy.visiplus.com\/formation-web-conversion.php\" target=\"_blank\" rel=\"noopener noreferrer\">formation Web conversion et exp\u00e9rience utilisateur<\/a><\/p>\n<div id=\"attachment_13324\" style=\"width: 586px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2017\/11\/scrabble-2129648_960_720.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-13324\" class=\" wp-image-13324 \" src=\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2017\/11\/scrabble-2129648_960_720.jpg\" alt=\"Source : cdn.pixabay.com\" width=\"576\" height=\"432\" srcset=\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2017\/11\/scrabble-2129648_960_720.jpg 960w, https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2017\/11\/scrabble-2129648_960_720-300x225.jpg 300w, https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2017\/11\/scrabble-2129648_960_720-610x457.jpg 610w\" sizes=\"auto, (max-width: 576px) 100vw, 576px\" \/><\/a><p id=\"caption-attachment-13324\" class=\"wp-caption-text\">Source : cdn.pixabay.com<\/p><\/div>\n<h6>1source: blog.kissmetrics.com\/loading-time<\/h6>\n<h6>2 www.thibautsoufflet.fr\/pourquoi-et-comment-minifier-vos-fichiers-css-html-et-javascript<\/h6>\n<h2>\u00c0 propos : Virginie ROLAND<\/h2>\n<p>Forte de 15 ans d&rsquo;exp\u00e9rience en communication chez l&rsquo;annonceur, Virginie s&rsquo;est sp\u00e9cialis\u00e9e dans le multim\u00e9dia. Aujourd&rsquo;hui elle est en charge du d\u00e9ploiement de la nouvelle strat\u00e9gie de communication digitale suite \u00e0 une fusion.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>L&rsquo;exp\u00e9rience utilisateur (UX) est un \u00e9l\u00e9ment essentiel \u00e0 la conception d&rsquo;un site web performant. Elle vise \u00e0 structurer de mani\u00e8re aussi fluide que possible le parcours du client. Le but est de mettre en \u0153uvre&#8230;<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[853],"tags":[],"class_list":["post-13323","post","type-post","status-publish","format-standard","hentry","category-articles-invites"],"_links":{"self":[{"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/posts\/13323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/comments?post=13323"}],"version-history":[{"count":2,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/posts\/13323\/revisions"}],"predecessor-version":[{"id":24057,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/posts\/13323\/revisions\/24057"}],"wp:attachment":[{"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/media?parent=13323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/categories?post=13323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/tags?post=13323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}