Wireframes des écrans clés
29 écrans de la V1, en HTML autonome. Chaque fichier contient son CSS, ne charge aucune ressource externe et se lit à 375 px comme à 1280 px. Les liens entre écrans suivent les parcours réels : on peut traverser une inscription, une publication de fiche, une candidature et une décision d'administration en cliquant.
Gris neutres, une seule police système, aucun logo. L'identité visuelle viendra plus tard. Les couleurs n'existent pas encore : chaque état porte un mot écrit.
29 fichiers d'écran, un index, aucune dépendance.
Comment lire un wireframe
- La barre du haut et les notes du bas sont des annotations, pas de l'interface. Elles donnent l'identifiant, le public, les états montrés et les points qui dépendent de l'architecte.
- [texte provisoire] marque un texte qui ne vient pas de
docs/contenus/. Un badge couvre le bloc qu'il précède. Les textes sourcés portent la mention « Texte source » et le chemin du fichier. - Les données de local sont des exemples : « Commerce de l'Exemple », « Rue de l'Exemple 12 », montants et dates. Aucun local réel n'existe encore. Les prix des abonnements, eux, viennent des décisions (CHF 40, 50, 120).
- Ce qui est masqué l'est pour de vrai : adresse exacte absente du texte et de la carte en vue partielle, photos remplacées par des zones hachurées, aucun bouton de contact.
- Clavier et lecteur d'écran : lien d'évitement, focus visible de 3 px, libellés de champs visibles, tableaux avec en-têtes, états écrits en toutes lettres.
- Mobile d'abord : les tableaux d'administration passent en cartes empilées sous 700 px, les espaces connectés ont une barre basse sous 900 px, le catalogue garde toujours une vue liste.
Ce qui n'est pas dessiné
Ces écrans existent dans l'inventaire mais ne sont pas dans cette série. Aucun n'est nécessaire pour comprendre les parcours.
- CPT-02 (connexion) : dessiné dans CPT-01, en panneau secondaire. CPT-03 (vérification d'e-mail), CPT-04 (mot de passe oublié), CPT-05 (mon compte) : formulaires courts, sans décision de conception nouvelle.
- ADM-04 (fiches des hébergeurs), ADM-05 (lecture de la messagerie), ADM-06 (abonnements) : même gabarit de tableau que ADM-02. La vue administrateur de la messagerie est décrite dans MSG-01 et MSG-02.
- PUB-06, PUB-07, PUB-08 : regroupés dans un seul fichier, trois sections et trois ancres. Les routes restent distinctes côté technique.
- HEB-05, CAT-05, MSG-04 n'existent pas : la numérotation est celle de l'inventaire.
Rien de la V2 n'apparaît ici. Aucun bouton de signature électronique, aucun avis, aucun témoignage, aucun blog, aucun contrat stocké. La seule mention du contrat renvoie au téléchargement du contrat type dans RES-01.
Pages publiques
| ID | Écran | Public | Ce que montre le wireframe |
|---|---|---|---|
| PUB-01 | Accueil | visiteur non inscrit | Deux appels à l'action, l'histoire du sous-sol de 85 m², trois locaux à la une, état vide |
| PUB-02 | Comment ça marche | visiteur non inscrit | Les deux parcours, hébergeur en 7 étapes et demandeur en 6 |
| PUB-03 | Tarifs | visiteur non inscrit | Trois formules, hébergeur gratuit, sans reconduction, test déjà utilisé |
| PUB-04 | FAQ | visiteur non inscrit | 7 questions hébergeur, 10 questions demandeur, réponses à écrire |
| PUB-05 | Qui sommes-nous et contact | visiteur non inscrit | Présentation de Delphine, mention de Malika Khan, formulaire de contact et son erreur |
| PUB-06/07/08 | Pages légales | visiteur non inscrit | Mentions légales, CGU, confidentialité : un gabarit, trois routes |
Catalogue et fiches
| ID | Écran | Public | Ce que montre le wireframe |
|---|---|---|---|
| CAT-01 | Catalogue, vue non abonné | visiteur, demandeur non abonné | Filtres dépliés, compteur, cartes avec adresse masquée, carte, états vides |
| CAT-02 | Catalogue, vue abonné | demandeur abonné, hébergeur | Même écran en vue abonné : adresse, disponibilités, photos, candidature |
| CAT-03 | Fiche d'un local, vue non abonné | visiteur, demandeur non abonné | Photos floutées, description tronquée, carte au quartier, encart d'abonnement |
| CAT-04 | Fiche d'un local, vue abonné | demandeur abonné, hébergeur | Fiche complète, matériel, contraintes du mode, disponibilités, contrat hors plateforme |
Compte et ressources
| ID | Écran | Public | Ce que montre le wireframe |
|---|---|---|---|
| CPT-01 | Créer un compte et se connecter | visiteur | Choix du rôle, e-mail, mot de passe, pays en lecture, CGU, connexion, erreurs |
| RES-01 | Ressources et contrats types | tous les inscrits, visiteur en lecture | Documents par catégorie, cadenas en vue visiteur, téléchargement en vue inscrit |
Espace hébergeur
| ID | Écran | Public | Ce que montre le wireframe |
|---|---|---|---|
| HEB-01 | Tableau de bord hébergeur | hébergeur | Trois étapes, case des cadres légaux horodatée, fiche en brouillon, état sans fiche |
| HEB-02 | Créer la fiche du local | hébergeur | Formulaire long en huit sections, choix du mode et ses contraintes, photos, erreurs |
| HEB-03 | Vérifier et publier | hébergeur | Aperçu visiteur et abonné, points manquants cliquables, publication bloquée |
| HEB-04 | Calendrier des disponibilités | hébergeur | Calendrier lisible sans couleur, périodes listées, option sur demande, blocage manuel |
Espace demandeur
| ID | Écran | Public | Ce que montre le wireframe |
|---|---|---|---|
| DEM-01 | Justificatifs du demandeur | demandeur | Trois pièces, états, attestation sur l'honneur, bouton inactif motivé |
| DEM-02 | Suivi du dossier, dossier refusé | demandeur | Dossier refusé, motif en clair, pièces à remplacer, états validé et suspendu |
| DEM-03 | Choix de l'abonnement | demandeur validé | Trois formules, dates calculées, test désactivé, paiement unique |
| DEM-04 | Paiement de l'abonnement | demandeur validé | Récapitulatif, zone du prestataire, aucun champ de carte, CGU de vente |
| DEM-05 | État du paiement | demandeur validé | Payé, en attente, échoué : trois retours du prestataire |
| DEM-06 | Tableau de bord demandeur | demandeur | Abonnement, dossier, candidatures, bandeaux J-14, expiré, suspendu |
Messagerie
| ID | Écran | Public | Ce que montre le wireframe |
|---|---|---|---|
| MSG-01 | Liste des conversations | hébergeur, demandeur, administratrice | Liste, non-lus écrits en toutes lettres, encart de transparence, état vide |
| MSG-02 | Conversation | hébergeur, demandeur, administratrice | Fil, rédaction, décliner avec motif, rappel du contrat hors plateforme, lecture seule |
| MSG-03 | Envoyer une candidature | demandeur abonné | Dates, durée, message, dossier vérifié sans pièces, plage devenue indisponible |
Administration
| ID | Écran | Public | Ce que montre le wireframe |
|---|---|---|---|
| ADM-01 | Tableau de bord de l'administratrice | administratrice | Compteurs, file de dossiers, dernières actions, plateforme neuve |
| ADM-02 | Dossiers des demandeurs | administratrice | Tableau des dossiers, filtres, renvois, cartes empilées sur téléphone |
| ADM-03 | Dossier d'un demandeur | administratrice | Identité, trois pièces, attestation horodatée, refus motivé, note interne |
Erreurs
| ID | Écran | Public | Ce que montre le wireframe |
|---|---|---|---|
| ERR-01 | Pages d'erreur | tous | 404, 403 abonnement, 403 droits, session expirée |
Dépend de l'architecte
- Paiement : prestataire, redirection ou formulaire intégré, moyens proposés, retour de paiement. Les écrans DEM-04 et DEM-05 montrent les trois retours possibles, sans jamais débloquer sur le retour du navigateur.
- Carte : fournisseur, positions approximatives pour les non-abonnés, exactes pour les abonnés, vue liste obligatoire.
- Photos : stockage, poids, formats, reprise après coupure, ordre d'affichage.
- Accès administrateur : double authentification et session plus courte, mentionnées sur CPT-01, pas dessinées.
- E-mails : Brevo en production, capture locale en test. Chaque e-mail cité est déclenché par un événement, sauf la demande de pièce d'assurance, déclenchée à la main en V1.
Questions ouvertes
- Libellé des appels à l'action. Les pages de
docs/contenus/disent « J'héberge un espace » et « Je cherche un espace ». L'inventaire et les parcours disent « Je propose un espace » et « Je cherche un local ». Les wireframes suivent les contenus publics. À arbitrer une fois pour toutes. - Délai de traitement d'un dossier. Affiché [À COMPLÉTER] sur DEM-01 et DEM-02. Valeur recommandée : 2 jours ouvrables.
- Avis croisés dans les pages publiques.
comment-ca-marche.mdles annonce, alors qu'ils sont en V2. Les wireframes ne les affichent pas ; le texte source reste à corriger. - Troisième justificatif. Le type de document accepté pour « déclaration pour vendre » reste à préciser avec Malika Khan.
- Coordonnées. Adresse de l'éditeur, adresse postale et coordonnées de Malika Khan : absentes des sources, laissées en [À COMPLÉTER].