Affichage des étapes d'un formulaire multi étapes #95

Closed
opened 2 years ago by nicod_ · 13 comments
nicod_ commented 2 years ago
Collaborator

L'affichage par défaut actuel, horizontal comme un fil d'ariane, n'est pas optimal, on se retrouve vite avec un chemin sur plusieurs lignes, ce qui est vraiment difficile à lire.

Deux options :

  • afficher les étapes verticalement, comme une liste, au lieu d'horizontalement comme un chemin
  • n'afficher que l'étape en cours, avec son numéro, et le nombre total d'étapes : "Etape 1 / n : Le nom du fieldset"

Le deuxième point est certainement le plus simple et le plus clair, c'est ce que je fais de mon côté en surchargeant formulaires/inc-saisies-cvt-etapes.html avec ça :

<BOUCLE_etapes(DATA){source table, #ENV{etapes}}>
[(#ENV{_etape}|=={#CLE}|oui)
	<div class="formulaire_spip_etape">
		Étape <span class="formulaire_spip_etape__courante">#CLE / </span><span class="formulaire_spip_etape__total">#GRAND_TOTAL</span> : #VALEUR{options/label}
	</div>
]
</BOUCLE_etapes>

Mais Opquast, dans ses bonnes pratiques, indique qu'il faut préciser toutes les étapes (BP 85) :
https://checklists.opquast.com/fr/assurance-qualite-web/les-processus-complexes-sont-accompagnes-de-la-liste-de-leurs-etapes

Autant les BP 86 et 87 sont évidentes et respectées :
https://checklists.opquast.com/fr/assurance-qualite-web/letape-en-cours-dun-processus-complexe-est-indiquee
https://checklists.opquast.com/fr/assurance-qualite-web/chaque-etape-dun-processus-complexe-permet-de-revenir-a-letape-precedente
autant la BP 85, c'est compliqué.

Des étapes classiques comme "Identification / panier / livraison / paiement", c'est simple, mais avec des titres plus longs, ça complique.

A noter : on peut déroger à ces bonnes pratiques si la situation le justifie :)

Je serai donc pour intégrer les étapes tel que proposé : "Etape 1 / n : Le nom du fieldset courant" :

  • par défaut ?
  • en option avec case à cocher ?

PS : dans mon cas j'ai des classes css pour pouvoir styler, cf capture.

L'affichage par défaut actuel, horizontal comme un fil d'ariane, n'est pas optimal, on se retrouve vite avec un chemin sur plusieurs lignes, ce qui est vraiment difficile à lire. Deux options : * afficher les étapes verticalement, comme une liste, au lieu d'horizontalement comme un chemin * n'afficher que l'étape en cours, avec son numéro, et le nombre total d'étapes : "Etape 1 / n : Le nom du fieldset" Le deuxième point est certainement le plus simple et le plus clair, c'est ce que je fais de mon côté en surchargeant `formulaires/inc-saisies-cvt-etapes.html` avec ça : ``` <BOUCLE_etapes(DATA){source table, #ENV{etapes}}> [(#ENV{_etape}|=={#CLE}|oui) <div class="formulaire_spip_etape"> Étape <span class="formulaire_spip_etape__courante">#CLE / </span><span class="formulaire_spip_etape__total">#GRAND_TOTAL</span> : #VALEUR{options/label} </div> ] </BOUCLE_etapes> ``` Mais Opquast, dans ses bonnes pratiques, indique qu'il faut préciser toutes les étapes (BP 85) : https://checklists.opquast.com/fr/assurance-qualite-web/les-processus-complexes-sont-accompagnes-de-la-liste-de-leurs-etapes Autant les BP 86 et 87 sont évidentes et respectées : https://checklists.opquast.com/fr/assurance-qualite-web/letape-en-cours-dun-processus-complexe-est-indiquee https://checklists.opquast.com/fr/assurance-qualite-web/chaque-etape-dun-processus-complexe-permet-de-revenir-a-letape-precedente autant la BP 85, c'est compliqué. Des étapes classiques comme "Identification / panier / livraison / paiement", c'est simple, mais avec des titres plus longs, ça complique. A noter : on peut déroger à ces bonnes pratiques si la situation le justifie :) Je serai donc pour intégrer les étapes tel que proposé : "Etape 1 / n : Le nom du fieldset courant" : * par défaut ? * en option avec case à cocher ? PS : dans mon cas j'ai des classes css pour pouvoir styler, cf capture.
Poster
Collaborator

Bon, j'ai dit une bétise, je surcharge tellement tout le temps que je me souvenais plus que par défaut l'affichage des étapes est bien vertical...

Non non, l'affichage est bien horizontal, en inline-block.

~~Bon, j'ai dit une bétise, je surcharge tellement tout le temps que je me souvenais plus que par défaut l'affichage des étapes est bien vertical...~~ Non non, l'affichage est bien horizontal, en inline-block.
Owner

Un truc qui complexefie avec les afficher_si sur les étapes c'est que l'usage n'est pas forcément le même

  1. Cas simple si on coche la case "J'ai des enfants", on a l'étape "Faites nous un super portrait de vos enfants". Du coup là le multi étape c'est simple, on a des étapes numérotés, et on peut en sauteer certaines. Donc ton système d'indique "Etape n", ca passe encore.
  2. Cas plus "complex" (mais bien réel !) à l'étape 1 je choisi un parcours de formation. Et selon le parcours choisi, j'ai une autre étape au choix "Question complémentaire pour le parcours débuter", "Question complémentaire pour le parcours se perfectionner", etc. Là on a :
  • techniquement des étapes 2 et 3
  • mais d'un point de vu logique, on est plus sur 2a et 2b

J'avoue ne pas trop voir comment gérer ce cas sans complexifier outre mesure les choses...

Un truc qui complexefie avec les afficher_si sur les étapes c'est que l'usage n'est pas forcément le même 1. Cas simple si on coche la case "J'ai des enfants", on a l'étape "Faites nous un super portrait de vos enfants". Du coup là le multi étape c'est simple, on a des étapes numérotés, et on peut en sauteer certaines. Donc ton système d'indique "Etape n", ca passe encore. 2. Cas plus "complex" (mais bien réel !) à l'étape 1 je choisi un parcours de formation. Et selon le parcours choisi, j'ai une autre étape au choix "Question complémentaire pour le parcours débuter", "Question complémentaire pour le parcours se perfectionner", etc. Là on a : - techniquement des étapes 2 et 3 - mais d'un point de vu logique, on est plus sur 2a et 2b J'avoue ne pas trop voir comment gérer ce cas sans complexifier outre mesure les choses...

Je trouve que le défaut c'est quand même de voir toutes les étapes, le chemin complet. Et dans quelques cas, choisis volontairement, on peut décider de ne voir que l'étape en cours.

Après la manière d'afficher je suppose que ça dépend des formulaires, du nombre d'étapes. Par défaut je trouve pas ça si pire en simple ligne, comme un chemin hiérarchique de contenus (qui peut être très long aussi), ou comme un chemin de tunnel de commande. Et après si on a un formulaire avec vraiment beaucoup d'étapes, rien n'empêche de le styler différemment en le ciblant, soit en vertical en colonne sur le côté, soit en le tranformant en menu dropdown par exemple.

Mais tout ça (dans le cas où toutes les étapes sont visibles) dépend assez fortement du graphisme/ergonomie du site, on peut pas trop préjuger de comment l'afficher.

Par contre une option dans la config globale "N'afficher que l'étape en cours" ça oui, on pourrait déjà ajouter ce point.

Je trouve que le défaut c'est quand même de voir toutes les étapes, le chemin complet. Et dans quelques cas, choisis volontairement, on peut décider de ne voir que l'étape en cours. Après la manière d'afficher je suppose que ça dépend des formulaires, du nombre d'étapes. Par défaut je trouve pas ça si pire en simple ligne, comme un chemin hiérarchique de contenus (qui peut être très long aussi), ou comme un chemin de tunnel de commande. Et après si on a un formulaire avec vraiment beaucoup d'étapes, rien n'empêche de le styler différemment en le ciblant, soit en vertical en colonne sur le côté, soit en le tranformant en menu dropdown par exemple. Mais tout ça (dans le cas où toutes les étapes sont visibles) dépend assez fortement du graphisme/ergonomie du site, on peut pas trop préjuger de comment l'afficher. Par contre une option dans la config globale "N'afficher que l'étape en cours" ça oui, on pourrait déjà ajouter ce point.

Ah aussi pour l'option : tout comme le dit @maieul dans un autre ticket, et je pense que ça vaut même si on utilise pas afficher_si dessus : la numérotation des étapes je vois mal comment ça pourrait être toujours automatique, car effectivement, même sans afficher_si, certaines étapes peuvent parfaitement être sémantiquement comme des sous étapes d'une autre, genre 2, 2a, 2b, etc. Et du coup numéroter automatiquement n'est pas toujouts pertinent. Ou bien il faudrait que la numérotation soit elle aussi une option (du genre "Numéroter automatiquement les étapes")

Ah aussi pour l'option : tout comme le dit @maieul dans un autre ticket, et je pense que ça vaut même si on utilise pas afficher_si dessus : la numérotation des étapes je vois mal comment ça pourrait être toujours automatique, car effectivement, même sans afficher_si, certaines étapes peuvent parfaitement être sémantiquement comme des sous étapes d'une autre, genre 2, 2a, 2b, etc. Et du coup numéroter automatiquement n'est pas toujouts pertinent. Ou bien il faudrait que la numérotation soit elle aussi une option (du genre "Numéroter automatiquement les étapes")
Owner

Je trouve que le défaut c'est quand même de voir toutes les étapes, le chemin complet.

mis du temps à comprendre, confusion dans ma tete sur le sens de "défaut" entre "valeur par défaut" et "problème qualité".

Par contre une option dans la config globale "N'afficher que l'étape en cours" ça oui, on pourrait déjà ajouter ce point.

je propose de le faire dans la même branche que le afficher_si, pour éviter les problèmes de conflit de fusion, et puis comme ca on pourra faire une release globale sur le multi étape

Ah aussi pour l'option : tout comme le dit @maieul dans un autre ticket,

(non c'est dans ce ticket (mais j'y fais allusion dans un autre ticket)

Ou bien il faudrait que la numérotation soit elle aussi une option (du genre "Numéroter automatiquement les étapes")

une idée qui me vient en lisant cela : et si on ajoutait pour chaque étape un champ "numéro d'étape" ? faudrait bien sur mettre un js dans le constructeur (pas forcément un afficher_si car plus complexe) pour ne l'afficher que si a) multi etape activé 2) fieldset de premier niveau

> Je trouve que le défaut c'est quand même de voir toutes les étapes, le chemin complet. mis du temps à comprendre, confusion dans ma tete sur le sens de "défaut" entre "valeur par défaut" et "problème qualité". > Par contre une option dans la config globale "N'afficher que l'étape en cours" ça oui, on pourrait déjà ajouter ce point. je propose de le faire dans la même branche que le afficher_si, pour éviter les problèmes de conflit de fusion, et puis comme ca on pourra faire une release globale sur le multi étape > Ah aussi pour l'option : tout comme le dit @maieul dans un autre ticket, (non c'est dans ce ticket (mais j'y fais allusion dans un autre ticket) > Ou bien il faudrait que la numérotation soit elle aussi une option (du genre "Numéroter automatiquement les étapes") une idée qui me vient en lisant cela : et si on ajoutait pour chaque étape un champ "numéro d'étape" ? faudrait bien sur mettre un js dans le constructeur (pas forcément un afficher_si car plus complexe) pour ne l'afficher que si a) multi etape activé 2) fieldset de premier niveau
Poster
Collaborator

Ou bien il faudrait que la numérotation soit elle aussi une option (du genre "Numéroter automatiquement les étapes")

une idée qui me vient en lisant cela : et si on ajoutait pour chaque étape un champ "numéro d'étape" ? faudrait bien sur mettre un js dans le constructeur (pas forcément un afficher_si car plus complexe) pour ne l'afficher que si a) multi etape activé 2) fieldset de premier niveau

Franchement, ça part sur une usine à gaz là...

Et puis si tu insères une étape quelque part, il faut renommer toutes les autres ?

> > Ou bien il faudrait que la numérotation soit elle aussi une option (du genre "Numéroter automatiquement les étapes") > > une idée qui me vient en lisant cela : et si on ajoutait pour chaque étape un champ "numéro d'étape" ? faudrait bien sur mettre un js dans le constructeur (pas forcément un afficher_si car plus complexe) pour ne l'afficher que si a) multi etape activé 2) fieldset de premier niveau Franchement, ça part sur une usine à gaz là... Et puis si tu insères une étape quelque part, il faut renommer toutes les autres ?
Owner

Franchement, ça part sur une usine à gaz là...

c'est pour cela que j'étais pas très enthousiastes :) et que c'était juste une idée comme cela. Mais oui ca pose plus de problèmes que cela n'en résoud.

