Site internet Organismes de Formation : comment concevoir vos pages de programmes de formation

plan-programme-formation

Conception d’une architecture de programme de formation pour un site web

Pourquoi cet article ?

J’ai voulu écrire cet article après avoir conçu quelques sites web pour des organismes de formation et pour des indépendants dans ce même domaine. A chaque fois je me suis posé les questions suivantes :

  • Comment être le plus pertinent dans une conception architecturale ?
  • Quels sont les critères nécessaires pour décrire un programme de formation ?
  • Quels sont les critères superflus ou optionnels ?
  • Existe-t-il un ordre spécifique des informations à afficher sur la page web ?

Après nombreuses réflexions, je suis arrivé à la conclusion qu’il n’y a pas de recette de cuisine pour la simple et bonne raison que chaque formation est unique et s’adresse à des personnes uniques. Cependant, nous devons tenir compte qu’un programme de formation est une « fiche technique ». Qui dit fiche technique, signifie une architecture spécifique avec des contenus spécifiques.

Dans cet article, je présente le déroulement du projet « Conception d’une architecture de programme de formation pour un site web« , c’est-à-dire, avant toute rédaction. Quelques précisions sont à apporter néanmoins avant d’aller plus loin :

  • Chacun est libre de présenter ces programmes de formation comme bon lui semble.
  • Cet article concerne la conception d’un programme formation devant être visible depuis un ordinateur de bureau ainsi que depuis une tablette et un mobile (je ne donne aucune indication concernant vos conceptions de programmes de formation au format  PDF que vous avez l’habitude d’envoyer à vos clients ou prospects).
  • Cet article porte sur la forme et non le fond.
  • Il s’agit de faire en sortes que l’utilisateur trouve rapidement les informations qu’il cherche et qui lui sont utiles.

Le plan ci-dessous fait suite à un travail que j’ai réalisé pour le compte d’un client. Il lui a permis de réfléchir sur différentes manières de présenter son programme de formation. En retour, cela m’a aidé à concevoir les contenus des pages de manière plus aisée.

Comme pour tout projet, le plan et les contenus sont modifiables en cours de développement.

Rappelons que ce n’est pas le contenu qui nous importe mais bien la manière dont vos contenus doivent être présentés en fonction des différents écrans utilisés par les utilisateurs.

Plan

  1. Définir les cibles ou utilisateurs
  2. Définir et lister les critères propres au programme de formation
  3. Définir parmi les critères saisis, ceux qui sont importants, moyennement importants et/ou superflus.
  4. Définir et lister les critères hors programme de formation qui sont importants
  5. Définir la structure de la page web
  6. Livrables

1 Définir les cibles ou utilisateurs

On appelle utilisateur toute personne qui navigue sur un site internet et qui utilise les services de ce même site. Dans notre cas, ces utilisateurs peuvent être de différentes natures :

  • Demandeur d‘emploi
  • Particulier actif
  • Conseiller Pôle emploi
  • Conseiller en insertion professionnelle

Par conséquent, il s’agira de s’adresser à ces différents profils.

Quels sont les critères qui pourraient intéresser ces utilisateurs ?

Ci-dessous, ce que recherchent principalement ces profiles

  • Le demandeur d’emploi cherche à se former pour trouver un emploi
  • Le particulier actif souhaite se mettre à jour ou acquérir de nouvelles compétences
  • Le conseiller souhaite vérifier si vos formations correspondent à son public

Malgré ces différents objectifs ils recherchent les mêmes informations, d’où la nécessité de proposer une page 

  • Claire
  • Fonctionnelle
  • Intuitive (surtout pour les écrans de portable)
  • Qui comporte l’essentiel
  • Qui respecte un ordre (du plus important au moins important) 

Par conséquent, il s’agira d’être pertinent dans notre présentation en fonction des écrans qui seront utilisés. Nous verrons dans la partie suivante la liste des différents critères qui pourraient convenir plus à un utilisateur qu’à l’autre. Peut-être serait-il intéressant de croiser ces différentes données.

2 Définir et lister les critères propres au programme de formation

Ci-dessous, des critères notés au hasard pour une formation quelconque (aucune donnée propre à la formation ne sera listée ici, si ce n’est le côté technique). Cette liste peut se dresser seul-e ou bien en équipe sous forme de brainstorming.

  • Une introduction à la formation
  • La durée de la formation
  • Le(s) objectif(s) de formation
  • Le programme détaillé (ou presque détaillé)
  • Méthodes pédagogiques employées
  • Le lieu (adresse, moyens de transport, itinéraire, …)
  • Itinéraire depuis un Google Map
  • Transports en commun à proximité
  • Description du quartier
  • Le nombre de participants
  • Type de formation (intra-entreprise, inter-entreprises)
  • Le(s) plus de la formation
  • Les horaires
  • Les prérequis
  • Niveau requis
  • Les compétences acquises en fin de formation
  • La description du centre de formation
  • Pour quel public
  • Caractéristiques de la formation
  • Tarif de la formation
  • Supports pédagogiques
  • Calendrier de formation
  • Dates des sessions
  • Adresse mail ou numéro de téléphone d’un contact
  • Formulaire de contact
  • Type d’évaluation
  • Titre / Niveau atteint
  • Matériel nécessaire (ordinateur, téléphone portable, papier, stylo, …)

Cette liste de critères n’est pas exhaustive. D’autres points vous semblant importants peuvent émerger par la suite.

3 Définir parmi les critères saisis, ceux qui sont importants, moyennement importants ou superflus

En premier lieu, par superflus je veux parler d’informations de second plan.  Ces informations ne sont pas celles qui sont recherchées en priorité par l’utilisateur mais peuvent néanmoins représenter une plus-value pour votre centre de formation ou votre profile de formateur indépendant. 

En deuxième, nous n’avons pas les mêmes priorités. Chaque organisme ou formateur, estimera le niveau de priorité des différents critères qu’il aura retenu.

Pour simplifier cette tâche de classification, nous avons différents choix. Utiliser un paper-board, un tableau blanc, un tableur et encore le papier et le stylo. Pour ma part, j’ai choisi le tableur car ce dernier permet de faire des modifications rapides ainsi que des croisements de données.

Ci-dessous, un exemple de classification conçu avec un tableur :

 Classification de critère pour un programme de formation
Fig.1  Classification de critère pour un programme de formation

Que nous apprend de plus ce tableau ? 

Cette présentation nous informe que les informations en première colonne seront prioritaires par rapport aux 2 autres. Il y a beaucoup d’information qu’il faudra intégrer dans la page web ! Nous verrons plus bas, quelles méthodes en termes de design et architecture web pourront être utilisées pour ne pas noyer le visiteur.

  • Cette présentation nous informe que les informations en première colonne seront prioritaires par rapport aux 2 autres.
  • Nous constatons beaucoup d’informations qu’il faudra intégrer dans la page web.

Nous verrons plus bas, quelles méthodes en termes de design et architecture web pourront être utilisées pour ne pas noyer le visiteur. Nous verrons aussi comment afficher ces informations uniquement à la demande de l’utilisateur.

4 Définir et lister les critères hors programme de formation qui sont importants

Qu’est-ce que j’entends par « critères hors programme de formation » ?

Il s’agit d’informations complémentaires qui n’ont pas forcément de liens directs avec la formation recherchée par l’utilisateur mais qui ont leur importance car elles peuvent devenir essentielles pour ce dernier. Elles seront pour certaines décisive pour l’utilisateur. Ci-dessous, une liste non exhaustive que vous serez également amené à concevoir :

  • Lien vers le site CPF (compte personnel de formation)
  • Lien PDF pour télécharger le programme de formation
  • Autres formations qui pourraient intéresser l’utilisateur
  • Structures prenant en charge la formation (Pôle emploi, région, employeur, …)
  • Calendrier de la formation (et des formations)
  • Lien de partage par mail
  • Lien de partage réseaux sociaux
  • Lien d’impression de la page

Comme pour les premiers critères retenus Partie 3), il s’agira également d’intégrer ces derniers sur la page. Dans la suite, nous verrons justement de quelle manière s’y prendre.

5 Définir la structure de la page web (architecture)

Nous arrivons à l’étape qui définira la composition de la page web. Il s’agit maintenant d’avoir une double approche, qui concerne d’une part les ordinateurs de bureau, d’autre part les tablettes et mobiles. 

Côté design, il est important de préciser que les pages conserveront le design de base de votre site internet (si vous en possédez déjà un). Si vous ne possédez pas encore de site, la réflexion au sujet du choix du design sera faite en amont lors de la conception de ce dernier. N’hésitez-pas à visiter le site Canva, avec lequel vous pourrez concevoir la maquette de votre site internet s’il n’est pas encore fait.

Pour continuer côté design, il s’agira de respecter les choix fait en amont d’une conception de site internet, à savoir :

  • Votre identité graphique
  • Les couleurs
  • Les polices d’écriture
  • L’architecture générale (colonnes, entête, pied de page, side-bar)

Attention Référencement !

Un terme un peu hors sujet dans cet article car il mériterait un article entier. Le référencement est pourtant lié à l’architecture de votre site. 

Je fais donc une parenthèse très importante concernant le référencement de votre site internet par les moteurs de recherche. En effet, c’est le contenu que vous aurez décidé de présenter qui servira à référencer vos différentes pages. Pour vous donner un exemple concret, un utilisateur peut atterrir directement sur une page de formation suite à une requête sur un moteur comme Google, Bing ou Yahoo (et non pas arriver sur la page d’accueil du site). Résultat, il accède plus rapidement à sa recherche, ce qui est plutôt très positif !

