4

I often see upload dialogs asking the user to drag a file into a highlighted area:

enter image description here

This is an alternative to the classic file chooser dialog.

How does the drag-and-drop-option improve the usability? From the ux perspective, is it a good idea at all?

My personal experience is that it takes more clicks and is more complicated than the file chooser dialog: 1) open the windows explorer, 2) align explorer window and browser window next to each other, 3) drag the file from one window to the other.

  • 3
    A possible benefit might be multiple files at once--ctrl click to select multiple files isn't always obvious. Personally I use drag'n'drop on Youtube because I've usually already got the (several directories deep) folder with the video files open. Don't have any real data to support that though. – Ben Brocka May 6 '14 at 13:18
  • 2
    It seems like a useful feature, but I admit, I hate it myself. I think the issue is that it's trying to emulate desktop file management inside a browser--but everyone that uses a browser is already used to the way browsers have handled uploading for the past 2 decades. Plus, I rarely have enough screen anymore to have everything open side by side to even make dragging practical. – DA01 May 6 '14 at 14:41
  • 1
    @DA01 - It definitely is a useful feature in the IT world, both in networking and software. I personally have 3 monitors (some people in our company have up to 6 monitors) and dragging and dropping saves tons of time. We have many apps and windows open. It's so much simpler to drag a file into an app to open it rather than go through the File > Open route. – Code Maverick May 6 '14 at 15:32
  • @CodeMaverick I was specifically talking about dragging-and-dropping to trigger a browser upload. Dragging and dropping is certainly useful as a general UI interaction in the OS. I'm not convinced it's a great way to upload files via a web browser. – DA01 May 6 '14 at 16:24
  • @DA01 - If you agree with the fact that dragging and dropping in the OS is useful, then explain how the browser is any different with respect to UX? It's virtually the same thing as dragging and dropping a file into an IM for uploading, an e-mail message for attaching, an application for opening, etc. The only difference is the endpoint, which, in this case, is a web browser for uploading images. – Code Maverick May 6 '14 at 16:45
6

The overall usefulness here all depends on what files you want to upload, how your workflow is and how you organize them.

Scenario 1 : You know where your stuff is

You know exactly which files you want to upload, how they are named and in what folder they are located.

Navigating to them in an explorer window and drag/dropping them will need approximately as much mouse movement/clicks as using the file chooser. Switching context to another application is probably more disturbing than the number of clicks (and might take a moment) so the advantage is more or less for the file chooser.

Scenario 2 : You know the approximate location

You know the folder, but not the exact filename.

Imagine you have dumped hundreds of images from your digicam into a folder and want to upload some. Chances are that

  • you still have that folder open
  • you have a program open in which you have thumbnail previews that makes choosing easier
  • you have to adjust the file chooser dialogue to be able to properly select the files you want (make it bigger, enable thumbnails)

Depending on the exact circumstances here, it is easier to just drag and drop because you have the things already at hand. No need to navigate again in the filechooser when you already have something open.

Scenarion 3 : You have no idea where the files are

For example because you manage them in external programs that organize them orthogonal to your directory structure.

Usually you will have to search for them in an external program here. You select them one by one there, or have a bunch of them you can select there, but which reside in multiple "physical" directories.

This is btw. the way I mostly work with my images (using picasa application). Having applications that do no accept files per drag&drop out of picas is a real pain in the ass. You have to figure out where the file resides, then manually navigate there. For each file.

tl;dr

It all depends on which way you work. As a designer for your UI, you usually don't know that, or you have some users that do it this way, or some that do it the other way.

So if possible, do it both ways. That is what most good applications these days support (see your screenshot)

| improve this answer | |
5

I'm going to be the wet blanket and suggest that there may not be a big benefit.

The fact that these are being used more often is more about changes in technology. We can do it this way now, so let's do it this way.

Yes, drag-and-drop is not a new concept. It's been part of our systems GUIs for 4 decades. But note that the process of uploading a file via a browser has been around for 2 decades, and that's a different process--but one that people are accustomed to.

So one needs to weigh the benefits of the new way vs. the benefit of having a UI that people are accustomed to. The answer to that will likely vary from project to project.

There is one situation where a drag-n-drop can offer a slight advantage and that's having to move multiple files at once into the upload flow. You can do that via a upload dialog window as well, but people may be more familiar with lassoing them in the OS's system window.

Several people have noted that it's fewer steps, but those examples don't account for the 'having to find the file on my computer' first. And for some people (myself, for one) that can be a pain.

For me, the process has to be:

  • find the file on my system
    • search for the file
    • 'show file' I can bring up a system window
  • go back to my browser.
    • resize my browser
    • move my browser to the side so I can see the system window
    • notice I have 5 other browser windows open
    • move all of them
  • put focus back on my system window
    • drag the file over

So, it's not always fewer steps. It really depends on context and what kind of user is using it for what particular purpose.

FYI, Windows and OSX, at least, have made the traditional system window flow a lot easier as well with the search fields that are now built into the dialogs. For those that use that feature, the flow is now:

  • click upload
  • type in file name you are looking for in search field
  • select it

