by anthony on 08/20/10 at 7:06 pm
Gradients are commonly used on a user interface to give it a natural look and feel. When a single light source is lit from above it tends to mimic the sun. This effect gives objects depth in appearance, where users interpret the light areas as being closest to the light source and dark areas as being farthest from the light source. This is exceptionally useful on buttons.
- Users see buttons that are light at the top and dark at the bottom as convex (pushed out).
- Users see buttons that are dark at the top and light at the bottom as concave (pushed in).
A button in its natural state will be convex with a rounded surface, so that it indicates that the button has not been pushed in. When the user clicks on a button, it should look concave, so that it indicates that the user has pushed it in. This is the correct way to use gradients on buttons. Share this article with everyone you know, so that nobody ever has to look at an unnatural button gradient again.