Drag and drop vs file picker

Question

This is part of the on-boarding process, where we encourage people to either create a new project or upload a specific file type to create project.

While I was designing I thought about three workflows for people who wish to upload file.

Design 1. Click on upload file CTA then it takes you to the next screen (page 2) where you can drag and drop or use file picker to select file. As you can see there are two steps. Personally, I think it’s easier for the user to have one goal on each page. Nevertheless, user also require to click on the close button to go back to page 1.

Where design 2 & 3 really start uploading process on page 1. The main difference is design 3 remove the drag and drop function to prevent possible file type error. Since design 3 only use file picker, file selection is limited to specific file type. Personally, I think adding error message just add complexity in terms of more information given to page 1.

Here are my questions.

1. What’s the best practice when you are dealing with secondary action within the same page? Should you take the user to the next step (page 2) so each page has only one goal. Or is this totally fine to have secondary action within the same page?

2. What are some disadvantages for removing drag and drop option?

3. Or maybe I am wrong for all three workflows? What are some possible alternative?

Answer 1

I will answer your questions 1 by 1 and will give you a suggestion at the last.

1) Migrating user to another page is not always a good option as it takes more load time also, calls are made to server increasing traffic. User should only be migrated to next page when some new activity is to be done. In the above case, only when user wishes to create a new project instead of uploading a file he should be navigated to another page.

2) Nowadays most websites prefer drag and drop, users are highly habituated to it. It is highly recommended, At times it may happen that the file to be uploaded is deep inside the folder structure. This increases user efforts and takes more time and user gets irritated at the beginning itself. This leaves a negative impact on users mind while moving forward and using website. Also, the file type can be checked while it is being uploaded, and an error message can be shown accordingly.

3)The best possible way out is to clearly show 3 buttons each for

create new project,

drag and drop the file,

open file explorer to select file. Check image below for refrence.

This will make easier for user to select appropriate option.

Here if user selects to drag and drop file, open modal to drag and drop file.

If user selects to goto file explorer open a file explorer in modal.

Only if user selects create a new project, then redirect him to new page. This will help you save calls made to server and fasten up the process and reduce clicks.

Check the link for file type validator plugin https://fineuploader.com

Answer 2

1) I think option one is the best for this. Yes, this is the upload function and you have two choices. It is quite straightforward for users and offers enough flexibility for the action as users may have encountered something similar elsewhere.

2) Browsing forces the users to go through their file structure and find the file they want to upload. Dragging and dropping as a second option is always a welcome option for users that either have the file ready at hand or they prefer to browse for the file in their own OS interface.

3) I think the first option is quite straight forward. Create a new project or upload a file through these two methods. This method is encountered quite often in platforms from backup solutions to e-mail attachments. Not sure what would be a better alternative, perhaps another user in StackExchange can help.