This is related to the issue XWIKI-22363 and XWiki-22125.
Hey everyone, while researching improvements for XWIKI-22125 (by @rjakse) I noted that, while the issue is mainly about the upload complete indication, the whole area of attachments uploads inside pages could get a visual design and UX pass.
Context:
Upload status
A very specific problem, noted by the issue XWIKI-22125 is that the visibility of the completed download in very subtle, so users can miss the fact that the upload was completed. Example in the sequence below:
Currently, there’s not a lot of visual feedback to the user about changes in the upload state (one icon and a change in the transparency of elements). My proposed changes for this component are to make it look like this:
What we gain here:
- More modern and compact look.
- Less technical information for simple users
- Focus on the time remaining and percentage of the process
For advanced users
Now, I know that removing information indiscriminately can have a impact on more advanced users. So for these power users we can still have all the available information, but laid out a little differently
Completed upload
When finishing the upload, all the details and the progress bar should be gone. The fields that remain are:
- filename
- icon
- upload message.
The removal of all the extra details should make it clear to the user that this file is no longer uploading while retaining its context.
Following this same approach we would have all the status like below (the ones on the right are the reworked versions):
Upload Section title
We can also improve the overall layout for the whole list. Starting with the title itself, we have a “Section Title” and the standard OS “Choose Files” to indicate new files uploads.
Proposed change
To save up space, we can condense these two elements into one button, which will have a more descriptive label. Example below:
Hide Upload Status
Now, the final change I would like to propose is to the “Hide upload status” button at the end of the upload list. This button is somewhat hidden and, in my opinion, could have better functionality. In its current form, its only function is to hide the finished uploaded files list, effectively it’s a “clear list” button.
I propose to change this button into a collapsible panel, containing all uploads. This way the user can hide and show the list on demand and its title also functions as a counter for the remaining files to be uploaded, to provide an overview of the process. With a big list of files it can provide a more streamlined look, even if with a small list it may be not as important.
Different status for the file list panel
Note that at the end of the process, with all uploads completed or cancelled, we can provide a “Dismiss” link to hide the section.
Conclusion
Ok, so to wrap up this post. I know that I went a little further than the original Jira with my proposed changes, but not everything needs to be made at once of course.
Here are all the proposed changes in context:
So, I would like to know from you, what do you think of these changes. Do you have any suggestions moving forward with this?
Thank you all for reading!
Knowing when your file upload failed can help advanced users understand why their upload did not get through.
We do not need to keep visuals and semantics always aligned. We do have some buttons styled like links (and links styled like buttons) in our UI and it’s okay to add more as long as we have a clear reason behind it 
