It's often the case that there are two kinds of presentations of a selected page, like the following: 1.the selected button become dark and invalid, while others page-buttons are up-light and valid enter image description here

2.It seems most of the web and APP prefer the following presentation, which all buttons are dark or less bright, however the selected on is brighter. enter image description here

enter image description here

Here are my questions:

  1. Which kind is more acceptable?

  2. How they impact the user experience?

  3. Is there any other kind of presentation of a selected page?

  4. Can you recommend some articles about this issue?

  5. Can you give me some suggestions about the following design? enter image description here

THank you!^_^

1 Answer 1


I am going to consider all text as Lorem Ipsum, for I can't make anything out of it. This gives me a great opportunity to look at the design pattern without getting influenced by the textual content.

First of all, you are placing different visual styles together and expecting a one size fits all answer, which I believe will not be possible. A couple of examples you cited have buttons that denote selection, and couple create a impression of a tabbed navigation. These two are different modes of navigation.

I would most certainly avoid the first way. It appears disabled and there seems no visual relation between the content and the buttons. The second one has tabs and buttons both, The fourth one is definitely better than the second one. Out of these designs, I would prefer the third one. It is less flamboyant, and provides a visual distinction of selected vs other options.

When you say it is for a game, that does not discount it from being usable. Although you might be thinking about more contextual depiction considering the nature of the game. Still the buttons need to have affordance, unless you are aiming for low on discoverability for some game elements (which is a valid thing to do for a game).

Here are some other places you might be interested in.

  1. Toggle button vs Tabs
  2. Too many tabs?
  3. Bootstrap navigation (for different ways of tabs vs buttons)
  • thank you so much for inspiration!I think I’ve got something amazing about this issue. I'd like to share with you all: nngroup.com/articles/tabs-used-right Commented Mar 26, 2015 at 11:46
  • Glad to be of help. Would you please accept and close this question?
    – Harshal
    Commented Mar 26, 2015 at 11:51

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.