Cet article a pour objectif de vous accompagner dans la conception synoptique de votre site web, c’est-à-dire d’un point de vue global.

Vous appréhenderez la conception des éléments systématiquement présents sur toutes vos pages, ainsi que l’architecture générale du site. Vous serez capable d’appliquer les fondamentaux d’une navigation réussie, de choisir vos rubriques et vos pages pour construire votre arborescence, et enfin consolider votre conception à l’aide d’une carte ergonomique.

Module 1 > Étape 1 pour réussir son site web : réalisation de la conception d'un site web

 

Vue d'ensemble de la conception d'une page web 

Une page web est divisée en trois zones principales. La grande majorité des sites web est construite suivant ce schéma simplifié :

construction page web

Header
Votre logo en haut à gauche
Un menu de navigation
Des informations personnelles

Corps du site
Le contenu du site à diviser en différentes zones d'information

Footer
Présente les liens vers des pages plus secondaires.

Le header et le footer sont les deux zones du site qui resteront inchangées, quelle que soit la page web visitée. Vous devez donc dès le début vous préoccuper de ce que vous souhaitez y inclure puisque ces zones seront systématiques.

  • Le header constitue la partie la plus haute (l'en-tête) du site.

Il doit être suffisamment attractif pour informer, guider et retenir votre visiteur. Il doit refléter l’ensemble du contenu de votre site, et sa hiérarchisation. Par convention, il est d’usage de placer :

  •  Systématiquement, votre logo en haut à gauche ;
  • Un menu de navigation ;
  • Plus rarement, des informations personnelles que vous jugez utiles (numéro de téléphone, etc.) ;
  • Le corps comporte le contenu du site et se situe en dessous du header.

Nous verrons dans le cours "Comment réaliser la conception de vos pages Web" que cette partie est à diviser en différentes zones d'information pour mettre en relief votre contenu.

  • Le footer constitue la partie basse (pied de page) du site.

De la même manière que le header, cette partie est visible sur l'ensemble des pages d'un site. Elle ne doit pas être négligée et présente les liens vers des pages plus secondaires.

marketing bienveillant

 

Comment appliquer les fondamentaux d'une navigation réussie ?

Pour naviguer à travers vos pages web, vos visiteurs vont se servir de vos systèmes de navigation. Il est nécessaire que vous ayez des notions sur les différents systèmes de navigation et les règles à respecter lors de leur conception.

Principe

La première règle valable pour tous les systèmes de navigation est que, dans tout menu, chaque libellé doit être explicite et exclusif. En d'autres termes, votre visiteur doit pouvoir deviner le type d'information que vous lui offrez et être capable de choisir entre deux libellés sans la moindre hésitation.

Important !

Partez du principe que chaque page de votre site web doit répondre aux questions de l'internaute :

  • Où suis-je ?
  • Où puis-je aller ?
  • Comment vais-je revenir en arrière ?

Dites-vous qu'un visiteur désorienté est un prospect en moins !

Pour organiser et hiérarchiser votre contenu, vous avez quatre possibilités de  navigation :

  1. Navigation principale
  2. Navigation secondaire
  3. Navigation transversale
  4. Navigation séquentielle

1. Navigation principale

construction headerLa navigation principale correspond au menu présentant les rubriques que vous souhaitez mettre en avant. Par convention, pour un site de petite taille (comme celui que vous concevez), la navigation principale se trouve dans le header sous la forme d’un menu horizontal.

Je vous conseille très fortement cette solution qui respecte les usages des internautes et assure confort et simplicité.

Important !

Présents sur toutes vos pages, les liens hypertextes ou les boutons de votre menu de navigation principale doivent impérativement :

  • être placés dans le même ordre sur chaque page ;
  • avoir les mêmes intitulés sur chaque page ;
  • avoir la même fonction sur chaque page.

Dans ce menu principal, vous devez présenter les liens de navigation vers les pages les plus importantes de votre site Web. Nous vous proposons plus loin une liste de rubriques essentielles et adaptées à l’activité du formateur-coach en ligne 2.0.

La disposition des liens dans le menu n’est pas anodine et ne doit absolument pas être laissée au hasard. Vous devez donc choisir l’ordre des rubriques en fonction de leur importance.

menu horizontalPlus le lien est situé vers la droite du menu, moins le nouveau visiteur cliquera sur ce lien pour visiter la page Web correspondante. Ce constat s'applique à n'importe quel site.

Toutefois, il existe un moyen de contourner cette règle et d’attirer l’attention d’un visiteur vers un lien spécifique. Il s’agit de proposer un appel à l'action mis en valeur par un visuel différent de celui utilisé pour les rubriques du menu horizontal.

Ainsi, pour optimiser la conversion et inciter vos visiteurs à découvrir votre catalogue de formations ou vos pages de vente, vous avez tout intérêt à placer un lien externe pointant vers votre offre bien en vue, par exemple à droite du menu comme ceci.

construire menu avec orson

Notes 
- Le logo contient un lien cliquable pointant vers votre page d'accueil.
- L'offre proposée avec un visuel différent peut être un lien vers : offre de formations, téléchargement d'un guide, news, audit gratuit...

conception site web
Exemple à voir : le site web de Danilo Duchesnes
Offre : téléchargement des guides + découverte de ses services

Notez aussi que rien ne vous empêche, pour certaines rubriques importantes comportant un contenu conséquent, de créer un menu déroulant. En particulier, si vous avez plusieurs types de services bien distincts à proposer (guides et outils / formations / consulting), vous pouvez les séparer par ce moyen.

menu déroulant orson

conception menu déroulant
Ex. à voir : site web de Ludovic avec plusieurs menus déroulants
Offre avec visuel différent : audit gratuit

2. Navigation secondaire

 Vous pouvez y intégrer des liens tels que :

  • « F.A.Q » ou « Liens Utiles » ou « Carte du site » ;
  • « Conditions générales de ventes » ;
  • « Mentions légales » ;
  • « Contact » ;
  • « Partenariats et affiliation » ;
  • des liens vers des pages qui figurent aussi dans le menu principal ;
  • des liens vers vos réseaux sociaux ;
  • un appel à l'action (exemple : inscription à votre newsletter) ;
  • des liens vers des articles récents.

Après avoir dressé la liste de toutes vos pages et de ce que vous souhaitez y mettre, vous pourrez choisir les liens que vous placerez dans le footer par élimination. Tout ce qui ne se trouve pas dans le header doit être dans le footer. Par ailleurs, vous pouvez choisir de proposer certaines pages à la fois depuis le header et depuis le footer si vous les considérez comme capitales.

footer orsonExemple réalisé avec Orson :

3. Navigation transversale

Une navigation transversale est une navigation qui ne suit pas l'arborescence du site. Elle se matérialise par un lien depuis une page qui pointe vers une autre page de votre site, créant ainsi un maillage interne. Ce type de navigation ne suit aucune règle. Elle peut être pensée en amont de la conception, ou après celle-ci.

Tout dépendra :

  • de la corrélation qu'il peut y avoir entre les contenus de chaque page ;
  • des expressions-clés que vous souhaitez mettre en avant par des liens hypertextes (nous y reviendrons dans le module sur le référencement).

Cette navigation est utilisée pour deux raisons :

1) Mettre en correspondance un contenu complémentaire de même type.

