Drag and drop vs file picker

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.


enter image description here

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?

Tags: