Barre de progression utile mais pas toujours perçue et claire

[AdrienMuzyczka]

Constat(s)

• La barre de progression n’a pas toujours été perçue et claire pour certains usagers qui se demandaient comment la progression était calculée. En revanche, cette information est pertinente et motivante pour les auditeurs.

• Au-delà du manque de clarté sur la méthode de calcul de la progression de l’audit, certains usagers sont réticents à l’idée que l’outil acte à leur place que l’audit est terminé.

• Accessibilité (suite à l'audit RGAA)

  • Bouton "Enregistré"
    • Le bouton "Enregistré" est codé comme un menu alors qu'il ne contient aucun lien et son contenu n'est pas restitué aux technologies d'assistance lors de son ouverture.
    • D'ailleurs, un bouton nommé "Enregistré" peut apporter de la confusion aux usagers, pensant qu'il s'agit d'un bouton pour enregistrer les modifications apportées.
    • Ici le composant le plus adapté serait un tooltip mais il est également possible de supprimer ce bouton et positionner un texte discrètement positionné en haut de page.

Recommandation(s)

• Barre de progression :
  • Augmenter la hauteur de la barre de progression pour lui donner un peu plus d’importance et de visibilité.
  • Ajouter, comme pour l’indicateur d’enregistrement, une information indiquant comment est calculée la progression de l’audit.
• Fin d’audit :
  • À creuser : envisager de demander à l’usager de confirmer la fin de son audit.

[AdrienMuzyczka]

Validé suite à revue de design :

Page "Audit"

Barre de progression

• [x] Augmenter la hauteur de la barre de progression à 8 px.
• [x] Ajouter un état « survol » sur cet indicateur. Cf maquette
  • L’état « survol » reprends le style des boutons et englobe : le titre, la barre de progression et le % de progression.
• [ ] Au clique, afficher un ~~tooltips~~ dropdown. Cf maquette
  • La zone cliquable englobe : le titre, la barre de progression et le % de progression
  • Le ~~tooltips~~ dropdown est aligné à gauche ~~et utilise une flèche pour pointer l’élément concerné~~.

Indicateur d’enregistrement

• [x] (r)Ajouter un padding de 16 px à gauche et à droite du libellé de l’indicateur
• [x] Diminuer l’espace entre le séparateur et l’indicateur à 6 px ?
  Attendu :
  
• [ ] Reprendre le tooltips aligné à gauche et utilisant une flèche pour pointer l’élément concerné.

[benoitdequick]

Retour de SM

Le bouton "Enregistré" est codé comme un menu alors qu'il ne contient aucun lien et son contenu n'est pas restitué aux technologies d'assistance lors de son ouverture. D'ailleurs, un bouton nommé "Enregistré" peut apporter de la confusion aux usagers, pensant qu'il s'agit d'un bouton pour enregistrer les modifications apportées. Ici le composant le plus adapté serait un tooltip mais il est également possible de supprimer ce bouton et positionner un texte discrètement positionné en haut de page.

[benoitdequick]

⚠ L'info d'enregistrement est aussi disponible dans Ajouter des observations

[AdrienMuzyczka]

Validé suite à : point d'équipe Le : 15/05/2025

Solution validée

Page "Audit"

Barre de progression

• [x] Augmenter la hauteur de la barre de progression à 8 px.
• [x] Ajouter une infobulle déclenchée au clic à droite du titre.
  • La bulle est alignée en bas à gauche.
  • Cf maquette pour le message et sa mise en page.

Indicateur d’enregistrement (page "Audit" et sidebar "Annoter l'audit")

• [x] Remplacer le menu déroulant par une infobulle déclenchée au clic avec le texte de mention positionné à droite.

  • Mention : taille MD, couleur texte-mention.
  • L'icône de l'infobulle et le texte changent en fonction du statut du système : Enregistré / Enregistrement en cours / Enregistrement impossible.
  • Cf maquette pour les icônes et les mentions correspondant aux différents statuts.

• [x] Message en fonction du délai d'enregistrement :

  • Moins d’une minute → "Il y a quelques secondes"
  • 1 à 59 minutes → "X min"
  • 1 à 23 heures → "X h" / "X h X min"
  • 1 à 6 jours → "X jours"
  • Plus d’une semaine → "le XX mois XXXX"

• [x] Revoir les icônes de l'indicateur en fonction des différents statuts :

  • Enregistré : icône custom
  • Enregistrement en cours : upload-cloud-2-line
  • Enregistrement impossible : cloud-off-line

  

• [x] Revoir les espacements entre les éléments.

  

Maquettes