En tenant compte de cela, vous gagnerez du temps et surtout, les utilisateurs vous trouveront d’autant plus facilement. Je préciserai par la suite à quel moment le référencement entre en jeu.


Globalement, qu’il s’agisse d’un écran d’ordinateur ou de tablette ou mobile, il y aura une structure commune. Voici sa composition :

a) Un titre explicite (référencement !)

b) Un sous-titre (facultatif /référencement !)

c) Une introduction à la formation concernée (référencement !)

d) Les informations techniques (critères importants vu plus haut)

e) Éventuellement en bas de page, des liens menant vers les autres formations de votre site

Regardons à présent cette structure de manière plus détaillée

a) Un titre explicite (attention référencement !)

Ce titre doit être celui de votre formation, donc explicite. C’est la porte d’entrée pour les futurs utilisateurs car il y a de fortes chances qu’ils le découvrent en premier sur les résultats d’un moteur de recherche. Par conséquent, ce titre est le premier élément de la page qui sera pris en compte pour l’indexation de votre page web.

Exemple 

« Formation à l’administration de votre site internet »

b) Un sous-titre (Facultatif – attention référencement !)

Facultatif ne veut pas dire inutile. Un sous-titre apporte des informations supplémentaires à votre titre. Il donne des précisions si besoin. En tant que contenu écrit, il sera également pris en compte pour le référencement. Ce sous-titre sera préférable plutôt sur un ordinateur de bureau où l’espace ne manque pas.

Exemple 

« Administrez vos contenus web en toute autonomie »

c) Une introduction à la formation concernée (attention référencement !)

Une étape cruciale pour le référencement mais c’est surtout le contenu qui donnera envie à l’utilisateur d’aller plus loin dans la découverte de votre page et de votre site. Cette introduction apporte des précisions qui ne peuvent être glissée dans le titre ou le sous-titre. Soyez néanmoins brefs et clairs. Un travail parfois judicieux je l’avoue, lorsqu’il s’agit de rédiger un contenu pertinent. Cette introduction peut être plus longue si besoin, mais elle risquera d’être coupée lors de l’affichage des résultats. (cf fig. 2) 

Exemple : 

Acquérir les compétences nécessaires, pour gérer un blog. Rédiger du contenu, insérer des médias, partager sur vos réseaux sociaux. Soyez suivi !

Jusque-là, une certaine logique apparaît dans la suite de ces 3 blocs (titre, sous-titre-introduction). Mais pourquoi est-ce important ? Regardez cette capture d’écran de résultat de recherche, je pense qu’il saura vous convaincre :

Fig.2 Résultat de recherche pour la requête « Formation à l’administration d’un blog d’entreprise » sur ordinateur de bureau

Décryptage :

  • En bleu : le titre de votre formation claire et précise 
  • En vert : le nom de la page ou son adresse internet
  • En gris :  l’introduction claire qui comporte le minimum et peut donner envie à l’internaute de devenir utilisateur de votre site.

Bien entendu, cette mini introduction peut s’adapter en fonction de la nature de la formation. Ici vous pouvez être plus technique surtout s’il s’agit de formations obligatoires ou de formations prises en charge par le CPF, la région, …

Soyez conscient qu’en vous adressant à vos futurs utilisateurs, vous vous adressez également aux différents moteurs de recherche.

Ci-dessous, les résultats de la même requête pour les mobiles et tablettes. 

Fig.3 Résultat de recherche pour la requête « Formation à l’administration d’un blog d’entreprise » sur mobile et tablette

Constats :

Étant plus petit, l’écran d’un mobile affichera moins d’informations et donc coupera (dans notre exemple), l’adresse de la page (en gris et en haut) ainsi que le texte d’introduction (en gris en bas). Seul le titre apparaît complétement car il a une longueur acceptable. A vous de voir si vos textes seront différents en fonction des écrans. Il est donc très important d’être explicite dès les premiers mots de l’introduction.

d) Les informations techniques (critères importants vu plus haut)

Nous venons de voir les contenus qui ont un impact sur les moteurs de recherche et donc le référencement. Ces mêmes contenus vont encourager les internautes à venir ou non visiter votre site ou vos pages de programme de formation. Maintenant, nous allons travailler sur la page web elle-même et comprendre pourquoi cette dernière doit être comme nous l’avons vu plus haut : 

  • Claire
  • Fonctionnelle
  • Intuitive (surtout pour les écrans de portable)
  • Qui comporte l’essentiel
  • Qui respecte un ordre (du plus important au moins important) 

Comment insérer alors tous les critères importants sur les différents écrans ?