navigation site

Exemples d'application :

Vous pourriez très bien faire ce type de lien entre votre page « mes services » et

  • un article de votre blog qui présente un cas particulier ;
  • une de vos formations présente sur votre plateforme ;
  • votre page « contact » pour répondre aux questions de vos visiteurs.

Vous pourriez aussi utiliser ce type de navigation sur votre page « qui suis-je ? » pour présenter un lien vers votre page « Témoignages ».

2) Améliorer le positionnement d'une page Web sur Google

construire netlinking

En faisant pointer la page 1, 2 et 3 avec des liens internes vers la page 4, Google comprend que la page 4 a de l'importance dans le site Web. Nous reviendrons sur ce point dans le prochain module consacré au référencement naturel.

4. Navigation séquentielle

Une navigation séquentielle est une navigation qui fonctionne de la même manière que si vous tourniez les pages d'un livre, l’une après l’autre, dans un ordre prédéfini.

Cette navigation est utilisée pour deux raisons :

1) Présenter une suite logique nécessitant de proposer plusieurs étapes

navigation sequentielle

Par exemple, vous pourriez utiliser ce type de navigation pour présenter une série d'articles de votre blog suivant une logique de lecture.

2) Améliorer le taux de rebond d'une page Web

conception navigation séquentielle

Important !
Le taux de rebond représente le pourcentage de visites au cours desquelles l’internaute quitte votre site dès la page d’entrée. Ce taux évalue la qualité des visites et votre capacité à conserver vos visiteurs.

