The UX of buttons

I have been working more on the book. The chapter I am working on deals with specific UI elements, like menus, buttons and other controls. It is amazing to me how many details there are in just a simple button. Bill Scott calls these “interesting moments“. For example in a button:

  1. At rest: The button just sitting there waiting to be clicked. How does it communicate its affordance (click-ability)?
  2. Hover: What happens if the mouse is placed over the button? Does it reinforce clicky-ness? Is there a tooltip? Does it warn?
  3. Focus: What if the user used the keyboard to tab over to the button? Does it look different than hover?
  4. Mouse Down: On the beginning of the click, what happens? Does it work right away or wait for the mouse up?
  5. Mouse Up: How does it let the user know what is happening? Does it allow double-clicking? How does it manage expectations?

There are others too. Disabled buttons? Toggle buttons, (pressed and not). Menu buttons (muttons, a.k.a. Split buttons). Also, what does it look like with alot of text, what about a small amount of text. Does it have an icon? Does anything happen to the icon? The list is long.

All of these need detailed thought about what it looks like and how it works. I made this button demo, which starts, but I realized I missed several interesting moments. I should work on it some more.

Now imagine something more complex. UX is a hard job.

Leave a Reply