What UI Control should I use to allow users the select the order items are displayed in?

Question

Our UI displays different list of attributes in tooltips (mouse over) and balloons (right click). Users can select the attributes that will be displayed in each case in an admin panel. I want to also give users the ability to set the display order for the chosen attributes, but I'm having trouble coming up with an intuitive way of doing this.

A list-to-list item selector or list builder would work:

The left list would contain all attributes and the right list would show the attributes to display in the desired order. It seems a little clunky, though, and I'm used to seeding list builders used in a different context.

Is there a better way to do this?

Answer 1

Taking as given that this is a necessary design element, then....

This classic "font-da mover" widget (as it was first seen by many of us), aka the list-to-list, has not radically changed in a while. Making it more contemporary, arguably "better," can be done by

• Drag-and-drop from list to list, instead of button actions. This will have to be rock-solid and flexible to catch the corner cases, but is do-able with modern browsers.

• Make each each more visually distinguished as an individual element.

• Visual Feedback animation on screen as each action (e.g. moving left to right) is done. This will help the person see what is happening with each action.

• see if you can make the right side ie. the list of selected appear as it will to the end user. Perhaps a "this is what it will look like" kind of thing, a sort of what-you-select-is-what-the-users-will-get.

If you do go with buttons, be sure to alter the position of the right button groups from that poor example image. Move up and down is mentally associated with the task in progress, the lists in this case. Then, create a new visual "grouping" for the submit/cancel actions.