Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question

3 Answers 3

up vote 4 down vote accepted

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

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

share|improve this answer
    
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. –  TheCloudlessSky Apr 13 '13 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 '13 at 12:37

Either

  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)

share|improve this answer

Your Answer

 
discard

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.