User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I found myself confused today using the Adobe Reader Android application when navigating it's tab interface. I wasn't sure which tab was active becuase the active tab state was recessed and dimmed, which led me to this question.

In general, when a tab is in active state should it appear forward/brighter/more colorful and or more prominent than the others?

Also, are there some rules of thumb, for the UI treatments of Tab states.

I am not a designer so I am sure there are some better terms to describe what I am taking about.

share|improve this question
up vote 5 down vote accepted

Of course active state should appear more brighter. If the button is pressed it's not always mean, that it's active.

The problem is, that they look like two buttons, but they have to look like tabs.

I illustrated really easy way how to fix this.

Adobe Reader tab state problem

share|improve this answer
I agree with the tweak, however you are representing the opposite. The image on the left actually represents "PDF Files" as active. I think with your approach the recessed darker state would still throw me off. – rick schott Jul 1 '11 at 17:36
Yea, I know that. I'm just too lazy to redraw tabs completely myself. ;) – Dmitry Semenov Jul 1 '11 at 17:47
Agree completely. This is one thing that bothers me about Expression Blend, because they couldn't seem to grasp this design concept. – Steve Wortham Jul 1 '11 at 22:03

It doesn't always need to be brigher - that depends on the color scheme that you're using. If your app is bright, then it should be darker. It does need to be more prominent and to stand out from the other tabs. But you're almost always going to have this problem when you only have two tabs - because then you can't know which one is different from the others - they're just both different from each other. The way to solve this is to have it blend in with the color of the tab box itself, and this indication will have more weight than most other things you come up with. For instance, in @Dmitry Semenov's image, if one of the tabs was simply black, it would be immediately clear and unambiguous.

share|improve this answer

It depends on the general design and colour scheme of your site. If your site is full of rich colour, it might be sufficient just to make inactive tabs a pale grey.

Like Mirjirisky above (who writes a very helpful answer), I'd also advocate doing whatever you could to make the active tab appear contiguous with the tab box itself.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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