What is a good pattern for displaying a form with a One-to-many-to-many relationship in a web form for data entry?

  • One parent element (a case - 15 data fields)
  • One or more 2nd level elements (customers - 20 data fields)
  • One or more 3rd level elements (inquiries - 20 data fields)

Use case: A customer calls in and the user enters a case. There may be more than one contact/customer (someone calling on behalf of someone else) and each of those customers can have one or more inquiry. All of these are contained in the single case. The information will not come in any particular order because the caller will simply start talking and the data-entry person will have to quickly be able to record things in the correct form-field and there can be much going back and forth between the sections.

The customer will never see the case directly and the users of the system who are capturing the information will be trained and use the form multiple times daily so speed of entry is more important than prettiness or even intuitiveness. It's not that I want to avoid intuitiveness, but an "intuitive" design that will split the form up into several forms and/or require several additional steps to enter the data will not be ideal.

Any ideas?

  • Who is looking at this data, and how do they need to use it? Can customers see the case? Is this a reporting sort of mechanism for business people? The use case is important here. Commented Dec 12, 2011 at 2:03
  • Good questions. I have updated the original post to clarify. Thanks.
    – dbstrat
    Commented Dec 12, 2011 at 15:12
  • Can information be recorded in a simple form and attached to cases afterwards before submission? Can you offload the more time-consuming elements to the end of the process, while requiring them to be completed while also avoiding any reliance on the users' memory?
    – Taj Moore
    Commented Dec 15, 2011 at 16:54

2 Answers 2


What about two columns, like that mode in macintosh finder? A selectable list of customers to the left, and a list of cases to the right.

 CASE : Circus

 **Customers**            **Customer Clown**'s enquiries

 [New Customer]           [New Enquiry]

 Customer Alice      |    Asking for raise
 Customer Bob        |    Needs new hat
*Customer Clown*     >    Fur allergy
 Customer Anonymous  |    

Here, the case is 'Cirkus', the selected customer is Customer Clown and his enquiries are displayed to the right.

  • Thanks for the comments. The only issue with this design is that there are about 15 data elements for a case, 20 for a customer and 20 for an enquiry. I need to account for all of those elements somewhere on the form...I will update the original question to include this info.
    – dbstrat
    Commented Dec 13, 2011 at 18:57
  • 15-20 posts - sounds perfect for a list. Features for searching (or filtering) the lists helps. I would let the details of the selected enquiry show in a third column to the right. I think this approach gives both overview and fast navigation. These kinds of data models tend to change, or at least expand. If you think yours will, I would consider that when choosing the layout. Good luck! ^_^
    – JOG
    Commented Dec 14, 2011 at 8:38
  • How would this model lend itself to quick data-entry? I understand how it might be a good design if I were just listing items to eventually take me to the details, but my problem is to devise a data-entry form with all of these elements quickly and easily accessible.
    – dbstrat
    Commented Dec 14, 2011 at 13:57
  • I see your concern more clearly now. Is the user supposed to enter data to any of the three objects simultaneously?
    – JOG
    Commented Dec 14, 2011 at 18:44
  • Yes. The issue is that as it is a part of a quasi-custom commercial software product, the form will be used at different companies which have different workflows so it will be used in slightly different ways per customer. Plus the form will be part of a call-center app so to some extent the flow will be driven by the flow of the call itself which will vary. So the goal would be a form that makes it easy to enter into these various objects and switch back and forth or at least to lend itself to working smoothly in any workflow. I know it's a tall order. Thanks.
    – dbstrat
    Commented Dec 20, 2011 at 19:16

initial screen

after selecting the 'Case'

after selecting the 'User'

Building on the Mac finder way, maybe you can combine with drop-down lists

Step 1:

  • select the 'Case'
  • 'User' and 'Issue' sections are in 'readonly' mode

Step 2:

  • The selected Case's data is unambiguously displayed under the 'Case' select box.
  • 'User' select box is now active

Step 3:

  • Similarly for the 'Issue' section.

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.