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.

For a Windows Forms application I'm looking for a solution to organize forms in a tab group. Problem is that those tabs would be dynamic and have cryptic, short to long labels.

Data is land registry data, each tab would be a section of the land registry. My users have deep knowledge of those things, so understandability of text would not be a problem.

The most common case would be just one section, but there can also be cases where there are three or more. With the length of the tab labels, 3 tabs would already be hard to display (more and longer tabs would get cut off with "..." and eventually be displayed in a dropdown window like in internet browsers)

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Any ideas for a different solutions?

share|improve this question
5  
"My users have deep knowledge of those things, so no need to simplify wording etc." - This doesn't make sense to me, surely if they have a deep knowledge then you CAN abbreviate each tab to something like KG302120 etc.. ? –  user43251 Aug 27 at 8:30
    
Sure there is some tolerance in wording. What I actually meant was that I must not simplify the wording. But understandability isn't the problem after all, rather the length of the wording. I'll edit the question. –  J_rgen Aug 27 at 8:39
    
Do these tabs have the same parent category? If so you could have one title above all tabs then put a title within each tab as well as on the tab so it can always be read.. –  user43251 Aug 27 at 8:43
    
Yes, they all belong to one certain real estate, like "apartment". The sections themselves are identified by 3 attributes: KG, EZ and Top. Apart from that, they have no name, so you need those 3 attributes to properly distinguish them. –  J_rgen Aug 27 at 11:19
    
You could maybe put the ellipses in the beginning, instead of in the end. The first tab being displayed out full, the second showing ellipses instead of "KG 30120", e.g. [ … Top W2 ] [ … Top Parkplats zu W2/Parzelle 11] –  Ideogram Aug 27 at 11:53

3 Answers 3

up vote 11 down vote accepted

You can try breaking the tab control into a master-detail combination. Then you have all the width you want and a more uniform display of the key information (the columns).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
Can you think of any real-world examples for that? Would you update the content area on single or double click? And how about the behavior when the number of elements gets very high? –  J_rgen Aug 27 at 13:04
1  
Can I think of any real-world examples of... master-detail relationship? Well, yes, quite a few :). Update on click, use scrolling for many elements. –  Vitaly Mijiritsky Aug 27 at 13:07
    
I meant examples in terms of "(images of) software that uses this style of master-detail" relationship with master on top and detail on the bottom". –  J_rgen Aug 27 at 13:23
1  
Outlook, if you set the Reading Pane on the bottom. Gmail if you split your screen horizontally. Pretty much every email client supports this, and in general most software that has a table controlling a preview area (since they try to display more columns at the expense of some rows - the table takes up the width, and the split is horizontal). –  Vitaly Mijiritsky Aug 27 at 13:29
    
@J_rgen TortoiseHg Workbench, something I just happen to have open right now. tortoisehg.bitbucket.org/img/vt_history.png Click a rev on the top, its details are revealed below. –  Nick T Aug 27 at 19:07

If you can absolutely not shorten the text or re-group them meaningfully; I'ld go for side tabs.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
12  
Here you actually pay a much higher price for the long names, than in the original. In the original you had less tabs fit in a row, and it was specified that only a few tabs would be needed normally. But in this suggestion you significantly reduce the available real estate within each tab with every character that you add to the tab name. –  Vitaly Mijiritsky Aug 27 at 10:44
    
My concern is more about being able to understand the tab contents than saving up space on the page. There are so many different ways of implementing. They can be written in two lines, be in a resizable panel like in the windows explorer. –  Esin Aug 27 at 10:54
2  
The only advantage this approach is that horizontal screen real estate is more expensive than vertical screen real estate, thus in a full width application this actually could work. –  David Mulder Aug 27 at 17:42

I think a good demonstration of alternatives to a standard tab control can be seen with Telerik's RadPageView control.
http://www.telerik.com/products/winforms/pageview.aspx

As Esin stated, you could do the tabs along the side, but that could get tricky if the length is TOO long still - since it would push the content into a very small position.

If you do the vertical tabs along the side, I would recommend making the text wrappable and/or auto-scale down and not allow the tabs to get TOO wide otherwise it creates the same prob as before - it would make for an unmanageable UI.

enter image description here

In the RadPageView URL I posted above, there is an example that shows making the normal horizontal layout either overflow into a drop down or wrap on to multiple lines.

enter image description here enter image description here

I'm not trying to advertise for them, but that's a good URL to get some inspiration from. Their control suite is nice but it isn't free.

Another option would be to put a smaller piece of text or an icon to indicate what the tabs are, and then have a tooltip with more detailed information when you mouse over the tab headers.

share|improve this answer
1  
I really think it's important to avoid 2 rows of tabs though. –  J. Dimeo Aug 27 at 10:42
2  
I'm certainly not arguing, but what is your reasoning for that? I'm presenting multiple options for handling long names and that's one (although I don't think it's necessarily the best). I realize in that case it could just end up being a vertical stack of buttons at the top and that has it's own issues to overcome (such as pushing your content down). Ultimately I like the icon/short text with tooltip approach or the vertical sidebar approach. –  Adam Plocher Aug 27 at 10:54
    
Have you thought of putting the NavPane (like in your first screenshot) on the top of the content page? I came up with the idea, but thought it was an uncommon solution. Like Side-Tabs, but at the top to have enough room for long labels. –  J_rgen Aug 27 at 11:14
1  
ux.stackexchange.com/questions/15558/… P.S. Your other suggestions are great! I was just nitpicking that one part of that one idea... –  J. Dimeo Aug 27 at 11:38
    
Ahh, interesting. Thanks for the clarification. I find those comments really interesting and after thinking about it a bit I agree, it is pretty disorienting when the rows of tabs jump around. It seems like it could MAYBE work for a two-tone flat UI style if it doesn't jump around in that way but there's still gotta be better options in most cases and then it's not really so much "tabs" (in the literal sense) but more like buttons that just show your panels. –  Adam Plocher Aug 27 at 12:46

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.