UX: The file upload flow is a bit confusing

[tomootes]

When uploading an existing publiccode.yml file, the flow is a bit confusing.

1. I open the editor:

• I would like to upload my existing pc.yml file so i'm looking for a button that says "Upload", instead i find a button that says "Load". This is a but confusing.

2. I click the "load"-button

• A drawer opens with two tabs: "File" and "Remote". These could be more precise to inform the user. I would prefer: "Upload file" and "From remote url"

3. I click the "Browse"-button and select a local pc.yml file. I expect the UI to load the pc.yml-file right away. Instead i still have to click the "import"-button. Since there is an alert saying "This operation will erase all data" i see no harm in firing this event right away.

Recommendations

• Rename upload button to "Upload"
• Rename "file"-tab to "Upload file"
• Rename "remote"-tab to "From remote url"
• Rename "Browse file from disk" to "Browse file"
• As seen as user has selected a file, load the contents into the editor

[valeriocomo]

@tomootes hi. Thanks for your suggestion. I get it and this is a good topic for the team of designers.

[tomootes]

Alright! If i can review a design somewhere, hit me up :)

[bfabio]

I agree with all @tomootes' recomendations.

@valeriocomo, just adding: the need to press "Import" is even more confusing (dangerously so) when you already loaded something in the editor and don't realize that selecting the file from your OS' file dialog is not enough to upload it.

The only feedback when you upload a file is the editor being populated with data and if you already have something that doesn't work and you might think it was uploaded, when in reality the editor wants you to press "Import"."

"Import" and "This operation will erase all data" need to go.

[valeriocomo]

@bfabio we had a meeting with Designers. we discussed about this issue and we'll work on an improved version. @tomootes and I had already talked about this topic in a 1vs1 meeting. I'm aware that this solution isn't user friendly.

[tomootes]

@valeriocomo thanks for the heads-up

[valeriocomo]

as output of a meeting with Designers team, we'll delivery the following changes:

• back button will be always shown at the left side
• browser button and import button will be in the same context. it will be disabled until a file is selected
• filename will be displayed
• reset selection button will be added beside the filename
• the "overwrite" modal will be showed if and only if the form has already filled
• it will displayed a feedback message at the end of the process, telling the user if the import process was successful or not.

no mockup are available.

[bfabio]

• filename will be displayed

• reset selection button will be added beside the filename

It could be worth revisiting this part: once the file is selected, there's no need to confirm it again because the selection itself serves as confirmation