Files Page UX Issues / Update requests

[jnthnvctr]

1. "Next" button appears on 25 uploads, but there is no new page (button should appear on 26th upload)

See screenshot here:

Requested fix: only show the button when 26 items are uploaded (/ not deleted from the users account).

2. Size calculations are not immediate for all items (see above screenshot - seems like this happens for anything >10MiB).

Requested fix: Can we put "Calculating..." for the size column if it's not available?

3. Column definitions - is it possible to put in "tool tips" that can give definition for the domain specific information? Eg CID -> definition for a CID (cc @terichadbourne do we have definitions for each of these columns in the docs? if so natural idea might be to have a link to the docs for definitions.

Relevant columns:

• CID
• Storage Providers
• Pin Status

4. Include a link below the table that mentions the JS library (can use the same copy + link as on the manual upload page)

Requested fix: Include this line underneath the table "You can also upload files using the JS Client Library.

[jnthnvctr]

• "Next" button appears on 25 uploads, but there is no new page (button should appear on 26th upload)
• P1 - When uploading files via the JS Lib, use the actual file name to render in the table (Not Uploaded at....)
• P1 - Size calculations are not immediate for all items (see above screenshot - seems like this happens for anything >10MiB).
• P1 - Replace all dashes with more informative information for Pin Status & Storage Providers if they are not immediately populating
• P1 - Including link to Column definitions - see Johnny's definitions below
• P1 - "Renewal By" column is missing
• P1 - Copy CID button next to the CID to make it easier for users to grab relevant CIDs.
• P1 - Tweak how drag and drop works to enable a larger area for files to be dropped (something that covers the whole page like slack does would be good) and fix the rapid flashing
• P1 - Rename "Upload Files" button to "Upload More Files"
• P1- Make the default width of the table (even when empty) wider to minimize how much the table flexes in size.
• P2 - Visually increase the size of the drag and drop area
• P2 - Include a link below the table that mentions the JS library
• P1 - Grey out tick box and add tooltip that says “You may only delete after the upload is complete”

[terichadbourne]

Flagging @johndmulhausen & @johnnymatthews to confirm, but I don't believe we have a section in the docs right now that would let you drop an anchor to definitions of those 3 concepts (CID, storage providers, pin status).

My gut reaction to @jnthnvctr's proposed UI is that I would be surprised if I clicked/hovered on one of those column headers and were taken to a separate site. What I'd prefer as a user would be for it to show a short definition there with a "Learn more" text link to anything in the docs that gives me more context. In that case, CID could go to a whole section on content addressing, for example, and we wouldn't have to create anchor tags based on vocab. (@rafaelramalho19 how hard would it be to implement it this way from a UI perspective?)

@johnnymatthews @johndmulhausen Could you please suggest 1-sentence/phrase definitions for each of the 3 phrases that could be used here and suggest the section of the docs that comes closest to covering each? We can then sort out whether we want to add any missing concepts to docs. Thanks!

[jnthnvctr]

As another note - I think we're missing the "Renewal By" column - is this only going to show up when deals arrive? Seems like that should be there. Editing the check list above:

Could we also rename the button (when theres at least one uploaded file) to "Upload More Files"

[jnthnvctr]

Editing the above check list to reflect this as well, but can we also have the table have a fixed width that stretches across the page? I think this means we could keep the Files header on a set place on the page regardless if there are files uploaded or not.

Thoughts?

[terichadbourne]

Is there a reason we're show the table header before there are any contents for the table? Or could we instead show the column headers only conditionally when there's also content to display?

…

On Mon, Jul 26, 2021 at 2:41 PM jnthnvctr ***@***.***> wrote: Editing the above check list to reflect this as well, but can we also have the table have a fixed width that stretches across the page (same width as the logo to the logout button?). I think this means we could keep the Files header on a set place on the page. Thoughts? [image: image] <https://user-images.githubusercontent.com/21000523/127041241-a154cb0c-5c1c-4ffb-b675-5fa0bfd5e6fd.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#178 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AESIRCJRNRTAUWHLOPML4IDTZWT37ANCNFSM5BAOC4WA> .

-- *Teri Chadbourne* Project Lead & Web Developer, ProtoSchool <https://proto.school> Protocol Labs <https://protocol.ai/> Twitter <https://twitter.com/eventteri> | GitHub <https://github.com/terichadbourne>

[jnthnvctr]

I do think it looks slightly visually better like this than it did the old way (even if the Files header is anchored on the left, it feels like its slightly floating?

[terichadbourne]

I assume your concern could be addressed without adding headers for an empty table, right? I might switch "No files" to "Looks like you haven't uploaded any files yet. Let's get started!" And then if you want the text and button to be centered to match what (I think) is shown once the table replaces that message, that'd be fine. I may be misunderstanding you, though.

[jnthnvctr]

Drag and drop feedback:

1. The area of the "Upload File" section is a bit small (both visually and funcitonally for dragging and dropping). Could we slightly increase the size?

2. When dragging and dropping, the "Drop here to Upload" modal flashes aggressively as you're moving around the page.

Slack does this quite well (to solve the functiuonality issue in 1 and 2) where if you click and drag a link it'll get a nice overlay over the whole screen you can just plop your file/link on to to "Upload to Slack"

3. On the Files table, is it possible to enable drag and drop upload? If this is hard, we should bump out.

[jnthnvctr]

@terichadbourne - i think that could solve it, but i think we still probably want to have a minimum table width + anchor the "Files" header more on the left (instead of having it float around).

I've seen other apps that do the table header thing, which personally like but if other folks feel like its weird I'm not opposed to nixing and going with your suggestion

[johnnymatthews]

Could you please suggest 1-sentence/phrase definitions for each of the 3 phrases that could be used here and suggest the section of the docs that comes closest to covering each? - @terichadbourne

CID: the **c**ontent **id**entifier for a file or a piece of data. Learn more at https://web3-storage-docs.on.fleek.co/concepts/content-addressing/

Storage providers: computers on the Filecoin network with storage space available for rent. Learn more at https://web3-storage-docs.on.fleek.co/concepts/decentralized-storage/

Pin status: reports the status of a file or piece of data within the Web3.Storage lifecycle.

We don't have a page that is suited for Pin status right now. Maybe a Web3.Storage data lifecycle should be a page we add to concepts.

[terichadbourne]

Thanks, @johnnymatthews! @rafaelramalho19 See above. I think you can replace the "https://web3-storage-docs.on.fleek.co/." in Johnny's suggestions to "https://docs.web3.storage/" since your site is already consistently linking to our not-yet-existient prod site instead of our staging site and we'll hopefully have it for tomorrow. 😂

[atopal]

• replace the dashes in the "pin status" and "storage providers" cell with "Pending". People thought it was a feature that had not been implemented yet when they saw the dashes.

[jnthnvctr]

I think @alan Shaw ***@***.***> already has a PR for this (I think he called it Queued)!

…

On Mon, Jul 26, 2021 at 4:45 PM Kadir Topal ***@***.***> wrote: - replace the dashes in the "pin status" and "storage providers" cell with "Pending". People thought it was a feature that had not been implemented yet when they saw the dashes. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#178 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFAHCS7VFOES5FVHNNKFCETTZXCPBANCNFSM5BAOC4WA> .

[jnthnvctr]

New files UX issue from Mr. Nesbitt!

When we upload a file via the JS Lib, it looks like the name in the table is "Uploaded at timestamp". This is confusing, becuase for actual retrieval, you'd use the CID/name - but the name you use is the actual file name, not what's shown in the table. Can we fix the table to show the actual file name (or folder?)

Updated above!

[jnthnvctr]

One more:

Grey out tick box and add tooltip that says “You may only delete after the upload is complete”.

Added above!

[atopal]

We'll file separate issues for the remaining open tasks:

• When uploading files via the JS Lib, use the actual file name to render in the table (Not Uploaded at....)
• include a link below the table that mentions the JS library