10

I am trying to show to user if "File cannot be dropped to the desired location" on my UI.

enter image description here

Refer to the image attached above, user can drag and drop a file to the rectangular areas defined but not all files can be dropped to any of these rectangle. If user tries to drop a file to a rectangle where it cannot be dropped, I want to show visually to the user that this file cannot be dropped here. For this I am currently showing a red error icon along with file icon while it is being dragged but I want to have a better indication for this. I could not find any content on this on Apple UI Guidelines. Please guide me what other could be options to show if file cannot be dragged to a location.

Improve this question
4
  • Also, if it is possible to drag multiple files at once, this may need extra attention.
    – Simon Richter
    Commented Jul 21, 2014 at 16:53
  • why can't you have one big box and automatically determine what to do with it dependant on the file type (or whatever parameter you are using)
    – edthethird
    Commented Jul 21, 2014 at 17:34
  • Why are you removing useful elements of your posts? Visuals and explanatory text only enhance the question. Removing them will cause confusion in future answers, as well as with existing ones.
    – JonW ♦
    Commented Oct 2, 2014 at 10:26
  • @Princess Content posted to StackExchange is done so via the cc by-sa 3.0 license (see footer of this, and all SE pages) and grants others a non-revokable right to use it. You are free to request content that is personal, confidential or illegal be taken down, (no guarantee it will be) but I do not see any inappropriate content in these images. Removing them reduce the quality of the question so they should not be taken out. You're free to contact Stack Exchange directly if you disagree with this position.
    – JonW ♦
    Commented Oct 2, 2014 at 14:22

7 Answers 7

Reset to default
6

I would recommend using positive UI feedback to tell the user where dropping is allowed. For any specific selection, there are usually one or two regions which are valid drop targets. Highlight those and allow other areas to fade into the background.

Here's an example from Atlassian Jira: Transitioning an Issue Dragging and Dropping an Issue to a Column with Multiple Statuses

As soon as the user begins dragging the selected items,

  • Active drop targets are clearly marked with a border, a color, and an action/state.
  • Inactive or disallowed drop targets are not marked at all - they just appear as part of the background.
Improve this answer
18

Why don't you try something like this.

enter image description here

Once the user clicks on the item to drag just highlight the valid and invalid sections like above. I would suggest you do it as soon as user clicks (before starting to drag), this will actually a pre cursor for the user, where to drop the item.

In the approach mentioned by you, the user will actually drop the item and go back and drop the item and go back and so on...That would be frustrating for the user.

Hope its helpful. Cheers!

Improve this answer
1
  • I like it, but the ant border around the x area draws attention to it and makes it more area-like than the acceptable areas are. If anything, I'd give only the acceptable areas extra borders, or none at all (or all, but that seems quite visually heavy).
    – fzwo
    Commented Jul 22, 2014 at 7:52
12

One idea: when the dragging starts, gray out the box and then if the user does drag over that region, make sure the mouse cursor indicates (red circle with a cross?) that region can't be dropped on.

And extending that idea further: when the dragging starts use a red or gray to indicate it can't be dropped on, but also maybe use a green or some other inviting color to the regions that CAN be dropped to.

Improve this answer
7
  • 2
    Yes, that was more or less the answer I was looking for: i.e. when you have valid and invalid drop regions, you should not leave it to the user to 'test' each region to see whether it can be dropped on, but be proactive in identifying for the user those ones which can be dropped on. It doesn't have to be a bright colour - just enough to distinguish the valid ones. There may be no need to separately identify the invalid ones - it might be visually better to leave those unchanged so that all the emphasis and transitions are about the valid ones rather than valid and invalid.
    – Roger Attrill
    Commented Jul 21, 2014 at 8:38
  • The example picture has 3 white input areas on a white background. I tmay be useful to use a grey background for the white input areas. That way, when one of them doesn't accept a drag input, it can fade into the background. With the current background, graying out an input form makes it stick out more.
    – MSalters
    Commented Jul 21, 2014 at 11:48
  • At least on Windows it is a well-stabilished convention to have a forbidden sign as the mouse cursor for "you can not drop that here"
    – sergiol
    Commented Jul 21, 2014 at 13:49
  • Just like fields that can't be filled in a form are insensitive, you should use a look that confers the "insensitive" property to your UI elements. If in your particular context there is a style that means insensitive (e.g. flat and gray as opposed to white with a colourful border), use it.
    – Steve Dodier-Lazaro
    Commented Jul 21, 2014 at 15:30
  • (example with GTK+ apps: kionez.org/unico-withoutpatch.png)
    – Steve Dodier-Lazaro
    Commented Jul 21, 2014 at 15:32
9

The "OS X Human Interface Guidelines" on drag-and-drop can be found here: https://developer.apple.com/library/mac/documentation/userexperience/conceptual/applehiguidelines/TechnologyGuidelines/TechnologyGuidelines.html#//apple_ref/doc/uid/TP30000355-SW9

The guidelines go into quite a lot of details, but you will want to highlight areas that the file can be dragged into, and not highlight areas that the file cannot be dragged into. You should only highlight the area where the pointer is.

When the area cannot accept the file, you should show a "zoomback", where the file is zoomed back to the source location.

Improve this answer
1
  • +1 for following your environment's UI guidelines! There's also the GNOME HIG on Linux.
    – Steve Dodier-Lazaro
    Commented Jul 21, 2014 at 15:33
6

When you can, be redundant in your feedback. In this case you have 2 significant elements, the dropped item and the drop receiver, and both of those can provide feedback, get lighted up or tuned down.

If drop isn't available make both the cursor indicate that and the (would be) drop receiver indicate that. The cursor can indicate that by become a circle with a diagonal slash and the drop region indicate that by fading out, becoming less saturated.

Not sure what the platform you're talking about but every platform has it's own conventions about how to communicate this situation.

Improve this answer
2

how about a border around the box with diagonal stripes. diagonal stripes, similar to construction tape will suggest to the user that this area is not usable at the moment. something like this

Improve this answer
1
  • 1
    You need to leave a lot more detail in your answers. Just one-liners such as this with no reasoning or explaination as to why you're suggesting it doesn't really make for a useful answer. It just comes across as a subjective opinion. Can you expand on this - state why you're suggesting this, whether it is a common and understood UX pattern, whether some studies or research have been done that support this idea... that sort of thing.
    – JonW ♦
    Commented Jul 21, 2014 at 7:52
1

The Unavailable mouse pointer is always an option that's understood my millions of Windows users:

enter image description here

Improve this answer
1
  • how can a touch interface user tell what is happening with no mouse pointer?
    – pathfinder
    Commented Oct 4, 2014 at 13:21

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.