6.4 KiB
Maquette borne vs kiosk construit — decomposition et tracabilite
Auteur : BYAN. Note de tracabilite maquette -> code (appui oral RNCP Bloc 1 : "comment etes-vous passe de la maquette au code ?"). Source :
docs/design/maquette-borne.pdf(export Figma de l'ecole, 10 ecrans, format 1440x1024). Ecrans exportes un a un dansdocs/design/screens/.
1. Lecture d'ensemble
La maquette decrit un parcours de type McDonald's (Big Mac, Best Of, McCafe, arches M, Coca) : c'est la base de reference a rebrander en Wakdo.
Point central : les 10 "ecrans" ne sont pas 10 pages. Ce sont en realite ~4 ecrans de base plus un systeme de modales qui s'ouvrent par-dessus l'ecran de commande :
Accueil
-> Ecran de commande UNIQUE
(bandeau categories en haut + grille produits + panneau commande persistant a droite)
sur lequel s'ouvrent les modales de composition (taille menu, accompagnement, boisson, format/quantite)
-> Chevalet (sur place : saisie du numero)
-> Remerciement
Le kiosk construit, lui, eclate cet ecran unique en pages distinctes et n'a pas de panneau de commande persistant. C'est l'origine du sentiment "ca ne correspond pas".
2. Decomposition ecran par ecran
Ecran 1 — Accueil
- "Bonjour," + "Souhaitez-vous consommer votre menu sur place ou preferez-vous l'emporter ?"
- Deux grandes cartes : Sur Place (icone table) / A Emporter (icone sac).
- Fond : arches + Big Mac + Coca.
Ecran 2 — Ecran de commande (pivot)
- Bandeau categories horizontal (Menus actif, Sandwiches, Wraps, Frites, Boissons Froides, Encas, Desserts...) avec fleches rouges ◀ ▶ pour faire defiler.
- Titre de section "Nos menus" + sous-titre + grille de produits (image, nom, prix).
- Panneau de commande persistant a droite : numero de commande (72), "Sur place : 326", lignes de commande avec options en puces et icone corbeille, "TOTAL (ttc) 36,50 EUR", boutons "Abandon" / "Payer", logo W en haut.
- Cet ecran est le coeur de la maquette : tout le reste (sauf accueil/chevalet/remerciement) se joue ici ou en modale par-dessus.
Ecran 3 — Modale "Une grosse faim ?" (composition menu, etape 1)
- Choix de la taille : Menu Maxi Best Of / Menu Best Of.
- Bouton "Etape Suivante". Premiere etape d'un assistant en modale.
Ecran 4 — Modale "Choisissez votre accompagnement" (etape 2)
- Frites / Potatoes.
- Boutons "Retour" + "Etape Suivante".
Ecran 5 — Modale "Choisissez votre boisson" (etape 3)
- Carrousel de boissons (Eau, Coca, Coca Zero, Jus de pomme BIO, The...) avec ◀ ▶.
- Bouton "Ajouter le menu a ma commande" (fin de l'assistant).
Ecran 6 — Ecran de commande, categorie Boissons Froides (a la carte)
- Meme ecran pivot, categorie "Boissons Froides" active.
- Grille de 8 boissons avec prix unitaires (Eau 1 EUR, Coca 1.90 EUR, Fanta 1.90 EUR, Jus de pomme BIO 2.30 EUR...).
Ecran 7 — Selection d'un produit (etat)
- Meme grille, "Coca Cola" entoure en jaune : etat visuel de selection.
Ecran 8 — Modale "Une petite soif ?" (option produit a la carte)
- Taille 30Cl / 50Cl (+0.50 EUR pour le 50Cl).
- Stepper de quantite (- 1 +).
- Boutons "Annuler" / "Ajouter a ma commande".
Ecran 9 — Chevalet (sur place)
- "Pour etre servis a table," + "Recuperez un chevalet et indiquez ici le numero inscrit dessus".
- Grands chiffres
2 6 1+ bouton "Enregistrer le numero".
Ecran 10 — Remerciement
- "Toute l'equipe vous remercie, Et vous souhaite un bon appetit dans nos restaurants, A bientot !"
- Bouton "Nouvelle commande".
3. Maquette -> kiosk construit (mapping)
| Maquette | Kiosk construit | Verdict |
|---|---|---|
| 1. Accueil sur place / a emporter | index.html |
conforme |
| 2 + 6. Ecran de commande unique (bandeau + grille + panneau persistant) | eclate en categories.html -> products.html -> cart.html |
divergence structurante : multi-pages, et pas de panneau de commande persistant |
| (pas de page categories separee) | categories.html plein ecran "Que souhaitez-vous commander ?" |
ecran ajoute (la maquette met les categories en bandeau) |
| 3-5. Composeur menu = assistant modal en etapes | page-product-menu.js = composition libre |
divergence (le refactor "consommer les slots /api/menus" est deja en file P4) |
| 8. Modale d'option produit (taille + quantite) | product.html (page) |
divergence : page au lieu de modale |
| 9. Ecran chevalet dedie (saisie numero) | numero gere par l'API (chunk 1a), affiche en confirmation | manquant cote ecran |
| (aucun ecran de paiement) | payment.html "Carte bancaire / Especes" |
ecran ajoute par le build |
| 10. Remerciement | confirmation.html |
conforme |
4. Ecarts structurants (le fond du sujet)
- Paradigme inverse. Maquette = mono-ecran (un plan de commande avec categories en bandeau et un panneau recapitulatif persistant a droite, modales par-dessus). Build = multi-pages classiques (categories -> produits -> produit -> panier). C'est l'ecart structurant principal.
- Panneau de commande lateral absent. La piece centrale de la maquette (numero de commande, lignes editables avec corbeille, TOTAL ttc, Abandon / Payer, visible en permanence) n'est pas presente dans le build.
- Composition de menu. Maquette = assistant modal en etapes ; build =
composition libre cote client (
page-product-menu.js).
5. Rebrand McDonald's -> Wakdo
Le visuel de la maquette est du McDonald's litteral (Big Mac, Best Of, McCafe, arches, "Tous a l'eau by M"). Le rebrand vers Wakdo (logo W, catalogue propre) est attendu et legitime : le branding McDo n'est pas livrable. Le sujet de cette note n'est donc pas le rebrand mais la structure des ecrans.
6. Suite
Re-alignement du kiosk sur la maquette (panneau persistant + bandeau categories + composeur en modale) = chantier UI conduit via un cycle FD dedie. Backlog des divergences = section 3 ci-dessus.