Ilies AllaliDonner un visage aux métiers de l'électricité
Trois publics opposés, trente-sept pages ramenées à six gabarits, et un quiz d'orientation en deux minutes.
Une fédération professionnelle du génie électrique veut attirer des jeunes vers des métiers en tension. Le projet : un site d'orientation qui présente les métiers, les formations et les entreprises qui recrutent, à destination de collégiens, de lycéens et de personnes en reconversion. J'interviens sur toute la chaîne, des parcours utilisateurs jusqu'au site développé.
Le contexte
Les métiers de l'électricité recrutent et ne trouvent pas. Le problème n'est pas l'emploi, il est la visibilité : un élève de troisième ne sait pas qu'un métier comme dessinateur projeteur existe, encore moins par quelle formation on y arrive. Le site précédent listait de l'information sans donner envie de la lire. La commande, portée par une agence conseil qui pilote le projet côté fédération, était donc autant une commande éditoriale qu'un site.
Ce que disent les jeunes
L'agence conseil a mené des ateliers avec cinq jeunes de quinze à vingt-deux ans, de la seconde au bac+3, exactement la cible du site. Le verdict est net : s'ils ne comprennent pas l'objet d'un site en quelques secondes, ils partent. Ils rejettent les pages denses, le vocabulaire technique et ce qu'ils appellent le design amateur, et citent Netflix, Snapchat et TikTok comme références d'interfaces claires. Ils attendent six informations précises : les métiers, les formations, la durée des études, les écoles, les débouchés et les salaires. Ces conclusions ont tranché plusieurs partis pris du projet, à commencer par le mobile d'abord et par le refus du ton institutionnel.
Le cadrage
Trois publics avec trois logiques opposées : un collégien qui explore sans savoir ce qu'il cherche, un lycéen qui compare des voies, un adulte en reconversion qui veut savoir en combien de temps il bascule. J'ai posé les personas et les parcours avant l'arborescence, puis wireframé en mobile d'abord, parce que la cible principale ne consulte pas ce genre de site sur un ordinateur. La navigation s'organise autour de deux entrées, les métiers et les formations, avec un parcours qui laisse passer d'un univers à l'autre à tout moment.
La direction artistique
L'écueil d'un site d'orientation, c'est le ton institutionnel qui fait fuir exactement le public visé. La direction part donc d'une base claire et chaleureuse plutôt que du bleu technique attendu dans le secteur, avec un surlignage manuscrit sur les mots qui comptent. Le vrai problème était ailleurs. La charte compte vingt-neuf teintes, des vives, des pâles, six niveaux d'encre navy et sept d'encre écru, et une décision prise avec la DA de l'agence les rend toutes délicates à poser : aucune couleur n'est attribuée à une famille de métiers, pour ne pas enfermer un jeune dans une case avant qu'il ait exploré. Une palette riche dont le travail est précisément de ne rien signifier. Les pâles ne classent pas, ils scandent : le fond se fond d'un palier à l'autre au défilement pour donner un rythme aux pages longues, sans jamais dire au lecteur à quelle catégorie il appartient. Le jaune pâle reste la seule teinte libre de sens, elle sert les niveaux de formation.
Le système de gabarits
Le site compte trente-sept pages prioritaires, mais il ne demande pas trente-sept conceptions. Six gabarits couvrent l'essentiel : l'accueil, le hub des métiers, une famille de métiers, une fiche métier, le hub des formations et un niveau de formation. Les autres pages en sont des déclinaisons. Cette logique change la façon de traiter les retours créa : une correction passée sur les gabarits coûte six pages, la même passée après déclinaison en coûte trente-sept. Tout l'effort de validation se concentre donc sur ces six pages, avant de dupliquer.
Quatre pistes pour la recherche
Le site compte trente-sept pages et des centaines de métiers et de diplômes : sans recherche, personne ne trouve rien. Plutôt que d'en discuter, j'ai construit quatre prototypes fonctionnels sur le même index de données. Une palette de commandes ouverte au clavier, un panneau compact ancré sous la loupe, une barre pleine largeur qui déplie une grille de cartes, et une page de résultats filtrable par type et par famille. Chacun répond à un usage différent, du visiteur qui sait déjà ce qu'il cherche à celui qui explore. Les comparer en vrai coûte une journée et tranche une discussion qui aurait duré des semaines.
L'exécution
Les maquettes sont prototypées en HTML avant d'être portées, ce qui permet de valider les interactions réelles, un fil conducteur qui traverse la page, un effet de gommage au survol, un flux de couleurs qui suit le défilement, plutôt que de les décrire dans un document. Le site est ensuite développé sous Framer, avec un environnement de recette commenté par l'agence et la cliente, puis une formation pour qu'elles reprennent la main sur les contenus.
Où ça en est
Les pages prioritaires sont en ligne pour la rentrée, en amont de la campagne de communication de la fédération. Les pages restantes suivent, sur les gabarits déjà validés.