Home > UI > Give an indication of why a button is disabled

Give an indication of why a button is disabled

In general, it’s a good idea to disable buttons whose functions cannot be accomplished at the given time.  For instance, if you have a table of data and a delete button that deletes the selected row or rows of data, it would make sense to disable the Delete button when no row is selected, and enable it when a row becomes selected.  This is superior to the alternative choice, which is to leave the button enabled and then indicate some sort of error message letting the user know that they can’t delete an empty selection, when they try to press it.

An example of an enabled and disabled button

If you do go down the route of programmatically disabling buttons, it is absolutely crucial that you give some indication as to why the button is disabled.  In the previous example, a savvy user could probably figure out that the delete action doesn’t make sense when there are no rows selected.  This isn’t always the case.
I dealt with an application recently where validation logic was spread across four different tabs, where each tab had a checkmark indicating that it was filled out correctly.  When I finally managed to get all of the tabs to show that they were in a valid state, the final button to complete the action stubbornly remained disabled.  I have no idea what the problem is, and there’s no indication whatsoever in the application.
The easiest thing the programmer could have done to give some feedback to the user is to provide a tooltip on the button that indicates why the button is disabled.  Perhaps a better solution would be to provide a small text pane in which the error messages would be displayed; this has the benefit of working with devices which do not have a mouseover tooltip capability (e.g. iPhone, iPad).
While it would have taken a little more effort on the part of the designer and programmer to make that screen more usable, it would have saved me the past two weeks of trying to solve the problem and waiting for their technical support.  Let that be a lesson for you.
Categories: UI Tags: , , , ,
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: