Consider that I am creating an interface for a mobile app which shows a list of buttons on the main screen. I can move through the buttons using mobile keypad (feature phones) or screen touch (smart phones). I wonder if I should implement the currently focused button in darker shade as compared to the other buttons? Or a lighter shade would work as well? I mean is there any unwritten UX rule that selected/focused button is always in darker color compared to the other buttons on the same screen?

1 Answer 1


There is no rule, written or unwritten. All that matters is that:

  1. The focused state is sufficiently different, yet still clearly the same button. A change from #EEE to #DDD is usually not enough, but changing a square red button with a border into a blue borderless circle isn't a good idea either.
  2. The focused state is consistent across the interface. If the focused state of one button is darker, other interface elements on the website, when possible, should follow the same system.
  • 1
    Yep, it's all about consistency and contrast. If your site is dark, a shift to lighter is a good contrast or vise versa. I would note that buttons that turn darker can look like they've been "pressed" with the right effect though.
    – Ben Brocka
    Commented Aug 25, 2011 at 13:33
  • And color is useless in showing a selected item if there are only two things in the list. Commented Aug 25, 2011 at 23:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.