4

Most applications that have tabbed panes use the standard Windows style of dealing with multiple rows of tabs. Ie. if a tab in the back row is clicked then the WHOLE row jumps forward, and the forward row jumps back. For example :

enter image description here

Clicking on 'Hardware' moves the WHOLE back row to the front, and the front two tabs to the back.

Firstly I just want to say... I HATE that. The visual placement of things are scrambled up, and it gives me a real headache.

There is another alternative to this. For example in Java Swing, the back row stays at the back, but the tab 'Hardware' is colored/highlighted differently, making it very clear to the user that that is what is being looked at. I know it breaks the folder metaphor a bit, but I feel like it is much more easier on the brain.

What are peoples opinions on tabbed panes? And does this Windows-jolting-jumping style of tabbed panes have a name? I want to be able to use some nomenclature with clients.

1

In fact you have many solutions but it depends of your use of these tabs.

Ideal one is, as mentionned before, shorten labels or rearrange multiples tabs in one, but it's not often easy.

Other way is to use left menu as VLC for instance (it's not the same use but, again, it depend of what do you want to reach)

VLC Left menu

Or the notepad style (much like web browsers) with arrows.

enter image description here

Or if you're creative, you can use the sublevel of tabs like many website, i'm pretty sure there is something to do without disrupting all user's habits.

enter image description here

And one last more in balsmiq, they use listbox on the right, after tabs. enter image description here

1

First off, if you're able to group tabs, definitely just go for it. You might even get away with placing some tabs' content on the 'General' or 'Advanced' page.

But in some cases, this is just impossible.

Here are some alternative options to Microsofts horrible way:

A dropdown menu at the end

Hide some less important options under a More, Other, Advanced dropdown tab.

Addition of the More dropdown menu

Scrollable tab bar

This can be implemented in multiple ways:

  • Tapping the arrow scrolls the bar
  • Scroll by dragging the bar to the left
  • Scroll by dragging the page to the left

Tab overflow pagination, Step 2

Submenus/subtabs(?)

The tabs are actually more like menu dropdowns

Menu expanded

Reference: Google Material Design

0

Jolting-jumping style of tabbed panes do have a name: Bad design.

Multiple rows of tabs make it very hard for user to remember which one they have visited. Furthermore it will take them a lot of time to try to figure out how this thing works, meaning wasting their time. Other design should have been chosen here, alternatively try to simplify or group the content more.

0

Is there something wrong with just shortening the tab names... one line of tabs ...or shrinking the tab font?

If you have tons of tabs, perhaps symbolic icons could show the purpose of each tab in the space of a character or two.

  • yes. ideally you want just one row, but sometimes its not possible – Oliver Watkins Dec 28 '14 at 0:18
0

Usually its possible to group content into two or three tabs, and then give further options inside of those major tabs. I understand there might be concerns about 'hiding' options inside of other tabs, but its generally possible to interpret/ learn the most common use-cases and show them as obviously as possible.

In cases where the number of tabs is going to be unknown/ increased over time, you can also consider vertical tabs on the left/ right and let user scroll down to access further tabs. This case is unlikely in my opinion.

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.