UI Guidelines for web developers

Now I know that there are no hard-and-fast rules regarding user interfaces for websites, but I thought I would put in my 2 cents.

I was thinking about button rollovers (think :hover pseudo selector) and in trying to draw a parallel with physical buttons a few ideas came to me.

TACTILE SENSATION

Physical buttons have a tactile sensation BEFORE you push them, letting you know that your finger is in the right place before you push down on them. On web apps, we don't have that luxury, at least not yet.  Enter the rollover.  We need to give the user a visual indication akin to the tactile sensation one receives when lightly touching a button in reality.  So we change the style of button, here is a good example of such a change:

Normal State:









Rollover (hover) State (slightly lighter in hue):

Down (clicked) State (less bevel, less shadow):








*Feel free to take these images if you want them


The normal state has a clearly defined bevel, a high drop shadow and full opacity on the gradient.
The hover state has a lighter opacity on the gradient.
The down state has a "flattened" bevel and a lighter gradient with almost no drop shadow.

It's very important to not confuse the user by using the down state for the rollover.  It is very tempting to only create 2 images and shorten the time it takes to make the style.  If you make the down state the same as the hover state, users may be confused and think that a rollover causes a click.

It must be very clear the difference between a rollover and a click because we don't have that tactile sensation like in real life.  The rollover is a substitute for lightly putting our finger on a key and lets the user know, "I've seen your cursor and you are in fact in the right place to make something happen."

Drop down list vs Radio button List


When should I use a radio button list vs a drop down list?

Use a radio button list when:

1. The number of items is finite or guaranteed to be fairly small.
2. You need the user to make a conscious choice and not just set a default (even though you can set a default if you want).
*I've used radio button lists for true/false questions, month selection, year selection, and others.

Use a drop down list when:

1. The number of items is larger than would fit in a radio button list.
2. The number of items changes greatly over time.
3. You don't care if the user makes a choice or not (you can always set a default value though).
     a. I've seen a lot of users not change the selection on a drop down list so the developer puts a blank choice at the top.  This leads to having to handle the blank choice in code by putting some null value or a -1 or something of the like.  Again, if the user must make a choice and the number of items is small, use radio button lists.


Any comments are welcome,  thanks for reading!