We have a dialog that allows the user to choose the "type" of a shape: text, pop up and link. Changing the type also changes the modal's body. Our current design uses an underline to indicate the active "type" tab (like this site uses!). Every time I look at it, I feel as if I don't notice the other choices available. It seems as though attention to the choices is lost. I've validated this with a couple of our "beta" users and they didn't "realize" the other options were there.

I do like the look of this design since there isn't a lot of weight, but the other options don't seem noticeable.

underlined menu bar

The second design solidifies the selected "type". Does this design bring too much focus on this area? Would this increase the learn-ability of this UI?

solid menu bar

3 Answers 3


Try adding a background color to the option menu. If you distinguish it from the background and then highlight the color selection, the user can see that he has other options.


download bmml source – Wireframes created with Balsamiq Mockups


The answer is to make them look like tabs in the first place. You are going for a very clean design, which has pros and cons. The cons are that there is often little affordance or visual indication of what an item is.

So, you should try adding in the more subtle elements of an unmistakable tab menu, until yours is clearer. There are many different elements which would achieve this, you just need to decide which ones don't take you too far from design coherence.

Some examples to consider:

enter image description here

enter image description here

enter image description here

  • My only concern with going the full tab design is that, IMO, it doesn't easily convey that only one tab can be selected - the shape types are mutually exclusive. This is the reason why it wasn't fully mean to look like a normal tab bar. Apr 13, 2013 at 12:36
  • 1
    @TheCloudlessSky Tabs always mean that only one can be selected at a time. Do you want more than one to be selected at a time?
    – JohnGB
    Apr 13, 2013 at 12:37


  1. display the tabs as tabs, ie, all options have an upper, left, and right border, the content has a top border, which is interrupted at the current option. The active tab should have the same color style as the content area, and the other options have less brightness. Or

  2. display the tabs as buttons, using active and inactive states (eg. blue / grey)

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.