Le taux de rebond augmente lorsque les visiteurs découvrent des pages surchargées de contenu et présentant un texte long (soit plus de 2000 mots).

Pour faciliter la lecture et ne pas décourager le nouveau visiteur, vous pouvez :

  • scinder la page en deux et inviter le visiteur intéressé par le texte à cliquer sur un lien « voir la suite ».
    Lorsque vous mettrez en place une navigation séquentielle, vous pouvez donner la possibilité aux utilisateurs de revenir en arrière. Par exemple en affichant les liens « Suivant », « Précédent » sur chacune de ces pages.
  • mettre en place un sommaire cliquable avec des liens qui dirigent vos lecteurs vers les grands chapitres de votre article.
 

Comment concevoir le rubriquage de votre site web adaptée à vos besoins

Une fois les bases de la navigation maîtrisées, vous devez procéder au rubriquage. Le rubriquage consiste à choisir les rubriques et leurs intitulés des menus de navigation. Le choix des rubriques vous aidera à  constituer l’arborescence de votre site web.

marketing bienveillantEn tant que freelance ou formateur en ligne, votre objectif est d’être le plus concis et percutant possible afin de donner confiance à vos visiteurs, de les inciter à passer à l’action et vous donner leur mail. Vous ne créez pas un site d’e-commerce complexe avec des dizaines de produits et services. C’est donc a priori un site d'entreprise simple et efficace dont vous avez réellement besoin. Néanmoins, pour réussir la conception de votre site web, cette réflexion doit être mener.

Dans un menu, une rubrique peut être composée d’une ou plusieurs pages ou d’un lien externe. Compte tenu de la nature de votre site, je vous conseille de préférer des rubriques qui ne contiennent qu’une seule page ou qu’un lien externe.

Selon moi, les rubriques à plusieurs pages ne sont à garder que dans deux cas :

  • Si la longueur du texte est vraiment excessive, auquel cas vous pouvez adopter une navigation séquentielle pour scinder la page ;
  • Si votre contenu peut être scindé en plusieurs sous-thématiques précises.

Comme nous l'avons vu précédemment, votre contenu peut être de trois types : informationnel, communicationnel et transactionnel. Le choix de vos rubriques et leur hiérarchisation vous appartiennent, mais vous devez impérativement couvrir l’ensemble de ces contenus, sans en oublier.

Important !

Partez du principe que chaque rubrique de votre site web :

  • doit répondre à un objectif précis et un seul ;
  • doit être identifiée par un libellé clair.

Exemple à ne pas suivre :

Objectif de cette rubrique "Bibliothèque" : présenter des documents. Dans ce cas, les sous-rubriques "Blog" et FAQ ne devraient pas apparaître dans cette rubrique :

conception menu page web

marketing bienveillantPour concevoir votre site web, je vous propose l’exemple détaillé d’un site d’entreprise comprenant 7 pages web, une rubrique  « Blog » et un lien externe adapté à votre activité et respectant les règles précitées :

conception site web

Je vous conseille de rester proches de ce modèle, car l’originalité se solde par un échec dans la grande majorité des cas. Souvenez-vous que les visiteurs arrivent sur votre site web avec des standards en tête et avec un besoin irrépressible de tout comprendre en un clin d’œil. Ne laissez donc aucun mystère derrière vos rubriques.

Article à lire : Comment créer une identité visuelle pertinente

1. Une page d'accueil

  • Objectif : présenter votre entreprise et générer des contacts
    Exemple d'action :  téléchargement de votre livre blanc.

