Files
decision/docs/chantiers/acte-certification/UX-lecteur.md
T

16 KiB
Raw Blame History

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.

Combien de oui pour passer, combien de non pour bloquer

Yvv, 2026-11-02 : « combien il faut de oui pour passer et combien de non pour maintenir l'opposition ». Le serveur le dit (ADR 0013 : yesNeeded, noNeeded, quorum) ; l'écran le répète sans rien calculer (needOf, web/src/lib/labels.ts), le quorum en infobulle, jamais en titre :

Cas Sous l'article déplié En bref, dans la liste
aucun vote « 9 oui sur 12 votants pour passer » « 9 oui sur 12 »
des votes, des « non » la tiennent « 11 oui pour passer · 4 non pour bloquer » « passe à 11 oui · bloquée à 4 non »
sous le quorum, les absents la tiennent (noNeeded = 0) « 9 oui pour passer · le quorum la bloque » « passe à 9 oui »

Cette ligne remplace « Seuil : R voix pour » sous l'article (R à la participation du moment induisait en erreur dès qu'un « non » arrivait) ; R reste dans « La formule du seuil ». « Il manque N voix pour. » reste : c'est yesNeeded − pour.

Le quorum d'un article

Visible seulement quand le serveur le permet (canSetQuorum : l'auteur de la première version, avant le premier vote ; un administrateur pour un texte du seed), dans le vote déplié, sous l'inertie : un champ nombre, le défaut du cran rappelé, « Revenir au défaut (n) ». Les refus du serveur sont dits dans les mots de la personne : hors bornes (400), un vote déjà là (409), pas l'auteur (403). Les bornes restent au serveur : l'écran ne les recalcule pas.

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.
  • La ligne d'ordre, ses gestes discrets comme ceux d'un article (au survol sur bureau, toujours visibles sur téléphone) : elle ne crie plus, mais « Réordonner » se trouve au survol.
  • Le mot court dans la liste : « passe à 11 oui · bloquée à 4 non ».

Après la relecture de M7 (lot U2, 03/11)

Les mineurs de la relecture, tranchés ainsi (captures /tmp/ld-u2-shots/, avant et après) :

  • Une information à un seul endroit dans le vote déplié : l'inertie se dit une fois, dans « Inertie », ses crans avec elle (« Inertie · ▮▮▯▯▯ 2 / 5 · basse ») ; seul le vote d'un changement d'inertie dit sous ses totaux le cran où il se vote. La ligne d'état d'une Proposition seed (totaux, oui, crans, autres versions) s'efface tant que son vote est déplié juste dessous ; les gestes gardent leur place (à droite sur bureau, à gauche sur téléphone). « Autres versions » ne nomme pas les versions déjà listées à côté (un article à deux versions, dans la liste) ; il nomme encore le texte en vigueur, lu plus haut.
  • La ligne de faits compte ce que la page montre : « N articles en vigueur · N Propositions seed · N propositions en cours ». Les Propositions seed n'y sont dites que lorsqu'elles sont lues en tête (rien en vigueur) ; « propositions en cours » compte les versions que montre la liste du bas, jamais les ordres, titres ni changements d'inertie d'un module, qui se votent à la ligne de leur module. La carte du document, sur la page du groupe, garde le total du serveur.
  • Un changement d'inertie d'un ordre ou du titre a sa pastille sur la ligne de son module, à côté de « N ordres proposés » ou « N titres proposés » : « 1 changement d'inertie proposé », qui déplie son vote là.
  • « Proposer cet ordre » éteint le dit, à sa gauche (sur téléphone, au-dessus) : « C'est l'ordre en vigueur : déplace au moins un article. », lu aussi comme description du bouton.
  • Sur téléphone : les trois lectures passent à la ligne plutôt que de cacher « Si tout passe » ; tous les gestes du vote déplié, « Tout déplier » compris, font au moins 44 px.

Les informations de fonctionnement (lot U3, 03/11)

Yvv, 03/11 : formule, inertie et ordonnancement ne se votent plus (ADR 0014), « les infos doivent trouver leur place dans l'ux ». Tranché ainsi (inventaire : U3-informations.md ; captures : /tmp/ld-u3-shots/) :

  • Avant le texte, hors vote, « Info ouverture doc de réf. » (le titre d'Yvv) : son paragraphe, « Aucun article n'est encore en vigueur. Les Propositions d'amorce y entrent par le vote… » (la première phrase tant que c'est vrai) ; « Inertie à l'ouverture » (Propositions d'amorce, titre du document, ordre de chaque section, autres articles, avec leurs crans) et « Quorum » (celui de chaque cran, la règle de l'auteur), lus dans l'API. La voix de l'interface (Nunito) sur un lavis doux, pas l'eau d'un vote. Puis une séparation : un filet de la couleur de la clé de voûte de l'ambiance, qui s'efface à ses bouts, jamais une bordure ; puis le premier article.
  • Sans les titres « Introduction » et « Engagements fondamentaux » dans le texte : leurs articles portent déjà le titre. Ailleurs (la ligne d'ordre, le panier, « Propositions en cours »), la section garde son nom.
  • Chaque règle au moment où elle sert : le vote permanent sous les boutons du vote ; la marge à dépasser dans le vote d'une version à côté d'un texte en vigueur ; qui l'emporte entre plusieurs versions dans « Autres versions » ; T′, l'arrondi, G et B dans « La formule du seuil » ; la part exigée, la participation habituelle et G dans « Réglages de la formule », avec les termes définis des lots T3 à T3c ; ce qu'un ordre change, en réordonnant.
  • « Proposition d'amorce » à la place de « Proposition seed ».
  • Réordonner au glisser : la ligne sous le pointeur se lit à sa place dans la mise en page, pas là où l'animation la montre : tirée sur plusieurs lignes, la poignée ne revient plus en arrière, et la nouvelle place est dite.