27

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.

Mockup picture - Selection with draggable object

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.

3
  • 5
    The fact that clicking an object does something other than selecting it, and dragging the selection sign around changes the selection (doesn't do anything related to the selected object), is pretty counterintuitive. Any possibility that you could change that? E.g. click an object to select it; do something else for another function on that object?
    – LarsH
    Nov 22, 2013 at 16:04
  • Maybe you should change the label of your selection object to something like "Selector". Then it's more clear that you can use it to select things. If it just shows "selected", it is more like a sign, and usually signs are not movable.
    – isnot2bad
    Nov 23, 2013 at 21:31
  • I am grateful for the answers I get. I agree with many of the changes that you guys suggest, but the problem is that I have some rules and boundaries that I have to follow where one of the being the selection that will have to be done with a draggable object. I really understand that a click on a furniture would be one way of solving this - but in this case it can't be done that way... Nov 25, 2013 at 8:47

10 Answers 10

21

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

enter image description here

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

enter image description here

2
  • "Dotted outlines" - do you mean that the draggable object selector should have dotted outlines? Nov 22, 2013 at 11:55
  • 3
    I meant the object "selected" to have a border or dotted lines to show what is selected.
    – Rosie
    Nov 22, 2013 at 12:38
16

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:

enter image description here

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.

enter image description here

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.

enter image description here

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.

2
  • 2
    Indeed placing the selector initially in a tool area shows its nature as exclusive tool (i.e. one-instance only). Nov 22, 2013 at 11:18
  • upvoted! how do you make an html table column look draggable
    – PirateApp
    Jul 23, 2018 at 12:48
9

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.
enter image description here

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

1
  • It's an interesting comment - I will try different looks of the draggable object... Nov 22, 2013 at 15:37
8

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.

6

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.

4
  • -1 because your answer is destructive in a way to moan what not to do, instead of showing how to do it. Furthermore the question is how to increase awareness not how to select. There is no hint for assuming it is a desktop app - mac gui. And it's actually well-known that dragNdrop lacks of affordance, which cries for extra visual clues. Just search here at SE for dragndrop.
    – FrankL
    Nov 23, 2013 at 16:55
  • @FrankL I cannot find the word "not" in the answer. Everything is about what to do. There is a hint that it's a desktop app (and not touchscreen): OP writes about "clicking" on objects.
    – Kaz
    Nov 23, 2013 at 18:39
  • unnecessarily, don't need, no need, not an option: it is just no no no. And for me it looks more like a web app, which have different modes of selection ;) Please don't take it personal, I just want to give a feedback why I think the answer isn't so helpful.
    – FrankL
    Nov 24, 2013 at 18:50
  • @FrankL "looks like a webapp" is just a nice way of saying "looks just like the sort of cruft that might be a web app". "Not an option" is new text I added since your comment ... and it is quoted from the question; it is not my words! The answer isn't helpful because it calls for a lot of fundamental changes. However, so what? That's what it takes for a proper user experience. Whether to put a drop shadow or whatever on the selection is irrelevant.
    – Kaz
    Nov 24, 2013 at 19:22
3

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.

2
  • I forgot to say that I change cursor to a hand already, but it's a good point. What do you mean with "animating the grasping move"? Nov 22, 2013 at 10:47
  • What I meant was that the hand could be animated in such a way when hovering over draggable object, to imitate grasping and releasing. But then, it could be superficial.
    – Maryh
    Nov 22, 2013 at 11:25
2

Give the objects shadows and hard outlines upon mouseover.

1
  • The object does already have a drop shadow, but I will try the hover effect on it. I think it may work if the selection object gets an animated movement and is raised a few pixels on mouse over to make it look moveable. Nov 22, 2013 at 10:46
2

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.

1
  • 2
    OP did suggest this in the main question itself - but was concerned that "This can cause irritation if the object is constantly moving around though."
    – JonW
    Nov 22, 2013 at 16:37
1
  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)

Animated Hand Cursor

0

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.

3
  • I believe that this depends on your actual user base, because normal people (not technical) usually do not react to cursor:move Nov 25, 2013 at 17:25
  • Its my opinion that this is very commonly understood by the non technical user. When you mouse over something and the cursor changes to the four way arrow, its unmistakable what its for. The cursor is actually called "MOVE", its what it was created for. Be careful not to over-engineer the functionality. We developers have a tendency to do that ;-)
    – sn3ll
    Nov 25, 2013 at 17:34
  • I am not really a developer and I am pretty sure that my mother won't get it :) Nov 25, 2013 at 17:35

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.