2

For a desktop application, I'm trying to design form pages for business objects that can have a dynamic amount of child objects (at least 1).

A business object has a "general" form (that covers all child objects) and one form per child object. A requirement is to have only one view per business object, everything below should be structured within this view (e.g. with tabs)

Now, to save height, I'd like to use one tab pane for having both the "general" form and the child object forms. But since the child tabs are actually sub-items of the general tab, it might be ambiguous to have them in the same tab pane. Sub-tabs would make sense, but I dont want to lose the vertical space. Also, there is often just a single sub-item.

I can think of different solutions: From just treating all elements the same (1), to giving a hint by adding a gap (2) or grouping the elements (3), (4). (4) and (5) claim more vertical space, which I'd like to avoid. enter image description here

Microsoft's Ribbon does segmenting elegantly, but again, it needs some additional vertical space to display the group label (Ribbons use the titlebar for that) enter image description here

Can there be issues with this kind of structure? Some feedback or maybe counter proposals would be helpful.

Improve this question
1

3 Answers 3

Reset to default
1

Bootstrap has quite an elegant method for handling this sort of UI using tabs for the primary heading and 'pill's for the secondary - http://getbootstrap.com/components/#nav-tabs.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I've found that this helps group the content well and reinforces the content hierarchy while not taking up as much vertical space as a full second set of tabs.

Hope this helps.

Improve this answer
1
0

For me, option 1 is the best. It's clean, simple and understandable. For what it's worth, the Microsoft Ribbon example your referencing is one the worst UI's out there. I really wouldn't use it as a reference. Keep the interface simple, avoid clutter.

Improve this answer
1
  • Is it one of the worst? It got a lot of criticism because it changed convention significantly from the previous MS UIs so required a lot of user effort to re-learn how things worked. While this might be bad UX design, the UI itself seems effective.
    – edeverett
    Commented Jul 31, 2014 at 10:01
0

The general reason for a tabbed interface is to show other options or menus that may not be active at the time, but are available.

By showing the menu and replacing the inactive tabs with a sub-menu you're breaking this convention.

With that in mind, I would suggest option 5 is the most obvious in functionality terms, I don't think it is a great user experience.

Improve this answer
1
  • It is not really a sub-menu as the 3 items on the right are not controlled by the first item. It's more a break in hierarchial visualization. Also tabbed interfaces have the purpose to put parts of a page, that would otherwise be too long for one page, into segmets by creating meaningful categories. I don't see the point of having inactive options in a tab pane.
    – J_rgen
    Commented Jul 31, 2014 at 11:05

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.