5

I'm searching for an intuitive way to change the order of a list. I don't think that drag'n'drop would be a good solution, because it's a mobile browser based application and no user would try to long click something for drag'n'drop in a browser. My first attempt is something like a popup, which opens when the user clicks on the item number.

Arrow popup

But I still think there is a better solution to do this and I hope you can help me.

| improve this question | |
  • Welcome to UX.SE! It would help if you defined the dimensions of your problem space a bit more. How many items in the list? How long are the captions? How many different clients does the interface need to support? – tohster May 9 '15 at 6:58
  • The list fills the complete screen of a tablet in landscape orientation. There are not that many items in the list maybe around 10. The interface has to support 1 client at a time. – TobiasW May 9 '15 at 7:07
  • OK thanks. Sorry by client I meant, are you planning on using the same interface for desktop, mobile and tablet? – tohster May 9 '15 at 7:13
  • It's a web based tablet application. – TobiasW May 9 '15 at 7:17
2

Long click and drag seems to be the best solution. One or two below:

  1. If you have a long list - long click and scrolling list as a background with clicked element above.
  2. For short list - long click and drag.

Also consider clicking - icon on the right side indicating, that you can change order. After click moving up / down is activted.

enter image description here

I'd consider some menu action for activation of editing order. Especially if editing order is not a core functionality of your app.

| improve this answer | |
  • Okay thanks, I already thought that it would be a good solution, but I scraped it because I thought a normal user would not intuitively drag'n'drop items. But as you said some menu action to activate reordering, would make it more obvious and I could highlight it when the "reorder mode" is active thanks. – TobiasW May 9 '15 at 7:11
2

The problem with drag-and-drop is that you can't be sure about the user recognizing this a functionality. If you provide some kind of "first time tutorial", and the lists tend to fit in the screen, it's the best option.

Comparing d&d with the arrows, the latter are more intuitive but also more tedious because of the number of taps that might be required.

If lists are long enough to keep a lot of items "below the fold" frequently, an option is to put some control that let you choose "After X" / "Before X" so the user doesn't have to drag&drop or push the arrows eternally.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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