diff --git a/docs/design/README.md b/docs/design/README.md index 281a8c9..0f9b183 100644 --- a/docs/design/README.md +++ b/docs/design/README.md @@ -3,6 +3,8 @@ ## Fichiers - `maquette-borne.pdf` : maquette ecrans complete fournie avec le brief ecole +- `screens/` : les 10 ecrans de la maquette exportes en PNG (un par ecran) +- `maquette-vs-build.md` : decomposition ecran par ecran + tracabilite maquette vs kiosk construit (ecarts structurants) ## Source en ligne diff --git a/docs/design/maquette-vs-build.md b/docs/design/maquette-vs-build.md new file mode 100644 index 0000000..26d642e --- /dev/null +++ b/docs/design/maquette-vs-build.md @@ -0,0 +1,121 @@ +# 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 dans `docs/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 +![Accueil](screens/01-accueil.png) +- "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) +![Ecran de commande menus](screens/02-commande-menus.png) +- **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) +![Modale taille menu](screens/03-modale-taille-menu.png) +- 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) +![Modale accompagnement](screens/04-modale-accompagnement.png) +- **Frites** / **Potatoes**. +- Boutons "Retour" + "Etape Suivante". + +### Ecran 5 — Modale "Choisissez votre boisson" (etape 3) +![Modale boisson](screens/05-modale-boisson.png) +- 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) +![Commande boissons](screens/06-commande-boissons.png) +- 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) +![Boisson selectionnee](screens/07-boissons-selection.png) +- Meme grille, "Coca Cola" entoure en jaune : etat visuel de selection. + +### Ecran 8 — Modale "Une petite soif ?" (option produit a la carte) +![Modale format quantite](screens/08-modale-format-quantite.png) +- Taille **30Cl / 50Cl** (+0.50 EUR pour le 50Cl). +- **Stepper de quantite** (- 1 +). +- Boutons "Annuler" / "Ajouter a ma commande". + +### Ecran 9 — Chevalet (sur place) +![Chevalet](screens/09-chevalet.png) +- "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 +![Remerciement](screens/10-remerciement.png) +- "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) + +1. **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. +2. **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. +3. **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. diff --git a/docs/design/screens/01-accueil.png b/docs/design/screens/01-accueil.png new file mode 100644 index 0000000..b91c532 Binary files /dev/null and b/docs/design/screens/01-accueil.png differ diff --git a/docs/design/screens/02-commande-menus.png b/docs/design/screens/02-commande-menus.png new file mode 100644 index 0000000..e309520 Binary files /dev/null and b/docs/design/screens/02-commande-menus.png differ diff --git a/docs/design/screens/03-modale-taille-menu.png b/docs/design/screens/03-modale-taille-menu.png new file mode 100644 index 0000000..2504d1c Binary files /dev/null and b/docs/design/screens/03-modale-taille-menu.png differ diff --git a/docs/design/screens/04-modale-accompagnement.png b/docs/design/screens/04-modale-accompagnement.png new file mode 100644 index 0000000..0e45681 Binary files /dev/null and b/docs/design/screens/04-modale-accompagnement.png differ diff --git a/docs/design/screens/05-modale-boisson.png b/docs/design/screens/05-modale-boisson.png new file mode 100644 index 0000000..e835aba Binary files /dev/null and b/docs/design/screens/05-modale-boisson.png differ diff --git a/docs/design/screens/06-commande-boissons.png b/docs/design/screens/06-commande-boissons.png new file mode 100644 index 0000000..d358170 Binary files /dev/null and b/docs/design/screens/06-commande-boissons.png differ diff --git a/docs/design/screens/07-boissons-selection.png b/docs/design/screens/07-boissons-selection.png new file mode 100644 index 0000000..66b49f5 Binary files /dev/null and b/docs/design/screens/07-boissons-selection.png differ diff --git a/docs/design/screens/08-modale-format-quantite.png b/docs/design/screens/08-modale-format-quantite.png new file mode 100644 index 0000000..5e6f8f2 Binary files /dev/null and b/docs/design/screens/08-modale-format-quantite.png differ diff --git a/docs/design/screens/09-chevalet.png b/docs/design/screens/09-chevalet.png new file mode 100644 index 0000000..5560a90 Binary files /dev/null and b/docs/design/screens/09-chevalet.png differ diff --git a/docs/design/screens/10-remerciement.png b/docs/design/screens/10-remerciement.png new file mode 100644 index 0000000..e1054dd Binary files /dev/null and b/docs/design/screens/10-remerciement.png differ