0

Good morning guys.

This is my first post, so hi everyone =) . I need some help with the design of a uploader angular component, what I'm trying to achieve is create two components in one, a single uploader and a multiple uploader.

For the first one, the single, I was trying to display only one button and over the button the progress information.(This one will be used also to upload your own avatar or single documents in forms)

single upload

In this case I want to leave the user the option to download/remove the uploaded file, so my first question is... how is done in the rest of uploader components? icons, contextual menu, links... Multiple 1 Multiple 2

For the multiple I want to display the list of files with the progress and I created something like that. First you load the list of files and then you can upload the files to the server.

Then the question I have some doubts about the different between the single and the multiple component, one is using the label of the button to display info and the other progress bars.. I don't know... Do you think it should be represented in the same way?

And my last question is about drag and drop, how I should implement it in terms of design in the multiple uploader? Should I create a dotted box around the entire component to be able to drag and drop documents over the component(over the progress bar, buttons..) or maybe I should create a different area around the component for the drag and drop??

In short, because yeah, my english is really poor, I want to ask you:

1 - Best way to be able to display progress and inform the user about the upload situation in a single upload.

2 - Best way to be able to remove/download the previous file in a single upload.

3 - Should both components display data in the same way for a better ux? Like if you're using progress bar and icons... use it also for the single mode.

4 - If I want to add a drag and drop, should I choose between the list or the drag and drop, combine both or create different areas for the list a for the drag and drop??

I'm completely open to new ideas, I don't have any requirement and for me is really important the user experience and I understand is not something simple that everybody can decide with no documentation/experience.

Sorry guys for my english and to use my first post to ask instead resolve any question...

Kto

  • 1
    You're asking a lot of questions in one post here. Can you refocus it down to a single question that can be answered? – JonW Jan 7 at 11:57
1

To answer your questions quickly, I'm gonna pull up screenshots from a project I worked on where I had to design similar components. I hope they are of help to you.

1 - Best way to be able to display progress and inform the user about the upload situation in a single upload.

[A basic file uploader progress by [1]

Additionally, you could show the percentage of file uploaded (this depends on the sizes of what they are uploading):

https://usersnap.com/blog/progress-indicators/

2 - Best way to be able to remove/download the previous file in a single upload.

What you have up there with a delete icon works. You could try using a Call to Action though, like "Remove file" or "Delete file"

enter image description here

3 - Should both components display data in the same way for a better ux? Like if you're using progress bar and icons... use it also for the single mode.

Yes. Consistency is one the heuristics of good user experience design.

4 - If I want to add a drag and drop, should I choose between the list or the drag and drop, combine both or create different areas for the list a for the drag and drop??

I will say combine both. Generally, most users will already be used to what we call a "drop zone": (the dotted line), it's a very popular ux pattern.

enter image description here

You should also make it known that it is possible to select multiple files e.g using a call to action like "Add your file(s)". This should also be made possible with your code:

enter image description here

  • Thank you for your time, I will try to follow your advise to keep the consistency =) – Kto Jan 7 at 14:08

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