User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top


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:

Example Screenshot

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.

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.


download bmml source

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:


download bmml source

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:


download bmml source

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:


download bmml source

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


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.)

share|improve this question

Editable elements are simple and has pre-defined formatting. Trying to implement complex rules you will probably end up with advanced inline editor.

The better way is to to use multiline editor with very simple syntax rules and immediate preview mode. The same we have here, at UX SE.
enter image description here

The rules could be as follows:

  1. Line without a * mark is a title
  2. Line, which starts with a * is an item
  3. Nestedness is defined with spaces, which are displayed as dots (·)
  4. (optional) Smart behavior, like auto-adding the * sign in new line which follows an item and auto-indents, adds more convenience.

Arbitrarily-nested titles are possible, too.

You can see very simple working prototype.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.