3D Button Examples, Usability Issues

It could be a great problem if users don’t understand that they can click on a button, even worse, they might not notice that that button is actually a button. Then you have users moving the mouse around the website, trying to find something to click.

To avoid this usability flaw, try to include 3D buttons in your interface design. Most users understand the message because it represents their mental model and the real life: oh, it can be pressed!

In the example below, taken from Google Calendar, the arrow buttons are totally flat and it’s difficult to notice that they are activated.

Google Calendar Buttons 20080103

Expedia.com, with its “Search for flights” button and Lego, with its “Search” button, give users a clear message: this is a button, is activated and you can click on it.

Expedia Search for Flights button 20080103

Lego Search Button 20080103

Buttons That Indicate Actions

Using buttons when designing a website could be a better solution to indicate actions. On the other side links usually tell users that they will be taken to another page.

Start Here Button 20080101

Vote Button 20080101

In the two examples taken from WebMD, the health website, buttons clearly indicate the beginning of a process or action. In both cases using links would have been not totally correct, creating a little bit confusion to users.

Myspace, a How-Not-To-Do-It Example of Design

Intentional bad design is also a horrible way of taking advantage of users. The better example now a days is the myspace transmissions website.

Myspace Transmissions 20071210

The whole site is horrible and full of buttons that don’t do what they are supposed to do, like a virtual equalizer and a fake volume control.

Myspace Transmissions Button 20071210

The worst part is two controls labeled as “videos” and “pics”. They are there to confuse users and when they click they are taken to another page (instead of doing something with the interface). If you do that your users will be afraid of clicking every single control of the interface. Even worse, if some controls don’t have a label and are not self explanatory. Terrible web design, horrible usability.