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'm building a system that requires file-uploading, and I'm wondering how I can indicate that the browser windows supports drag and drop. Since the feature is new to modern browsers, there's no user expectation of the ability.

I thought about this:

[UPLOAD BUTTON]

|---------------------------|
|--Drag files here----------|
|---------------------------|
|---------------------------|

with a color effect on the drag area, but that just seems inelegant. I could tooltip the upload button, but that might get annoying if it appears too quickly, and it could be useless if it doesn't appear quickly enough.

Thoughts?

share|improve this question
    
As a further comment on this, random google services support drag and drop, like tagging emails in gmail. There's no way to discover this in the UI. –  Stefan Kendall Dec 7 '11 at 5:24

3 Answers 3

up vote 8 down vote accepted

A box with a dotted line could be a nice indication that files can be dragged to upload. The "drag files here" as you mentioned is probably very useful as well. Box.net does something like that for bulk upload and you may want to have a look at the jquery plugin pluload: http://www.plupload.com/example_queuewidget.php

Box.net Drag Drop Upload

share|improve this answer
    
Google Docs does something similar for their drag and drop. It fails to work in any version of Firefox with no error message saying it fails. I bet it only works in Google Chrome because they want to promote their own browser. –  JoJo Feb 18 '11 at 18:14

Imgur does it with an "upload file" button and text that says drag and drop. Gmail and Outlook 2011 for Mac do it the same way--giving an outline or different background/border color when you drag a file over.

I think the dotted line or border/bg change is the most common pattern currently. I am not sure how that will let users visually know they should drag (vs using the upload button), but once they try/accidentally get it, the pattern seems consistent.

share|improve this answer

I'd go with text only as a first step. You could add from where people should drag the files. For example: "Drag and drop files here from your desktop".

The hint can be hidden on browsers that don't support the feature.

The change of color of the active area works fine e. g. in Google Mail. When a user already has a file attached to his mouse.

                                           .
                                 Drop the file(s) here
                                           .
share|improve this answer

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.