Un site web c’est du contenu. Ces contenus peuvent être affichés avec du textes, des images, des icônes, des vidéos…, mais ce sont avant tout des contenus visuels. Nous allons comprendre pourquoi l’image devient nécessaire dans ce cas de figure.



Une image vaut mille mots. 

Confucius


En effet, l’image apportera Clartéfonctionnalité et intuitivité à votre site. Elle permet d’insérer de l’information et vous évite ainsi de faire du « remplissage », notamment pour les écrans de petite taille. Elles seront lues de gauche à droite et/ou de haut en bas. Une logique qui nous arrange pour les différentes tailles d’écran. Ainsi, sur les grands écrans on profitera de l’espace en largeur (gauche-droite), et sur les écrans mobiles on optimisera une lecture verticale (haut- bas)



Fig.4 Affichages différents selon écrans – Compositions différentes

De quelle manière peut-on utiliser des images ?

Des images liées à un design spécifique apporteront à vos pages des informations essentielles, dans un ordre précis. Nous pourrons alors utiliser des outils assimilés à un design dans l’architecture des pages :

  • Des icônes
  • Des onglets
  • Des dessins
  • Des vidéos
  • Des photos
  • Des blocs
  • Les espaces latéraux (marges droites ou gauches pour les grands écrans)

Pour utiliser les espaces de manière harmonieuse, j’ai décidé d’utiliser des icônes et des onglets qui contiennent du contenu caché qui s’affiche par un clic sur son titre. Ci-dessous un exemple qui s’adapte aux différents écrans :

Version ordinateur de bureau :



Figure 5 Utilisation d’icônes et d’onglets – Cliquez pour agrandir l’image

Voici un exemple tiré du site https://argiopa.fr/ qui présente de nombreuses informations uniquement à partir d’icônes et de titres (sur les onglets). Nous retrouvons les principales informations (critères vus plus haut), pour lesquelles, l’utilisateur choisira de cliquer pour lire son contenu.

Depuis un téléphone portable, les informations seront présentées différemment comme le montre l’image ci-dessous :

Version mobile :



Fig.6 Utilisation d’icônes et d’onglets sur mobile – Cliquez pour agrandir

Nous retrouvons sur cet exemple, une composition adaptée. En langage web, le terme est « Responsive design ». Cela signifie que le site s’adapte aux différentes tailles d’écrans. Il est cependant important parfois, de ne pas inclure dans la version mobile, tous les contenus apparaissant dans la version grand écran.

Découvrons un autre exemple d’affichage d’un programme de formation sur le site momemtum.fr

Fig.7 Exemple d’architecture pour grand écran

Constats :

Nous retrouvons une architecture similaire, soit :

  • Un grand titre
  • Un sous-titre
  • Une introduction
  • Un bandeau comprenant des informations complémentaires
  • Le contenu visible dans le corps de la page
  • Un contenu visible sur le côté de la page (side-bar)

Nous constatons sur cette capture d’écran que la composition en termes de contenus et de design est différente de la capture d’écran vue plus haut (fig 5). Nous retrouvons toutefois, les critères importants propres à chaque programme de formation.

6 Livrables

Les livrables concernent uniquement ceux qui souhaitent ou qui actuellement préparent la réalisation d’un site internet. Si vous faites appel aux services d’une agence, communiquez tous les contenus classés dans des dossiers différents :

  • Dossier images (avec sous dossiers images pour mobile, tablette et grand écran)
  • Dossier contenus écrits avec des noms de fichiers explicites (pour les versions mobile, tablette, grand écran)
  • Dossier design avec des captures d’écran faites depuis le site Canva, depuis Photoshop ou tout autre logiciel de conception (version toutes tailles d’écran

L’utilisation de programmes de transfert de fichiers volumineux peut servir parfois dans ces cas-là (ex : Dropbox, transfertxl,…).


Conclusion

Cet article a pour objectif de vous poser la question sur l’importance de la présentation d’un programme de formation sur un site internet. Pour cela, nous avons vu plusieurs choses :

  • Tenir compte des personnes à qui on s’adresse.
  • Différencier les éléments par priorité pour que la page contienne l’essentieldans un ordre défini.
  • Utiliser l’image pour éviter de charger la page web et la rendre ainsi claire, fonctionnelle et intuitive.
  • Tenir compte des différentes tailles d’écrans.

Bien entendu, une agence web vous aidera dans cette réalisation mais vous seul savez réellement ce qui a de l’importance pour figurer sur vos pages web.

N’hésitez pas à visiter les sites (sur mobiles et grands écrans)  de vos concurrents ainsi que les sites institutionnels comme le Carif Oref ou le site mon compte formation CPF. Ils regorgent d’idées de présentation et vous permettrons de voir différentes manières d’afficher des informations.

N’hésitez pas non plus à laisser un commentaire ou proposer d’autres idées. Je serai ravi de vous répondre.

Répondre

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l'aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s