< Design Pattern Library
Button Identity Disorder

A colleague sent me this example of  “button identity disorder.” (Click to see full-sized image)

Some buttons on this page are obvious, for example “Click to Talk.” What is less obvious is the function of dimensional-looking yellow bar across the middle of the page. The first set of text (“Looking for more than a ballpark summary?”) is not linked but the second set of text (“Contact us now”) is.

While dimensional effects can add visual interest, non-clickable “raised” elements have the potential to be confused with buttons. We’ve seen this in testing where participants try clicking on anything with a beveled or drop-shadow treatment.