Summary: I'm not sure one is necessarily any better/worse than the other. Both can be useful for people in the right context. In fact, I'd suggest just that...let users use both. InVision does this nicely with their online upload tool where you see something akin to this:

---------------------------------------------------
|            Drag Files Here To Upload            |
|                   (or browse)                   |
---------------------------------------------------

...where 'browse' is a link to the traditional file system dialog. Best of both worlds?

| improve this answer | |
  • +1 for your summary where you can mix and match the best of both worlds. If I were designing an upload control, that's how I would do it. – Code Maverick May 6 '14 at 21:25
  • I don't quite buy the argument that multiple files can be uploaded easier: Lassoing them is only possible if they're adjacent. If not, you're back to Ctrl-Click to select/deselect, which is the same as in an upload list. – virtualnobi May 7 '14 at 6:45
  • @virtualnobi that is valid. I should have say may offer a slight advantage... – DA01 May 7 '14 at 6:52
3

Drag and drop save much time because folder with working files are often opened and it's faster to drag it directly to website.

I do it little bit faster:

  1. Alt tab from browser to folder
  2. Click and hold document icon
  3. Alt tab to your browser
  4. RELEASE!
| improve this answer | |
  • I actually had no idea you could alt tab while dragging documents. – K120 Sep 30 '14 at 8:39
3

Drag drop can be useful in various cases e.g.

  1. If folder with file is already open - saves you time of browsing to the correct location from the open file dialog.

  2. You can drag multiple files in one go.

  3. You can drag items from open apps e.g. drag an image from an image editing application or from an open browser window without even saving the image. In some sites this control also supports pasting an image from the clipboard.


In some cases browsing can be more efficient e.g.

  1. If you know where your files are saved and you don't have or want to open another window.


P.S. When drag/dropping you do not need to move your windows around... instead

  1. Switch to source window

  2. Drag over target icon/window preview in task bar and do not drop

  3. Wait for target window to gain focus

  4. Drop over target window

| improve this answer | |
2

Just imagine you have your folder window open with the file you want to upload. And in another window there is a link which says "Browse". You click on it and you have to go through the trouble to locate the file which you can already see in another window.

In this case the drag and drop is a very useful feature.

But there are some disadvantages especially if a user is not familiar with this functionality. They can easily get lost.

Therefore it would be best to have both options available with the "browse" capability very visible to the user. Like this,

enter image description here

| improve this answer | |
1

Drag and drop for file actions is common across the wider operating system environment, the file upload button is typically a control specific to browsers, and therefore when dealing with file based operations isolates them from the wider operating and UX environment that they inhabit, thereby potentially creating a break from the global UX.

Implementing drag and drop may be a break from browser specific UX, but potentially integrates them more closely into the OS, providing functionality users regard as common across the wider application base.

It can also be better UX from the perspective that it allows greater workflow freedom. The file upload button forces the user to complete the action (often rendering continued access to the underlying page or even browser unavailable while on display) before continuing, and then forces them down a narrow course of action- sometimes in a fairly small dialog. Drag and drop allows for the user to browse for files in the style they wish, they may already have access across multiple points of the file system open in the background they can freely leverage off.

| improve this answer | |
1

My theory is that it conveniently simulates the already learned drag and drop convention on the desktop.

Opening a separate File browser can usually disorient the user because they'll have to relocate the file again.

Imagine...

  1. You save a file to the desktop.

  2. You locate the file on the desktop.

  3. You drag the file to the browser.

Simple!

With a file browser...

Step 3. You open a separate file browser window.

Step 4. You relocate the file in the Desktop - which even to me - is somehow more complicated than in Finder / Explorer.

Step 5. You click Upload.

Essentially, with drag and drop you are saving 3 extra steps.

| improve this answer | |
  • re: step 4, lots of OSes now offer very nice system search tools right in the dialog window. I find that typing to find a file is actually very quick--and for me, at least, a whole lot easier than rearranging all my windows to accommodate drag-and-drop. Listing the steps is a bit misleading, as there can be a lot of substeps in each case depending on the user's habits and setup. – DA01 May 6 '14 at 19:49
  • Yes that's true, I may not be capturing the sub steps but that was merely an example. Doing a whole search constitutes as an additional step which on some systems can just be slow. – Pdxd May 6 '14 at 20:48
1
  1. Have you tested the functionality with your User?

  2. It is not difficult or very time-consuming to locate and garner files using the OS search functions and copy and paste them into an appropriate folder.

  3. I would be very upset if I had to pogo stick in and out of your upload dialog 20 times to populate a photo gallery.

| improve this answer | |
0

A point I don't think has been made is how drag-n-drop "for upload" compliments a web app that uses other drag-n-drop manipulations. Ever since AJAX allowed dynamic web apps to exist, drag-n-drop has been used for many reordering, sorting and picking situations. I believe the concept of drag-n-drop for upload came from this era. It makes sense that the "feel" of a web app be consistent for usability purposes. Google docs (the source of your screenshot) is a advanced web app so perhaps this was something they considered along with the rest of the wonderful points made in this question.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.