Overview
The following image provides background information for this UX problem I've encountered:
download bmml source – Wireframes created with Balsamiq Mockups
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).
Problem
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.
Idea #1
The first idea I had relied on using the Tab and Shift+Tab keystrokes to allow the user to indent to another level.
The issues:
- Awkward to set the title for the inner groups.
- Users must not insert instructions between titles in the hierarchy.
- Keystroke functionality is invisible.
Idea #2
I thought of using finger tabs, such as:
The issues:
- 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 appeal:
- The editor is consistent with current experience.
- Relatively simple client-side implementation.
Idea #3
The next idea I had was:
The issues:
- Strange UX, hard to copy-paste text in the "right spot."
- Difficult client-side implementation.
The appeal:
- Arbitrarily nested instruction groups.
Idea #4
Another idea is to provide a classic tab-based interface:
The issues:
- Limited number of tabs due to real estate constraints
- Hidden content
- No longer WYSIWYG -- the output will differ from the input
- Not arbitrarily nested
The appeal:
- Common UX mechanism
- Relatively simple implementation
Question
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.)