35

My interface allows users to move things that usually have fixed positions in other applications, such as text boxes. What can I do to make it obvious to the user that they can move certain objects?

The ideas that come to mind are:

  • Add a unique border around movable objects
  • Change mouse cursor to a "grab-it" icon when hovering on the object's border

I want it to be obvious without the user already having the idea that they can drag things around.

Improve this question
6
  • 1
    Show drag handles just like the input boxes in Chrome, the status bar on Windows desktop apps etc.
    – Marjan Venema
    Feb 5, 2013 at 18:34
  • @MarjanVenema I was wanting it to be intuitive without them putting the mouse over the object. Also, I don't see drag handles in Chrome?
    – Austin Henley
    Feb 5, 2013 at 18:50
  • When you focus an input box in Chrome look at its bottom right corner. It shows two diagonal lines. When you drag that corner, you re-size the input box. Couldn't live without it when entering comments on SE.
    – Marjan Venema
    Feb 5, 2013 at 19:05
  • i vote for the unique border. dotted lines, to me, indicate something is not 'set.' You can add an image of a small hand in a corner(along the dotted line) which appears on hover if you'd like. Alternatively. you could make the dotted lines appear when the user clicks a 'rearrange' button, which would be clearly marked.
    – Ricky Mason
    Feb 5, 2013 at 19:54
  • 1
    Similar: ux.stackexchange.com/q/216/17023
    – unor
    Feb 7, 2013 at 1:17

7 Answers 7

Reset to default
23

There's no reason not to implement multiple solutions for best results.

Anna Rouben's animation intro is a great idea. Though I wouldn't use it by itself.

I would combine it with a 4-way arrow icon (used commonly for moving objects) with possibly a tooltip.

For uncommon practices such as dragging input fields, I would make this as obvious as possible.

enter image description here

Improve this answer
2
  • 3
    @OP: Note that the 4-way arrow should probably be visible even when not hovered.
    – Brian
    Feb 6, 2013 at 15:20
  • @Brian Perfect response. Functionality should not be hidden when it's not obvious.
    – Chris Aplin
    Aug 21, 2014 at 17:19
23

I agree with ted.strauss's answer, there are existing grip-indicators. A more suitable type would be a quare-pattern, that resembles a grippy surface like a floor mat. I think it does a better job in transporting the "grab here" message than a three-bar icon and it can also be expanded to a larger area. Also the three-bar icon is now more commonly used as an indicator for a menu or a list.

To indicate that the object can be moved freely, you should use the 4-way arrow cursor on mouseover.

You can see an example when you un-lock your taskbar in Windows 7: taskbar unlocked icon

Another one can be seen in the latest Google Music App for Android: shuffle playlist in Google Music

And I see more as I write this answer ;) -> grip pattern grip pattern

Improve this answer
3
  • 1
    yes, a pack of small dots are the norm. only the older generation wouldn't know such UX things, but they slowly parish, replaced by the ones who do know (thank god)
    – vsync
    Apr 27, 2016 at 12:03
  • The generic term for this indicator seems to be "dotted grip" (at least that is the term that jQueryUI uses).
    – johndodo
    Jun 15, 2017 at 9:57
  • You can find such dots on a garden glove (finger parts), it let you grab slippery (wet) plants. Handles of tools also sometimes have this dots.
    – Ada
    Nov 30, 2017 at 13:55
17

Dragging and dropping is quite hard to communicate.

  1. You can provide a 'grabbing hand' or 'four way arrow' cursor on hover (but this only works if you can get users to hover in the first place, and besides, my experience from user tests is that cursors don't make much impact anyway)
  2. Give draggable items a hover state, or make them 'come off' the page by adding a drop shadow and shifting left-and-up by a few pixels (again, relies on users hovering to begin with)
  3. Use a 'raised edge' or 'textured' decal on the 'handle' of the element to grab, like enter image description here or the texture that Gmail uses: enter image description here (this is not universally recognized)
  4. Mention it in instructional text (won't work as it's never read)
  5. Make sure that other operations move the items in question around in an animated fashion, to hint that they are movable (I can't guarantee this will work)

Because there's no surefire way to communicate that drag and drop is possible, and for accessibility reasons (you can't drag and drop if you have poor eyesight or motor skills) you should always support an alternative interaction.

Another consideration: if you use drag and drop in any part of your application, you must always give draggable items a specific styling, and never use that styling for other items. Otherwise, you won't be able to get users to learn which items can and cannot be dragged.

Improve this answer
1
  • 2
    Here is the respective unicode character one can use: ⣶
    – phil294
    Jan 5, 2019 at 23:31
9

When the page/section loads you could show a quick animation integrated into your UI control to demonstrate the idea that an object can be dragged.

enter image description here

Improve this answer
3

I think that a big story in recent UX is the rise of the humble grip indicator, as pictured in a few examples here. The first example is taken from the Facebook iphone app, where this symbol is used to drag between the two main regions of the app. By choosing this icon to take up roughly 36 pixels of its real estate, they passed over the chance for branding the functionality of the app, or for choosing a flashier method of representating transition.

enter image description here

This humble symbol of grabability was simply the least confusing choice.

The second example is perhaps the most common use of the grabber, on a scrollbar. And the third example is a thin separator line on browser UI, a case where it is not at all obvious that the element can be grabbed, so a closer match to the question. When in doubt, choose the three-lines-representing-grab-ability icon.

enter image description here

enter image description here

Improve this answer
1
1

Idea mainly for mobile interfaces: When the element floats above the other content: Let the element fly in to the screen. This might suggest it can also "fly" out by dragging.

Improve this answer
0

Google does it with a grid of dots, seen it elsewhere. And the mouse pointer changes. enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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