Homepage Resume Book Recommendations Blog

On Buttons in UI

If you go to any site or any webapp, there's a 99% chance that buttons in its UI are not done right. They don't have states or don't have enough states, which is extremely confusing to users (yet, users, of course, got used to that too).

Buttons should, most of the time, have the following states:

  1. Normal — a normal enabled button you can click on.
  2. Hover — a button with your mouse over it.
  3. Pressed — this is what a button looks like for a brief moment when you click on it (mousedown event)
  4. Locked — when you click on button to submit a form, it sends a request somewhere and it requires users to wait and not be able to click the button again. Browser indication in the tab is not sufficient. So we lock the button and also show a "please wait" animation of some sort next to it or on it.
  5. Disabled — a state in which you cannot click on it at all. Happens when you, for instance, haven't filled anything into a form yet.

99% of time the buttons have (1), (2) and (5) completely ignoring other states even though (2) is clearly not that important at all. Why do they do it? Because (2) can be solved with a single line of css, whereas (3) and (4) need some sort of Javascript programming.

Another consideration is that with a flat design, it's rather difficult to express state (3). Which is probably fine. We also probably don't always need (4) - for example when no requests are being made and clicking a button results only in some frontend action, like manipulating DOM or displaying some sort of message.

The takeaway from this is: be conscious of your buttons. They are one of the most important components of the website not to be ignored. Always consider that you'll need all 5 states of a button and make sure the designer (if you have one working on your site/app) knows about it and creates all button states.