Le webdesign au service de l'expérience utilisateur
Webdesign : définition, disciplines et objectifs
Qu'est-ce que le webdesign ?
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.
Webdesign : la complémentarité et de l'UI Design
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.
L'expérience utilisateur (UX Design)
Qui dit création de site internet avec pour objectif d’offrir une expérience optimale aux visiteurs, dit connaître son public cible.
- Quel est sont objectif principal ?
- Que recherche-t-il ?
- Comment répondre à ses attentes ?
- Quel serait son parcours idéal ?
É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 :
- Le Heat Map : une carte de chaleur de votre site qui montre où cliquent les utilisateurs
- Le Scroll Map : jusqu’où descendent les utilisateurs dans la page ?
- Le Mouse Tracking : où les utilisateurs déplacent-ils leur souris ?
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 :
L'IU Design ou Design d'Interface
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 :
- Le design émotionnel ou tout ce qui se ressent : vue, toucher, audition, ressenti…
- L’optimisation de l’interaction entre le visiteur et le site : fonctionnalités, qualité des contenus, parcours de navigation intuitif, architecture de l’information…
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.
Le webdesign pour l'optimisation du taux de conversion (CRO)
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.
Webdesign : les principes fondamentaux
La simplicité
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.
La cohérence
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.
La lisibilité
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.
Les étapes de la création d'un design pour le web
Webdesign : définir ses objectifs
WEBDESIGN : ORGANISER SON CONTENU
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).
Webdesign : le maquettage fonctionnel
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.
Maquettage d’une de nos créations
Le maquettage couleur
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.
Webdesign, quelques pré-requis
La maîtrise des conventions du design web
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 :
- Le logo en haut à gauche (éventuellement, au centre de chaque page)
- Un logo clivable pour renvoyer l’internaute sur la page d’accueil
- La matérialisation des ancres de texte par un changement de couleur ou surlignement au survol
- Un menu de navigation horizontal tout en haut de la page, ou verticalement à gauche, en mode « burger » (dépliable) pour le mobile etc.
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.
L'esthétique au service du contenu
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.
L'importance du SEO technique
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 !
L'impact des call-to-action (CTA)
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.
Focus sur le webdesign responsable
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é.
Le webdesign écologique, ou Green UX
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 :
- La simplicité (moins de fonctionnalités, moins de pages) un des enjeux de l’UX comme vu plus haut.
- La pertinence (minimiser le temps par action) : l’UX permet de fluidifier les parcours utilisateur
- La frugalité grâce à un code optimisé, des serveurs écologiques, des images légères…
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 :
- Des fonctionnalités essentielles uniquement
- Une architecture de l’information simple
- Des parcours utilisateur fluides
- Un design épuré
- Une approche « mobile first »
- Un UI adapté : polices standards, animations légères etc.
- Un hébergeur green
Le webdesign au service de l'accessibilité numérique
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 :
- L’équité sociale : plus un site sera simple d’utilisation, léger et épuré, plus il sera accessible sur tout type d’appareil, y compris les plus anciens. Mais aussi sur mobile pour toutes les personnes qui ne seraient pas équipées en ordinateur. De l’intérêt du webdesign responsive qui s’est imposé depuis plusieurs années.
- L’accès aux personnes en situation de handicap : toute personne sans exception doit pouvoir naviguer, interagir et contribuer à un site web, voici le principe même de l’accessibilité numérique. Pour ce faire, les développeurs ont aujourd’hui cette responsabilité sociale de produire un code propre et compatible avec des logiciels d’adaptation aux handicaps.
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.
Les tendances du webdesign
Le design centré utilisateur (User Centered Design)
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 :
- La compréhension du contexte
- L’analyse des besoins et exigences des utilisateurs
- La création d’un premier design
- L’analyse des comportements via l’A/B testing
Le minimalisme
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 intéractions
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.
Conclusion
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.
