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.

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.

share|improve this question
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 '13 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 '13 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... –  Henrik Ekblom Nov 25 '13 at 8:47

10 Answers 10

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

share|improve this answer
    
"Dotted outlines" - do you mean that the draggable object selector should have dotted outlines? –  Henrik Ekblom Nov 22 '13 at 11:55
3  
I meant the object "selected" to have a border or dotted lines to show what is selected. –  Rosie Nov 22 '13 at 12:38

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.

share|improve this answer
2  
Indeed placing the selector initially in a tool area shows its nature as exclusive tool (i.e. one-instance only). –  Alexey Kolchenko Nov 22 '13 at 11:18

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

share|improve this answer
    
It's an interesting comment - I will try different looks of the draggable object... –  Henrik Ekblom Nov 22 '13 at 15:37

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.

share|improve this answer

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.

share|improve this answer
    
-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 '13 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 '13 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 '13 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 '13 at 19:22

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.

share|improve this answer
    
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"? –  Henrik Ekblom Nov 22 '13 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 '13 at 11:25

Give the objects shadows and hard outlines upon mouseover.

share|improve this answer
    
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. –  Henrik Ekblom Nov 22 '13 at 10:46

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.

share|improve this answer
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 '13 at 16:37
  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

share|improve this answer

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.

share|improve this answer
    
I believe that this depends on your actual user base, because normal people (not technical) usually do not react to cursor:move –  Ciprian Pălici Nov 25 '13 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 '13 at 17:34
    
I am not really a developer and I am pretty sure that my mother won't get it :) –  Ciprian Pălici Nov 25 '13 at 17:35

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.