🤝 Improvement to sharing design and flow

[jancborchardt]

Currently we have several issues with sharing, across platforms:

• It looks a bit cluttered, especially the 3-dot dropdown menu with all the actions is too much
• It’s not clear to people when the share will be set & sent, leading to possible access control issues, and also 2 separate mails when you set a note
• Names are often cut off because of the "can edit" with checkbox
• It could be more consistent across platforms

Here’s a proposal to fix these issues which came out of a design discussion @FlexW and I had about improving the sharing flow for the Desktop client. We should of course make sure to keep this the same across all platforms. (It is to be seen as a mockup – of course the inputs and buttons should be the native elements of the platform.)

Share overview	Share details	Share details advanced

Mockup with slight interactivity at https://design.penpot.app/#/view/b83aa940-a28e-11eb-bb49-81aaa3a367f9/b83aa941-a28e-11eb-bb49-81aaa3a367f9?token=9eUwuY6LzqqZ34pWFWSUnQ&index=0 https://design.penpot.app/#/view/b83aa940-a28e-11eb-bb49-81aaa3a367f9?page-id=b83aa941-a28e-11eb-bb49-81aaa3a367f9&index=0

Share overview

• We add a subline to the entries where info on "View only" or "Can edit" or "File drop" is shown – this makes name and subline area actionable
  • For external shares of single files where there’s no editing, the "Can edit" function needs to be not shown (anything except txt, md, or office probably)
  • Even if there is only one option, we should still show the subline for feedback
• The avatar needs to stay a separate actionable area for the contact options
• Another direct action in the list is to "Copy link" because that needs to be quickly accessible.
• On the right there’s a 3-dot menu icon which brings up a menu with quick actions for
  • Share details
  • Resend email
  • Delete share / Unshare
• Going to "Share details" shows the detail page with further info
• The little primary-colored bar on the top is a little experiment and would mainly be something for the desktop client to make the dialog look less dead.
• Alternatively on mobile: Whole entry is tappable and opens the menu as a bottom sheet, in this case with
  • (Direct switch of View only / Edit / File drop if possible?)
  • Share details
  • Resend email
  • Delete share / Unshare

Share detail

• Ideally, there is a quick slide left/right animation whenever one navigates in and out of this detail view so people have a sense of place.
• The header part needs to indicate both which file it is about, and if it is a share link or which person. In this mockup it is done by changing the header – this works for Desktop, for the other platforms we need to adjust.
• This opens with the relevant settings – when there is an expiration date set or enforced, the "Advanced settings" is already open
• Here all the share settings are listed, in this order:
  • View only / Edit / File drop
  • Note to recipient
  • Set password
  • Set expiration date
  • Share label
  • Delete link / Unshare
• Clicking the "Share & copy link" button automatically copies the link as expected. For shares to people, this could say "Share & send mail"

@nextcloud/designers and the leads @tobiasKaminsky @rullzer @marinofaggiana @mgallien @FlexW @LukasReschke @karlitschek

[skjnldsv]

Related #12178
#8479

Shall we close the others @jancborchardt ?

[bes1002t]

I think this issue is also related: #25123

@jancborchardt since your proposal and my proposal from the related ticket are quite similar, I would agree that your mockups totally make sense. :P
I think It would be a huge improvement from a user experience point of view if we could keep it like this over all platforms.

[bbceg]

Just adding my two cents from the related issue #22132 in case it makes sense to add a 'Direct Download' option to the 'Advanced' screen. After months of use we're pretty happy just appending the '/download' as and when needed so I'm less fussed now than I was when I first raised it. Still, it seemed worth mentioning in case anyone else can see the benefit.

[ImaCrea]

Hello there,

from the many user feedbacks I collected of the previous months, I greatly support these ux ideas. I think that would make it well easier for people to understand who they share with things and also who can do what. It's the core of nextcloud and anything that can improve this experience improves directly the value of the overall experience.

Here are a couple of users feedbacks I observed frequently and which could be of interest :

• "internal link" : I observed 50% of the time (if not more) people are getting confused with it. At the moment it's gray and at the bottom which gives it much less affordance than the "share link". So what I've seen is : users click on "share link" (because for example they want to share it in a conversation) and share that... with people from their organization who have access to it (!). This effect in various frustrating experiences.

Example of a real situation I've seen many times : someone share an external link (instead of internal) to a document to their team before an important group call to work on a document. The call starts, everyone connects to the document to work, and of course they expect to be able to work on it because they're part of the same team and they know they can edit it. But what happens is the "shared link" didn't have "edit mode" allowed... Then you get in that situation when no one can edit the document at that important moment and most people don't understand what happens... Then maybe someone manages to open the document in a regular way and says 'hey it works for me, why not for you?'... You get the scene... Let that happen 2 times and we get a call "your software is not reliable, we lost two meetings that way, we're thinking about going back to GDrive". 😔

A suggestion I can share is that maybe there shouldn't be a difference from the beginning and you should choose after. First you click on "share a link" and only then the UX let you understand whether you want to get an internal link or you need to create an "external" link. A bit of work on copywriting could also help, I'm not sure "internal" and "external" is that easy to get.

• the field "share with users" : I've seen many people not understand this is actually a text field where you can enter something. They just don't see it and go directly to create a "link share".

If these two parts are of interest to you folks here, don't hesitate to tell me and I'd be glad to take some time to share some proper mockups.

cheers :)

[schiessle]

pull request: #28832

[ImaCrea]

pull request: #28832

Hello @schiessle thanks, I checked the pr but not sure I get everything there :/