We need to capture data in the following structure(A json payload is the easiest way to represent the structure I know of):

  "A": [{
    "B1": "foo",
    "B2": 1,
    "B3": [{
      "C1": "bar",
      "C2": 2,
      "C3": [{
        "D1": "baz"

The user has to capture this information in a form/forms/table. As you can see A is a collection of data, so is B3 and C3. Basically it's nested collections of data.

Something to note is that the structure represents a single domain entity, i.e. D1 doesn't make sense outside the context of the C items and so on.

We initially thought the easiest way split up the capturing process without loosing context would be to have an A page that has a table of B items and a button that allows you to add a B item. Upon clicking the Add new B item button you are taken to a page to capture B1, B2 and a table for B3 that contains C items also with a Add new C item button and so on... While maintaining context with a breadcrumb. So if the user is on the deepest page and capturing D1 the breadcrumb would display A/foo/bar

The primary users of the system raised concern that there needs to many A items captured. And being moved from screen to screen would be frustrating. Their suggestion is that the data be captured in a table. e.g.

Table Capture

Our issue with this is that there is so much duplicated data being typed in over and over again. And another issue is the possibility that the user could make a typo, creating 2 instances when only one was intended i.e. foo and fo0

I guess my question is, is there a nice way to allow users to capture large amounts of nested data at once?

1 Answer 1


Need to be careful to make sure that the user understands that there is a parent-child relationship here, that data from A dictates B and B dictates C. The table does not communicate that effectively.

A tree/map UI of some kind would allow the user to not lose the context of the parent values whilst capturing the child items... Maybe allowing for a typeahead of some kind if the values are non-numeric, in order to use linking, instead of duplication. If the values in question are numeric, allow some kind of drop down to link to previously entered values and a numeric input field to add new values. This also enables you to graphically represent the decisions/inputs made by the user in a tree/map, allowing the user to easily spot any mistakes.

Value creation


This is like building a multi-level menu traversal, just easier to see all relations at once.

EDIT: You could also think of it as a multi-leaf tree/multiply linked list/map.

If there are multiple variants of A, so A1, A2 etc.. Then a matrix UI structure makes more sense.

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.