C'est sur cette page que vous présenterez votre entreprise. Vous condensez en quelque sorte l’essentiel de votre site en quelques phrases. La page d’accueil est celle que vous concevrez en dernier, après avoir eu une vision globale de votre site web et du contenu de toutes les autres pages.

2. Une page « Qui suis-je ? »

  • Objectif : vous présenter personnellement ou présenter votre équipe
    Exemple d'action : un call to action vers votre plateforme de formation

Cette page peut avoir différents libellés, comme « Qui-sommes-nous ? », « Nous connaître », ou même « À propos ». Sur cette page, vous devrez présenter votre expertise, votre expérience, votre passion.

Vous devez montrer en quoi vous êtes la bonne personne pour répondre aux besoins de votre clientèle cible. Si vous êtes une petite équipe, vous pouvez parler de l’histoire de cette équipe, comment elle s’est formée et quelles sont ses réussites communes.

3. Une page « Mes services »

  • Objectif : présenter toutes vos prestations et vos propositions commerciales.
    Exemple d'action : demande de devis

Cette page peut avoir différents libellés selon votre activité : « Mes formations », « Mes produits et services », « Mes prestations ». C'est sur cette page que vous décrivez vos prestations. Vous pouvez intégrer éventuellement un texte de page de vente, et des vidéos de vente. Vous pouvez aussi mettre des liens vers votre plateforme de formation.

C’est aussi sur cette page que vous proposez un formulaire de "demande de devis", de "consulting"  pour les visiteurs qui souhaiteraient une prestation de conseil, de coaching, ou une formation non standard ou sur-mesure (non proposée sur votre catalogue en ligne).

À noter : quelle que soit votre thématique de formation, évitez la fonction « panier », c'est-à-dire le moyen permettant à un utilisateur de faire sa liste d'achats avant la validation et le paiement de sa commande.

Cette fonctionnalité n'est pas réellement adaptée à l’activité de formateur coach. Très rares seront les personnes qui vous commanderont plus d'une formation ou un service à la fois. De plus, en l'utilisant votre taux de conversion sera bien moins bon qu'un simple bouton de paiement, puisque cela rajoute des étapes dans le processus de vente.

conception site entreprise

4. Une page "Contact" ou « Nous contacter »

  • Objectif : offrir un moyen simple et évident de vous contacter.
    Exemple d'action : prise de contact (formulaire)

Cette page permet à votre visiteur de vous demander des renseignements sur vos offres, sur votre expérience. Il peut ainsi vous poser des questions pratiques. C’est aussi par ce moyen que de potentiels partenaires vous contacteront.

5. Une page mentions légales

  • Objectif : rassurer vos visiteurs de votre bonne foi et de votre transparence.
    Exemple d'action : un Call to action vers votre plateforme de formation

Il existe dans la législation française des mentions légales devant obligatoirement apparaître sur un site web. Afin de respecter vos obligations et de prouver votre bonne foi et votre transparence, vous devez inclure cette page web.

Pour en savoir plus :

6. Une page partenariat & affiliation

  • Objectif : attirer des partenaires et des affiliés
    Action : inscription à votre programme d'affiliation

Vous pouvez proposer plusieurs formes de partenariats sur cette page. D’une part, je vous conseille de montrer que vous êtes ouvert aux propositions par une expression du type « Une idée de partenariat ? Contactez-moi ».

Vous pouvez également citer des partenariats déjà lancés et qui peuvent vous crédibiliser. D’autre part, vous pouvez présenter votre programme d’affiliation : vos conditions, votre % sur vente et un lien externe pointant vers votre plateforme d'affiliation.

7. Une page « Témoignages » ou « Références »

  • Objectif : gagner la confiance de vos prospects par la preuve sociale
    Exemple d'action : un call to action vers votre plateforme de formation

Sur cette page, vous présentez des témoignages de clients satisfaits pour justifier la qualité de votre produit/service.

Ces témoignages peuvent prendre la forme d’une citation accompagnée d’une photo, voire même la forme d’une courte vidéo. Vous pouvez aussi montrer des logos d’entreprise si vos clients sont des entreprises.

Une rubrique "Blog"

