Un webdesign engageant en 10 points.

Article partenaire : Soon Digital

Définir le parcours de l’utilisateur pour un webdesign ad hoc

Le webdesign doit être pensé et conçu selon un parcours utilisateur spécifique. La première étape de conception de votre site web consiste à définir et à cartographier la façon dont votre client va naviguer sur votre site web jusqu’au passage à l’action (inscription newsletter, prise de RDV, achat en ligne, …). Mettez-vous à la place de votre prospect et imaginez son itinéraire, en le simplifiant au maximum, notamment s’il s’agit d’un e-commerce, avec ses catégories, ses fiches produits et son tunnel de vente. Vous pouvez jouer avec des posts-its ou utiliser des solutions gratuites en ligne comme GLOOMAPS, pour construire un parcours clair et fluide et décliner un webdesign ad hoc.

Passer au numérique

Création de site internet, e-mail professionnel… Découvrez les offres recommandées par les experts du .fr répondant à l’ensemble des critères requis pour une présence en ligne indépendante et maîtrisée

Suivez le guide

Un menu de navigation accessible et hiérarchisé

Un parcours utilisateur bien pensé vous permet de faire émerger les pages majeures au regard de votre activité : prestations, produits, contact/devis/prise de RDV, le panier… Ces pages se retrouvent dans le menu de navigation qui a pour but d’aider l’utilisateur à trouver ce qu’il recherche au plus vite, en un clic! Vous le guidez simplement vers les étapes de conversion. Ce menu s’intègre dans le header de votre webdesign, et doit être lisible, interactif et accessible en haut de page y compris en scrollant. Il peut être complété par un menu différent et plus complet positionné dans le footer. Et pour la version mobile ? Un menu burger toujours visible reste la meilleure option pour optimiser la navigation et le taux d’engagement sur mobile.

Optimiser la zone au dessus de la ligne de flottaison

Les internautes passent une très grande majorité de leur temps de navigation au-dessus de la ligne de flottaison, sans scroller. Un site performant doit être percutant et engageant (avec un appel à l’action) dans cet espace réduit. Convaincre en 2 secondes : voici l’objectif de cette zone clé de votre page web, en réunissant des éléments essentiels tels que :

le titre/l’objet de la page
le besoin auquel vous répondez/la baseline/l’accroche
l’appel à l’action.

Un webdesign aéré : Less is more

Less is more en webdesign, car une page surchargée d’informations et de visuels nuit à l’expérience utilisateur, et donc à la performance de votre site. Un utilisateur est toujours pressé et son cerveau est saturé d’éléments perturbateurs sur le web : alors guidez son œil vers ce qu’il recherche !

Mettez l’accent sur la facilité d’utilisation, la clarté visuelle de l’information, en proposant un webdesign aéré, équilibré grâce à des jeux de contrastes entre pleins et vides, et couleurs primaires/secondaires.

L’art d’utiliser l’espace pour un utilisateur “focus”

Le tableau de Picasso dans votre salon est bien mis en évidence, seul sur un pan de mur uni? Ce principe s’applique au webdesign : l’espace vide sur une page web n’est pas de l’espace perdu, bien au contraire, il va permettre de rehausser le message marketing que vous souhaitez transmettre et de préserver l’attention de votre prospect. Un utilisateur concentré peut balayer rapidement une page web, capter l’essentiel, et passer à l’action.

Espace vide n’est pas synonyme de blanc. A vous de choisir la couleur de fond de votre webdesign, pour assurer cohérence, harmonie et faire ressortir les éléments clés.

Adapter votre charte graphique au digital

La charte graphique de votre marque est représentative de votre domaine d’activité. Dans la continuité, le webdesign d’un site performant reprend votre palette mais avec un choix de couleurs limité (3 à 4 maximum), et complémentaire. Cette sélection permet de garder une cohérence visuelle sur les pages, et de préserver à nouveau la concentration de l’utilisateur. La couleur primaire sera la tonalité d’accent (titre, bouton d’action). Les couleurs secondaires, seront les couleurs d’ambiance, de fond. Pour définir une palette qui fonctionne, vous disposez d’outils en ligne comme COOLORS. Enfin, cette palette doit garantir un ratio de contraste minimal entre les couleurs, indispensable à l’accessibilité et à la lisibilité des textes et des éléments interactifs (tester le ratio de contraste).

