Delivery
Tri de cartes : composez les maquettes de vos pages
Avant de dessiner un site, il faut décider ce que chaque page contient, dans quel ordre, et comment on passe de l'une à l'autre. Cet atelier en ligne reprend la méthode du tri de cartes : vous posez les blocs de chaque page à partir d'une bibliothèque de 98 cartes en 10 catégories (hero, avis clients, formulaire de devis, FAQ…), chacune avec le besoin qu'elle sert.
Le tri de cartes, à l'écran ou sur la table
98 cartes · 10 gabarits · designs sans IA · dossier de cadrage · sauvegarde dans votre navigateur
Pensé pour un ordinateur ou une tablette.
PDF de 73 pages A4 · classeur Excel · envoyés par email
Pour un atelier en salle, sans écran.
Deux chemins vers le même cahier des charges
Le même atelier existe à l'écran et sur papier. Les deux versions suivent les mêmes quatre temps et mènent au même document. Seul le style n'existe qu'à l'écran : sur papier, ce temps est volontairement laissé de côté.
- 1
Composer les pages
À l'écran
Vous créez vos pages en onglets, vides ou à partir d'un gabarit, et vous glissez les blocs de la bibliothèque dans trois zones : le premier écran, le corps et le bas de page. Le header et le footer sont communs à toutes les pages. Chaque carte dit à quel besoin elle répond ; sur chaque bloc posé, vous fixez une priorité (indispensable, utile, bonus) et ce qu'il doit contenir.
Sur papier
Les 98 cartes découpées passent de main en main et se posent sur le support de page, agrandi en A3, en trois zones. Une gommette donne la priorité, 18 cartes libres accueillent les blocs qui manquent, et la fiche persona et la fiche parcours gardent l'utilisateur au centre de la discussion.
- 2
Relire
À l'écran
La vue Maquette donne une feuille par page, à imprimer ou à enregistrer en PDF pour la discuter en équipe. Des repères signalent un premier écran trop chargé ou une page sans action. Le relevé s'exporte en CSV, et un lien de partage en lecture seule permet de faire relire le résultat.
Sur papier
En fin de séance, chaque support est photographié, puis le scribe reporte les cartes posées dans le classeur Excel livré avec le kit. Ses colonnes sont celles de l'export CSV de l'atelier : page, zone, ordre, code, priorité, décision, commentaire.
- 3
Styler
À l'écran
Le brief tient en une page : le client, une à cinq couleurs, le logo, le secteur, l'objectif du site et un ou deux styles. Le générateur rend chaque page dans ces styles, côte à côte, calculé dans votre navigateur et sans IA ; seules les photos viennent d'Unsplash, créditées. Les designs se téléchargent en HTML ou en PDF ; au premier téléchargement, je vous demande votre email une fois par visite (confidentialité). Ce sont des pistes pour se projeter, pas une maquette graphique finale.
Sur papier
Le papier s'arrête volontairement ici. Autour de la table, on décide du contenu, pas de l'apparence : les couleurs et les styles attendent la maquette graphique. Pour vous projeter avant, reprenez vos pages dans l'atelier en ligne.
- 4
Cadrer
À l'écran
À partir des blocs posés, du secteur et de l'objectif, la vue Cadrage liste les obligations réglementaires avec leur source, les questions à trancher, les fonctionnalités à prévoir, les outils tiers et les contenus à fournir. Chaque question prend un statut et une réponse, et le dossier s'exporte en Excel. Les obligations sont des repères à faire valider par un juriste : elles ne constituent pas un avis juridique. L'accessibilité en fait partie ; si votre site y est soumis, mon accompagnement RGAA prend le relais.
Sur papier
Les 26 fiches de cadrage sont en fin de kit. Chaque carte indique les fiches auxquelles elle renvoie : une fois les pages posées, vous savez lesquelles remplir. L'onglet Cadrage du classeur les reprend, une ligne par élément.
Transmettre : le cahier des charges
Les deux versions aboutissent au même dossier : une maquette par gabarit, la liste des blocs priorisés et un cadrage où les questions sont tranchées. Vous rédigez le cahier des charges à partir de là, et chaque prestataire consulté chiffre le même périmètre.
Choisir sa version
Préférer l'écran
Quand vous travaillez seul, à deux ou à distance, autour d'un écran partagé. Quand vous voulez voir vos pages mises en forme avec les couleurs du client, et partir d'un dossier de cadrage calculé à partir des blocs posés plutôt que de fiches à remplir.
Préférer le papier
Quand tout le monde est dans la même salle, en groupe de six à dix, sans écran. Les cartes passent de main en main, on discute autour de la table, et personne ne regarde son téléphone. Rien n'empêche ensuite de reprendre les pages dans l'atelier en ligne pour les designs.
Dans quel cadre utiliser le tri de cartes
Une refonte de site
C'est le cas où je l'utilise le plus. On part de l'existant, on retire tout, et on ne repose que les blocs dont on sait dire à quoi ils servent. Les débats sur l'apparence attendent la maquette graphique.
La création d'un site
Sans existant, le risque est de copier le site d'un concurrent. Le tri oblige à partir des questions de vos visiteurs et donne une arborescence et des gabarits défendables. C'est le point de départ de mes missions de delivery management.
Un cahier des charges avant de consulter des agences
Avec une maquette par gabarit et le dossier de cadrage, chaque agence chiffre le même périmètre. Les réponses deviennent comparables, et vous savez déjà ce que chaque page doit contenir avant la première réunion. Pour vérifier que le brief est complet, mon évaluateur de brief passe en revue ce qu'il doit trancher.
Une page qui ne convertit pas
On reconstruit la page carte par carte : que voit-on dans le premier écran, où est la preuve, où est l'action ? Le manque saute souvent aux yeux. C'est la première étape de mes diagnostics CRO, et un bon moyen d'embarquer les équipes dans le changement (voir mon approche de la conduite du changement).
Organiser l'atelier : participants, durée, déroulé
Qui inviter
Six à dix personnes, avec des métiers mélangés : commercial, support, marketing, direction, technique. Si vous le pouvez, ajoutez deux ou trois clients. Ce sont eux qui vous diront ce qui manque vraiment.
Combien de temps
Comptez trois heures pour six à douze pages, et autant pour la synthèse. Au-delà de douze pages, je découpe en deux séances.
Le déroulé
- 1Les personas : qui vient sur le site, avec quelle question.
- 2Le socle commun : header, menu principal et footer.
- 3Le tri page par page : premier écran, corps, bas de page.
- 4Le test des parcours : on suit chaque persona de page en page.
- 5La priorisation : indispensable, utile, bonus.
- 6Le relevé et la synthèse : une maquette par page et la liste des questions en suspens.
La règle d'or
On ne pose une carte que si l'on sait à quelle question de l'utilisateur elle répond. Si personne ne sait le dire, la carte reste dans la pioche.
Le kit à imprimer : 98 cartes, supports et fiches
Pour un atelier en salle, j'ai conçu une version papier de l'outil.
Le kit en PDF (73 pages A4) et le classeur de relevé en Excel, gratuits, envoyés par email. Votre adresse sert à l'envoi et n'est pas conservée, sauf si vous demandez la newsletter.
Chaque carte bloc garde une zone pour noter la question de l'utilisateur et indique les fiches de cadrage auxquelles elle renvoie. Les 26 fiches sont en fin de kit, et l'onglet Cadrage du classeur les reprend, une ligne par élément.
Le même atelier existe à l'écran : le dossier de cadrage interactif s'y calcule à partir des cartes posées, et le tout s'exporte en Excel.
Ce que contient le kit
- un mode d'emploi pour l'animateur ;
- 98 cartes blocs en 10 catégories, chacune avec son squelette, sa description, le besoin qu'elle sert et un emplacement pour la gommette de priorité ;
- 18 cartes libres pour les blocs qui n'existent pas encore ;
- un support de page A3 en trois zones, avec « d'où arrive-t-on », « page suivante » et « questions en suspens » ;
- une fiche persona ;
- une fiche parcours en 6 étapes ;
- en fin de kit, les fiches de cadrage pour préparer la spécification : chaque carte indique les fiches auxquelles elle renvoie ;
- le classeur Excel de relevé, avec un onglet Cadrage qui reprend les fiches.
Comment utiliser cet outil
Le brief du client (couleurs, secteur, objectif, styles) transforme ensuite ces maquettes filaires en designs stylés, et le dossier de cadrage liste les obligations, les questions à trancher et les fonctionnalités à prévoir pour le cahier des charges.
- 1Ouvrez l'atelier et créez vos pages, vides, à partir d'un gabarit ou de l'exemple
- 2Posez le header et le footer communs, puis glissez les blocs dans le premier écran, le corps et le bas de chaque page ; priorisez et annotez
- 3Remplissez le brief : client, couleurs, logo, secteur, objectif du site, un ou deux styles
- 4Générez les designs, comparez les deux styles côte à côte et téléchargez-les en HTML ou en PDF
- 5Ouvrez le dossier de cadrage, tranchez les questions et exportez-le en Excel pour rédiger le cahier des charges
Pourquoi ce critère compte
La plupart des refontes démarrent par une maquette graphique, et c'est là que les débats sur la couleur du bouton remplacent la question qui compte : à quelle question de l'utilisateur chaque bloc répond-il ? Le tri de cartes oblige à décider le contenu avant la forme. Chaque carte porte le besoin qu'elle sert et le cas où elle est utile, ce qui rend les arbitrages explicites : un premier écran tient en trois ou quatre blocs, une page sans action est une impasse, une page qui demande sans prouver convertit mal. La forme vient ensuite : les designs se discutent sur des pages déjà arbitrées. Et le dossier de cadrage fait le pont avec le cahier des charges, en listant pour les blocs posés les obligations réglementaires, les questions à trancher et les fonctionnalités à prévoir.
Un exemple concret
Une PME de services prépare la refonte de son site. En une séance, l'équipe construit l'accueil, le hub d'offres, une page d'offre, les réalisations, le devis et la page à propos. Elle renseigne ensuite le brief, compare deux styles sur les mêmes pages, puis part du dossier de cadrage pour trancher les questions ouvertes (formulaire de devis, cookies, accessibilité) avant d'écrire le cahier des charges et de consulter des prestataires.
Questions fréquentes
À quoi sert un tri de cartes pour un site web ?
À décider collectivement ce que chaque page contient et dans quel ordre, avant de dessiner. Chaque carte représente un bloc de contenu ou une fonctionnalité ; on ne la pose que si l'on sait à quelle question de l'utilisateur elle répond. Le résultat sert de squelette aux maquettes et de base au cahier des charges.
Combien de blocs faut-il par page ?
Trois ou quatre dans le premier écran, une douzaine au total pour la plupart des gabarits. Au-delà, plus rien ne ressort : il faut prioriser ou scinder la page. L'outil signale ces seuils comme des repères, pas comme des erreurs.
Pourquoi le premier écran doit-il rester court ?
Parce que c'est tout ce que l'utilisateur voit avant de décider s'il reste. Il doit y comprendre en quelques secondes où il est, ce qu'on lui propose et ce qu'il peut faire. Un hero, une promesse et un bouton suffisent souvent.
Que faire si un bloc n'existe pas dans la bibliothèque ?
Créez une carte libre : un nom et « à quoi elle sert ». Elle se pose comme les autres et apparaît dans l'export. Si vous ne savez pas dire à quel besoin elle répond, c'est souvent le signe qu'elle n'a pas sa place.
Quelle différence avec une maquette graphique ?
La maquette graphique décide de l'apparence ; le tri de cartes décide du contenu et de son ordre. Faire le second avant la première évite de discuter des couleurs alors que l'on n'a pas encore tranché ce que la page doit dire. Les designs générés par l'outil aident à se projeter, mais ne remplacent pas le travail d'un designer.
À quoi sert le générateur de designs ?
À se projeter avant la maquette graphique. À partir des pages construites et du brief, il rend chaque page dans un ou deux des six styles (minimaliste, corporate, éditorial, flat design, néo-brutaliste, organique), avec vos couleurs, votre logo et des textes, boutons d'action, icônes, illustrations et photos adaptés au secteur et à l'objectif du site. Deux styles s'affichent côte à côte ; « Nouvelle version » tire une autre variante et les versions restent dans le projet. Les designs se téléchargent en HTML (un fichier par style, toutes les pages) ou en PDF depuis la fenêtre d'impression.
Le générateur de designs utilise-t-il l'IA ?
Non. Les designs sont composés dans votre navigateur à partir de gabarits et de contenus préparés à l'avance pour chaque secteur, combinés selon vos choix. Aucune donnée du projet n'est envoyée à un service d'intelligence artificielle. Seules les photos sont chargées depuis les serveurs d'Unsplash.
D'où viennent les photos des designs et peut-on les réutiliser ?
Elles viennent d'Unsplash : je les ai sélectionnées à l'avance par secteur, elles sont chargées directement depuis Unsplash et le photographe est crédité sous chaque design, y compris dans le fichier HTML téléchargé. La licence Unsplash permet de les utiliser gratuitement, mais pas de les revendre telles quelles ; relisez-la avant de reprendre une photo sur votre site. Elles servent surtout à se projeter : pour le site définitif, prévoyez vos propres visuels.
Le dossier de cadrage remplace-t-il un cahier des charges ou un juriste ?
Non, ni l'un ni l'autre. Il donne des pistes pour rédiger le cahier des charges : à partir des blocs posés, du secteur et de l'objectif, il liste les obligations réglementaires avec leur source, les questions à trancher, les fonctionnalités à prévoir, les outils tiers à choisir et les contenus à fournir. Chaque question prend un statut (À poser, Tranchée, Sans objet) et une réponse, et le dossier s'exporte en Excel. Les obligations sont des repères à faire valider par un juriste ; elles ne constituent pas un avis juridique.
Peut-on l'utiliser à plusieurs ?
Oui, autour d'un écran partagé : une personne pose les cartes, le groupe discute et tranche. C'est d'ailleurs la meilleure façon de faire émerger les désaccords. Le bouton Partager crée un lien en lecture seule, valable 180 jours, pour faire relire le résultat (sans le logo ni les réponses du dossier de cadrage) ; chacun peut ensuite dupliquer le projet pour le modifier de son côté.
Que deviennent mes données ?
Le projet est enregistré dans votre navigateur, pas sur mon site. L'export JSON en garde une copie complète, logo et réponses du cadrage compris. Le lien de partage stocke une copie pendant 180 jours, sans le logo ni les réponses du dossier de cadrage. Au premier téléchargement des designs ou du dossier de cadrage, je vous demande votre email et votre profil, une seule fois par visite : ils me sont transmis pour que je puisse vous recontacter au sujet de votre projet, je ne les partage avec personne et vous pouvez me demander de les effacer. La newsletter reste facultative.
Comment récupérer mon travail ?
Le projet est sauvegardé automatiquement dans votre navigateur. Pour le garder ailleurs ou le transmettre, exportez-le en fichier JSON et réimportez-le plus tard. Vous pouvez aussi récupérer le relevé en CSV, imprimer une maquette par page (ou l'enregistrer en PDF), télécharger les designs en HTML ou en PDF et le dossier de cadrage en Excel.
Comment récupérer le relevé ?
Le bouton CSV exporte le relevé au format du classeur de l'atelier (groupe, page, zone, ordre, code, libellé, catégorie, priorité, décision, commentaire), prêt pour un tableur.
L'atelier fonctionne-t-il sur téléphone ?
Il s'ouvre, mais il est pensé pour un ordinateur ou une tablette : glisser des blocs, comparer deux designs ou parcourir le dossier de cadrage demande de la place. Sur petit écran, un bandeau le rappelle. Pour un atelier sans écran, le kit à imprimer prend le relais.
Peut-on avoir une version papier ?
Oui : le kit à imprimer (PDF de 73 pages A4) contient les 98 cartes, 18 cartes libres, le support de page, la fiche persona, la fiche parcours et les fiches de cadrage, avec le classeur Excel de relevé et son onglet Cadrage. Il est envoyé par email depuis la page de l'outil ; l'adresse sert à l'envoi et n'est pas conservée, sauf si vous demandez la newsletter.
Tester un autre outil
À lire aussi
Courbe du changement : ce que dit vraiment le modèle de Kübler-Ross, et comment s'en servir en projet
La courbe du changement attribuée à Elisabeth Kübler-Ross vient d'un livre de 1969 sur les patients en fin de vie, pas d'un modèle de management. Je reprends ce qu'elle a vraiment décrit, ce que la recherche en dit, et pourquoi je m'en sers seulement pour anticiper un creux de résistance, jamais comme calendrier ni pour disqualifier une objection.
Analyse d'impacts : la grille qui prévoit les résistances avant le déploiement
Je présente la grille d'analyse d'impacts que j'utilise pour prévoir les résistances avant de déployer un outil métier ou un outil IA : qui est touché, ce qui change dans sa journée, ce qu'il y perd et y gagne, le niveau d'impact et l'action qui en découle. Je m'appuie sur les travaux de Shaul Oreg pour montrer que les résistances naissent surtout des pertes anticipées. J'explique pourquoi cette analyse se fait au cadrage et comment elle nourrit les plans de formation et de communication.
Prototyper avec les futurs utilisateurs : l'adoption se joue avant le développement
L'adoption d'un outil métier se décide avant le développement, au moment où les futurs utilisateurs voient ou non une maquette. Je détaille comment tester un prototype cliquable sur des tâches réelles, ce que dit vraiment Nielsen Norman Group sur les cinq utilisateurs et ses limites, et pourquoi un test d'utilisabilité n'est pas une validation hiérarchique.