Saturday, October 18, 2008

Be obvious!

This is one of my design mantras. In all parts of a site or web app, I try my best to keep things obvious, even when it costs me design wise (sometimes it would have looked better if the buttons were not so obvious, and underline is not pretty, but it is what the user will expect from a link).
I prefer to let buttons be buttons, and links be links. Make it easy for the user to discover my interactive elements.
A good example is to make a big button with both text and icon, if I want the user to find it fast and easy:

The button above is small, hard to discover and hard to hit. It leaves the entire explanation of its function up to the little icon, whereas this:
-is easy to find, it is obviously a button, and the user has both icon and text available.

The CSS hover properties is an additional helper for making the buttons and links easier to discover. Don't be shy, let the background color change to something entirely different, change the icon and border if you have one (try to hover over the button below).
  The cursor should also change (keep in mind that IE has some problems with the hover on buttons, you might need a script to do it).

The CSS for this button:
	.buttonHover{
		background: url('img/button.png') no-repeat; 
		display: block; 
		height: 35px; 
		margin: 10px;
	}
	.buttonHover:hover{background: url('img/buttonHover.png') no-repeat;}
	
Let something really obvious happen when a user hovers over a button....

K