How would you present an interface, that allows a user to re order a list of around 150 products anyway they want. so they can say "I want to show this 5 first, then these 3 next, and so on...".

I was thinking about a drag&drop list, but then I should display the 150 products in the same page, which doesn't feel right.

  • 1
    Hi and welcome to UX.SE! You have an interesting question, but I have trouble to see the use of this behavior from a users point of view. Why would a user in the beginning know how many listed item she wants in the second and third view. I would be happy if you could elaborate a little more on the context, and the question would be easier to answer. Commented Apr 9, 2012 at 4:24
  • We show those products in a paged widget (slider) each page shows 20 items, in 4 rows of 5 items. They want to order the products anyway they want. we already have some "featured" items that appear as the first products, but they want to be able to choose each items position in the slider
    – Asgaroth
    Commented Apr 9, 2012 at 16:32
  • This is a bit tricky to imagine - can you whip up a mockup? Commented Apr 9, 2012 at 17:45

2 Answers 2


From you description this is what you got today:


download bmml source – Wireframes created with Balsamiq Mockups

This is perfect to drag and drop, and it has a nice direct feeling of control to the user. A 150 products is hard to organize in one category, and I think you need to categorize the products. Having the categories as filters, the user can within a category order the products in the first iteration.

When this is done in all the categories of product, users could order all the products in a second iteration to get the complete list of products in order. This implies that there is no order between products in categories.

If there is order between categories, then the user could simply order categories first, and then products within categories.

  • I'd suggest two small additions to this. A way to put items at the top of the list (maybe a little trophy or 1st icon you could drag products to) and a way to hide products (maybe a trash can icon?)
    – aslum
    Commented Apr 9, 2012 at 18:53
  • @aslum I agree! Enabling "stared" products like gmail, would make it even better for the user. Commented Apr 9, 2012 at 18:55
  • This interface looks great, I just changed the bottom slider to a scroll, so the user can drag a product from the last "page" up to the first "page" with relative more ease. thanks!
    – Asgaroth
    Commented Apr 10, 2012 at 19:30
  • @Asgaroth Glad you liked it. Good luck on empowering users! Commented Apr 10, 2012 at 19:56
  • The other thing I would add to this, is the ability to select multiple items at a time, and then drag them as one group to the new place in the list.
    – Rich
    Commented Feb 3, 2013 at 5:10

It seems unlikely that a user will actually reorder 150 items. That's why you typically see large lists (think a list of files) with the ability to order by column. This gives some control and order to a large list without making the user deal with each item.

Now I understand why you might want to provide some more fine grained ordering, so perhaps this could be solved by allowing users to select items from the big list (of 150+) that can be column ordered or filtered and place them into a "short list" where items can be dragged and dropped into order.

  • 2
    "More fine grained ordering" - I wonder if simply "starring" favorites, then keeping them permanently fixed at the top (or provide a link to filter by fave) would suffice - see GMail. Starring is pretty easily understood these days. Commented Apr 9, 2012 at 17:44
  • Yes, I think "starred" favorites would be a familiar paradigm for a lot of people and might be good enough for what the OP is looking for. The idea of ordering a short list extends this idea, which seems to be what OP was asking about.
    – DorkRawk
    Commented Apr 9, 2012 at 20:45

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.