2

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.

Improve this question
1
  • 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. Commented Jun 22, 2016 at 4:31

1 Answer 1

Reset to default
1

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).

Improve this answer
3
  • 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. Commented Jun 22, 2016 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? Commented Jun 22, 2016 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. Commented Jul 7, 2016 at 5:32

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.