From d4531da9be27094b585acaaf47394511f657c2f6 Mon Sep 17 00:00:00 2001 From: Yvv Date: Mon, 2 Nov 2026 05:50:02 +0100 Subject: [PATCH] =?UTF-8?q?Lot=20U=20:=20note=20de=20conception=20du=20lec?= =?UTF-8?q?teur=20(sur=20place=20ou=20=C3=A0=20droite,=20consoles,=20natur?= =?UTF-8?q?es=20des=20modules,=20page=20courte)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- .../acte-certification/UX-lecteur.md | 143 ++++++++++++++++++ 1 file changed, 143 insertions(+) create mode 100644 docs/chantiers/acte-certification/UX-lecteur.md diff --git a/docs/chantiers/acte-certification/UX-lecteur.md b/docs/chantiers/acte-certification/UX-lecteur.md new file mode 100644 index 0000000..2929588 --- /dev/null +++ b/docs/chantiers/acte-certification/UX-lecteur.md @@ -0,0 +1,143 @@ +# Le lecteur d'un document — note de conception (lot U) + +> Demande d'Yvv du 2026-11-02 : « la page est trop longue, trop fournie et on ne comprend pas tout +> de suite » ; l'ordonnancement répété est « nul » ; distinguer les natures des modules (les +> textes, l'inertie, l'ordonnancement) ; pas de redondance entre les consoles sous l'article et +> celles du panneau ; le choix entre déplier sur place et ouvrir à droite doit être logique. +> Écrite avant le code. Elle tranche ; ce qu'Yvv devrait regarder est en fin de note. + +## Ce que montraient les captures d'avant + +`/tmp/ld-u-shots/avant/` (base neuve, Monnaie libre et groupe d'essai, bureau et téléphone) : + +- **6 300 px de haut sur bureau.** Trois articles en vigueur, puis **sept blocs « Ordre des + articles · … »** dans le texte en vigueur, dont cinq pour des sections qui n'y ont aucun article : + chaque bloc redit la liste des articles de sa section. Puis trente lignes de propositions. +- **Sur téléphone, le premier écran ne montre aucun article** : fil d'Ariane, titre, barre du + module titre, résumé, faits, aperçus sur deux lignes, langues. +- **Les mêmes mots pour des choses différentes** : « Propositions » est un geste sous l'article + (qui ouvre le panneau), un onglet du panneau, et le titre de la liste du bas. « Proposer » est un + onglet, « Proposer une modification » un geste, « Proposer un autre ordre » un troisième. +- **Le panneau a des onglets qui ne sont pas frères** : le panier (tout le document), les versions + d'un article, un formulaire, les détails d'une version, les réglages du groupe. +- Les trois natures ne se distinguaient que par le fond du bloc d'ordre (le lavis d'eau) et par + la ligne « inertie 3 / 5 · moyenne » écrite partout en toutes lettres. + +## La règle : sur place, ou à droite + +**Sur place** (on déplie, sous ce qu'on regarde) : **ce qui se lit et se décide sur ce qu'on a +sous les yeux**. Le vote d'une version, ses autres versions, son inertie, et l'ordre d'une section +(les poignées apparaissent sur les articles mêmes). + +**À droite** (un panneau, une feuille sur téléphone) : **ce qui s'écrit, ou travaille sur +plusieurs modules, ou se consulte à côté du texte**. Proposer (un article, un titre), le panier, +les détails d'une version (coquilles, traductions, objections, historique), les réglages de la +formule. + +Pourquoi : déplier garde l'œil sur le texte qu'on juge et ne cache rien du reste ; le panneau +donne la place d'écrire et de comparer sans perdre la page. Un geste qui agit sur un seul module +et tient en quelques lignes ne mérite pas une fenêtre ; un formulaire ou une vue d'ensemble ne +tient pas dans un accordéon. + +**Le vote d'une version se déplie là où la version se lit** : un texte en vigueur sous lui ; une +proposition d'article dans « Propositions en cours » ; une version du titre sous le titre ; un +ordre à la fin de sa section. Un seul vote déplié à la fois, toujours dans l'URL (`?vote=`). + +## Les consoles : avant, après + +| Fonction | Avant | Après (un nom, un endroit) | +|---|---|---| +| Voter une version | « Le vote » sous l'article (déplié) | **« Le vote »**, déplié sous la version | +| Les autres versions d'un article | « Propositions » sous l'article → onglet « Propositions » du panneau | **dans « Le vote »**, « Autres versions » : chacune ouvre son propre vote, là où elle se lit | +| Proposer un autre texte | « Proposer une modification » → onglet « Proposer » | **« Proposer une modification »** → panneau « Proposer » | +| Proposer un nouvel article | bouton en bas → onglet « Proposer » | inchangé | +| Proposer un autre titre | « Proposer un autre titre » → onglet « Proposer » | inchangé (panneau : on écrit) | +| Proposer un autre ordre | bloc d'ordre → « Proposer un autre ordre » → onglet « Proposer » (une liste répétée) | **« Réordonner »**, à la fin de la section : les poignées sur les articles mêmes, puis on vote | +| Voir les ordres proposés | une ligne parmi les articles, dans la liste du bas | **dans « Le vote » de l'ordre**, à la fin de la section | +| Changer l'inertie | dans « Le vote » | inchangé | +| Voter en lot | « Voter en lot » (en-tête), « Voter cette section » (liste) → onglet « Panier » | inchangé : deux portes, un seul panier | +| Coquilles, traductions, objections, historique | lien dans « Le vote » → onglet « Détails » | inchangé → panneau « Détails » | +| Réglages de la formule | lien en-tête et lien dans « Le vote » → onglet « Réglages » | inchangé → panneau « Réglages » | +| La liste du bas | « Propositions en cours » | inchangé, le seul endroit qui porte ce nom | + +Le panneau perd ses onglets : il montre **une chose à la fois**, nommée en tête (« Panier », +« Proposer », « Détails », « Réglages »), avec sa croix. Une ancienne adresse +`?onglet=propositions` déplie le vote de l'article, sans panneau. + +## Les natures des modules + +Un document se lit en **sections** ; une section contient des **articles** ; chaque module porte +une **inertie** ; chaque section a un **ordre** ; le document a un **titre**. Chaque nature a sa +voix, discrète, prise dans le design existant (sans bordure, arrondis, quatre ambiances) : + +- **Texte** (l'article, son titre et son corps) : la lecture. Titre en petites capitales d'eau, + corps en Literata. C'est le seul gros caractère de la page. +- **Section** : son nom en Literata italique, couleur d'encre douce. On sait où l'on est, sans + numéro. +- **Inertie** : **cinq crans** dessinés, à l'horizontale (▮▮▮▯▯), à côté de « inertie 3 / 5 · + moyenne ». Le niveau d'eau (le vote) est vertical ; les crans (le poids du texte) horizontaux : + deux formes qu'on ne confond pas. Les crans suivent l'inertie partout : sous l'article, sous le + titre, sur la ligne d'ordre, dans le vote, dans la liste. +- **Ordonnancement** : la **poignée** (six points). Elle marque la ligne d'ordre qui ferme une + section, puis apparaît sur chaque article quand on réordonne. Le mot est « Ordre de la + section » là où la section est sous les yeux ; « Ordre des articles ·
» ailleurs + (panier, messages), où il faut la nommer. +- **Titre du document** : une ligne sous le titre, de la même voix que la ligne d'ordre (petite, + Nunito, crans, état), avec « Le vote » et « Proposer un autre titre ». +- **Proposition seed** (lot S, `seedProposal`) : proposée au départ pour amorcer le vote, pas en + vigueur. Marque « proposition seed » en lavis d'eau, niveau d'eau visible, jamais le corps nu + d'un texte en vigueur. **Quand aucun article n'est en vigueur**, le texte en vigueur, vide, laisse + sa place aux Propositions seed, en entier, chacune avec son vote : on sait par où commencer. Elles + ne sont pas répétées dans la liste du bas. +- **Vote simulé** (lot V, `vote.simulated`) : les boutons de vote apparaissent partout comme si le + vote était ouvert, avec la marque « vote simulé » à côté. Ton vote s'affiche aussitôt, avec son + état (`myVoteState` : enregistré, en attente, simulé), et les voix en attente à côté des totaux + (`tallyPending`). + +## Une page courte, lisible d'un coup d'œil + +Ce qu'on voit d'abord, dans l'ordre : le titre du document et sa ligne de module ; le résumé ; une +ligne de faits et d'outils (articles en vigueur, propositions en cours, « Voter en lot », +« Réglages de la formule ») ; la lecture (en vigueur, aperçus, langue). Puis le texte. + +Ce qui est replié par défaut : + +- **Le vote** de chaque version, et dedans la formule et le changement d'inertie (comme avant). +- **L'ordre d'une section** : une seule ligne à sa fin, jamais la liste. Il n'apparaît que pour une + section d'au moins deux articles, **à la fin de la section là où elle se lit** : dans le texte en + vigueur si elle y a un article, sinon à la fin de sa section dans « Propositions en cours ». La + liste des articles ne se lit qu'en réordonnant, ou dans le vote d'un ordre proposé (ses + déplacements marqués). +- **Les sections de « Propositions en cours »** : une ligne par section, son nom, le nombre + d'articles proposés et, en petit, le niveau d'eau de chacun (on voit où le soutien monte sans + rien ouvrir). On déplie une section d'un geste ; « Tout déplier » les ouvre toutes ; un filtre + (bien cotées, les miennes) ou un vote déplié par l'URL ouvre la section qui le contient. + +## Réordonner une section + +À la fin de la section, « Réordonner » : les articles de la section (ceux en vigueur et ceux +seulement proposés, marqués « proposé ») se replient sur leur titre, une poignée devant chacun. + +- **Au glisser** : on prend la poignée, on dépose à la nouvelle place. +- **Au clavier** : chaque article est un bouton ; les flèches haut et bas le déplacent, le focus + le suit, la nouvelle place est annoncée (« « … » en place 2 sur 3 »). +- **Sans glisser** : un clic sur un article le choisit, un clic sur un autre le met à sa place ; ou + ses flèches monter / descendre (cibles de 44 px sur téléphone). + +Puis **« Proposer cet ordre »** : l'ordre part au vote et son vote se déplie aussitôt, au même +endroit, avec « Pour » et « Contre ». Si l'ordre formé est l'ordre en vigueur, le bouton reste +éteint et le dit ; s'il est déjà proposé, on vote celui-là au lieu d'en créer un double. +« Annuler » rend la section telle qu'elle se lisait. + +Routes inchangées (ADR 0009) : `POST /api/units/{id}/order` pour proposer, le vote d'une version +pour voter. + +## Ce qu'Yvv devrait regarder + +- Les sections de « Propositions en cours » **repliées par défaut** : la page tient en un écran + et demi, mais une proposition demande un geste de plus pour être vue. +- Le panneau **sans onglets** : on ne passe plus des détails au panier d'un clic dans le panneau ; + on ferme, puis on ouvre l'autre. +- Les ordres et les titres proposés **ne sont plus des lignes** de « Propositions en cours » : ils + se lisent et se votent à leur module (le panier les garde). +- Quand rien n'est en vigueur, les Propositions seed **en tête, en entier**.