Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am designing a Web Sortable (via D&D) Interface.

When you drag an element I would like to have the placeholder indicate where the element will be dropped. The problem is, if I want to move a large element down, the placeholder takes up too much space.

Of course it could be programmed so that when the element you are dragging reaches the bottom of the window, the window starts to scroll slowly.

However I am wondering if this could be a usability problem?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The Alternative is to have placeholders which are just a line instead of as big as the element being dragged.

This creates a little bit of a jump on drag start and I dont really like it, but I am not sure if it isnt actually better for the users.

This is how it may look like:

mockup

download bmml source

Which is the right approach, considering I have draggable/sortable elements with unknown heights and widths?

share|improve this question
add comment

2 Answers

up vote 2 down vote accepted

You want to provide a manoeuvrable control for dragging and dropping an item in the list. Making the list jump around due to place holders of the dragged item switching places will most probably be quite frustrating, plus the interface will also lack in scanability since you let the place holder occupy space between items where the user may not even intend to drop it (I mean that a large item being dragged down the list will have its place holder push later list objects down the list making it harder to scan).

Therefore I don't think it's a good idea to let the place holder be the size of the original item.

Your other suggestion (which you don't like) is better, but could in my meaning be improved. I think that instead of letting the place holder be "one row high" you indicate the drag marker in a different way. Don't make the indicator move the objects at all, make the list static in that it doesn't jump around when dragging.

You can take note on how Adobe does it when ordering layers in a document:

enter image description here

share|improve this answer
    
this is what i thought too, actually i wanted to draw a line instad of a box in the second screenshot. –  user1721135 Oct 12 '13 at 16:05
add comment

Dragging works well if all the interaction is within a screen. The reasons are:

  1. A user need no a lot of physical movements and no scrolling, too.
  2. All elements are observable, so there aren't hidden ones.

So if you have a lot of big elements, which are not fit the screen, drag and drop could create bad UX.

Still you can use a trick to observe all the elements in a screen and reduce physical movements at the same time. Just operate on a reduced copy of elements. This could not be exact copies, rather simplified and reduced representation. It could be shown constantly or just when needed, look at the image.
enter image description here

share|improve this answer
    
thank you for your input, that is a valid apporach –  user1721135 Oct 12 '13 at 16:04
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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