When editing a product, its variants are shown as accordion headings using twitter bootstrap; clicking on one reveals the form to edit the variant. Screenshot

My question relates to the ordering of the items, in the screenshot above, the names are sequential, usually however they won't be, so it looks a bit odd having the P1 V5 at the bottom!.

What I am wondering is what the most appropriate way to list these items is and the reasoning behind it?

Name - ASC
Name - DESC
Created Date - ASC
Created Date - DESC
Modified Date - ASC
Modified Date - DESC

  • 1
    I'm a little confused. Is this an admin interface (for managing products) or a shopping cart to which a customer has added products?
    – Matt Obee
    Nov 27, 2012 at 12:47
  • Admin interface for managing the products.
    – Hailwood
    Nov 28, 2012 at 2:04
  • 1
    One other note, I would re-think your color choices. The orange and green are dangerously close to complementary colors (red/green) which vibrate when in close proximity. The interface is somewhat hard on the eyes at this size due to that, so on larger screens it could impede usability due to the distraction of the colors. Perhaps using one of the colors as the active color and then a warm grey as an inactive color could help. My two cents.
    – user22866
    Jan 3, 2013 at 12:45

1 Answer 1


It all depends on how many variants you are going to have and how people interact with the variant list.

If you have fewer than five or so, then order doesn't matter.

If you have many more, then I would use name (ascending) if your users will be diligent about creating descriptive and consistent names. Name sorting won't work if you're going to have descriptions like "small – blue" and "blue - small" in the same list. I think that name descending would never make sense.

Sort by created date if, for example, variants will be removed after a certain amount of time or if variants are treated differently based on the amount of time they've been posted.

Sort by modified date if, for example, items must be updated regularly.

In short, your sort order should reflect your use cases.

Finally, if you've got mixed use cases or the list will be very long, then include small sort links in the top right-hand corner for each option.

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.