What are some guidelines for displaying information to a user in a web browser?

What are some guidelines for displaying information to a user in a web browser?

I am trying to define some guidelines and guidelines for displaying information to the user.

The exact case is a confirm button: after it has been clicked and the object is confirmed, the button is disabled (so users don't click it again). To be able to click this confirmation button, there are some prerequisites that must be met. If the prerequisites are not met, you should indicate the reasons why the confirmation button is disabled.

This information is currently displayed as a tooltip on a button. Is this the typical way to display such information?

Another thing that concerns me is that the disabled state sends two different signals

  • one signal "all right"
  • another signal "something is wrong, but you need to point me to see what is wrong."

Is this a design flaw in the GUI? Or is this information best displayed in a different way (like in the status bar if it's WinForms?) Alternatively, an icon can be displayed above / next to or next to a button that signals the presence of information.

I'm not really sure what the best practices on this topic are in the internet world.

+1


source to share


3 answers


As far as UI hints are concerned, you can find good ideas related to form validation .

For example, you can explicitly display a list of these prerequisites with a (red *) in front of each, indicating that they are required.



If a button is disabled, and all previews no longer have (*) in front of them, but rather a green check mark that can help reinforce the message, that button is not permanently inactive.

+2


source


I would first show the information in some way other than a hint, as this is somewhat important information. Also, for a button, I would have two different interface hints. Obviously, the button needs to be disabled until it's ready to click. Then, when the button is clicked, you can have some kind of image or something, with the button pressed, stating that the request has been sent, etc.



0


source


Display the message in a div highlighted in a different color and place it above your button.

Once your prerequisites are met, hide the div.

0


source







All Articles