views:

133

answers:

7

Are there any visual cues that you know of that indicate an item's "draggability"?

The obvious ones:

  • "<marque>Click here to drag!</marque>"
  • that icon thing alt text
  • and (which I plan to implement) the closed-hand-cursor-onmouseover alt text <-- not this exact one

Thanks for you help!

Edit:

Thank you all for your help. I definitely am in favor of the 'ribbed' surface look. I agree, that really affords dragging.

Again, thank you for your answers.

A: 

The second one is the best. Also, when someone clicks on something draggable, make its border dotted/dashed to indicate it can be moved.

Mark Ursino
+1  A: 

I'm not fond of any of the 3, but don't have an immediate better solution. Of the 3, the second is best but there should also be something visually distinguishable about the elements (a title bar,color, or "handle") that indicates they can be moved.

Chuck
+3  A: 

When draggability isn't obvious (example 1 in your question), I usually look for "handles" on objects that look like places you can grab something. For example, there's one at the bottom of the Stack Overflow answer box to resize the text input.

igul222
+1  A: 

I also do not like any of the options, but #2 is probably the most clear option you presented.

CM
+1  A: 

I think the best cue is a visual handle, i.e. a grafic element, that suggest that you can grab something there. Often I see this styled as a ribbed surface. Like on the handle below the answer box, or in ff the ribbed element on the scrollbar handle.

Jens Schauder
+3  A: 

I really cannot explain why, but the drag background icon thingy on the iphone makes some sense to me. Its just threee horizontal lines. In a web application that I develop and sell, people understood that immediately (well, on a classical "mouse UI" the mouse pointer gfx also changes to the former one you mentioned, thats some very important additional clue for mouse user interfaces).

I also immediately associated it with a draggable thing! Just three horizontal lines...

But then it only makes sense for some sort of draggable row or line. I don't know what's your intended application requires in detail.

The background (just three simple horizontal lines): alt text

Example usage on iPhone: alt text

frunsi
Woah that looks really good - even in a vertical arrangement.
Tyler
Also, please check "how" your website or webapp is perceived. If its perceived as an application (similar to a desktop application), then you may just go on and use this drag handle icon. But if its perceived as a website, then you really should add more hints for the user!Even though more and more new websites look -)
frunsi
The gmail drag-and-drop is also somewhat similar, but uses a slightly different symbol (a "studded" area):http://gmailblog.blogspot.com/2009/07/labels-drag-and-drop-hiding-and-more.html
Mathias
+1  A: 

Ok, this is a web app. so it shouldn't leave any questions open. It depends on how vital the drag and drop interface is to your app. Generally 2nd option is almost good enough - however, a person might

  • fail to EVER drive the pointer over a draggable element - consider touchscreen usage.

  • fail to notice that the cursor shape has changed, because they were distracted by something else.

  • see the cursor change shape, but just look puzzled and still not consider trying to drag and drop. Surprisingly many people, especially older ones and inexperienced with computers, will not be comfortable with this control concept at all, and even those who are might be having a bad day and fail to figure it out.

In the worst case, the person spends some 10 seconds not understanding what to do, ditches your app and goes elswehere.

If the can be used to more or less full functionality without, and drag and drop is a convenience feature, then option 2/3 might be just right.

However, it might pay off to make it totally foolproof!

  • provide a clear icon, indicating draggable controls - you'll have to experiment what looks best in your particular layout - might be simple arrow or hand, or might be picture of 2 or 3 boxes and an arrow showing what you expect people to do. Personally, i find the 3 lines icon to be overstylized and only good for people who are willing to familiarize themselves with the interface deeply, so it works on iPhone, but might be bad for your web app.

  • place this icon directly on or directly near the controls, that are draggable. Difference to your solutions 2,3 is basically is that this stays visible all the time.

  • within the same page, provide a box which stands out in colour and has this icon and a textual explaination. If you suspect that such a box can hurt usability, provide a means for the user to hide it permanently or for a day. A user can click away a warning accidentally - many people simply don't read stuff they click on, so, while this might be an overkill, consider forcing the user to drag this notice into a specific area (say a pop-up recycle bin) in order to hide it, to make sure he really understood what drag and drop is. .oO(perhaps i should patent it... whoops, too late! :)

If you don't want to provide a textual explaination, design your interface such that it can be used without drag and drop too. Consider also that drag and drop doesn't work with every input device equally well, especially touchpad users are likely to hate you if you force them.

Edit: it's 6AM, whoever finds typos shall keep them.

3yE
Wow. Thank you for taking the time to respond. I really appreciate your feedback.One of the main advantages of the app over it's "competitors" is that you can position your item's to your liking - though it will work without the ability (though not at all w/o javascript enabled).Would you mind, when I get to a good point, if I sent to a link so you could test it out?Thank you, again.
Tyler