0

I have a menu list which is tree-like(So menu items can have children etc.). I want the user to have the option to move around a menu item in that list. I want them to be able to put the dragged item between two items(I got that covered) and I want the user to be able to drag an item into another item, becoming the child of that item.

Now I've got two options lined up which seem somewhat logical to me. I can't really figure out which one works best(Or if there's an even better method).

Please enlighten me with your opinion/statistics!

Option one

The user starts dragging item 7, right away item 6 changes color due to the hover. After 500 ms the arrow appears before Item 6 and the text jumps to the right a little. Indicating that item 7 will be insert into item 6

Option one

Option two

The user starts dragging item 7, right away item 6 changes color due to the hover. After 500 ms item 6 pops out and indicates a new spot(the darkgreen rectangle) where item 7 will appear when it will be dropped. (Whenever a child item is already present in Item 6 or not)

Option two

Improve this question
3
  • Option two seems more intuitive for me as you see where the item will land. You could also think about combining both versions. (Adding this as comment as I don't have any stats/links to support my opinion)
    – msp
    Jul 8, 2014 at 7:30
  • Option 2 is better. Also, it will be good if the new slot is bordered as dotted/dashed lines or as a well.
    – Balaji Natarajan
    Sep 6, 2014 at 17:28
  • Are you intending to let the user reconfigure the menu in your main app screen? If so, I'd advise caution: users may accidentally drag menuitems around without meaning to, and that downside might outweigh the benefits (which will be very occasional, and never at all for most real-life users). Might be worth making it a separate screen to let the user reconfigure the menu?
    – Vince Bowdren
    Sep 8, 2014 at 11:35

2 Answers 2

Reset to default
1

Option 2 looks more intuitive because :

  • it does not introduce a new element like the arrow, the meaning of which might not be obvious to your users
  • and does not force you to suddenly move the item title horizontally and therefore create discomfort during the process by.

To build upon it and have your users understand that their action is going to affect what is within the "Item 6 domain", you can keep the indentation and make this "domain" show the following way for instance :

enter image description here

Improve this answer
0

Option 2 is better than option 1, but I wouldn't bother with the green highlighting.

If you are rendering the actual size and position (indented for child element / not indented for root element) where the item will be dropped, then you don't really need any highlighting. The "shadow" and space where the item will drop is all the visual info your user will need to understand where the item will land when dropped.

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.