11

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?

Improve this question
5
  • 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
    Commented Aug 27, 2014 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
    Commented Aug 27, 2014 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
    Commented Aug 27, 2014 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
    Commented Aug 27, 2014 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
    Commented Aug 27, 2014 at 11:53

3 Answers 3

Reset to default
14

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

Improve this answer
9
  • 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
    Commented Aug 27, 2014 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
    Commented Aug 27, 2014 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
    Commented Aug 27, 2014 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
    Commented Aug 27, 2014 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
    Commented Aug 27, 2014 at 19:07
6

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.

Improve this answer
5
  • 1
    I really think it's important to avoid 2 rows of tabs though.
    – J. Dimeo
    Commented Aug 27, 2014 at 10:42
  • 3
    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
    Commented Aug 27, 2014 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
    Commented Aug 27, 2014 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
    Commented Aug 27, 2014 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
    Commented Aug 27, 2014 at 12:46
5

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

Improve this answer
3
  • 13
    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
    Commented Aug 27, 2014 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
    Commented Aug 27, 2014 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
    Commented Aug 27, 2014 at 17:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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