Quels sont quelques directives pour afficher des informations à un utilisateur dans un navigateur web?

Question

Quels sont quelques lignes directrices pour afficher des informations à un utilisateur dans un navigateur web ?

Je cherche à déterminer certaines lignes directrices et meilleures pratiques pour afficher des informations à un utilisateur.

Le cas concret est un bouton de confirmation : une fois qu'il est pressé et que le sujet est confirmé, le bouton est désactivé (pour empêcher les utilisateurs de cliquer à nouveau). Pour pouvoir cliquer sur ce bouton de confirmation, il y a certaines conditions préalables qui doivent être remplies. Si les conditions préalables ne sont pas remplies, les raisons pour lesquelles le bouton de confirmation est désactivé doivent être affichées.

Actuellement, j'affiche ces informations sous forme de bulle d'aide sur le bouton. Est-ce une façon typique d'afficher de telles informations ?

Une autre chose qui me préoccupe est le fait que l'état désactivé envoie deux signaux différents

• un signal étant "tout est en ordre"
• l'autre signal étant "quelque chose ne va pas, mais vous devez survoler pour découvrir ce qui ne va pas".

S'agit-il d'un défaut de conception dans l'interface graphique utilisateur ? Ou ces informations doivent-elles être affichées d'une autre manière (comme la barre d'état si c'était WinForms) ? Alternativement, une icône pourrait être affichée au-dessus / en dessous ou près du bouton pour signaler la présence d'informations.

Je ne suis pas vraiment sûr des meilleures pratiques sur ce sujet dans le monde du web.

Answer 1

En ce qui concerne les indices UI, vous pouvez trouver de bonnes idées liées à la validation de formulaire.

Par exemple, vous pouvez afficher explicitement la liste des prérequis avec un symbole (rouge *) devant chacun d'eux, en indiquant qu'ils sont obligatoires.

Si le bouton est désactivé et que toutes les informations préalables n'ont plus (*) devant elles, mais plutôt un coche vert, cela peut aider à renforcer le message que ce bouton n'est pas définitivement inactif.

Answer 2

Je montrerais d'abord les informations d'une manière différente du point de vue de l'outil car il s'agit d'informations quelque peu critiques. De plus, pour le bouton, j'aurais deux indices visuels différents. De toute évidence, le bouton devrait être désactivé jusqu'à ce qu'il soit prêt à être cliqué. Ensuite, lorsque le bouton est cliqué, vous pourriez avoir une image ou quelque chose d'autre, avec le bouton maintenant disparu, indiquant que la demande a été soumise, etc.

Answer 3

Affichez le message dans une div surlignée avec une autre couleur et placez-la au-dessus de votre bouton.

Une fois que vos prérequis sont remplis, cachez la div.