> Franchement, ça part sur une usine à gaz là... c'est pour cela que j'étais pas très enthousiastes :) et que c'était juste une idée comme cela. Mais oui ca pose plus de problèmes que cela n'en résoud.
Owner

Là comme cela pour pas transformer en usine à gaz, je dirais

  1. Ok pour une option pour indiquer juste l'étape en cours
  2. Ok pour une option pour numéroter automatiqument les étapes et indiquer dans ce cas x/n
    a. Tant pis pour les xa, xb, etc. On résonne de manière linéaire (et si un jour le besoin se fait vraiment sentir, on réflechira à une meilleur méthode)=
    b. Par contre on pourrait tout à fait faire que n varie selon les afficher_si

Avec cela on offre

a. Soit l'option liste explicite des étapes (qui du reste numérote, car utilise ul/li), et la personne qui veut styler autrement se débrouille
b. Soit 2 variantes d'une option raccourci

Là comme cela pour pas transformer en usine à gaz, je dirais 1. Ok pour une option pour indiquer juste l'étape en cours 2. Ok pour une option pour numéroter automatiqument les étapes et indiquer dans ce cas x/n a. Tant pis pour les xa, xb, etc. On résonne de manière linéaire (et si un jour le besoin se fait vraiment sentir, on réflechira à une meilleur méthode)= b. Par contre on pourrait tout à fait faire que n varie selon les afficher_si Avec cela on offre a. Soit l'option liste explicite des étapes (qui du reste numérote, car utilise ul/li), et la personne qui veut styler autrement se débrouille b. Soit 2 variantes d'une option raccourci
maieul referenced this issue from a commit 1 year ago
maieul referenced this issue from a commit 1 year ago
Owner

