Description

This proposal is aimed toward improving the user experience of attachment uploads using the "Attachments" tab in each document.

Also contained here is an improvement requested by XWiki-22125 regarding the perception of the status of each upload.

Current state

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).

Proposal

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 an 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.

Colors, Structure and Typography

To better code this proposal, I have the main elements of the interface detailed in the image below.

Conclusion

Here are all the proposed changes in context:

For Cristal

In Cristal enabled environments, the upload methods will be the same in XS, as proposed here: File Upload Methods in Cristal. Only the visual design might be updated based on the Design System being used on Cristal.

Further improvements

These improvements were discussed/proposed on the forum on the discussion about this proposal and could be developed in their own proposal eventually.

• Add drag and drop for upload
• Mechanism for replacing individual attachments

Implementation in XS notes

Notes mostly taken by @Lucas Charpentier 

• The success and cancel icons are not part of the XWiki Iconset. IMO 'round checkmark' and 'round-cross' are semantically very similar to the regular ones we already have, they are not worth new entries in the iconset (and would probably not even be any different for a lot of iconThemes).
• I took the opportunity of this redesign to update the DOM of this upload status box:
  • The main change is that I plan to use an HTML "progress" component instead of a hard-coded div.
  • In addition to that, it's just reordering elements and adding nesting.