{"id":56790,"date":"2020-09-03T02:13:04","date_gmt":"2020-09-03T02:13:04","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/5-elements-de-conception-de-site-qui-affectent-le-comportement-des-utilisateurs\/"},"modified":"2020-09-03T02:13:04","modified_gmt":"2020-09-03T02:13:04","slug":"5-elements-de-conception-de-site-qui-affectent-le-comportement-des-utilisateurs","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/5-elements-de-conception-de-site-qui-affectent-le-comportement-des-utilisateurs\/","title":{"rendered":"5 \u00e9l\u00e9ments de conception de site qui affectent le comportement des utilisateurs"},"content":{"rendered":"<p>De temps en temps, vous pouvez juger un livre par sa couverture.  Et quand il s&#8217;agit de sites Web, vous pouvez les juger par leurs couvertures.<\/p>\n<p>L&#8217;esth\u00e9tique g\u00e9n\u00e9rale de votre site peut faire une \u00e9norme diff\u00e9rence dans l&#8217;exp\u00e9rience qui en r\u00e9sulte pour chaque utilisateur individuel.  Malgr\u00e9 le nombre d&#8217;appels \u00e0 l&#8217;action, de banni\u00e8res et de formulaires de contact que vous avez, les visiteurs prendront rarement la peine d&#8217;investir leur temps si ces facettes intelligemment con\u00e7ues ne semblent pas bonnes.<\/p>\n<p>Mais quels \u00e9l\u00e9ments de conception peuvent vraiment affecter la fa\u00e7on dont un utilisateur interagit avec un site Web et que peut-on faire pour am\u00e9liorer son exp\u00e9rience?  Regardons de plus pr\u00e8s.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Taille\"><\/span>Taille<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Oui, oui &#8230; la taille compte.  Un appel \u00e0 l&#8217;action dans une police de 10 points ne r\u00e9sonnera pas comme le m\u00eame verbiage dans une police de 100 points.  Voici la diff\u00e9rence:<\/p>\n<p>Affinez vos messages les plus importants et allumez ces ventouses pour que tout le monde puisse les voir.  Si vous devinez mon conseil, il existe de nombreuses recherches pour \u00e9tayer ce point fondamental.  Dans <a href=\"http:\/\/www.bcs.org\/upload\/pdf\/ewic_hc08_v2_paper4.pdf\" target=\"_blank\" rel=\"nofollow noopener\">une \u00e9tude eye-tracking<\/a> fabriqu\u00e9 par Google et IBM, <strong>les sujets passaient 34% plus de temps sur les grandes polices que sur les petites polices<\/strong>.<\/p>\n<p>En r\u00e8gle g\u00e9n\u00e9rale, votre meilleur pari sera de suivre un ordre hi\u00e9rarchique de dimensionnement textuel, c&#8217;est-\u00e0-dire de coller vos titres et appels \u00e0 l&#8217;action les plus lourds et les plus accessibles dans la plus grande police, et jusqu&#8217;\u00e0 une petite taille pour une lecture plus approfondie.<\/p>\n<p>Et la taille s&#8217;applique \u00e0 bien plus que votre verbiage.  Pensez \u00e0 ce que vous essayez d&#8217;accomplir sur une page donn\u00e9e et mettez \u00e0 l&#8217;\u00e9chelle vos formulaires, champs, images et navigation pour atteindre ces objectifs.  Une page destin\u00e9e \u00e0 attirer les visiteurs pour la premi\u00e8re fois devrait probablement appara\u00eetre \u00e0 c\u00f4t\u00e9 d&#8217;images volumineuses, convaincantes et accrocheuses et d&#8217;un texte substantiel (mais rare).  \u00c0 leur tour, au fur et \u00e0 mesure qu&#8217;ils se plongent dans la viande et les pommes de terre, ils auront la patience et l&#8217;int\u00e9r\u00eat qualifi\u00e9 pour se livrer \u00e0 de plus longues p\u00e9riodes de texte, d&#8217;images, etc.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Couleur\"><\/span>Couleur<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>En ce qui concerne la couleur, il est judicieux de s&#8217;en tenir \u00e0 une palette coh\u00e9rente.  Si vous avez un logo pr\u00e9existant, baser la palette de couleurs de votre site sur celui-ci perp\u00e9tuera l&#8217;aspect et la convivialit\u00e9 de votre marque.<\/p>\n<p>Concevoir avec une palette de couleurs sp\u00e9cifique \u00e0 l&#8217;esprit transmettra un attrait visuel et professionnel \u00e0 vos t\u00e9l\u00e9spectateurs.  Lorsque chaque page de votre site pr\u00e9sente une palette de couleurs similaire et des \u00e9l\u00e9ments de conception coh\u00e9rents, les visiteurs peuvent \u00eatre s\u00fbrs d&#8217;\u00eatre au bon endroit.<\/p>\n<p>Bien s\u00fbr, <a href=\"https:\/\/blog.kissmetrics.com\/color-psychology\/\" target=\"_blank\" rel=\"nofollow noopener\">diff\u00e9rentes couleurs peuvent avoir des effets psychologiques diff\u00e9rents<\/a> sur les t\u00e9l\u00e9spectateurs Tenez compte de la personnalit\u00e9 de votre marque et de la fa\u00e7on dont vous voulez que votre public cible r\u00e9agisse lors de sa visite;  Devraient-ils \u00eatre excit\u00e9s, doux, chaleureux, curieux, s\u00e9rieux ou dr\u00f4les?  Cr\u00e9ez un environnement qui refl\u00e8te vos meilleurs int\u00e9r\u00eats et attire leur attention.<\/p>\n<p>Gardez \u00e0 l&#8217;esprit <a href=\"http:\/\/www.sitepoint.com\/10-troublesome-colors-to-avoid-in-your-advertising\/\" target=\"_blank\" rel=\"nofollow noopener\">certaines combinaisons de couleurs sont dures pour les yeux<\/a>, et d&#8217;autres ont des connotations in\u00e9vitables.  Par exemple, \u00e9vitez le rouge avec du vert, le noir avec de l&#8217;orange et, pour l&#8217;amour de Dieu, le vert avec du jaune, \u00e0 moins que vous ne recherchiez un th\u00e8me festif expr\u00e8s.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conception\"><\/span>Conception<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>La fa\u00e7on dont vous organisez le contenu de votre site est tout aussi importante pour l&#8217;exp\u00e9rience utilisateur que le contenu lui-m\u00eame.<\/p>\n<p>O\u00f9 va votre navigation? <a href=\"http:\/\/www.nimbletank.com\/\" target=\"_blank\" rel=\"nofollow noopener\">la partie sup\u00e9rieure<\/a>, le c\u00f4t\u00e9, le bas, <a href=\"http:\/\/vernonclarke.com\/\" target=\"_blank\" rel=\"nofollow noopener\">le coin<\/a>, ou peut-\u00eatre <a href=\"http:\/\/www.lbvd.com\/\" target=\"_blank\" rel=\"nofollow noopener\">frapp\u00e9 en plein milieu<\/a>?  Un en-t\u00eate et \/ ou un pied de page coh\u00e9rent indiqueront-ils la navigation et fourniront-ils des informations de contact ou des annonces sp\u00e9ciales?  Est-il judicieux de vous \u00e9tablir d&#8217;une mani\u00e8re ou d&#8217;une autre en fonction de la finalit\u00e9 de votre site et du contenu que vous fournissez \u00e0 vos utilisateurs?<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-9966 size-full\" title=\"Conception\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/1585556414_417_5-elementos-de-diseno-del-sitio-que-afectan-el-comportamiento.jpg\" alt=\"Conception\" width=\"1200\" height=\"1120\"><\/p>\n<p>Une fois que vous avez jet\u00e9 les bases, il est temps de pr\u00e9senter le reste de votre contenu.  Voici quelques conseils g\u00e9n\u00e9raux \u00e0 garder \u00e0 l&#8217;esprit concernant la conception, quels que soient votre secteur d&#8217;activit\u00e9 et vos objectifs individuels:<\/p>\n<ul>\n<li>Cr\u00e9ez un attrait sur le pli pour attirer imm\u00e9diatement l&#8217;attention de vos visiteurs.  Quelle est l&#8217;information la plus convaincante qui captera et conservera de nouveaux yeux sur votre page?  Organisez-le \u00e0 l&#8217;avant-plan pour la meilleure exp\u00e9rience utilisateur.<\/li>\n<li>Int\u00e9grez des images pertinentes \u00e0 votre contenu textuel et utilisez ces images pour orienter les visiteurs dans la bonne direction.  Des photos, des illustrations, des vid\u00e9os, des animations et des graphiques statistiques enverront votre message efficacement et susciteront plus d&#8217;interaction.<\/li>\n<li>Donnez-vous de la place pour vous d\u00e9velopper.  Les sites se d\u00e9veloppent \u00e0 mesure que les gens et les entreprises se d\u00e9veloppent, alors concevez votre site de mani\u00e8re \u00e0 ne pas limiter vos options pour une telle expansion.<\/li>\n<\/ul>\n<p>Les deux cat\u00e9gories suivantes sont des \u00e9l\u00e9ments de conception importants, mais elles sont suffisamment larges pour se diviser \u00e9galement en leurs propres cat\u00e9gories.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Espacement\"><\/span>Espacement<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>En ce qui concerne l&#8217;exp\u00e9rience utilisateur, la derni\u00e8re chose \u00e0 laquelle vous pensez peut \u00eatre la fa\u00e7on dont votre contenu est espac\u00e9.  Certains se moqueraient de la simple mention de quelque chose d&#8217;aussi d\u00e9licat que l&#8217;espacement, mais cela peut faire ou d\u00e9faire votre exp\u00e9rience utilisateur dans certains cas.<\/p>\n<p>Demandez-vous simplement &#8230;<strong> Si mon \u00e9criture \u00e9tait si espac\u00e9e, auriez-vous pris la peine de lire ceci dans mon message?<\/strong><\/p>\n<p>Je ne le crois pas.<\/p>\n<p>Nous savons tous que <a href=\"http:\/\/www.burlingtonnews.net\/burlington_ufo_center.html\" target=\"_blank\" rel=\"nofollow noopener\">une page Web b\u00e2cl\u00e9e<\/a> Cela ressemble \u00e0 ceci: faites d\u00e9filer des banni\u00e8res du d\u00e9but des ann\u00e9es 2000 et des images clipart d\u00e9coup\u00e9es avec un texte apparemment \u00e9trange.  C&#8217;est ce type de conception d\u00e9fectueuse qui en dit long sur l&#8217;importance de l&#8217;espace, que ce soit entre les images, les paragraphes de texte ou m\u00eame le cr\u00e9nage entre les lettres individuelles.<\/p>\n<p>Laissez suffisamment de place pour que vos textes et vos images puissent respirer, offrant aux t\u00e9l\u00e9spectateurs une exp\u00e9rience organis\u00e9e et plus agr\u00e9able visuellement.  Assurez-vous d&#8217;utiliser l&#8217;habillage du texte le cas \u00e9ch\u00e9ant et v\u00e9rifiez si le contenu se chevauche si vous recherchez une mise en page personnalis\u00e9e.  Dans le m\u00eame temps, \u00e9vitez de cr\u00e9er des zones ouvertes d&#8217;espace n\u00e9gatif qui sugg\u00e8rent un contenu manquant.<\/p>\n<p>L&#8217;espacement syst\u00e9matiquement \u00e9chou\u00e9 n&#8217;est pas du tout n\u00e9glig\u00e9 pour vos visiteurs.  Et une fois qu&#8217;ils ont mis en doute la l\u00e9gitimit\u00e9 de votre site et \/ ou de votre entreprise, ils sont beaucoup plus susceptibles de passer leur temps pr\u00e9cieux ailleurs.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Couler\"><\/span>Couler<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Une page Web est d\u00e9finie par son contenu et se caract\u00e9rise par son flux.<\/p>\n<p>Nous sommes tellement habitu\u00e9s \u00e0 parcourir les m\u00eames conceptions de sites Web exactement de la m\u00eame mani\u00e8re.  Mais que se passe-t-il lorsque vous enfreignez la norme et offrez au citoyen num\u00e9rique d&#8217;aujourd&#8217;hui un moyen vraiment cr\u00e9atif de naviguer sur votre site?  La fa\u00e7on dont votre contenu circule a le potentiel de fournir \u00e0 vos utilisateurs une exp\u00e9rience m\u00e9morable et agr\u00e9able.<\/p>\n<p>Vont-ils d\u00e9filer de gauche \u00e0 droite ou de haut en bas?  Ou ils <a href=\"http:\/\/2011.beercamp.com\/\" target=\"_blank\" rel=\"nofollow noopener\">voyager dans<\/a> \u00e0 travers une exp\u00e9rience plus interactive qui s&#8217;\u00e9carte de la norme?<\/p>\n<p>Et qu&#8217;en est-il du flux du contenu lui-m\u00eame?  Il est assez facile de rassembler des informations au fur et \u00e0 mesure qu&#8217;ils viennent organiser une page de cette mani\u00e8re, mais la mani\u00e8re al\u00e9atoire n&#8217;est pas la meilleure.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-9969 size-full\" title=\"5 Ws de strat\u00e9gie de contenu\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/1585556414_142_5-elementos-de-diseno-del-sitio-que-afectan-el-comportamiento.jpg\" alt=\"5 Ws de strat\u00e9gie de contenu\" width=\"621\" height=\"422\"><\/p>\n<p>Transmettez votre message d&#8217;une mani\u00e8re qui a du sens.  \u00c9loignez-vous de vos id\u00e9es pr\u00e9con\u00e7ues sur l&#8217;apparence de votre site et entrez dans la conscience collective de votre public cible.  Pourquoi sont-ils venus sur votre site en premier lieu?  Quelles raisons pourraient-ils avoir pour visiter cette page en particulier?  Quel type d&#8217;informations voulez-vous voir en premier et comment voulez-vous les voir?<\/p>\n<p>R\u00e9pondez \u00e0 ces questions au cas par cas, et il y a de fortes chances que la diff\u00e9rence se traduise par une am\u00e9lioration du volume de trafic, des conversions et des interactions sociales.<\/p>\n<p>Est-ce que je manque des \u00e9l\u00e9ments de conception pertinents qui peuvent faire une diff\u00e9rence dans l&#8217;exp\u00e9rience utilisateur?  Faites-moi savoir dans les commentaires et mettez-les sur la carte.<\/p>\n<p class=\"single-tags\">Sujets de cet article: Exp\u00e9rience utilisateur de la mise en page couleur<\/p>\n  <div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 ez-toc-wrap-center counter-flat ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/blogging-techies.com\/fr\/5-elements-de-conception-de-site-qui-affectent-le-comportement-des-utilisateurs\/#Taille\" >Taille<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/blogging-techies.com\/fr\/5-elements-de-conception-de-site-qui-affectent-le-comportement-des-utilisateurs\/#Couleur\" >Couleur<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/blogging-techies.com\/fr\/5-elements-de-conception-de-site-qui-affectent-le-comportement-des-utilisateurs\/#Conception\" >Conception<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/blogging-techies.com\/fr\/5-elements-de-conception-de-site-qui-affectent-le-comportement-des-utilisateurs\/#Espacement\" >Espacement<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/blogging-techies.com\/fr\/5-elements-de-conception-de-site-qui-affectent-le-comportement-des-utilisateurs\/#Couler\" >Couler<\/a><\/li><\/ul><\/nav><\/div>\n ","protected":false},"excerpt":{"rendered":"<p>De temps en temps, vous pouvez juger un livre par sa couverture. Et quand il s&#8217;agit de sites Web, vous pouvez les juger par leurs couvertures. L&#8217;esth\u00e9tique g\u00e9n\u00e9rale de votre site peut faire une \u00e9norme diff\u00e9rence dans l&#8217;exp\u00e9rience qui en r\u00e9sulte pour chaque utilisateur individuel. Malgr\u00e9 le nombre d&#8217;appels \u00e0 l&#8217;action, de banni\u00e8res et de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":56791,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-56790","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogs"],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts\/56790","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/comments?post=56790"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts\/56790\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/media\/56791"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/media?parent=56790"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/categories?post=56790"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/tags?post=56790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}