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.

We have a Silverlight application which has two main areas: a vertical list of fields on the left, and a work area on the right.

There are two possible operations that the user can perform on the fields:

  • the user may click on a field to open it, do something with it, and then click 'OK'. The result will then go to the foot of the work area.
  • the user may drag the field to a specific place in the work area. When released, the field is opened and operated on in the same way as above. On 'OK', the result will go to the specified place.

Currently, on field mouseover, the cursor changes to a pointing hand to indicate openability. There is no right click possibility.

I'm trying to come up a way to show that the fields can be either clicked on or dragged, but so far I'm stumped. And I couldn't see any similar question raised here.

News Flash!

It occurred to me that what we have here is very similar to the sort of UI control found on many tablets where the user can either drag a screen object about, or he can 'tap and hold' it to open it or access a menu.

So far though a trawl through previous questions in this forum hasn't convinced me that anyone has really managed to convey this to the user other than via an introductory overlay or small video when the page is first accessed.

share|improve this question
    
Possible duplicates: ux.stackexchange.com/questions/26121/… and ux.stackexchange.com/questions/216/… There are some helpful suggestions in these topics too. –  André Oct 16 '12 at 11:28
    
@André yeah but it's a bit of a drag to go over old topics so why don't you just drop it? ;) I'm here all night thanks –  Captain Oct 16 '12 at 14:16

2 Answers 2

up vote 0 down vote accepted

Designate a specific visual handle for the drag-and-drop functionality. Have the mouse change to a different cursor when over that (usually the cross works well).

Design the element in a way that suggests interaction - and some designs can also suggest the dragging possibility itself, like this corner of a WinXP window:

enter image description here

or these dots on Gmail (on the email in the middle).

enter image description here

Also, these are the first two results of a Google Images search on "drag and drop handle"

enter image description here

enter image description here

share|improve this answer

One way would be to briefly flash a transparent big four-tipped arrow below the field when the cursor pointer enters it.

share|improve this answer
    
Thanks for that. I can see two problems though: first, that every field the cursor passed over would flash this, which might be a bit much; second, that doesn't indicate that you can also click on the field. –  Phil Parry Oct 17 '12 at 8:03
    
Hi Phil, Yes, the repeating flashes would be annoying. Give a look at the hoverintent jQuery plugin, that defines sort of a delayed hover event. It lets you do the hover actions only after the cursor pointer has hovered the element for a specified number of milliseconds. This plugin is a very good thing. –  Juan Lanus Oct 17 '12 at 16:22

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.