We're building an application with various modules a great deal of which involves browses with lists of items (not unlike the list of questions here on Stack Exchange). One of the modules (thus far) involves a page/view with a few lists next to each other that allows you to drag items between said lists fairly similar to Trello (like so):

enter image description here

The core of my question is that Trello has no real visual indication that you can drag and drop these cards (possibly because it's a primary feature of the webapp itself?), so does there need to be some indication (e.g. skeuomorphic grip dots that appear on mouse-over for each item) that our own list items can be dragged and dropped?

Some small additional things to consider are that this is a line of business app that will be used on an all-day-every-day kind of basis so once users are aware list items are draggable in this scenario that's pretty much it.

Another is that we're considering extending the drag-drop UX to a few other areas of the application now we've got the actual code in a state it's fairly easy to attach to things, but this extension will appear on an 'as and when it's useful' basis.

Thanks for reading!

  • Please consider marking your question answered. Should you need more information, please feel free to edit your question. Commented Jul 25, 2016 at 16:49

2 Answers 2


I think it is very important to distinguish draggable items because not all items have the drag functionality.

I agree with your suggestion to at least show some indication that items are draggable. This is most often achieved by having the drag icon appear when hovering over a draggable element:

enter image description here

I think adding another visual indicator will help solidify that draggable indication to the user.

Here are some examples!

Drag Icon and Background Color Change On Hover

Drag Icon and Dotted Border Change On Hover


drag'n'drop nearly always has bad affordance.

The current model in gmail is the following:

gmail's new dd affordance

Albeit I'm not sure if they're really serious about it, esp. as it only appears to the hovered element.

The previous one was this:

gmail's old dd affordance

More dragg-ish, but still bad.

I think in order to reach good affordance with a drag-n-drop control, it either has to be explicit action (up and down arrows, that's pretty explicit), or it has to be "bumpy" (in case of a touchscreen): I guess the apple version looks more like a kind of air venting holes than something to get a hold on.

Reference : Is Apple's or Google's meaning of the three-horizontal-bar icon more popular?

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.