Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
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! –  peteorpeter Apr 4 '12 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 Apr 4 '12 at 4:29
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. –  peteorpeter Apr 4 '12 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. –  Michael Zuschlag Apr 4 '12 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.

share|improve this answer
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 Apr 8 '12 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.

share|improve this answer

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.

share|improve this answer
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 Apr 4 '12 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 Apr 4 '12 at 7:51

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.