I am designing a function where the user is able to drag items from one list and drop them in two others. I was wondering which direction is indicated for that action. In the first case, the list with items that I want to associate with the two other lists by dragging from left to right, and in the second case from right to left.

Any ideas? Thanx!

enter image description here

  • What kind of lists are these? What is the middle one for? A little bit of context might help. ;)
    – Kweamod
    Jun 24, 2014 at 7:25
  • Well, briefly, the initial list has system pages, that the user needs to associate with the other two list that stand for "view" and "edit" mode.
    – Stevy
    Jun 24, 2014 at 7:35
  • I have only a gut feeling, and this is that this is related to reading direction. First, you have to find the item to drag, then you move it. BUT while thinking about it: If I would have to sort things into two buckets, I may consider putting the two buckets to the left and right of the original container. So a little flip into either direction is enough to sort the things, I need not care how far to the left I have to move it. Jun 24, 2014 at 7:36
  • Is this on web, desktop or phones? Jun 24, 2014 at 7:45
  • 1
    I'm for empty lists on the right because it feels natural to go in the direction of reading, with the mention that the list you expect to be populated with the most items should be closer to the initial list. Although it may be to difficult and useless to implement, I think a single list could work too. When you start dragging an item 2 semicircles could appear on the sides of the list and once you drop the item in one of them it gets marked as "view" or "edit". Then if you want to change the list you just drag it again. A very rough sketch: tryimg.com/4/draga.png Jun 24, 2014 at 8:00

6 Answers 6


The positioning of drag source elements and drop targets largely depend on the culture. In countries that read left to right put the source elements on the left since that is where they will look first.

See this answer to a similar question

For your specific use case I would try and do it without using drag and drop as this interaction is hard to get right on every device and harder for users to discover without instruction.



As user's horizontal attention leans left it might be a good idea to arrange the items, that obviously should get attention first, on the left.

It's not entirely clear from your description and comments if the two dropping zones represent parts of a workflow. But assuming an item usually gets dragged to "edit" first before it later moves to "view" then a left-to-right alignment should be preferred. Both to keep the dragging ways short and also because timelines are usually represented left-to-right. According to this discussion this even seems to be the case for languages that are predominantly written from right to left.

  • To be more specific, the first dropping zone is only read and the second is read/write. So an item can be in only one of the 3 columns. So left to right is an option where the user reads first what elements are available to associate with and in the second option, right to left, the user reads first the associated files.
    – Stevy
    Jun 24, 2014 at 11:16

I personally feel drag and drop interfaces can cause a considerable amount of friction. Have you considered a list of available choices with visibility toggles for edit and view mode? Could easily translate to smaller touch interfaces whereas drag and drop will not.

Maybe something along these lines?

enter image description here


I agree with the reading-left-to-right angle. But what about the hand movement to drag and drop items? As a right handed person, I would like to drag from right to left, that's the more natural movement. A not so very skilled tennis player prefers to play forehand and not backhand...

Just my two cents.


How many targets(lists) do you expect your users to have? If this number will never have to scale in big numbers you can create a drag short list.

As soon as the users starts a drag show the list icons or names and instead of the user dragging the item all the way to the list he can drop them next to the item itself.


Consider Fitts's Law. The farther someone has to drag an item the more prone the action is to error, and if the user has to traverse another drop zone, there is a high likelihood of the user dropping the item into the wrong zone.

Do many of your users use a laptop? Then that multiplies the likelihood of this error because they do not have the precision of a mouse.

If this pattern is implemented, you will need to provide a way for people to easily remove an item from a drop zone, because this corrective action will be needed frequently.

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.