I am programming application that writes data about contracts into database. It is similar to banking software.

Contract is very complex data, so let me describe its structure:

It has basic info that is represented with a set of basic controls ( button, checkbox, textbox etc ).

Contract may or may not have additional complex data that describes it, in view of an annex.

Contract may or may not have additional complex data that describes it, in view of a special report.

Annex and Report have exactly the same characteristics like the original contract. They have same buttons, textboxes and so on. The only difference between Contract and these two is the fact that Contract has 2 extra textboxes, and of course, that Annex and Report are part of a Contract.

After asking for help here previously, and researching online I have decided to use master-detail interface to preserve space. That way user can both add new data or edit/delete/search/print/etc existing one.


In order to present such enormous amount of data I have decided to use tab control. This solution halved the amount of occupied space.

For displaying existing data, I have decided to use treeview control because of following :

  • It can present contract as a root node.
  • If contract has anexes or/and reports, they can be shown as child nodes.

Below are the sketches of tab control when user enters contract/annex/report.


download bmml source – Wireframes created with Balsamiq Mockups

Second tab has same controls for Contract/Annex/Report. First tab has extra 2 controls for Contract, but is the same for both Annex and Report. In the mockup I have shown first tab for Contract in order to provide point of reference for the readers of this post.

Here are the sketches of treeview for following cases:

  • Contract has no annexes or reports.


download bmml source

  • Contract has 2 annexes.


download bmml source

  • Contract has 2 reports.


download bmml source

  • Contract has annexes and reports.


download bmml source

Below is the sketch of what I have "figured out" so far.


download bmml source


As said before, treeview represents existing data in database.

If user wants to edit contract/annex/report, he checks desired node and presss < button. This loads selected node into tab control. When finished with editing, user saves edits by pressing > button and changes are saved.

If user wants to add new annex/report to the contract, he can do so by loading existing contract into tab control ( by pressing < button ) and then pressing New Annex or New Report button ( these buttons will become enabled as soon as contract gets loaded into tab control ). Once finished with entering data for annex/report user must press save button in order to add the new entry.

New contract is added by pressing New Contract button -> tab control gets reset and cleared. Once user finishes entering data he must press save button to add the contract into database. Contract will be shown in treeview control.

User can abort editing/new entry by pressing cancel button.

If user wants to delete/print contract/annex/report, it can be done by checking desired node and pressing corresponding button.

As for search option, pressing that button will launch a dialog box where user will configure search criteria. Treeview will be repopulated with search results.


I believe my general idea is good -> use tab control for entering data, and treeview for showing existing entries. I am also satisfied with the solution for editing contract/annex/report via < and > buttons. Printing, deleting and search functions are also properly implemented in my opinion.

However, adding new entry - be that contract/annex/report - is inefficient in my opinion. The same goes for the case when user loads existing contract into tab control and tries to add new annex/report.

I believe my design is very "clumsy" and inefficient, which is the result of my inexperience.


  • How can I improve "mechanics" for adding new annex/report to the new/existing contract?
  • Is there a better way to implement entering of new contract, than adding special button to it ( maybe I could add special tab in the tab control, like + for this purpose)?
  • If you have better solution for implementing this type of master-detail interface I will consider it as well.

If further info is required leave a comment and I will update my post with relevant information.

1 Answer 1


Your instincts in general are on point, but your implementation is a little bit wonky. The interface you have 1) moves from right to left (first select something from the right, then enter info on the left) and 2) requires a loading/unloading step that isn't strictly necessary.

Here how I would redo your interface:


download bmml source – Wireframes created with Balsamiq Mockups

Clicking on the left loads the requested info into the right pane. Make edits, click save, done.

"New" buttons in this design are located in a contextually-appropriate spot. New Contract is a top-level addition so it lives in the master list. New Report and New Annex are specific to an individual contract, and so live within that contract's view.

The one UX path that is not reflected here is the case of the unsaved contract: what happens if a person makes changes to a contract and then clicks to a different contract or annex? In that case I would throw a popup that says "You have unsaved changes to Contract #1. Would you like to save your changes? [ YES ] [ NO ]".

  • 1
    I have upvoted your answer for now. I will wait few days in case someone else answers as well, before officially accept. what happens if a person makes changes to a contract and then clicks to a different contract or annex? That was the point of the checkbox in treeview's node. Once checked ( contract/annex/report ) I would disable treeview to avoid the case you mention. User can always cancel editing/new entry and treeview would become enabled. Maybe your approach is sufficient. I will give it a thought. Thank you so much for such a quality answer. Happy New Year! Best regards. Dec 31, 2014 at 23:21
  • I forgot to ask in previous comment, but where do I delete contract/annex/report? Should I add a button for it next to print button in your mockup? Should I just implement deletion when user clicks on a treeview's node and presses DELETE key? Dec 31, 2014 at 23:29
  • I hit your first question (what happens if a person makes changes to a contract and then clicks to a different contract or annex?) in my last paragraph. If a user makes a change to a contract then tries to switch to another contract, show a popup that asks if they want to save or discard the changes to the current contract. Imagine it is like trying to close a file in Word — do you want to save the changes or not?
    – Drew Beck
    Jan 1, 2015 at 0:35
  • I think a button next to Print for Delete is the way to go, yes.
    – Drew Beck
    Jan 1, 2015 at 0:35
  • 1
    I really like your solution so I have decided to officially accept it ( I doubt anyone else will answer, although I believe I have provided sufficient info ). One more thing: we forgot to place SEARCH option in your design. I have decided to place New Contract button below treeview and add next to it Search button. Something similar to Print and Delete buttons in your sketch as you have advised me. If you have better solution, feel free to share it. Thank you so much for helping out. I highly appreciate it. Best regards until next time! Jan 1, 2015 at 17:56

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.