Donc voilàé ce que j'ai mis dans la branche issue_89 (celle qui sert à gérer les étapes multi-étapes)

  • On peut mettre une option globale au formulaire etapes_presentation, qui permet de déterminer le squelette à appeler (formulaires/inc-saisies-cvt-etapes-<etapes_presentation>)
  • Les variantes dispo :
    • defaut, celle actuellement
    • courante, selon le modèle de @nicod_, j'ai juste :
      • uniformisé les noms de classe avec defaut
      • fait passer par une chaine de langue pour le détail de l'affichage
      • brancher sur les afficher_si

Concernant les afficher_si :

  • pour les étapes passées, on n'affiche pas au niveau HTML les étapes passées qui ont été zappées pour cause d'afficher_si
  • pour les étapes futures, on ajuste au fur et à mesure du remplissage du formulaire, sans effet de transition
  • le bloc d'étape a un hauteur minimal équivalent à la hauteur nécessaire pour tout afficher, ainsi lorsqu'une modif de valeur de champ entraine un afficher_si, la hauteur du bloc d'étape ne bouge pas, et on n'a pas d'effet de va et vient chelou.
Donc voilàé ce que j'ai mis dans la branche issue_89 (celle qui sert à gérer les étapes multi-étapes) - On peut mettre une option globale au formulaire `etapes_presentation`, qui permet de déterminer le squelette à appeler (`formulaires/inc-saisies-cvt-etapes-<etapes_presentation>`) - Les variantes dispo : - `defaut`, celle actuellement - `courante`, selon le modèle de @nicod_, j'ai juste : - uniformisé les noms de classe avec `defaut` - fait passer par une chaine de langue pour le détail de l'affichage - brancher sur les `afficher_si` Concernant les `afficher_si` : - pour les étapes passées, on n'affiche pas au niveau HTML les étapes passées qui ont été zappées pour cause d'`afficher_si` - pour les étapes futures, on ajuste au fur et à mesure du remplissage du formulaire, sans effet de transition - le bloc d'étape a un hauteur minimal équivalent à la hauteur nécessaire pour tout afficher, ainsi lorsqu'une modif de valeur de champ entraine un afficher_si, la hauteur du bloc d'étape ne bouge pas, et on n'a pas d'effet de va et vient chelou.
maieul referenced this issue from a commit 1 year ago
maieul referenced this issue from a commit 1 year ago
Owner

