1

I'm looking for a useful editing UX for large, tree-structured content like this:

Project 1
  - Step 1
    - Explanation 1
    - Explanation 2: could be long paragraphs, too.
      - E2.1: Lots of nesting
        - with subtask
        - yet more nesting
        - [an image]
      - E2.2 nesting
  - Step 2
    - more details

My idea is to allow "local editing" that shows some depth up and down the edited area only.

E.g., while editing "Explanation 2..", I see:

  • A left vertical menu showing "Step 1, Step 2" (Step 1 being highlighted)
  • A main window where the editable list is truncated at some level with "Show more" links.
  • Clicking it might put the two "Explanation" sections onto the left pane

Example:

example layout

This looks a bit similar to "progressive disclosure", but it's more like pointing a magnifier at a specific place on a large map.

Is there an existing UI pattern like this that I could research? Or is there generally a better approach for editing such a tree, especially when many individual items are larger than a few words each?

Edit: The biggest way in which the proposed layout feels "wrong" is that I have never seen it in other systems, so it might be unfamiliar/ hard to grasp?

4
  • I can see some views but no answer. I'd be glad for your comment on why, or how to make the question more relevant if you think that helps 👍
    – bebbi
    Commented Feb 14, 2022 at 16:15
  • Do you perhaps have a wireframe example? I with these code blocks I'm having trouble visualizing the question.
    – Kevin M.
    Commented Feb 15, 2022 at 12:31
  • The question is indeed a bit difficult to grasp. What is being edited exactly and how is it edited, in a modal? And what is wrong with the current design/idea? Maybe you can elaborate on that too.
    – jazZRo
    Commented Feb 16, 2022 at 10:51
  • Done, and I hope the edit answers your question @jazZRo.
    – bebbi
    Commented Feb 16, 2022 at 13:45

3 Answers 3

0
+50

Should switching back and forth between items have the focus or the editing itself? What and how much is being edited and how often is as important to know as well. There is a lot going on in your design and it is not clear how it is going to be used. If you want to focus on editing I suggest to show less menu's and more space to edit. But if switching back and forth is equally important maybe a navigation pattern as below can come in handy.

enter image description here

This is not a normal breadcrumb pattern, the breadcrumbs are not clickable and the links in the dropdown menu's just link to the page and don't change the breadcrumb path.

The dropdown's allow to navigate back over different branches:

enter image description here

enter image description here

I once posted another example

4
  • 1
    This was most helpful, it has useful concepts but also asks great questions. Thanks, and sorry to all for taking (bounty) owls to Athens..
    – bebbi
    Commented Feb 18, 2022 at 14:13
  • jazZRo any chance we could discuss this further?
    – bebbi
    Commented Mar 17, 2022 at 15:29
  • Sure, you can open a chat room for that if the comments don't suffice. I will have to find some time for it though but do my best to respond in a timely manner.
    – jazZRo
    Commented Mar 17, 2022 at 17:22
  • chat.stackexchange.com/rooms/136882/windowing-editor
    – bebbi
    Commented Jun 8, 2022 at 8:27
1

this is an interesting question I can easily see any designer having a tough time with it. I think the main goal for you here to maintain the perception of depth and context. There one tool out there that does this pretty well, Firebase Firestone DB by Google. It keeps the depth perception in the form of 3 column structure at a time, and you can edit data from any of the columns.

While this idea comes from a more technical source, I think this can help address your problem. I am attaching some screenshots for reference.

Hope you find this useful.

Firestore Data Structure

1
  • It reminds me of Macos Finder, plus the additional editing pane. Thanks!
    – bebbi
    Commented Feb 18, 2022 at 14:15
0

What I understood from the question is:

  1. There is a tree of nested elements with large depth.
  2. Need to edit the select element as form (paragraph, text, labels etc.)

I will suggest to separate the requirement to different sections.

  1. Left panel will show tree of links(elements relation)
  2. Right Panel will be a editor which will be enabled on click of any element.
  3. Breadcrumb at the top showing user depth.

I have tried expressing my suggestion in below wireframe.

This way, we solve following issues:

  1. Display of parent child relation at one view
  2. Depth of the element
  3. Loading of data separately to achieve performance aspect for each section.

In your current solution, you need to separate the child elements and attach them to tree rather attaching them to editing form. However, you can provide link in form to go further.

Keeping hold of relationship view(parent-child) is important in deeper hierarchy so that user can connect and fill the data accordingly.

enter image description here

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.