TP 12 : Concevoir les interactions et la mise en page responsive d'une application

1. Objectifs

   • Hiérarchiser les actions de chaque écran et concevoir un composant bouton complet
   • Placer les boutons selon la zone du pouce
   • Spécifier des animations utiles et accessibles
   • Calculer trois grilles de mise en page
   • Adapter les écrans à trois largeurs, mobile d'abord
   • Tester la mise en page sur plusieurs tailles et la documenter

1. Prérequis

   • Avoir suivi les leçons du chapitre « Boutons, animations et mise en page » : Les boutons (Call To Action) et leur disposition, Les animations dans une interface, La grille de mise en page, Concevoir une interface en Responsive Design.
   • Avoir réalisé le TP 11 : Élaborer la charte graphique d'une application : la charte graphique et le fichier tokens.css de CantineCampus existent. Sinon, utilisez celui de l'archive.
   • La seule « programmation » demandée consiste à modifier des valeurs dans un fichier de tokens.

1. Présentation du projet

   • La charte graphique de CantineCampus est validée. Avant le développement, le directeur du restaurant signale trois demandes :
   • Les demandes du directeur :
     • une tablette va être installée au comptoir, et le personnel veut consulter les commandes sur un ordinateur: l'application doit fonctionner sur toutes les tailles ;
     • des usagers ont passé leur commande deux fois parce que rien n'indiquait qu'elle était partie ;
     • sur certains téléphones, le bouton « Valider » est sous la ligne de flottaison: il faut faire défiler pour le trouver.
   • Vous concevez donc les boutons, les animations et la mise en page responsive des quatre écrans clés : menu du jour, panier, confirmation, suivi de commande.
   • Téléchargez l'archive du TP. Elle contient la demande du directeur (ressources/), le classeur modeles/grille-tp12.xlsx, le plan de la spécification (modeles/specification-modele.md) et une maquette responsive (maquette/cantinecampus-responsive.html) habillée par deux fichiers de tokens.

• La maquette s'ouvre dans un navigateur. Les boutons 360, 768, 1 280 et Libre changent la largeur du cadre de l'application. La touche G affiche la grille des colonnes, W la largeur et la classe actuelles, M simule le réglage « réduire les animations » et K le contrôle des contrastes.
• Le fichier maquette/tokens.css reprend la charte du TP 11 : remplacez-le par le vôtre. Le fichier maquette/tokens-mise-en-page.css contient les valeurs de ce TP : colonnes, marges, gouttières, taille des boutons, durées et courbes des animations. C'est le seul fichier que vous réglez.

1. Organisation du TP

   • Le TP est découpé en dix parties. Chacune indique sa durée, ses notions, ses consignes, une aide, un point de contrôle et des questions.
   • Chaque partie ajoute une section à votre spécification. Le classeur modeles/grille-tp12.xlsx vérifie la hiérarchie des boutons, contrôle les durées des animations, calcule les grilles et le taux de réussite des tests.
   • Trois règles s'appliquent : un seul bouton principal par écran; chaque animation a un rôle; même contenu sur toutes les tailles, seule la disposition change.
   • À la fin de chaque partie, enregistrez votre travail sur GitHub : un commit par partie permet de suivre votre progression.

1. Partie 0 : préparer le travail

⏱ 15 min

Notions mobilisées : Concevoir une interface en Responsive Design

• Dans votre dépôt ui-ux-design-bts, créez le dossier de ce TP :

cd ui-ux-design-bts
git pull
mkdir -p projet-cantinecampus/07-mise-en-page/boutons projet-cantinecampus/07-mise-en-page/animations projet-cantinecampus/07-mise-en-page/grilles projet-cantinecampus/07-mise-en-page/ecrans projet-cantinecampus/07-mise-en-page/tests projet-cantinecampus/07-mise-en-page/maquette
git add projet-cantinecampus/07-mise-en-page
git commit --allow-empty -m "Démarre le TP 12"
git push

• Copiez le classeur dans 07-mise-en-page/ et le dossier maquette/ de l'archive dans 07-mise-en-page/maquette/. Remplacez tokens.css et logo.svg par ceux de votre charte (TP 11).
• Lisez la demande du directeur (ressources/demande-directeur.md). Dans Figma, dupliquez le fichier de votre charte et ajoutez une page par partie : Boutons, Animations, Grilles, Écrans 360, Écrans 768, Écrans 1280.

📁 Dans le dossier : la demande annotée et les hypothèses de départ.

1. Partie 1 : inventorier les actions et les hiérarchiser

⏱ 35 min

Notions mobilisées : Les boutons (Call To Action) et leur disposition

