Menu
Conception et refonte de site :
le Webdesign au service de l'expérience utilisateur, de la conversion et du numérique responsable
Essentiel dans le processus de création ou refonte de site web, sait-on seulement ce qu’est le webdesign ? Un peu plus subtil qu’une simple histoire d’esthétique. Entre UX design et UI design, quels enjeux pour quels objectifs ? Ou comment le webdesign place l’expérience utilisateur au coeur du processus ?
Aussie appelé design graphique, le webdesign est le processus qui permet de mettre en avant toutes les informations (visuels, textes et autres animations) de manière à y accéder le plus rapidement et de la façon la plus intuitive possible, pour une expérience utilisateur optimale.
De l’organisation de l’information à l’iconographie en passant par la structure ou la typo, le webdesign dépasse le simple habillage graphique. L’interface est une des finalités certes, mais avant d’y arriver on doit concevoir la façon de mettre en oeuvre cette présentation visuelle et fonctionnelle du futur site.
En d’autres termes, il regroupe aussi bien la conception design de l’expérience utilisateur (UX) que le design de l’interface (UI). C’est l’articulation de ces deux éléments fonctionnels et graphiques qui va contribuer à faire le style d’un site web, le rendre lisible et accessible par tous.
Attirer, retenir, convertir. Le webdesign, c’est du marketing. Censé provoquer des émotions, donner confiance et envie aux consommateurs d’en savoir plus sur votre activité, sur vos produits, et qui sait, si vous avez bien bossé, de passer à l’action.
Qui dit création de site internet avec pour objectif d’offrir une expérience optimale aux visiteurs, dit connaître son public cible.
Élément clé de la conception ou la refonte de site, l’UX Design (User eXperience Design) vise justement à provoquer des émotions. On parle ici d’ergonomie, d’iconographie, mais aussi du taux de satisfaction des visiteurs. Et pour mesurer le comportement des utilisateurs, plusieurs méthodes existent dont :
L’UX Designer devra répondre à ces critères déterminants tels que l’accessibilité, la visibilité, la simplicité, l’intuition, la crédibilité, la confiance. Tout ceci, en déclinant le storytelling de la marque, tel que l’a détaillé Peter Morville, un des pionniers de l’architecture informationnelle, dans son fameux nid d’abeille :
Si l’UX design fixe un cadre à l’UI Design, ce dernier se concentre essentiellement sur l’esthétique de l’interface et tout ce qui a trait au graphisme, à l’aspect et à l’agencement. Il permet de mettre en valeur et équilibrer les éléments graphiques et textuels en fonction des objectifs fixés.
Si l’UI fait partie de l’optimisation de l’expérience utilisateur (UX), les deux concepts restent indissociables.
L’UI Designer se coordonne avec les UX designers, les intégrateurs et les développeurs, pour concevoir une interface qui réponde aux besoins des utilisateurs en renvoyant une image positive de l’entreprise. Il construit notamment l’image de marque du client autour de deux axes :
Que cela soit l’UX ou l’UI design, ils sont évidemment essentiels pour des sites de e-commerce où le parcours client est primordial dans la conception de la plateforme et doit toujours être au service de la conversion.
Voici encore un nouvel acronyme à côte duquel on ne peut plus passer : le CRO (Conversion Rate Optimization), en français optimisation du taux de conversion.
Personne n’est dupe, il y a quand même des objectifs de rentabilité dans tout ça. Un site web esthétique, accessible et facilitant l’expérience utilisateur évidemment, mais n’oublions pas un des objectifs majeurs : le passage à l’action. L’objectif est de garder le plus longtemps possible le visiteur sur son site en évitant le taux de rebond et surtout en espérant la conversion : que ça soit l’inscription à une newsletter, l’achat d’un produit ou le téléchargement de livres blancs pour des sites informationnels.
On se souviendra du premier site de Cdiscount comme le pire exemple d’expérience utilisateur connu, conçu sur le principe d’un prospectus commercial (pourcentages à tout va, remises et coupons de réductions etc.). L’utilisateur perdu dans cette masse d’informations illisibles, sortait aussitôt du site.
Les concepteurs se sont finalement inspirés du site d’Amazon, en quittant le modèle du Print pour un design bien spécifique au web : une page d’accueil centrée utilisateur, rapide à charger, un méga menu ergonomique et tout ce qui était essentiel pour optimiser la venue et l’achat des visiteurs.
Le résultat est sans appel avec un taux de conversion largement démontré depuis, et une notoriété qui n’est plus à prouver.
On l’a vue avec l’exemple précédent, les visiteurs doivent être en mesure de naviguer facilement sur votre site web, trouver les informations dont ils ont besoin rapidement et interagir de manière intuitive. Pour créer un site web simple mais efficace, les webdesigners doivent s’attarder sur une structure de navigation claire, une mise en page épurée, des couleurs cohérentes et une typographie lisible.
Une évidence nous direz-vous ? Toutes les pages de votre site web doivent avoir une cohérence entre elles : en termes de couleurs, de typographie, de mises en page et de navigation. Le visiteur comprendra toujours où se trouvent les informations qu’il recherche en identifiant aussi toujours l’image de marque de l’annonceur.
Utilisez des polices de caractères lisibles et de taille suffisante pour permettre aux visiteurs de lire facilement le contenu de votre site web. S’assurer que les paragraphes soient assez espacés ou que les contrastes de couleurs sont suffisamment marqués pour offrir une lisibilité maximale pour tous. On y reviendra.
On ne construit pas naturellement un site vitrine comme un site e-commerce ou institutionnel. Les designs s’adaptent aux différents objectifs donc découleront la construction des pages et des fonctionnalités en fonction du besoins.
Si les contenus servent à optimiser le référencement naturel pour Google et autres moteurs de recherche, ils doivent avant tout transmettre de l’information à vos visiteurs. Le webdesign est là pour organiser ce contenu, leur hiérarchie et les principaux appels à l’action (CTA)
Les fonctionnalités à intégrer, sont précisées dans les « wireframes » : maquettes fonctionnelles sous forme de schémas qui délimitent des zones et composants que l’interface utilisateur doit contenir. Le « zoning » quant à lui identifiera les différentes sections schématisées par des blocs.
Enfin, si tout webdesign est pensé aujourd’hui « mobile first« , les maquettes sont aussi faites sur desktop ou tablettes. Chacune des pages détaillera les éléments du header et du footer mais aussi du menu et de l’emplacement des divers contenus.
Après avoir validé la maquette fonctionnelle, on passe au rendu final du site. Certaines pages clés sont sélectionnées pour l’illustrer.
Basé cette fois sur le « moodboard« , et sur la charte graphique de l’entreprise, on y définit des polices de caractères lisibles, une palette de couleurs, la présentation du menu et le type de navigation. On intègre au cours de cette phase, tous les éléments visuels comme le logo, les images ou les pictogrammes en y soignant l’esthétique.
La création de sites web implique, toujours, de suivre quelques règles de base, qui se sont imposées au fil de l’eau comme :
Les repères pour l’utilisateur final sont essentiels, avec les bons codes graphiques pour chaque type d’activité. Il ne doit jamais se perdre dans sa navigation et toujours identifier l’entreprise qu’il connaît et reconnaîtra.
Même si le graphisme doit naturellement être soigné, l’internaute ne navigue pas sur votre site à la recherche d’une oeuvre d’art. Il vient chercher la réponse à une questions, une solution à son problème ou le produit dont il a besoin. En ce sens, le contenant doit être au service du contenu. Les éléments graphistes doivent mettre en valeur les produits ou contenus informationnels pour répondre aux intentions de recherche de l’utilisateur final.
SEO un jour, SEO toujours ! On l’a vue dans notre article sur le référencement naturel, sans visibilité dans le moteur de recherche, le trafic du site reste faible, de même que le taux de conversion, et, par extension, le chiffre d’affaires.
Or, en matière de SEO, si l’esthétique importe peu face au contenu rédactionnel, l’utilisateur et les algorithmes des moteurs de recherche attachent tout de même une importance particulière à la rapidité de téléchargement des pages ou encore au poids des images qui font partie intégrante des exigences du SEO technique. Sans parler encore de la description des images, nous y reviendrons !
Dernier principe fondamental pour espérer une conversion, un site web efficace doit engager le prospect : achat de produit, souscription à un abonnement, demande de contact etc… L’internaute doit être incité à interagir. Des call-to-action (bouton d’appels à l’action) absents, mal placés ou peu lisibles vont réduire les taux de conversion.
Nous sommes tous, tant dans nos convictions personnelles que dans nos achats de plus en plus sensibles aux enjeux et objectifs de développement durable. Et ça vaut aussi pour le digital. Nous sommes de plus en plus sensibilisés et attentifs aux sites web éco-conçus qui doivent aussi répondre à l’exigence d’un web pour tous. On vous parle ici de l’accessibilité numérique et du green design au service de l’environnement et de la société.
Tous les secteurs cherchent à réduire leur empreinte carbone. Et le web ne fait pas exception comme nous l’avons vu dans notre article sur le numérique responsable. Pour limiter son empreinte, tout site web doit avoir une configuration minimale pour fonctionner, monopoliser le moins longtemps possible l’internaute comme les serveurs. L’ouvrage « Éco-conception – Les 115 bonnes pratiques » dégage 3 grands principes :
Quand on sait que l’intégration et le développement ont un impact considérable sur l’émission de CO2, on essaie d’appliquer certaines règles d’UX et d’UI qui favorisent le webdesign écologique. Une petite liste vite fait comme ça :
La conception écologique n’a pas qu’un impact sur la planète. Un webdesign éco-conçu va favoriser les dimensions sociétales comme :
Concrètement, ici, on soignera les contrastes et la taille des polices. On évitera certains effets de textes comme l’italique ou le sur lignage et on pensera aux applications de lecteur d’écran comme les alt des images ou les libellés des boutons.
L’éco-conception, est l’affaire de tout professionnel du web. Le tout est de prendre en compte ses principes dès la phase de conception et la création des sites, d’y allouer les ressources nécessaires et faire en sorte que les choix soient cohérents avec l’approche commerciale, le SEO et l’UX de l’annonceur.
Petit tips au passage, parce que l’action part toujours d’un constat : de plus en plus d’outils permettent aujourd’hui de mesurer les émissions carbone de votre site web. C’est le cas d’EcoIndex qui évalue la performance environnementale d’une URL, Escompter et tous les outils Green IT proposés par le collectif du même nom.
On ne peut parler de webdesign sans parler d’UCD ou design centré utilisateur. Approche de design itérative qui s’appuie sur la compréhension des besoins des visiteurs. Cette méthode consiste à impliquer activement les utilisateurs à chaque étape du processus de conception pour le développement de produits plus efficaces, efficients et rassurants.
Chaque itération de l’approche centrée utilisateur implique quatre grandes phases :
Les conceptions épurées et minimalistes continuent d’être populaires en 2023. Les sites web avec des mises en page claires et simples permettent aux utilisateurs de naviguer facilement et de se concentrer sur le contenu.
Les animations et les interactions, enfin, font partie intégrante de la conception des sites web modernes. On pourrait voir des animations plus complexes et plus intuitives qui ajoutent de la profondeur à l’expérience utilisateur. L’utilisation de la vidéo est de plus en plus populaire, participant à capter et maintenir l’attention des visiteurs plus longtemps que le texte et les images seules.
On voit également se développer le « motion typo » – ou typographie motion design – qui a pour objectif de mettre en scène directement les messages clés. Il permet de simplifier les concepts et de convaincre rapidement.
Le webdesign est bel et bien LA brique essentielle d’un projet de création de site réussi. Il permet, en délivrant des messages clairs, de soigner l’expérience utilisateur en lui offrant une interface limpide, sans négliger pour autant les éléments marketing qui vont favoriser les interactions, et optimiser le taux de conversion.
Rassurez-vous, il n’est pas toujours nécessaire de tout changer pour obtenir des résultats. L’amélioration du webdesign peut faire partie d’une refonte de site qu’elle soir graphique, ergonomique ou structurelle mais aussi d’un système d’amélioration continue.
Pour les entreprises souhaitant créer ou refondre un site internet, faire appel à une agence de communication digitale peut être la solution en ce qu’elles disposent de toutes les compétences et ressources essentielles.
Si vous avez besoin d’être accompagné dans la création ou la refonte de votre site internet, n’hésitez pas à contacter un Galopin, qui sera ravi de vous aider ! Nous avons à coeur de créer des sites internet esthétiques et optimale pour améliorer l’expérience utilisateur en ligne et rendre votre site le plus éco-responsable possible.
Éco-conception : les 115 bonnes pratiques
« Le Design émotionnel » par Aaron Walter
« Le Design émotionnel » par Donald A. Norman
« Information Architecture » par Peter Morville
Comme on dit : la vérité sort de la bouche des enfants, parlons en toute transparence de votre projet.
