The following image provides background information for this UX problem I've encountered:
The above image shows the current state of the system: users can edit instructions, but with a single level of grouping. The grouping is flat, not nested, as shown in the following screen capture:
Not much screen real estate exists for additional widgetry, in the current design.
Grouping instructions is straightforward: users click a button -- or type Shift+Enter -- to create a new group (e.g., Third Set). Users edit the new list inside the browser (i.e., the contenteditable attribute).
The problems include:
- one level of grouping is no longer sufficient: a second level must be possible; and
- the UI must allow adding instructions after any title, but not in between titles.
The first idea I had relied on using the Tab and Shift+Tab keystrokes to allow the user to indent to another level.
- Awkward to set the title for the inner groups.
- Users must not insert instructions between titles in the hierarchy.
- Keystroke functionality is invisible.
I thought of using finger tabs, such as:
- Content in the additional tabs is hidden.
- Insufficient space (width) to display the finger tab titles (users can edit titles).
- Is not arbitrarily nested (but two levels is likely sufficient).
- The editor is consistent with current experience.
- Relatively simple client-side implementation.
The next idea I had was:
- Strange UX, hard to copy-paste text in the "right spot."
- Difficult client-side implementation.
- Arbitrarily nested instruction groups.
Another idea is to provide a classic tab-based interface:
- Limited number of tabs due to real estate constraints
- Hidden content
- No longer WYSIWYG -- the output will differ from the input
- Not arbitrarily nested
- Common UX mechanism
- Relatively simple implementation
How would you allow users to edit doubly-nested and entitled instruction lists inline (using contenteditable, or similar)? (Bonus points for arbitrarily-deep nested titles.)