je n'ai pas compris l'histoire de la hauteur minimale pour tout afficher (surtout vu que c'est en horizontal par défaut, et donc ça passe ou pas à la ligne suivant le nombre et suivant la largeur de l'écran)

je n'ai pas compris l'histoire de la hauteur minimale pour tout afficher (surtout vu que c'est en horizontal par défaut, et donc ça passe ou pas à la ligne suivant le nombre *et* suivant la largeur de l'écran)
Owner

je n'ai pas compris l'histoire de la hauteur minimale pour tout afficher (surtout vu que c'est en horizontal par défaut, et donc ça passe ou pas à la ligne suivant le nombre et suivant la largeur de l'écran)

je t'ai mis une petite vidéo là pour comprendre https://drive.switch.ch/index.php/s/5GlFJajxYKVchyO (le son passe pas sous firefox, telecharge là ou utilise chrome)

> je n'ai pas compris l'histoire de la hauteur minimale pour tout afficher (surtout vu que c'est en horizontal par défaut, et donc ça passe ou pas à la ligne suivant le nombre et suivant la largeur de l'écran) je t'ai mis une petite vidéo là pour comprendre https://drive.switch.ch/index.php/s/5GlFJajxYKVchyO (le son passe pas sous firefox, telecharge là ou utilise chrome)
Owner

Ok je comprends mieux pour ce qui est de masquer une étape suivant un remplissage après coup.

En revanche… ça peut être l'inverse ! Donc des champs (et étapes) masqués par défaut et qui apparaissent si on coche ou remplit d'autres choses. Et du coup ça va décaler aussi ? Ou bien ça affiche 100% des étapes au départ y compris ce qu'on doit masquer ensuite en JS ?

Ok je comprends mieux pour ce qui est de masquer une étape suivant un remplissage après coup. En revanche… ça peut être l'inverse ! Donc des champs (et étapes) masqués par défaut et qui apparaissent si on coche ou remplit d'autres choses. Et du coup ça va décaler aussi ? Ou bien ça affiche 100% des étapes au départ y compris ce qu'on doit masquer ensuite en JS ?
Owner

la fixation du min-height est fait avant tout masquage/affichage en fonction des afficher si.

la fixation du min-height est fait avant tout masquage/affichage en fonction des afficher si.
maieul referenced this issue from a commit 1 year ago
maieul referenced this issue from a commit 1 year ago
maieul referenced this issue from a commit 1 year ago
maieul closed this issue 1 year ago
Sign in to join this conversation.
No Milestone
No Assignees
3 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.