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.

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.

share|improve this question
1  
Show drag handles just like the input boxes in Chrome, the status bar on Windows desktop apps etc. –  Marjan Venema Feb 5 '13 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 '13 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 '13 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 '13 at 19:54
    
Why do your users need this? What problem does it solve for them? Can you recognize a user struggling with this problem? –  MSalters Feb 5 '13 at 23:59

5 Answers 5

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

share|improve this answer
1  
@OP: Note that the 4-way arrow should probably be visible even when not hovered. –  Brian Feb 6 '13 at 15:20
    
@Brian Perfect response. Functionality should not be hidden when it's not obvious. –  Chris Aplin Aug 21 at 17:19

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.

share|improve this answer

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

share|improve this answer

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

share|improve this answer

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

share|improve this answer
1  
But I wouldn't interpret three horizontal lines like that to mean "grabbable". That icon can mean many other things: ux.stackexchange.com/questions/30817/list-icon-vs-menu-icon –  AlexC Feb 13 '13 at 10:30

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.