Ilies AllaliDonner un visage aux métiers de l’électricité
Trente-sept pages tenues par six gabarits, et un quiz de deux minutes pour un public qui quitte un site dès qu’il ne comprend pas à quoi il sert.
Le SERCE veut attirer des jeunes vers des métiers de l’électricité qui recrutent et qu’on connaît mal. Le site présente les métiers, les formations et les entreprises, pour des collégiens, des lycéens et des adultes en reconversion, et j’ai pris la chaîne entière, des parcours utilisateurs jusqu’au site développé sous Framer.
- visites le premier mois, campagne comprise
- 18 590
- des visites sur mobile
- 82 %
- visiteurs sur le quiz d’orientation
- 3 010
- pages en ligne le 15 septembre
- 37
Les jeunes d’abord
Avant de dessiner quoi que ce soit, NéNo a réuni cinq jeunes de 15 à 22 ans en atelier, pile la cible du site. Leur verdict tenait en une phrase, s’ils ne comprennent pas à quoi sert un site en quelques secondes, ils partent. Ils rejetaient les pages denses et le vocabulaire technique, et citaient Netflix ou TikTok comme références d’interface claire, ce qui a fait sortir le ton institutionnel du projet.
Le mobile d’abord
Un collégien qui explore n’a pas les mêmes besoins qu’un adulte en reconversion qui veut savoir combien de temps prendra sa formation. J’ai posé les personas et les parcours avant l’arborescence, puis dessiné en mobile d’abord, et le premier mois lui a donné raison, 82 % des visites se font sur un téléphone. La navigation repose sur deux entrées, les métiers et les formations, ce qui oblige chaque page à choisir la sienne.
Une palette qui ne classe personne
La base est claire et chaleureuse, avec un surlignage manuscrit sur les mots qui comptent, loin du bleu technique du secteur. La charte compte vingt-neuf teintes, et je n’en ai attribué aucune à une famille de métiers, pour qu’un jeune ne se range pas dans une case avant d’avoir exploré. Les teintes pâles donnent un rythme au défilement, et seul le jaune pâle garde un sens, celui des niveaux de formation.
37 pages, six gabarits
Six gabarits couvrent l’essentiel du site, l’accueil, le hub des métiers, une famille, une fiche métier, le hub des formations et un niveau de formation. C’est rapide à étendre, sauf qu’un défaut dans un gabarit se répète partout, donc l’essentiel de la validation s’est fait sur ces six pages avant de dupliquer.
Un quiz en six questions
Le quiz oriente vers quatre domaines en six questions, deux minutes environ, et plus de 3 000 visiteurs l’ont ouvert le premier mois. Un domaine qui sort net donne le résultat, une égalité donne un profil hybride, et le cas 2-2-2 est tranché par la sixième question, une règle validée avec le client avant la recette.
La recherche, comparée en vrai
Plutôt que de débattre de la recherche, j’ai construit quatre prototypes qui marchent sur le même index, une palette de commandes, un panneau sous la loupe, une barre qui déplie une grille de cartes et une page de résultats filtrable. Ça a pris une journée de plus, et la discussion portait sur ce qu’on voyait à l’écran plutôt que sur des impressions.
Valider le geste en HTML avant Framer
Je prototype en HTML avant de monter une page dans Framer, pour juger les vraies interactions, un fil qui traverse la page, un gommage au survol, des couleurs qui suivent le défilement. Ça revient à faire deux fois la même page, mais aucun document ne permet de juger un geste.