Element-web: Inconsistent "Leave room" vs "Leave [community]"

[pafcu]

Description

The button for leaving a room on the room settings page is green and says "Leave room".

The button for leaving a community on the community settings page is red and just says "Leave" ("leave what? The settings page?")

Version information

Riot web 72563e611421-react-7118f7a38f79-js-0238ecebedfc on FF57

[lampholder]

Interesting.

First up - The leave button on the community should definitely say 'Leave Community', not just 'Leave'

Second - red is a good colour for an action that cannot be reversed (at least by the user alone). Right now, leaving a room is sometimes irreversible, leaving a group always is.

I was going to suggest that the best UX might tell users the consequences of their actions, i.e.

[<green>Leave Room</green>] - this room is currently configured to allow you to rejoin whenever you like

[<red>Leave Room</red>] - this room is invite only; you won't be able to rejoin without an invite

And the same for communities (not yet applicable since communities are all invite only, but that won't be the case for long).

_However_, I suddenly thought we might be giving users there a false sense of safety - just because a room/community's settings permit rejoining right now doesn't mean they always will.

On reflection, I think the utility of clarity in that instant is higher than the risk of users thinking they can return to a community only for the community admin to change the rules whilst they're gone.

[pafcu]

I think it's a good idea to not over-use red as a danger-color: There should be a difference between "You can definitely not undo this" (e.g. deactivating your account, deleting your E2E keys by signing out, giving someone the highest power level), vs. "You might not be able to undo this at some point in the future, but you probably can, unless someone else does something special".

Alternatively, use red for maybe-dangerous things, and add e.g. a huge image of an exclamation mark to definitely-dangerous things.

[lampholder]

Right now we use red for:

• User settings:
  
  
  
  • Found a bug [REPORT IT]
  
  
  • [CLEAR CACHE AND RELOAD]
  
  
  • [DEACTIVATE MY ACCOUNT]
  
  
• Room membership mgmt:
  
  
  
  • kick
  
  
  • ban
  
  

We don't use it for:

• log out
• blacklist device
• deleting a room alias
• enabling room encryption
• signing out without exporting your e2e keys
• promoting a user to have the same power level as yourself

[lampholder]

I think agreeing on warning semantics is an excellent idea. I like the three levels:

• thing
• thing that could be undone (conditional on other users' agreeing)
• thing that literally cannot be undone with all the will in the world

We only have two things which can't be undone (afaik) - deactivating your account and throwing away your encryption keys.

• Deactivating your account certainly deserves maximum awooga (potentially with a github style "type your name in here so we know you really mean it" wrapper).
• Quitting without exporting your keys is a funny one - it's hugely destructive, but increasingly not a problem as keyshare works its magic. The full 'type your name' style wrapper would be too big here, but it might be worth a checkbox saying 'I understand that if those keys aren't backed up by me or on another device my encrypted message history is toast'.

I think I _would_ like us to consider a visual distinction between the first two categories of action - whether that's with red buttons or not is certainly up for discussion :)

[turt2live]

as a data point with not much research backing, here's what we do at my day job (based on bootstrap):

• primary (dark blue) = prominent action, one per logical area (table row, content area, etc. Generally this is the "Save" button or "View More Details" button on a table row)
• info (light blue) = secondary action, generally something that could be made primary, but something else is already primary. Such as adding a "Clone" button next to the View More button on a table row. Also used for cases where the user doesn't need to press it, but can for more information ("preview", etc)
• warning (yellow/orange) = Potentially dangerous action, but nothing that can't be undone. The best example of this is suspending users: you can undo it by clicking the yellow "unsuspend" button.
• danger (red) = Any kind of delete, or confirmation for a delete. In our application "log out" is fairly prominent and not considered a delete (as you can log in afterwards, but we also don't have e2e keys to deal with). An example would be deleting a user: the delete button is red, and the OK button on the dialog is also red.
• white outline = All cancel buttons

This scheme could be applied to Riot as follows:

• primary (green) = Pretty much every button, the default color choice.
• info = probably not used
• warning (yellow / orange) = Actions like "clear cache" and "kick".
• danger (red) = The scary things, like logging out, blacklisting, everything else @lampholder said.

Hopefully this is all helpful and not just noise on the thread.

[lampholder]

I mocked this up before the discussion above - there's certainly a strong case for the red buttons here actually being yellow/orange buttons as @turt2live says.

As per not overusing red (or pink, in this case) I think my list of currently-red things had some stuff that shouldn't be - certainly reporting a bug. Clearing the cache could be yellow/orange as (it certainly warrants some sort of "are you sure, this is going to take foreeeeever" understanding before users commit to it).

[turt2live]

just as a data point: The leave community button is green if you're not an admin, otherwise it's red.

[aaronraimist]

What else needs to be done here? Yes the button in the dialog is called "Leave" but you have to click a button called "Leave this community" first and the title of the dialog box is "Leave Community" so I think it is pretty clear what is happening on current versions of Riot.

[turt2live]

I think the issue actually got solved at some point. The "Leave this community" part used to be called just "Leave".

There's a bunch of text which I admittedly have not re-read, but from a brief look it seems like @lampholder might have a bunch of plans to deal with. I'll leave this open pending his review for what to do regarding color choices, etc.

[aaronraimist]

Easy and help-wanted labels can probably be removed then

[lampholder]

I made a separate issue for the design-language-around-irreversible-actions stuff more generally: https://github.com/vector-im/riot-web/issues/7539

On this issues specifically, I think it's still worth doing one more thing:

• [ ] make it abundantly clear that if you leave a group and you're a (the) group admin, you won't be able to rejoin unless there's another admin to invite you.

We don't need to do any more than that - just let people know that quitting a group they made is pretty terminal at the moment.

[aaronraimist]

What should the string be for that?
"You a group admin. You will not be able to rejoin without an invite from another admin."

or I guess use the membershipButtonTooltip so "You are an administrator of this community. You will not be able to rejoin without an invite from another administrator."

[turt2live]

The last admin thing is reported here: https://github.com/vector-im/riot-web/issues/6183

(closing this in favour of that)