Pour obtenir un bon positionnement de votre site sur les moteurs de recherche comme Google, la clef du succès est de produire un contenu de qualité, spécifique et régulier. Votre activité de formateur ou de formateur-consultant est déjà chronophage, mais produire ce contenu est une stratégie de moyen terme extrêmement efficace.

Votre objectif sera de présenter votre actualité ou votre expertise en produisant un article par semaine, au minimum. Je vous conseille d'organiser votre blog en utilisant trois ou quatre thématiques ou catégories grand maximum pour classer vos articles. Vous pouvez tout à fait créer votre blog sans passer par une organisation par thématique (si vous avez simplement besoin d’un fil d’actualité pour votre activité).

Nous verrons l’organisation du blog dans le cours « Préparez votre stratégie de Content Marketing ».

marketing bienveillantNombreux sont ceux et celles qui se lancent dans la création de leur site avant même d’avoir pensé au contenu concret. L’exemple précédent (rubrique "Bibliothèque") vous illustre à quel point il est important de savoir quel contenu vous souhaitez développer pour choisir vos rubriques.

Dès maintenant, il est nécessaire que vous puissiez poser sur papier tous les thèmes que vous allez aborder dans chacune de vos pages.

Si vous ne faites pas ce travail de rédaction préliminaire, vous risquez de créer un site non ergonomique. Et comme le disent les Anglo-saxons « Keep It Simple » : « restez simple ».

Un lien externe pointant vers votre plateforme de formations

En utilisant par exemple Teachable pour vos formations en ligne, votre processus de vente et vos moyens de transaction sont intégrés et externes à votre site web. Vous devez donc prévoir un lien externe mis en évidence, renvoyant vers votre catalogue en ligne.

 

Conception de la carte ergonomique de votre site web

La carte ergonomique deviendra votre document de référence

La conception d'un site web passe par la conception de cette carte ergonomique.
Avec tout ce que vous avez vu précédemment, vous avez tous les ingrédients pour construire votre carte ergonomique représentant l'arborescence de votre site web.

Ce schéma a pour but de condenser et d’expliciter en un clin d’œil toute l’architecture de navigation de votre site : vos rubriques, les pages qui les composent, la hiérarchisation dans les menus de navigation, les liens internes entre les pages, et les liens externes.

Lorsque vous créerez concrètement votre site web vous-même (à l’aide d’outils simples comme celui du CMS Orson) ou bien lorsque vous rédigerez un cahier des charges complet pour une agence digitale ou pour un freelance.

Exemple.

Pour construire une carte ergonomique, rien n’est plus parlant qu’un ou plusieurs exemples pour saisir la tâche. Vous pouvez visualiser ci-après une carte ergonomique qui applique les conseils que je vous ai donnés pour réaliser un site adapté à vos besoins. Vous êtes libre de vous en inspirer, la modifier, et choisir vos propres libellés.

conception site web

marketing bienveillant

Au départ de votre projet, il est bien évident qu'il vous sera difficile de mettre en place les deux pages "Témoignages", "Partenariats & Affiliation" et les liens vers vos réseaux sociaux.

"Témoignages" : à réaliser lorsque vous aurez des retours positifs sur vos formations.
"Partenariats & Affiliation" : à réaliser lorsque vous aurez mis en place votre programme d'affiliation. Cette thématique sera abordée en détail plus tard.
Liens vers vos réseaux sociaux : idem, cette partie sera à traiter plus tard...

conception site web

Je me répète peut-être... Mais pour réussir la conception de votre site web, ce travail préliminaire est important.

C'est à vous...

C'est la 1ère étape pour réussir son site web !

>> Concevez votre carte ergonomique : header, footer en faisant apparaître toutes les rubriques et leurs intitulés (rubriquage).

Notes :
- Pour l'instant, pensez uniquement aux navigations principales et secondaires.
- Pour cette conception, utilisez l'outil de votre choix (PowerPoint, Word ou encore une feuille de papier)
- Les pages "Témoignages", "Partenariats & Affiliation" et les liens vers vos réseaux sociaux seront à réaliser dans un second temps. Néanmoins, prévoyez-les dans votre carte ergonomique.

< Prérequis : les bases pour réussir votre site web

Étape 2/7 : rédigez votre contenu éditorial >

5/5 - (12 votes)