ETQ usager, j’ai un menu « Sections du formulaire » pour accéder directement aux sections pendant que je suis en train de remplir le formulaire

[marleneklok]

[marleneklok]

Principe de l'évolution

Pour permettre à l’usager d’accéder directement aux sections d’un formulaire pendant qu'il est en train de le remplir, on ajoute le composant Menu latéral (Sidemenu) du DSFR qui liste les sections du formulaire (comme cela est proposé dans l’onglet « Demande » d’un dossier en vue Instructeur, ou encore dans l’éditeur de champs en vue Administrateur).

Contenu du menu

• Le menu est intitulé « Sections du formulaire ».
• On affiche ce menu uniquement si au moins 3 titres de section sont présents dans le formulaire (quel que soit le niveau 1, 2 ou 3).
• On affiche uniquement les sections de niveaux 1 et 2 (pas les sections de niveaux 3).
• On affiche « à plat » les sections de niveau 1 et également de niveau 2, autrement dit on ne « cache » pas les sections de niveau 2 dans des accordéons.
• Le contenu du menu est évolutif : dans le cas où des sections sont affichées via une logique conditionnelle, on affiche ces sections uniquement lorsqu’elles sont affichées dans le corps du formulaire (et donc lorsque le champ qui conditionne leur affichage a été renseigné par l'usager).
Exemple et point de vigilance : Lorsque l’usager accède au formulaire, il est donc possible que le menu affiché ne lui présente que les sections « 1. Titre de la partie 1 », puis « 3. Titre de la partie 3 », puis « 4. Titre de la partie 4 », dans le cas où la section 2 est conditionnée au choix d’un champ présent dans la partie 1.

Localisation et comportement du menu

DESKTOP

Sur DESKTOP, le menu est présenté en haut du formulaire sur la gauche :

Lorsque l’usager scrolle verticalement, le menu vient se positionner en sticky en haut à gauche de l’écran :

L’usager peut accéder directement à une section en cliquant sur son intitulé dans le menu :

Une ancre redirige l’usager au niveau de la section concernée dans le corps du formulaire.
La section atteinte prend alors le marquage « état courant » dans le menu (avec le libellé de section en bleu et la bordure bleue).

MOBILE

Sur MOBILE, le menu latéral est présenté en haut du formulaire sous sa forme responsive. Il est masqué par défaut et est remplacé par un bouton « Sections du formulaire » (au tap sur ce dernier, le menu se déplie et affiche les sections).
Le menu n’est pas sticky. Après un scroll vertical, si l’usager veut le retrouver, il utilisera le bouton « Retour en haut de page ».

Pour afficher les sections du formulaire, l’usager tape sur le menu (et il peut le refermer en tapant à nouveau dessus) :

Pour accéder directement à une section du formulaire, l’usager tape sur son intitulé dans le menu.
Une ancre redirige l’usager au niveau de la section concernée dans le corps du formulaire.

Variante DESKTOP

S’il est possible de customiser le composant Menu latéral (Sidemenu) du DSFR, on peut proposer un comportement de masquage du menu à l’usager.

En accédant à la page du formulaire, le menu des sections du formulaire est affiché par défaut :

L’usager peut cliquer sur « Masquer les sections » s’il veut avoir une meilleure visibilité sur les champs du formulaire :

Le menu latéral passe alors en vue réduite :

Il peut à tout moment réafficher le menu des sections en cliquant sur l’icône :

Meilleure exploitation de la largeur du corps de page (DESKTOP)

Sur un grand écran DESKTOP, la largeur d’écran n’est pas nécessairement bien exploitée.
-> Voir s’il est possible d’étendre davantage le corps de page, afin d’optimiser la lisibilité du formulaire, qui se retrouvera « compressé » une fois le menu latéral des sections implémenté.