Conformité au SDG - Boutons de navigation et action en bas de page

[j0ber]

Description du changement requis
Une nouvelle directive concernant les boutons de navigation et d'action en bas de page nous est parvenue de l'équipe du système de design Quebec.ca. Nous devons modifier la solution afin de respecter la directive.

Captures d'écran
TODO modifier le contenu ici afin d'indiquer clairement la directive et les changements à effectuer (une maquette complète va suivre sous peu)

AB#126445

[gausa01]

Voici ce qui est recommandé actuellement par le SDG pour les boutons dans les formulaires.

Pour la navigation dans le formulaire, on doit utiliser les boutons "Précédent" et "Suivant" avec les icônes de flèches directionnelles.

Les boutons inactif au niveau des boutons servant à la navigation sont à proscrire. Un bouton peut toutefois être inactif dans l'interface quand une action dans la page l'active, et donc qu'une interaction initiée par l'utilisateur permet de passer de l'état inactif à l'état actif. Un exemple peut être une case à cocher pour attester de la conformité des renseignements fournis, suivi d'un bouton d'action "Soumettre". La navigation ne devrait pas comporter de bouton inactif ; l'état du bouton est lié au parcours et non pas à une action utilisateur. On évite ainsi une confusion pour l'utilisateur, qui pourrait se demander ce qui doit être "complété" dans une interface afin de modifier l'état du bouton "précédent", par exemple, alors qu'en fait, il est inactif simplement parce qu'on se trouve en début de parcours.

Regroupements de boutons
Comme on a plusieurs boutons d’action, on les regroupe par type. Donc, tout ce qui est d’ordre de la navigation (précédent/suivant) sur une ligne et ce qui est d’ordre « action système » (enregistrer/annuler) sur une autre ligne, en dessous. Il est possible de séparer les deux catégories de bouton par un séparateur pour aider les utilisateurs à bien voir la différence.

Voici l'exemple desktop:

Il est aussi autorisé en desktop d'éloigner le bouton tertiaire "Annuler" complètement à droite pour réduire les erreurs. Toutefois dans tous les cas de figure, il faut mettre une modale qui averti l'utilisateur de la perte des données s'il décide de quitter.

Voici l'exemple mobile: