--- issueRef: "#162" version: 6 updatedBy: {"kind":"agent","agent_id":"57695b92-24d0-4876-837c-76116e70a6ae"} updatedAt: 1785248859225 --- ## #162 — Cadrage UX compaction étape chrono+reps / chrono+score libre (UX, 2026-07-28) Statut : **cadrage exploitable, avis rendu sur la proposition utilisateur**. Écran concerné : exécution de séance téléphone (module `Séquence` d'étape, [[gametime-ux-exercise-steps]]). La montre n'est pas concernée (cas déjà traité en compact pour l'équivalent montre par #140). Avis sur la proposition initiale : **globalement bonne direction** (regrouper reps+chrono sur une ligne, alléger les CTA), avec deux ajustements : réduire aussi les titres empilés en légendes courtes sur la même ligne que leur valeur (pas seulement fusionner reps+chrono), et séparer les CTA de contrôle du chrono (Lancer/Réinitialiser, fréquents, faible enjeu) des CTA de navigation d'étape (Passer l'étape / Étape suivante, plus haut niveau) pour éviter une seule rangée de 4 boutons qui redevient dense. ### 1. Hiérarchie d'information 1. Nom de l'étape (inchangé, une ligne, ellipse si trop long). 2. Les deux données de l'étape **sur une seule ligne à deux colonnes** : répétitions à gauche, chrono score à droite (ou l'inverse si le chrono est la donnée qui progresse activement — garder la donnée "vivante" côté où l'œil revient, à trancher avec DevFrontend selon l'existant visuel). 3. Contrôles du chrono (Lancer/Réinitialiser), rattachés visuellement à la valeur du chrono, pas à une rangée globale. 4. CTA de navigation d'étape, en bas, groupés. ### 2. Disposition concrète **Cas A — étape Répétitions + chrono score d'étape :** ```text Dribble main droite RÉPÉTITIONS CHRONO SCORE 10 00:12 [▶] [↺] [ Passer l'étape ] [ Étape suivante ] ``` - Légendes (`RÉPÉTITIONS`, `CHRONO SCORE`) fusionnées en petite légende juste au-dessus de leur valeur, plus de titre pleine largeur séparé. - `[▶] [↺]` : icônes seules (pas de texte), ~32dp, rattachées sous la valeur du chrono — réutiliser le même jeu d'icônes que le bouton toggle réduit déjà spécifié pour la montre (#140), pas un nouveau vocabulaire visuel. - CTA du bas **côte à côte** (`Passer l'étape` en contour/secondaire, `Étape suivante` en plein/primaire) plutôt qu'empilés plein largeur — exception assumée par rapport aux boutons de série (`Terminer la série`/`Passer la série`, eux restent empilés) car le problème à résoudre ici est spécifiquement la hauteur cumulée, pas la clarté de hiérarchie. **Cas B — étape Temps (décompte) + score libre :** ```text Pompes tempo 00:07 Score (paniers) [-] 5 [+] [ Passer l'étape ] ``` - Le chrono reste la donnée dominante (plus grande) car il progresse seul et pilote l'avancement automatique (cf. [[gametime-ux-exercise-steps]] : passage auto à 0). - Le score libre passe d'un champ texte + clavier système à un **stepper +/-** compact (même pattern que le score montre #118), sur la même ligne que le chrono plutôt qu'en dessous. - Un seul CTA en bas (`Passer l'étape`) : pas d'`Étape suivante` ici, l'avancement est automatique à la fin du décompte. ### 3. À compacter / supprimer / déplacer - Supprimer les titres pleine largeur (`RÉPÉTITIONS`, `Chrono score d'étape`) en tant que blocs séparés → deviennent des légendes courtes au-dessus de leur valeur, sur la même ligne que l'autre donnée. - Déplacer `Étape suivante` : il quitte sa position isolée entre le bloc reps et le bloc chrono, rejoint la rangée de CTA du bas. - Compacter `Lancer`/`Réinitialiser` en icônes seules, rattachées au chrono plutôt qu'en rangée de boutons texte pleine largeur. - Remplacer le champ texte + clavier du score libre par un stepper +/-, ce qui supprime aussi le risque de clavier system qui recouvre l'écran (cf. point 4). ### 4. Garde-fous lisibilité mobile - Le stepper +/- évite l'ouverture du clavier système, qui sur petit écran peut masquer le chrono pile au moment où l'utilisateur en a besoin (risque identifié sur le cas B). - Ne pas descendre le chiffre Anton du chrono/reps sous la taille de lisibilité déjà actée ailleurs dans l'app pour l'effort physique (lecture rapide, doigts/yeux sollicités) — si la place manque, réduire les marges/paddings avant de réduire la taille des chiffres. - Cibles tactiles des icônes `[▶] [↺]` : conserver un minimum tactile confortable malgré la réduction visuelle (même logique que la réduction 48dp→32dp déjà validée pour le cas montre #140, qui reste un plancher acceptable, pas un objectif à réduire davantage). - Rangée à deux colonnes : tester sur la largeur d'écran la plus étroite supportée avant de valider — si les deux légendes + valeurs entrent en collision, réduire d'abord l'espacement interne, pas passer les deux CTA de navigation à trois colonnes. ### 5. Libellés / navigation Aucun nouveau libellé, aucun changement de navigation. Les libellés existants (`RÉPÉTITIONS`, `Chrono score d'étape` → légende courte, `Passer l'étape`, `Étape suivante`, `Score de l'étape (unité)`) sont conservés tels quels, seule leur mise en page change. Pas d'impact sur le module séquence en configuration (formulaire exercice), uniquement sur l'écran d'exécution.