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

Question

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

I am trying to determine some guidelines and best practices for displaying information to a user.

The exact case is a confirmation button: once it’s been pressed and the subject is confirmed the button is disabled (to prevent users from clicking it again). To be able to click this confirmation button there are some prerequisites that need to be fulfilled. If the prerequisites are not fulfilled, reasons to why the confirmation button is disabled should be shown.

Currently I have this information shown as a tooltip on the button. Is this a typical way of displaying such information?

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

• one signal being “everything is in order”
• the other signal being “something is wrong, but you need to hover me to find out what is wrong”.

Is this a design flaw in the GUI? Or is this information best displayed in another way (like the status-bar if this was WinForms?) Alternatively, an icon could be displayed above / below or near the button that signals information to be present.

I’m not really sure what the best-practices on this subject are in the world of web.

Answer 1

I would first show the information in some way other than a tool tip since this is somewhat critical information. Also, for the button, I would have two different UI clues. Obviously, the button should be disabled until it is ready to be clicked. Then when the button is clicked, you could have some image or something, with button now gone, stating that the request has been submitted, etc.

Answer 2

Regarding UI clues, you can find some good ideas related to form validation.

For instance, you can display explicitly the list those prerequisite with a symbol (red *) before each of them, stating that there are mandatory.

If the button is disabled, and all prerequisite informations have no more (*) in front of them, but rather a green check mark, that can help reinforce the message this button is not definitively inactive.

Answer 3

Display the message in a div highlighted with some other color and place it above your button.

Once your prerequisites are fulfilled , hide the div.