Luzifer / ots

One-Time-Secret sharing platform with a symmetric 256bit AES encryption in the browser
https://ots.fyi
Apache License 2.0
448 stars 69 forks source link

Improve UX for secrets with attachments #149

Closed sorcix closed 10 months ago

sorcix commented 10 months ago

When viewing a secret with both text and an attachment, people don't always notice the attachment links. Especially when there's only a single attachment with a short name. Due to how OTS works, when they copy the secret and navigate away, the attachment is gone. This makes it very important that they notice the links at the bottom.

Can we make attachments stand out more?

Luzifer commented 10 months ago

Hmmm yeah, I see the point… 🤔

Do you have any suggestions how to make them stand out more?

I could imagine something like a file explorer view with tiles… …has the disadvantage I'd need to possibly shorten the filenames which isn't wise as somebody could use that to hide file extensions…

I also could imagine a list view having a "file icon" in front, the name, the size and a yellow warning-triangle at the end which disappears after downloading the file (clicking the entry)… …should draw attention to the list…

Maybe a warning alert "Remember to download your files" which vanishes after all files have been clicked once? That might be overkill…

From those three variants I do like the second (list view) most…

sorcix commented 10 months ago

I was experimenting with something like this. Not sure if it's any better, though..

image

Luzifer commented 10 months ago

Had basically the same idea with the list-view suggestion:

In both cases the test.txt has been downloaded so the warning triangle switches to the check-mark as soon as the file was downloaded… Otherwise used the icon as some "eye-candy" to get the users attention to that file…

Not sure though whether I should use the warning triangle or just color the icon… …the triangle might send a false signal something is wrong with that file… 🤔

image image

Just a little b0rked with long filenames on small mobile devices…

image

sorcix commented 10 months ago

Ah, yours looks a lot better. The yellow warning triangle combined with the message above the list may scare people into thinking the file is malware though. Maybe use the standard "download" font awesome icon instead? (But keep the check when it's downloaded, that's great!)

Luzifer commented 10 months ago

image image