Correction UX à l'étape SIRET

betagouv / mission-transition-ecologique

Application Transition Ecologique des Entreprises

https://mission-transition-ecologique.beta.gouv.fr/

GNU Affero General Public License v3.0

7 stars 7 forks source link

Correction UX à l'étape SIRET #280

Closed ColineLebaratoux closed 7 months ago

ColineLebaratoux commented 11 months ago

Correction suite aux tests utilisateurs : A l'étape SIRET, l’utilisateur ne sait pas s’il doit cliquer pour seléctionner le résultat.

retour UX qui revient 1 fois sur 3 : c’est là ou je trouve que c’est dommage. Je suis restée bloqué. J’avais pas compris. il faut cliquer sinon on peut pas cliquer sur suivant. C’est un tout ptit truc mais qui embête vraiment !

[x] sélectionner le résultat par défaut = le bouton valider est actif dès lors qu'il y a un résultat.
[x] Ne plus rendre cliquable le résultat (on ne peut pas le déséléctionner. Si l'utilisateur change d'avis, il peut supprimer sa recherche grace à la croix.

[x] permettre d'afficher tout le texte dans le champs "votre numéro SIRET (14 chiffres)" :
mettre en plus petit "votre numéro SIRET (14 chiffres)" pour que le texte entier s'affiche sur mobile
ou remplacer le texte mobile par "votre n° SIRET (14 chiffres)"

JulienParis commented 8 months ago

@ColineLebaratoux pour validation => preview : https://tee-preprod-pr593.osc-fr1.scalingo.io/questionnaire

Note : La petite croix permettant de faire un reset de l'input a demandé un peu de jonglage, car cette fonctionnalité (aka "clearable input") n'existe bizarrement pas dans le DSFR =>

Captures d'écran

Sur mobile :

Desktop / pas d'input :

Desktop / input => petite croix apparaît

Desktop / input + loading (searching)

Desktop / input + response => carte de réponse est préselectionnée et n'est plus cliquable / l'utilisateur peut cliquer sur la croix pour annuler son input

ColineLebaratoux commented 8 months ago

Petit bug, il y a deux croix d'annulation qui s'affichent.

JulienParis commented 8 months ago

chelou (et c'est un peu relou aussi), sur Firefox j'ai pas la croix dans la partie bleue alors que sur Safari et Chrome on l'a effectivement

Firefox / MacOs

Safari / MacOS

Chrome / MacOs

JulienParis commented 8 months ago

Bon j'ai tenté de trouver une solution universelle pas trop compliquée => https://tee-preprod-pr593.osc-fr1.scalingo.io/questionnaire

J'ai enlevé le comportement par défaut du DSFR qui ne marche pas sur Firefox, et mis cette croix de reset entre l'input et la loupe. A priori ça marche sur Chrome / Safari / Firefox

Firefox

Safari

ColineLebaratoux commented 8 months ago

@JulienParis 👍 Bien joué, il n'y a plus qu'une croix. En revanche, on voit bien que c'est 2 composants séparés :

est-ce que tu peux passer tout en gris (la barre de recherche apparait en bleu clair et la croix est dans un carré gris sur chrome. cf capture d'ecran)
est-ce que la zone de sélection bleu peut englober la barre de recherche et la croix ?

JulienParis commented 8 months ago

@ColineLebaratoux c'est (encore une fois) chelou car de mon côté je n'ai pas ce fond bleu sur mes navigateurs quand je sélectionne le champ, tout est sur fond gris. De gauche à droite : Firefox, Safari, Chrome (sur MacOS) =>

ColineLebaratoux commented 8 months ago

OK alors fermons les yeux la dessus ! 🙈

Et la zone de sélection bleu peut-elle englober la barre de recherche et la croix ?

JulienParis commented 7 months ago

@ColineLebaratoux cool

Du coup j'ai implémenté la zone de sélection (bordure bleue) sur l'ensemble de la zone d'input (input + croix + loupe). J'ai inclus la loupe dedans car ça me semblait à la fois + propre en terme d'UI, et j'avoue ct + simple aussi côté code =>

ColineLebaratoux commented 7 months ago

Top ! 🎉