We have a list of approximately 50 items. The item at the top takes highest priority, and the item at the bottom takes the least. These items can be re-ordered by selecting the item and clicking the down or up button at the top of the list.

The current way we have implemented this is by having a long vertical list of the items. The pro of doing it this way is that it is visually clear as to which has higher priority:

enter image description here

Another idea that came along was to orient them in a wrapping list, which would allow us to display most, if not all, items at one time. The con to this is that it might be less clear to the user as which which items have the higher priority:

enter image description here

Which is more important: seeing all items at once or knowing exactly how they rank with each other immediately?

PLEASE NOTE: Although the items are named "Item 1 - Item 48" in this example, they will have unique names that are not numeric.

Also: these are really the only options we can implement at this point. Any drag and drop type solutions unfortunately can not be used.

  • ''Which is more important: seeing all items at once or knowing exactly how they rank with each other immediately?'' is the crucial question to ask I think, but also something we can't answer, because it is highly dependant on the context.
    – Inca
    Aug 23, 2011 at 16:58
  • They are basically equal, that's why I had to come here. Aug 23, 2011 at 17:30

3 Answers 3


You could try providing numbers for each item, example

1) Item 1
2) Item 2
48)Another item

Alternately, rather than having columns in a list, have rows. Go across first, then to the next row. This is similar to how we read, so it may be more clear to the user. It may work better with numbers as well though.

  • +1 Ironically as I went to tell a co-worker about this, he had just finished adding this in! Thanks. Aug 22, 2011 at 19:21
  • 4
    I would say that in most cases, using rows rather than columns will be destructive (to a greater or lesser extent); when there is no spacing, the human eye scans horizontally, but when there are distinct columns, it will scan horizontally but be bound by the columns and so go down to the next row rather than into the next column (tabular data being a variation of this where the rule may not hold). If there are other visual indicators this may not be the case, but I suspect numbering may not be strong enough to overcome the column convention and make it more useful. Aug 29, 2011 at 6:47

The Netflix queue interface shows a list in priority order. Users can either drag items (not an option for you) or type a new number in a text box next to any item. There is also a "move to top" button on each row.

The advantage of this over up/down arrows at the top of the list is that the controls are right there on the row, instead of having to select and then move your mouse/visual focus to another part of the interface. Perhaps you could do something like this?

Netflix screen shot

I seem to have cropped it out here accidentally, but the page has a scroll bar like any other web page where content exceeds browser window.

  • +1 Good point. I am an avid Netflix user, don't know how I missed this... :) Aug 22, 2011 at 19:12

Please, pretty please, do it like this:

enter image description here

  • Forsee an extra column named Priority
  • Keep 1 item per row
  • Label the column headers
  • Put the up/down buttons to the right of the list, label them, make sure you can only click it if an item from the list is selected

Additionally you could foresee 2 extra buttons, move to top, move to bottom.

Is multiple selection allowed in you list? Make sure it is also supported then when clicking the up/down buttons.


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.