I am writing an outliner software. At any state, one of the items in the list is selected, and the software can do the following with respect to the selected item:

  • Prepend a new item (sibling) to the selected item.
  • Append a new item (sibling) to the selected item.
  • Delete the selected item.
  • Delete the selected item and its children.
  • Move up the selected item in the list.
  • Move up the selected item and its children in the list.
  • Move down the selected item in the list.
  • Move down the selected item and its children in the list.
  • Level up the selected item in the list.
  • Level up the selected item and its children in the list.
  • Level down the selected item in the list.
  • Level down the selected item and its children in the list.

There is a button for each of these functions, and I am trying to logically arrange them. Several possibilities came to mind, and the one that I have at the moment is to classify the buttons as the one regarding "the item itself" and the others regarding "the item with its children". It looks as follows:

button arrangement

(In the picture, there are extra buttons for "Prepend", "Append", and "Delete", which I am not clear at this point. I may add functions corresponding to the extra positions by analogy.) I am not sure if this is the best arrangement. Is there a better way to logically arrange the buttons?

  • Unless you have an unusual reason you haven't mentioned, you might reconsider relying so heavily on buttons. Managing a tree-like (and list-like) structure screams WYSIWIG. Users are used to this pattern! Commented Apr 4, 2012 at 3:14
  • @peteorpeter I understand your comment that I use too much buttons, but how is WYSIWYG related? I don't get it.
    – sawa
    Commented Apr 4, 2012 at 4:29
  • 1
    Sorry, should have been clearer. Many of the commands you have buttons for could be handled by a combination of drag-and-drop interactions and context-aware UI changes. See, for example, OmniOutliner or MS Project. The main functional wrinkle you add is the ability to target self or self-with-children, but that could be handled by holding down ctrl or an on-screen toggle. Commented Apr 4, 2012 at 12:54
  • As an alternative to your approach, consider supporting multiple selection of the items through the standard methods (dragging the mouse around the items, or combining a click with a metakey such as shift and ctrl). You can also have a button (with shortcut) to “Select At and Below” (perhaps to compliment Select All). Now you need only one set of buttons. Now the user can select whatever they want for any command (e.g., a subset of the children). More flexibility, more external consistency, and less complexity. Commented Apr 4, 2012 at 12:59

3 Answers 3


Outliners, to be useful, should have keyboard shortcuts for everything. Ergonomics is critical for programs like this: you should never have to take your hands off the keyboard. There is nothing more irritating than being forced to move back and forth between the keyboard and mouse. Also, there are various keyboard shortcuts which are more or less standard in outliners: ENTER, for instance, to create a new line; TAB to demote a line,SHIFT-TAB to promote a line, etc. These particular shortcuts (and others) are found in almost every outliner I've ever tried.

  • Thanks for your suggestion about keyboard shortcuts, but doing everything on keyboard is what you can expect only for advanced users, which are only part of the whole users. I can implement the shortcuts, but I still need buttons as alternative.
    – sawa
    Commented Apr 8, 2012 at 1:24

Your buttons look ok. Your approach is interesting - most outliners I've seen don't give the option of "moving without children" - the children always move with the parent. Along with many others I participate in a forum dedicated to outliners - outlinersoftware.com. I know we would all be interested in the program you're developing - and I think quite a few would be eager to tell you what we'd like to see in an outliner. Also I agree completely with GCarson - I want good keyboard shortcuts for outlining. Ecco Pro would be a good model. Alt+arrow keys for moving up, down, left, right. Ecco always moves children with the parent. You might use Shift+Alt+arrows for moving parent without children. Ctrl-D deletes an item and its children.


Personally i feel tree approach is the best solution for your problem. Instead of horizontally arranging the buttons , you can arrange them with level and sub level-wise.

EDIT: Please see the demo for visual effect, you can give buttons instead of links.

Here is a very good demo

Here is the jquery plugin

I hope it would look descent and support 'n' numbers of levels to add buttons.

  • Can you describe your suggestion in more detail, perhaps include an image? You're suggesting a visual approach so it would be useful to show that visually.
    – JonW
    Commented Apr 4, 2012 at 7:45
  • @jon , since am not good at visual, i have shown link for a demo, it is close to what i want to convey. :)
    – sree
    Commented Apr 4, 2012 at 7:51

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.