Gradients are often used on user interfaces to give it a natural look and feel. They act as a single light source lit from above mimicking the sun. This effect gives objects depth in appearance. Users interpret the lighter areas as being closest to them and darker areas as being farthest from them. Gradients are useful for showing users which buttons are active and inactive.
- 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 look convex, so that it indicates the button is inactive or hasn’t been pushed. When the user clicks on a button, it should look concave, so that it indicates the button active or has been pushed. The light direction of a gradient indicates the push state of a button. Make sure you use gradients correctly so that users know which buttons are being used.