Best way to indicate "draggability" in a web app (or in general)? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.

---

Want to im开发者_如何学JAVAprove this question? Update the question so it can be answered with facts and citations by editing this post.

Closed 7 years ago.

Improve this question

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

The obvious ones:

• "<marque>Click here to drag!</marque>"
• an icon
• and (which I plan to implement) the closed-hand-cursor-onmouseover

Thanks for you help!

---

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 http://manjadigital.de/demo/s/d/f/c/a/sortierer_greifer.gif

Example usage on iPhone:

_{(source: creativealgorithms.com)}

---

Modern browsers support a grab/grabbing cursor:

.dragHandle {
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
.dragHandle:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

For more info (and a IE failover) read: http://uihacker.blogspot.com/2011/01/css-grab-hand-cursor.html

---

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.

---

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.

---

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.

---

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

---

I think the best cue is a visual handle, i.e. a graphic 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.

---

jQueryUI Sortable uses up and down arrows to show something can be dragged.

---

A list item reorder via drag-and-drop interface used by a large number of people (Avocado, a popular couples app), uses a variation of the hamburger menu (four lines instead of three):

Demo

---

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

---

If your UI element can be moved around freely it can make sense to give it a "decreasing" edge and a shadow. That way the UI element seems less stationary since it looks disconnected from the rest of the UI. Sort of like a window.

In the case that your UI element can only be moved along one axis the "grooved" surface makes sense to me.