6

I'm working on UI where I need to add tabs. Currently I have added tabs all of same size but size of text inside each tab may be differ. Selected tab is shown by different color as shown below:

enter image description here

but there looks no link between selected pane and its relevant area when I look at my UI. Also I'm being asked to show different sized tabs according to size of text inside each tab but different sized tabs looks weird when it comes to UI. Current tab look more like buttons too.

Can you suggest some better ideas to deal with such tabs? I've also read apple UI guidelines about tabs but could not find anything relevant. Please help me have best tabs for my UI.

  • Use tabs with care. Tabs are just a form of navigation and often there are better ways to do things other than tabs. For example Apple provide a list of icons in their system menu and then us a nav bar that does what tabs do. – Stewart Dean May 8 '14 at 16:16
  • Is this in the context of a desktop or web application? I guess there are different trends and standards that are applicable. – Michael Lai May 10 '14 at 21:28
  • This question might interest you. ux.stackexchange.com/questions/64728/… – Balaji Natarajan Oct 2 '14 at 15:39
15

Take cue from this. This scheme is followed almost everywhere.

enter image description here

The selected tab seamlessly merges with the content area while other tabs have darker tone in general.

6

Ths is called "tabbed document interface", so you can google it.

From my experience:

  1. Active tab back color should match page backcolor, with no lines separating the two.

  2. All tabs should be the same maximum width, and as more tabs are opened that could fit, tab width should decrease. Now depending in the usual number of tabs used in your program, you could get to a point where the tab width is too small and you will have to add a rightmost button to a menu of the tabs that don´t fit.

  3. Let me say this again: all tabs should be the same width. This way, users memorize the inter tab travel distance and can switch tabs with the mouse almost as a reflex. If you have variable width tabs, it becomes a watch every time where you click exercise.

  4. Inactive tabs backcolor should be darker.

  5. You can have an unclosable fixed first tab with a menu, from where you select options that open the other tabs. This tab could be half the width of the other tabs, or maybe wide enough for a "home" icon.

  6. Tab captions should be left aligned, not centered, those are tab names, not button captions. It is much easier to read the tab names if they are all left aligned.

  7. Long tab captions that don´t fit in the tab width should be shortened with ellipsis and a tooltip should be available with the full caption.

  8. Optionally, the user should be able to drag and drop tabs to reorder them. Tabs should have a close button near the right border.

You have three main TDI examples to check out: Internet Explorer, Firefox, and Google Chrome.

Actual example from my TDI Class for Visual FoxPro

3

What about something like this

enter image description here

Actually, here I want to say that selected tab should be different than other non selected, for this the size of selected tab, text color and background color of tab should be different. That's what I think is better.

2

A simple strategy is to actually reverse the colour of the tabs, so that the selected tab has a white background with black font colour. That way the display area will have the same colour as the tab and the user can make the link.

I don't know what you mean by the tab looking more like buttons. They need to show that they can be clicked, so I don't think this is a major concern. Perhaps you can try to left align the tab label and see if it makes things look a bit better.

1

Regarding your size issue:

Is there a size of your tabs in which 80-90% of the labels fit? If so I would suggest using that size as your default. And for bigger tabs you could make them grow according to content. That way you will have a good solution for most of your users and still be able to accomodate those select few that have bigger names for the tabs.

Regarding the distinction of tab and content:

It really comes down to the graphic design. As some of the other commenters pointed out, letting the background colors of the tabs flow over in the document is most commonly used to provide a visual indication. Here's an example of your mockup:

enter image description here

However there are alternatives which could suit your problem better. Below are some examples from Outlook, but there are plenty around to choose from.

  • Normal use of tabs, applied in the microsoft Ribbon. Notice the different color of the 'Bestand' (File) menu to make clear that it is a key tab

  • Tabbed navigation menu. Notice the different way of visualizing the link between the content and the tab item.

enter image description here

  • Tab List: This is a good way of handling a large amount of tabs (5+) because if you get too many tabbed pages to display in one row you should either reconsider the amount of tabs or start using a list like this.
    enter image description here

Hope this helps you get some ideas about how to handle your design problem

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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