Webdesign : 6 conseils pour mieux convertir
Beaucoup considèrent le design de leur site web comme un élément purement esthétique. C’est une erreur ! Le webdesign d’un site internet doit être conçu avec soin dans le but d’améliorer l’expérience utilisateur qu’offre le site en question. Il s’agit en réalité d’un outil permettant de mener l’oeil de l’internaute où on le souhaite pour l’inciter à réaliser une action. Si vous ne concevez pas votre design dans ce but, votre site ne convertira pas. 9 conseils webdesign pour mieux convertir, c’est par ici !
Proposer un design épuré pour mieux convertir
Aujourd’hui la tendance est aux designs épurés. Ce type de design à l’avantage de mettre en avant les informations importantes.
Pour suivre cette tendance, il faudra réduire le bruit sur la page. C’est simple, enlevez tout ce qui n’est pas indispensable !
Less is more !
D’ailleurs, vous pouvez jouer avec l’espace négatif, c’est-à-dire l’espace blanc; l’espace vide. C’est l’espace entre les différents composant de votre page. Cela vous permettra de guider le regard de vos visiteurs vers les éléments les plus importants et de valoriser les CTA en les laissant respirer.
Aérer votre page, c’est améliorer l’expérience utilisateur de vos visiteurs pour améliorer votre taux de conversion.
Utiliser une grille pour plus d’organisation
Notre deuxième conseil est d’organiser vos pages. Une page qui paraît mal organisée, mal hiérarchisée, ne permet pas à vos visiteurs de trouver l’information qu’ils recherchent.
Pour organiser votre page comme il se doit, nous vous conseillons d’utiliser une grille. Une grille en webdesign constitue un ensemble de repères aidant le designer à s’organiser. Cette grille présente une ligne de base, des marges, des colonnes et des gouttières.
La ligne de base sert de repère vertical pour placer les éléments textuels.
Le nombre de colonnes dépends de vous. Mais notez que plus vous aurez de colonnes, plus vous aurez de possibilités et de liberté. Elles servent de repères pour disposer les éléments, vous pouvez disposer des éléments sur une ou plusieurs colonnes.
Pour finir, les gouttières séparent les colonnes. Tout comme les marges, il s’agit d’espace vide. Plus vos marges et gouttières seront grandes, plus votre page sera aérée.
Pour ce qui est de la hiérarchisation de l’information de votre page, gardez à l’esprit que l’œil de l’internaute se pose automatiquement à certains endroits de la page, dans un ordre bien précis (cf le F-Pattern). C’est en fonction de cette règle et du degré d’importance de vos informations que vous pourrez déterminer les informations à mettre en avant (les informations à voir immédiatement).
Notez que vous pourrez aussi jouer sur la taille des informations, les couleurs, le contraste et comme dit précédemment, l’espace blanc de votre page, tout en utilisant votre grille afin de mettre en place une certaine organisation et gestion de l’espace.
Composer votre palette de couleur
Toujours dans le but de présenter un site propre et bien organisé, il vous faudra choisir avec soin votre palette de couleur.
Pour améliorer la lisibilité de vos pages et permettre aux visiteurs d’identifier immédiatement les éléments importants, mieux vaut faire simple. Constituez une palette de trois couleurs maximum : une pour le texte, une seconde pour les CTA et les informations essentielles et une dernière pour l’espace vide.
Si vous préférez les couleurs vives, sachez qu’il est plus intéressant de n’en sélectionner qu’une et de l’associer à deux autres couleurs plus neutres.
Et si vous n’avez pas vraiment d’idée de couleur, ou n’arrivez pas à constituer de palette, des experts l’ont fait pour vous ! Il ne vous reste plus qu’à trouver votre combinaison idéale sur Adobe Color CC, Coolors ou encore Colors de Klart.io.
Privilégier la lisibilité à la fantaisie dans le choix de ses typographies
Il est aussi important de bien choisir ses typographies afin de présenter un design aussi clair que possible.
Il y a quelques années, il fallait ruser pour faire preuve de créativité et d’originalité. Sortir de la norme en utilisant des polices autre que Verdana, Times ou Arial demandait des artifices qui engendraient beaucoup de problèmes. Pour utiliser une police, il fallait être sûr que celle-ci avait été téléchargée au préalable par l’internaute. Une police non installée sur une machine ne pouvait être lue.
Laissez parler votre créativité grâce à l’arrivée des web fonts
Mais les web fonts ont permis la révolution ! Aujourd’hui, il n’est plus nécessaire de télécharger et installer une police en amont afin de la lire. Une police non installée, se télécharge automatiquement à l’ouverture d’un site internet à partir d’un serveur web distant.
Inutile de préciser que cela offre une multitude de possibilités designs. Sans compter, que beaucoup de web fonts proposent des versions italique, bold, condensée, light, etc … Encore une fois pour nos créatifs, cela représente une liberté non négligeable.
En plus d’offrir une palette de choix amplement satisfaisante, les web fonts sont accessibles. Téléchargeables, gratuitement ou non, sur des sites comme FontPair.co, FontJoy.com et Typ.io qui proposent en plus des associations de typographies !
Des règles à respecter pour convertir
Ne vous emballez pas trop vite à l’idée d’avoir autant de choix. Si cela garantie une certaine liberté, il ne faut pas oublier de préférer la lisibilité de vos contenus textuels à leur originalité. Notez qu’un contenu textuel lisible, ne présente pas plus de 3 typographies différentes. Ces trois typographies ne doivent pas faire partie de plus de 2 familles (Serif, Sans serif, monospace, manuscrite, etc … ). Si vous ne respectez pas ces deux règles, il est évident que votre page ne sera pas agréable à lire.
De plus, nous vous conseillons de conserver un espace 30% plus grand que la taille de votre police entre chacune de vos lignes et de laisser de l’espace vide entre vos paragraphes. Ces deux conseils vous permettront d’aérer votre texte et de le rendre ainsi plus agréable à lire.
Aussi, le contraste entre votre texte et votre couleur de fond doit être suffisant. On ne vous l’apprend pas : du blanc sur du blanc ou du noir sur du noir, ce n’est pas lisible.
Des erreurs à éviter
Pour finir, s’il est normal de vouloir attirer l’attention en intégrant de la fantaisie à vos textes il faut tout de même penser à certaines choses. Premièrement, les textes qui scintillent ou clignotent font mal aux yeux et sont illisibles. Ensuite, les textes rouges et verts sont peu lisibles ou illisibles par les personnes daltoniennes. Pour terminer, si les polices fantaisies sont originales il faut savoir que les internautes sont tout de même plus habitués à lire les polices standards. Par conséquent, ils les lisent mieux et plus aisément. Si vous décidez tout de même d’utiliser des polices fantaisistes, vérifier que les « l » et les « i », les « r » et les « n » ainsi que les « o » et les « a » sont bien différenciables.
Utiliser des éléments visuels pour une interface ludique
Pour intégrer des éléments visuels sur votre page vous devez vous poser quelques questions :
- Voulez-vous des images et photos sur-mesure ? C’est à dire des photos prises par vous (ou pour vous), ou des visuels créés par/pour vous, afin d’assurer une certaine personnalisation de votre site. Ou des images venant de banques d’images ? C’est à dire, des images plus génériques dont la propriété pourra vous être acquise si vous souhaitez les achetés.
- Quel état d’esprit, quel univers graphique voulez-vous créer ? Vos images et visuels se doivent de respecter une harmonie. Ils doivent être en adéquation avec votre univers graphique.
- Quel style préférez-vous ? Ici, il ne s’agit pas d’une obligation, mais d’un conseil : il est préférable de se contenter d’un seul style d’image pour toutes vos pages. Si vous optez pour des images en nuances de gris, restez fidèles à ce choix. Si votre style est d’opter pour des dégradés de couleur, ne changez pas d’avis sur une page. Il faut que vos pages soient liées entre elles par leur style.
Compresser les fichiers et images pour améliorer le temps de chargement
Attention, ajouter des éléments visuels présente un danger : une augmentation du temps de chargement de vos pages. Or les internautes détestent attendre et d’ailleurs, ils ne le font pas. Ils préfèrent quitter un site trop lent à leur goût. Comme vous vous en doutez, si les internautes quittent votre site sans même le consulter il est peu certain que votre site convertisse.
Alors, misez sur le visuel mais n’oubliez pas de compresser vos fichiers et images afin de ne pas alourdir vos pages.