• Dans l'onglet « Boutons », listez toutes les actions des quatre écrans : écran, action, fréquence (souvent, parfois, rarement), risque (aucun, erreur possible, irréversible).
• Attribuez à chaque action un niveau: principal, secondaire, tertiaire ou destructif. Le classeur vérifie qu'il y a un seul bouton principal par écran et que toute action irréversible est destructive.
• Rédigez le libellé de chaque bouton : verbe + objet, dans les mots du lexique validé au TP 6.
• Faites le test du coup d'œil avec deux personnes : écran affiché trois secondes, « Sur quoi appuieriez-vous ? ».

📁 Dans le dossier : l'onglet « Boutons » et les résultats du test du coup d'œil.

1. Partie 2 : concevoir le composant bouton

⏱ 30 min

Notions mobilisées : Les boutons (Call To Action) et leur disposition · Créer et respecter une charte graphique

• Dans Figma, créez le composant Bouton avec des variantes : niveau (principal, secondaire, tertiaire, destructif) × état (normal, survol, focus, appuyé, chargement, désactivé) × taille (standard 48 px, compacte 40 px pour l'ordinateur).
• Utilisez uniquement les variables et styles de votre charte. Ajoutez une propriété « icône » facultative.
• Vérifiez le contraste de chaque état (texte et fond) et la visibilité du focus.
• Dans tokens-mise-en-page.css, réglez les tokens du bouton (hauteur, marge interne, rayon) et vérifiez dans la maquette.

📁 Dans le dossier : la page Boutons de Figma et une capture des états.

1. Partie 3 : placer les boutons

⏱ 25 min

Notions mobilisées : Les boutons (Call To Action) et leur disposition

• Sur les quatre écrans en 360 px, placez l'action principale en bas, dans la zone du pouce. Sur les écrans qui défilent (menu, panier), utilisez une barre d'action fixe.
• Fixez une règle d'ordre (par exemple : secondaire à gauche, principal à droite) et appliquez-la partout, y compris dans les boîtes de dialogue.
• Éloignez les actions destructives et ajoutez la boîte de confirmation de « Annuler ma commande ».
• Vérifiez sur un téléphone de petite taille (360 × 640) que le bouton « Valider ma commande » est visible sans défiler.

📁 Dans le dossier : les quatre écrans 360 px annotés (zone du pouce, barre d'action, règle d'ordre).

1. Partie 4 : spécifier les animations

⏱ 35 min

Notions mobilisées : Les animations dans une interface

• Choisissez quatre animations, une par rôle au moins : A1 ajout au panier (retour), A2 ouverture du panier (transition), A3 envoi de la commande (état du système), A4 commande confirmée (plaisir).
• Pour chacune, rédigez la fiche dans l'onglet « Animations » : élément, déclencheur, rôle, ce qui change, durée, courbe, version réduite, texte annoncé. Le classeur contrôle que la durée est entre 100 et 500 ms et que la version réduite est prévue.
• Décrivez A1 en quatre parties (déclencheur, règle, retour, boucle), avec le cas « plat épuisé ».
• Montrez A1 et A3 dans le prototype Figma (Smart Animate), puis réglez les tokens de durée et de courbe dans tokens-mise-en-page.css. Testez avec la touche M.

📁 Dans le dossier : l'onglet « Animations », les fiches et une courte vidéo du prototype.

1. Partie 5 : construire les grilles

⏱ 30 min

Notions mobilisées : La grille de mise en page

• Dans l'onglet « Grille », saisissez pour chaque classe (compacte 360, moyenne 768, étendue 1 280) le nombre de colonnes, la marge, la gouttière et, pour l'étendue, la largeur du conteneur. Le classeur calcule la largeur des colonnes.
• Indiquez combien de colonnes occupent les blocs principaux : carte de plat, panier, formulaire. Le classeur calcule leur largeur.
• Créez les trois grilles dans Figma (Layout grid) et enregistrez-les comme styles de grille.
• Reportez les mêmes valeurs dans tokens-mise-en-page.css, puis vérifiez dans la maquette avec la touche G.

📁 Dans le dossier : l'onglet « Grille », les styles de grille Figma et une capture de la maquette avec la grille.

1. Partie 6 : adapter les écrans, mobile d'abord

⏱ 45 min

Notions mobilisées : Concevoir une interface en Responsive Design · La grille de mise en page

• Partez des écrans 360 px (parties 3 et 5), puis réalisez les mêmes écrans en 768 et 1 280 px avec les mêmes composants.
• Dans l'onglet « Adaptation », décrivez pour chaque composant (navigation, cartes, panier, barre d'action, formulaire) son comportement à chaque classe et le motif utilisé (empiler, révéler, changer la navigation, tableau ↔ cartes).
• Vérifiez qu'aucune fonction ne disparaît: le classeur compte les fonctions présentes à chaque classe.
• Pensez au mode d'interaction : zones tactiles de 48 px sur mobile et tablette ; survol et focus clavier sur ordinateur ; taille compacte des boutons autorisée seulement sur ordinateur.

