dynamic tab 1

So this tab width is dynamic, the benefit is being able to say that perhaps all tabs will have 20px padding on either side of the label. Avoids wide tabs with small labels ( if that is a terrible problem).

set width tabs

All these tabs are the same width, benefit is they all have even placement, and weight for the most part. The issue arises when you might have a long label...that won't fit the tab, I suppose just being judicious with labels will solve that.

  • 1
    The first one looks a lot more natural to the eye as it's dynamic to the text above it and offers a good padding in between. The second one is consistent but maintains the same width despite the word being large or small. Visually, the first one looks a lot more soothing to the eye than the second. – Swapnil Borkar Jun 22 '16 at 4:31

I guess this is another "depends-on" answer:

  1. If the designer has control over the labels (i.e., no user-created or user-named tabs) and over the space available (i.e., no resizing of panels and windows), the designer might choose the equal-width design.

  2. In all other cases, I would (as a designer) opt for the dynamic width, because it may display more tabs. I think there is no value in trading visibility of labels for white space to achieve equal width.

Very long labels can be avoided in case (1), and should be truncated in case (2) (at least if they would push out other labels into the overflow mechanism).

  • thats the path I was on, if we have control over the labels then equal width is fine but dynamic labels are simpler to execute because we don't have to worry about that stuff. – jonathanb Jun 22 '16 at 21:07
  • but now i wonder if there is a best of both worlds. perhaps a max/min width for tabs? what do you think? – jonathanb Jun 22 '16 at 21:07
  • I think that depends on your specific case. Assuming you have case (2), do you know how many tabs will be there? How long they are on average? How much width is available for the tab strip? If you have typical values for these, you might be able to calculate a minimum width and a maximum one to start truncation. – virtualnobi Jul 7 '16 at 5:32

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.