Soigner le webdesign responsive

Incontournable, le mobile représente désormais le premier support de navigation des utilisateurs du web. Il est primordial de concevoir un webdesign responsive (parfaitement adapté à la navigation sur mobile), pour maximiser vos chances de convertir. L’optimisation de l’expérience utilisateur sur mobile devient même un critère important pour le référencement de vos pages sur les moteurs de recherche !

Il faut donc :

veiller à la lisibilité des textes, images et des boutons d’actions, (dimensionnement, taille de polices, contrastes de couleurs)
adapter le menu de navigation avec un menu burger
sélectionner les contenus visibles ou non sur mobile, afin de simplifier la navigation sur mobile.

Optimiser vos CTA pour passer à l’action

Maximiser le taux d’engagement sur votre site passe par une optimisation des boutons d’action (CTA). Leur incidence dépend tout d’abord de leur emplacement. Voici deux endroits stratégiques de votre webdesign :

Au-dessus de la ligne de flottaison, zone prioritaire de visibilité.
En bas de page, ou plus généralement sous le texte ou le descriptif produit, pour guider l’utilisateur et l’encourager à passer à l’action.

Ensuite d’autres critères importants rendent les appels à l’action plus performants:

Le contraste de couleur : le CTA doit ressortir
La lisibilité de la police
La pertinence du message : un verbe ou une expression évidente et encourageante pour poursuivre la navigation (en cliquant, l’utilisateur doit savoir où il va et ne pas être déçu à l’arrivée !).

Positionner les liens externes et réseaux sociaux

Encouragez vos utilisateurs à partager et interagir sur les réseaux sociaux à l’aide de liens et de pictogrammes, positionnés à des endroits stratégiques de votre webdesign. Préférez le bas de page pour les faire apparaître. D’une part, les utilisateurs iront les chercher dans le footer par réflexe : cela fait partie des us et coutumes du web. D’autre part, mieux vaut éviter de les placer en haut de page, afin de limiter “l’évasion” trop rapide des utilisateurs vers ces pages externes. Enfin, pour optimiser le taux d’engagement et réduire le taux de rebond, ces liens doivent impérativement ouvrir la page dans un nouvel onglet.

Proposer un webdesign interactif

L’interactivité du webdesign, à utiliser avec parcimonie, est un bonus indéniable pour optimiser l’expérience utilisateur. Elle a pour but de souligner les points d’interaction comme les CTA ou les liens externes, et de mettre en évidence des sections clés de votre page : promotion, formulaire, prise de RDV…

Changement de couleurs, de graisse, effet d’ombrage, mouvements… vont attirer l’œil de votre utilisateur et le faire réagir. Ainsi, créez des animations – sans surcharge – pour dynamiser votre webdesign et capter l’attention de l’utilisateur sur les zones clés de conversion.

En 2021, les tendances en webdesign se tournent vers la créativité et la modernité mais consacrent avant tout l’expérience utilisateur. La navigation, l’interaction, la lisibilité et l’accessibilité du contenu sont primordiales et doivent être conçus expressément pour votre cible. Pour aller plus loin, l’A/B testing est une fonctionnalité utile pour comparer plusieurs versions d’un même webdesign, et retenir les options (couleurs, positions des CTA, etc.) qui génèrent le taux d’engagement le plus élevé.

Avec Soon Digital, je propose des services web de proximité en création et communication digitale, dédiés aux indépendants et TPE-PME. Freelance, je crée votre site, rédige vos contenus et vous forme pour vous rendre autonome. Ensemble, nous trouvons la solution digitale ad hoc qui vous correspond, pour que votre projet numérique soit plus simple, plus abordable, plus humain.

Pour en savoir plus :

Améliorer votre webdesign en 10 points pour un site web performant