📁 Dans le dossier : les 12 écrans Figma et l'onglet « Adaptation ».

1. Partie 7 : régler la maquette responsive

⏱ 30 min

Notions mobilisées : Concevoir une interface en Responsive Design · La grille de mise en page · Les animations dans une interface

• Dans tokens-mise-en-page.css, réglez toutes les valeurs : colonnes, marges et gouttières des trois classes, nombre de colonnes occupées par une carte, hauteur et rayon des boutons, durées et courbes.
• Passez la maquette à 360, 768, 1 280 et en Libre: étirez le cadre de 320 à 1 440 px et notez les largeurs où quelque chose casse.
• Contrôlez avec les touches : G (grille), W (classe), M (animations réduites), K (contrastes).
• Comparez avec vos écrans Figma : chaque écart est soit une erreur de token, soit une règle à préciser dans la spécification.

📁 Dans le dossier : tokens-mise-en-page.css et les captures de la maquette à 360, 768 et 1 280 px.

1. Partie 8 : tester sur trois largeurs

⏱ 35 min

Notions mobilisées : Concevoir une interface en Responsive Design · Évaluer l'utilisabilité des composants de l'interface

• Préparez quatre tâches (par exemple : ajouter le plat du jour au panier, choisir 12 h 15 et valider, retrouver et annuler sa commande, lire le menu de demain).
• Faites-les réaliser à trois personnes extérieures, chacune sur les trois largeurs (téléphone réel, tablette ou mode appareil 768, ordinateur), dans un ordre différent. Observez sans aider, comme au TP 6.
• Saisissez les résultats dans l'onglet « Test » : le classeur calcule le taux de réussite par tâche et par largeur.
• Pour chaque échec, cherchez la cause : bouton (hiérarchie, libellé), animation, grille ou adaptation. Corrigez les écrans et les tokens.

📁 Dans le dossier : l'onglet « Test » et la liste des corrections.

1. Partie 9 : documenter et présenter

⏱ 20 min

Notions mobilisées : Créer et respecter une charte graphique

• Rédigez la spécification en suivant modeles/specification-modele.md (6 à 10 pages) : boutons, animations, grilles, adaptation, tokens, résultats des tests.
• Ajoutez une section « Boutons, animations et mise en page » à votre charte et passez-la en version 1.1.
• Préparez une présentation de 5 minutes pour le directeur : ses trois demandes, vos solutions, une démonstration de la maquette aux trois largeurs et les chiffres du test.

git add projet-cantinecampus/07-mise-en-page projet-cantinecampus/06-charte
git commit -m "Ajoute les boutons, les animations et la mise en page responsive du TP 12"
git tag -a mise-en-page-v1 -m "Spécification des interactions et de la mise en page, version 1"
git push
git push origin mise-en-page-v1

• Variantes pour les binômes en avance : concevoir l'écran du comptoir (tablette en paysage, lecture à un mètre) ; ajouter un mode sombre et vérifier les états des boutons ; écrire la grille de l'écran « Menu du jour » en CSS Grid dans un fichier à part.
• Relisez la spécification : chaque bouton a un niveau, chaque animation un rôle, chaque composant un comportement aux trois largeurs, et chaque correction un résultat de test.

📁 Dans le dossier : la spécification en PDF, la charte 1.1 et le support de présentation.

1. Grille d'évaluation (sur 20)

1. Livrables

   • Le lien du dépôt GitHub, avec au moins un commit par partie et l'étiquette mise-en-page-v1.
   • La spécification (PDF), avec vos noms, 6 à 10 pages, et la charte en version 1.1.
   • Le classeur grille-tp12.xlsx complété.
   • Le fichier Figma (lien) : composant bouton, prototype des animations, grilles et 12 écrans.
   • Le dossier maquette/ avec vos deux fichiers de tokens, et le support de présentation.

1. Erreurs fréquentes

1. Pour aller plus loin

   • Transposer la grille et les points de rupture en Bootstrap 5 (classes col-md-*) ou en Flutter (LayoutBuilder).
   • Mesurer la performance des animations avec l'onglet « Performance » des outils de développement.
   • Concevoir une version montre connectée d'un écran (le suivi de commande) et en tirer les règles de l'extrême compact.

1. Bilan

   • Un écran a une action principale, placée dans la zone du pouce et conçue avec tous ses états.
   • Une animation a un rôle, une durée courte, une courbe naturelle et une version réduite.
   • Une grille de 4, 8 et 12 colonnes organise les écrans et facilite l'adaptation.
   • On conçoit mobile d'abord et on adapte avec des motifs connus, sans perdre de fonction.
   • La mise en page se valide par un test sur plusieurs largeurs, et se documente pour les développeurs.

Une application responsive ne se juge pas sur l'écran du designer, mais dans la main de l'usager, à midi, devant la cantine.