Invisible Buttons are a Bad Idea

Good user-interface design involves a lot of factors including clear responsive feedback. A good example of this is making a hyperlink brighter when the cursor is placed over it. This also works well for any "clickable" object like form buttons, images, tabs, etc.

One thing I've been seeing a lot lately is invisible buttons -- they remain invisible until the cursor approaches the button, which reveals the button so it can be clicked.

While this may help make things look tidy in screenshots, it can quickly become problematic to the user.

According to The essential guide to user interface design By Wilbert O. Galitz (ISBN: 0470053429, 9780470053423), '"Invisible" buttons must never exist'.

The biggest problem with invisible buttons is that they are invisible. How would know the buttons are there if you can't see them? What if the button does something destructive, like delete a file or close a window? Now a seemingly safe place to click is a hotspot for unintentional and sometimes unrecoverable damage.

I recently downloaded Apple Safari 4 for PC, and started browsing and opening tabs. The browser itself is great -- quick, responsive, snappy. Each tab, however, has an invisible close button on the right side of each tab. The button remains invisible until your mouse cursor is placed directly on the tab. Once the cursor is "within range", the close button appears.

When you need to quickly switch tabs using the mouse, it becomes dangerously easy to close the tab instead of switching to it. If you're a very fast clicker, it's possible to accidentally close the tab without even seeing the close button appear, especially when approaching the tab from the bottom, top, or right side of the tab. Your tab just now disappeared when trying to switch to it. Additionally, if there were a tab to the right, it will be pushed over to the left in place of tab that you just unknowningly closed, causing even more confusion.

A viable and aesthetic alternative would be to make the buttons less noticeable until the user places the cursor over the actual button itself. Less noticeable does not mean invisible or near-invisible, just let it blend more naturally as to not be too distracting. Once the cursor is over the button, it can glow or change colors to indicate that clicking the mouse will cause something to happen.

Google Chrome does a great job of this by making the close buttons appear as little gray x's on the tabs. The x's are always visible so you always know they are there. When the mouse is directly over the x it becomes a red circle with a white x within it, indicating that something "destructive" will happen if you click at that moment. This helps make it very obvious that if you're going to quickly target the tab with your mouse to select it that you should aim for the middle or left side of the tab.