4

I started using the Careers site in the StackExchange group of sites and came to entering my list of publications. I had my initial set of 15 or so that have already been published. The list widget on the site adds each new one to the bottom of the list; because I wanted my latest to appear at the top I simply entered them in reverse chronological order.

The problem, though, arises with ongoing maintenance: when I later add a new article it appears at the end of the list. The only re-ordering controls are move-up-one-slot and move-down-one-slot (the faintly visible arrows at the right edge): enter image description here This has a number of issues. To add a new entry to the top of a list of 15 items, I must perform the move-up-one-slot action 15 times after I add it. Worse yet, it is not 15 clicks in the same spot--each time I click, the item physically moves up the page (a reasonable thing to do in isolation) but then I have to move my mouse back to the tiny arrow on the now-relocated item. Repeat ad nauseam.

I posted a request on meta.stackoverflow.com (Enhance list re-ordering in careers with move-to-top and move-to-bottom controls) with suggestions to improve that user experience, though nothing has yet been done. In the meantime I began exploring for better ways to do this. One somewhat better approach is on Netflix. They associate an integer indicating list position with each item; the integer is in a text box that may be edited. So one could, for example, move item 5 to position 10 directly. (The neighboring items renumber themselves appropriately.) At least Careers is better than LinkedIn, which (to paraphrase a well-known quote on the Model T) will give you any order you want as long as it is insertion order!

So what other approaches to list re-ordering on a web page are out there? I should think the answer would depend on list length, so here is my arbitrary grouping:

  • 5 to 10 items (drag-and-drop would be great)
  • 10 to 25 items (I would still think drag-and-drop could work, mixed with some auto-scrolling)
  • 25 to 50 items ??
  • 50 to 100 items ??
Improve this question
2
  • The one question I have, is are you looking for an answer that addresses the issue you would like to solve, or the problem spurred an interest in this kind of interaction? If its the former, I would say, the real request you may want to make is to allow you to set it that new items add to the top of the list rather than the bottom. The result is now you don't need to move the items in the first place.
    – Chris Janssen
    Aug 31, 2012 at 4:39
  • Good observation, Chris! That was in fact brought up in the course of the discussion on metaSO by one of the StackExchange developers so it is on their list to do but "not a high priority". Sigh.
    – Michael Sorens
    Aug 31, 2012 at 16:12

2 Answers 2

Reset to default
2

If the interface really needs to handle anywhere between 1 - 100 (or more) items, a hybrid approach may work best. Allowing the user to drag and drop for small quick changes or larger jumps via the netflix style.

Depending on the complexity of the information/items in the list will depend on how you format the controls. You may want a specific handle to drag by, or clicking and dragging anywhere on the item may make it movable.

Important things to consider in the interaction are.

  1. Set wiggle room for the drag trigger. Since there are other controls like the input for switching position, you don't want the drag to trigger as the user clicks into the input. Use settings, like in jquery UI, to delay drag till the mouse has traveled Xpx and/or the mouse has been down for x milliseconds.
  2. Make sure you only allow the drag on appropriate axis. As your only reordering a list help the user by restricting the movement only to the Y (or appropriate) axis.
  3. Make the reordering easy to use and instantly update as the user commits changes. If I type in 1, onChange it moves to 1 and all other items instantly update as well. Nothings worse than updating an item to 1 and then having two 1s. I then want to move another to the top and now I have to put 1 and the system doesn't know where to put it. If you want to wait till all updates are made and then submit, make sure to at least support ordering via 1.1 1.2 1.3, though this is always sub-optimal as the user has to keep track of their changes and what was original. Its always better to instantly update so the user can see the changes and continue until it meets there expectations.

That's my two cents...

Improve this answer
0

Adding to what Chris said, I would say that the widget should support a slightly better version of the ordering mechanism than the simple display by insertion order. It can start with something as simple as by the the title of the paper, or the date of publication.

These can be the auto-sort features, adding to which the drag and drop for individual items should be allowed.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.