2

In my application, I have to represent a Work Order entity that has N Work Order Sections and each section has M sub-items. Currently, I'm representing this like so:

enter image description here

Each Work Order has a bunch of fields (not shown). Then I've got a tab strip showing the sections, and each section has fields (not shown) and the M items.

I'm using tabs to indicate N children, and an extra dummy tab to add a new entity to the list. And I'm using a link to enable deleting the current entity in the list.

I'm trying to find a more elegant and unified way to represent the Add New and Delete Current actions, keeping them physically together. What would be a good way of doing this?

Or, is there an entirely different and better way of capturing these master detail relationships?

1

My personal preference would be:

  • keep the tabs on the left,
  • use background color for the selected tab same as the inner box border color,
  • separate groups of digits, e.g. 1000-054,
  • use a gray x on each tab, which would be highlighted on hover to a red x,
  • and a + sign on the bottom tab

there are plenty of inspirations for vertical tabs, close tab, add new tab

or you can consider miller columns or some special visualization for a hierarchical tree

0

Agree with all comments from Aprillion except the one about the x-button in each tab to delete.

The x-action on each would be more suited if you're just closing the tab. This is more suited in scenarios where data is more fleeting, and easily recovered (like a web browser).

In the case of work items, a delete action is more permanent and it would be good if it got a location and mechanism suited to the metaphor. I would place a delete button (with perhaps a garbage can icon) in the right corner of the tab-content.

A confirm action or undo-able notification box would be nice. You could also move the 'EDIT' option there and have an 'option-panel' in the top right.

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.