Table des matières
Si vous partez d'une feuille blanche, il peut être intéressant de faire une maquette au préalable, afin de fixer vos idées avant de commencer à vous lancer dans la création. Pour en savoir plus, consultez le guide dédié au maquettage. Vous pouvez continuer de consulter ce guide en parallèle, qui vous aidera à comprendre comment organiser votre maquette.
Vos pages web, et en particulier votre page d'accueil, doivent permettre de comprendre qui vous êtes, ce que vous faites, comment vous le faites, comment rentrer en contact avec vous ... ça fait beaucoup d'infos à faire passer. Il est donc essentiel de segmenter sa page en plusieurs sections.
Pour améliorer l'expérience utilisateur, il est préférable que l'utilisateur comprenne bien quand est-ce qu'il change de section. Il n'est pas nécessaire de complètement changer de design d'une section à l'autre, mais vous ne pouvez pas vous contenter d'un simple retour à la ligne, ou vous risquer de provoquer des situations où l'utilisateur va se dire "attends, mais depuis quand on a changé de sujet ?"
Un changement de section peut se faire de plusieurs manière :
L'utilisateur qui arrive sur votre site ne vous connaît pas encore. Vous ne pouvez donc pas lui demander immédiatement de signer un devis ou d'acheter quelque chose (sauf si vous savez que l'utilisateur connaît et cherche spécifiquement ce que vous vendez).
En début de page, on va donc plutôt chercher à piquer la curiosité de l'utilisateur, en présentant rapidement comment les avantages, puis on détaillera par la suite les informations.
Votre page d'accueil est celle dont la structure est la plus importante. Elle doit présenter l'intégralité des pages de votre site, sans forcément rentrer dans les détails.
Contrairement aux idées reçues, une page très longue n'est pas un problème, bien au contraire. Plus vous avez de contenu sur votre page d'accueil, mieux c'est, en favorisant notamment votre SEO. Si l'utilisateur ne souhaite plus scroller, il utilisera la navbar pour voir plus en détail la partie qui l'intéresse.
Les autres pages de votre site suivent plus ou moins la même logique (notamment pour le hero), mais leur construction est plus libre. En effet, l'utilisateur qui consulte votre page est probablement déjà intéressé par votre proposition de valeur.
Analysons les principales sections à utiliser; Pour cet exemple, nous utiliserons des sections de notre propre site web.
C'est la 1ère section de la page, généralement très visuelle, avec peu d'informations et une image en pleine page. Son objectif est de susciter l'intérêt et de donner envie à l'utilisateur de voir la suite.
Vous permet de montrer rapidement l'ensemble de votre palette professionnelle, ou une sélection de vos meilleures produits. Cette section s'adresse à la partie de vos utilisateurs allergiques à la lecture, ou qui cherchent simplement à faire au plus simple.
Cette section est le premier "vrai" contact avec l'utilisateur. C'est là que vous allez présenter rapidement en quoi vous êtes celui qu'on devrait choisir et votre proposition de valeur.
C'est une section charnière, car c'est généralement là qu'une partie des utilisateurs vont décider s'ils continuent ou pas leur navigation. Vous ne pouvez donc pas encore vous lancer dans une dissertation, préférez une approche courte et directe.
C'est la première section où vous pouvez expliquer un peu plus dans le détails votre offre. Concentrez-vous sur une section par service (ou catégorie de produit). N'oubliez de bien séparer chaque section de service / produit
Si l'utilisateur a progressé jusqu'à ce stade de votre page, il y a de forte chance qu'il soit intéressé par votre offre. C'est le bon moment pour caler une section invitant à prendre contact ou à remplir un formulaire.
Présent sur toutes vos pages, ils servent de cadres à votre site pour faciliter la navigation de l'utilisateur.
C'est la partie supérieure du site. Elle comprend généralement un logo et une navbar.
C'est la partie inférieure du site. Elle comprend généralement des informations diverses importantes, notamment :
Les call-to-actions, ou CTA, sont des boutons ou des liens invitant l'utilisateur à effectuer une action. Ils sont très intéressants dans une section expliquant en détail votre proposition de valeur, car ils évitent à l'utilisateur intéressé de chercher ou voir plus en détail le produit ou service qui l'intéresse.
Il s'agit cependant de conserver une certaine logique. Evitez de mettre des boutons qui invitent à visiter toutes les pages de votre site, vous risquez de perdre l'utilisateur. Concentrez-vous à la place sur quelques pages, comme votre page de contact, votre service principal, votre boutique ...
Evitez également d'être trop agressif avec vos call-to-action. Mettre un bouton de couleur vive avec écrit en majuscule CONTACTEZ-NOUS risque au contraire de ne pas inciter l'utilisateur à cliquer. Dans les premières sections, invitez plutôt à découvrir votre service plus en détail, et dans les dernières sections, proposer des actions plus concrètes.
Certains sites web prennent le parti de mettre des call-to-action invitant à des actions concrètes directement en début de page. C'est un parti pris qui peut avoir un intérêt si et seulement si vous pensez que l'utilisateur connaît votre offre et veut aller au plus simple.
Les couleurs sont un point central de votre site, car elles participent à son identité graphique. selon celles que vous utilisez, vous pouvez donner un tout autre sens à vos page.
Chaque couleur est associé à des émotions, à la fois positives et négative :
Il n'existe pas de règles absolue pour le nombre de couleurs, si ce n'est de ne pas utiliser toute les palette d'un coup. Evitez donc d'utiliser à la fois du bleu, du jaune, du vert et du violet, ou votre page perdra de l'impact.
Vous n'êtes pas forcément obligé de travailler avec plusieurs couleurs, il est tout à fait possible d'utiliser plusieurs teintes différentes de la même couleur, en utilisant une palette monochrome.
Inversement, rien ne vous empêche de mixer plusieurs couleurs vives ensemble, comme du violet et du orange. Gardez cependant quelques points à l'esprit :
Le plus souvent, on va choisir une couleur principale, qui peut être déclinée en plusieurs teintes, et une couleur secondaire, qui viendra ajouter une touche de diversité. Par exemple, un fond noir et des boutons jaune.
N'hésitez pas à tester plusieurs combinaisons ! Vous pouvez facilement changer vos couleurs Sur Oxygen en utilisant les paramètres de style
Voici quelques sites qui peuvent vous aider à choisir vos couleurs :
C'est le style d'écriture de votre site. Cet aspect peut paraître anodin, mais influe en fait assez fortement sur l'expérience utilisateur. Utiliser une police jugée trop courante ou hors-sujet par vos visiteurs affectera négativement votre crédibilité. A l'inverse, une bonne police améliorera sensiblement l'image que l'utilisateur se fera de votre activité.
Il existe des milliers de polices différentes, et presque autant de catégories. On va donc se concentrer ici sur les plus courantes :
Il est intéressant de varier les polices pour ajouter un peu de vie, mais attention : trop de styles différents donneront un aspect fouillis à votre site, en plus de perdre l'utilisateur. En règle générale, on se contentera de deux polices différentes : une pour les titres, et une pour les textes.
Sur ce point-là, c'est à vous de jouer ! Choisissez une police que vous trouvez intéressante, et mixez-là avec une autre pour voir le résultat. Assurez-vous néanmoins de respecter quelques règles :
N'hésitez pas à tester plusieurs combinaisons. Vous pouvez changez rapidement de police grâce aux paramètres de style. Si une police que vous souhaitez intégrer n'est pas disponible sur Oxygen, Consultez le guide dédié à l'intégration de polices externes.
Voici une liste de sites qui peuvent vous aider à faire votre choix :
Lorsque vous créez vos pages, vous aurez souvent besoin que l'utilisateur effectue un certains nombre d'actions diverses : remplir un formulaire, ouvrir une boutique ou un champ de recherche... Le problème est que vous ne pourrez pas forcément expliquer au préalable comment naviguer sur votre site, et ce pour trois raisons :
Pour régler ce problème, on utilise d'une part des pictogrammes qui vont permettre instantanément de comprendre à quoi sert un bouton, et on va respecter d'autres part des conventions pour placer certains boutons ou créer certains éléments, car les utilisateurs y sont habitués.
Il est préférable de ne pas utiliser ces pictogrammes à d'autres fins pour éviter de perturber l'utilisateur, sauf si vous vous êtes assuré qu'aucune confusion n'est possible (par exemple, pour illustrer un bloc de texte).
