Make object look draggable

Question

I have a selection object (with the text SELECTED on it) that floats around on a background. The selection object is draggable and is used to drag it onto a furniture to make a selection. The user is supposed to be able to drag the object to, for example, the sofa to select it. In the mockup picture, the round table is selected.

So far I have:

• Added a shadow behind to make it float above the background
• Added 6 dots to the left and right to make it look graspable
• Changed cursor to a hand when hovering the selection object

The obvious way of just clicking on the sofa to select it is not an option in this case, since clicking on objects has another function!

The main problem is that it's a floating object on top of real world objects so my thought was to make the selection object look like it's floating (like a balloon) by using an animation to make it feel moveable. This can cause irritation if the object is constantly moving around though.

How can I increase the awareness of the selection object being draggable, e.g. it's floating and it's not stuck in the background.

Answer 1

If you want to drag a sign perhaps you can add another sort of indication that the object moves, i.e.

However I do think it might feel unnatural to the user to drag a sign around. Clicking on object and make the sign move on to the new object would be a more natural behaviour for the user.

Users always assume that the objects are the ones that are draggable.

Since you want to highlight the selected object. Have you consider the suggestions below?

• screens when an object is selected the rest gets an opacity of 50% black for example

• dotted outlines

• glow around objects

Answer 2

For issues like this I find it best to look at how other interfaces handle it. That way part of the user training has already been done — you don't need to reinvent the wheel.

In this instance the first thing that came to mind is Pegman for Google Maps Streetview.

Google handle this issue by placing the draggable indicator in a separate toolbar 'off map' to start with. Toolbars are already in the user consciousness that they can be interacted with to affect with the content associated to that bar:

Pegman has a mouseover state, too — when hovering over him the Pegman lurches out and the cursor changes to a grabbing hand — yet more feedback that he can be interacted with.

From here they then change the state of the map when you pick up Pegman to indicate what you can do with him once you've grabbed him.

This visual change to the map highlighting where he can be dropped is extra feedback to the user that, having grabbed the indicator they can then put it down in any of the indicated areas. This is valuable feedback for them.

So, Google handle this issue in three ways:

1. Add the dropper to a separate toolbar
2. Provide a hoverover state with associated mouse cursor change
3. Provide feedback on the map itself once you've started using this tool as to what you can do with it.

So try using these techniques with your interface. Google have already partly trained users that this is how such interfaces can be interacted with, so use that user knowledge for your own purposes.

Answer 3

The SELECTED object looks like tooltip or label. I think a pointer should be more like an object, as it used as a control. I think pointer could be used without excessive SELECTED notion. Still you could use tooltip.

To show the interaction abilities ("liveness") of the pointer you could use unobtrusive animation with rather long "steady" state, see image below.

Answer 4

Even if you convey the draggability of the selection, users will still likely be confused and think that it drags the item selected rather than the selection. For example, they will think it drags the plate to the couch instead of it selecting the couch.

I know you currently have another tap function, but unless selection of items is extremely low priority compared to your custom function, I strongly urge you to accommodate selection via a tap, as you even said that is the obvious solution had your other function not been in the way. It would help to know what your function is, but here are 3 potential ways of doing this:

1. On tap, select the object and perform your action. As long as you don't need your custom tap action to be performed on an item that is not selected, this might work, though it's unlikely.
2. Add a way to toggle the tap mode for the page between selection and your action. This makes sense if your custom action is performed very often without changing your selection in between, as it allows the user to do the action repeatedly with 1 click. If your custom action is common enough, you could even toggle back to your custom action mode right after the user selects an item.
3. Select the object on tap and give them the option to perform your action. This makes sense if your custom action is not used very often.

Finally, after you decide your selection process, you can just designate your selection with your border, which gives a much cleaner visual.

Answer 5

What you're implementing there is an unnecessarily unconventional user interface paradigm.

Just do it like nearly every well designed GUI application has since the 1984 Macintosh.

To select stuff, have the user pick a selection tool from a toolbar (if necessary: perhaps it is not: simple programs don't need toolbars. If every action needs something to be selected, then you can just have a select object + dispatch command type paradigm.)

Change the mouse cursor to reflect that selection tool. The cursor then becomes the selection object; there is no need for an additional object like what you have. There is also no need for a cluttering piece of text on the cusor either; the explanatory text for the tool can be a tooltip shown when hovering over the toolbar.

When the selection tool is in effect, clicking on things selects them.

Ctrl+Click selects multiple things.

Click+Hold+Drag allows the user to gesture a shape such as a rectangle which, when completed, selects things within its boundaries or things which it intersects plus those within its boundaries.

Ctrl+Click+Drag allows the user to use the above to extend the selection.

Quote:

The obvious way of just clicking on the sofa to select it is not an option in this case, since clicking on objects has another function!

If the obvious way is not an option, then you have an obvious usability problem.

First of all, clicking on objects always selects objects, even if implicitly. In your GUI, that other function launched by clicking on an object almost certainly operates on that object somehow, and that means that the object is selected for that function. It is just not in a selected state.

In applications that don't have a toolbar for different modes of action, the way this is traditionally handled is that a single click does stateful selection (with modifier keys to select multiple), and a double click performs "pick this object, or all selected objects, as an argument to some default operation and dispatch that operation". Or, different mouse buttons can be used. Left click selects the object, right click brings up a context menu from which other actions are taken.

Answer 6

In my opinion the box with the text "Selected" is unnecessary. And the dots on it look like decoration. I like the shadow idea though. Have you considered highlighting the whole object with a glow effect around its edges? You could also change the mouse pointer while hovering over draggable object into a grasping hand, animating the grasping move.

Answer 7

Give the objects shadows and hard outlines upon mouseover.

Answer 8

Another option is really making it "float" - i.e. make it bob up and down ever so gently. That, to me, would be a very clear clue that the object is not fixed but can be moved around, and dragging is the obvious way to do that.

Answer 9

1. Make the object highlight when you hover it (it's your choice how to do this)
2. Use a simple animated hand cursor when hovering the object (see example, it should be enough to show that the item is draggable)

Answer 10

Setting cursor:move to the four-way arrow on hover is the most obvious indication that something is draggable/movable. Pretty much the standard indicator on all OS's.