1

Overview

The following image provides background information for this UX problem I've encountered:

mockup

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

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.

mockup

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:

mockup

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:

mockup

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:

mockup

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

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

1 Answer 1

1

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.

0

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.