How to improve UX on deeply nested form functionality in the browser?

Question

I have this, which is horribly unstyled but shows the inputs and grouping (which is also described in terms of the HTML structure in more depth here).

Basically, you have a form for a "dictionary term". The term has multiple "meanings". Each meaning has multiple senses. And a sense is just a simple text input for now. So you have a group of meanings, which you can add/remove individual meanings. Within the meaning, you can add/remove senses. Within the sense, you can set the sense in the input.

How can this sort of complicated nested form structure UX be improved (maybe by an entirely non-nested form approach)?

One thing I tried considering is making a multi-page form. You enter the term name on screen one. Click add meaning, takes you to a new page. Click add sense, takes you to a new page. On save, takes you back to the meaning, etc.. But that is clunky, slow, and you lose a lot of context. So not really sure how it can be improved yet.

I'm also taking into consideration how this would work on mobile.

Some research:

• https://medium.com/nextux/form-design-for-complex-applications-d8a1d025eba6
• https://uxdesign.cc/8-ways-to-make-forms-more-user-friendly-50f3f22c708c
• https://dribbble.com/tags/nested_form

Answer 1

You could try a data tree so that it is clear to users what the hierarchy is.

Although you can probably implement this in mobile using dropdowns/accordions, I feel that is not very user friendly. In that case you can possibly do some sort of hierarchy on different pages

I would say just think about what your user would want. Will they be switching back and forth between different hierarchies(i.e. meaning 1 -> sense 1.1 -> meaning 2) or will they stay within the hierarchy (i.e. meaning 1 -> sense 1.1 -> sense 1.2)? If they are switching back and forth, they should be able to switch back and forth between hierarchies seamlessly (data tree). If they are most likely staying within a hierarchy, I see no reason why each cant be on separate pages to reduce excess noise