Bring leaving space experience in line with iOS

[kittykat]

Your use case

What would you like to do?

Improve the leaving spaces user experience by bringing it into alignment with the new iOS design

Why would you like to do it?

To have a simpler and smoother user experience.

How would you like to achieve it?

By simplifying the interaction to have only one step for selecting rooms.

Have you considered any alternatives?

No response

Additional context

Ideally we would continue to have a bottom sheet, but if that's not possible, then we can have a screen.

[fedrunov]

since there is no figma design, I've tried to adapt it to current android design @niquewoodhouse @amshakal please verify if it

Scrolled to top:

Scrolled to bottom:

[kittykat]

Can we include the text about leaving the space please?

The the title should be:

Leave

Are you sure you want to leave ? Do you also want to leave all rooms and spaces in this space?

[fedrunov]

after discussion with @niquewoodhouse and @kittykat it was decided that this screen needs design revamp. Reassigned to Nique

[niquewoodhouse]

I'm blocking this behind the iOS issue, so when we have UI for that, I'll make the UI for this too

[niquewoodhouse]

We've altered the iOS design to

• Remove the "select all" and "select none" options when someone is filtering
• Alter the "select rooms" header to just be "rooms"

For Android, I tried to find screens that have a fixed search and header, and found the "add existing rooms" to a space screen has this:

We could follow that, eg:

But I'd prefer to copy the tabs, with the filter top right

[fedrunov]

Looks good, I prefer option with filtering activated by button in toolbar, rather then visible always

[niquewoodhouse]

Looks good, I prefer option with filtering activated by button in toolbar, rather then visible always

Lets do that and see how it goes.

[fedrunov]

@niquewoodhouse Some questions:

1. Buttons background

in a Figma design buttons are on a white background, so when list in a scrolled state it could look like this:

Scrolled to top	Scrolled to bottom
	)

Since panel with buttons have same background as list it "cuts off" items in a list

Same problem with toolbar, when user scrolls to top, but it's ok when user scrolls to bottom since toolbar gets elevation and shadow appears

2. Prompt text

There is warning message in figma, but in current implementation (via dialog) this warning has some extras

"Are you sure you want to leave %s? "- general message and then one of following is added
"You are the only person here. If you leave, no one will be able to join in the future, including you." - added if you are the only member of space
"You're the only admin of this space. Leaving it will mean no one has control over it" - added if you are the only admin of space
"You won't be able to rejoin unless you are re-invited" - added if you are leaving private space

Shouldn't we implement same for this screen now?

3. Prompt text line break

in Figma it looks like there is a line break after "Are you sure you want to leave ?", but it isn't added to the text in a Figma file. Without line break there could be "hanging" "If" like on screenshots above. But if we will put it there it could happen that last work of space name will "hang" on a separate line instead, depending on a screen size and user font settings. But I still think it's better to add a newline. What do you think?

Important note - don't look at toolbar's header and buttons, they are not finished :)

[niquewoodhouse]

I've taken a look at this issue in a bit more detail and tried to restrict changes to just content, to keep changes minimal.

Prompt text

To fit in all the messaging I needed to edit some content:

• remove the heading
• edit the intro copy to introduce the relevant information and remove copy about the form below
• I changed the form title from Rooms to Things in Space Name
• Changed the two radio options to be Leave all and Leave none instead of select all and select none

If only person:

If only admin:

If re-invite would be needed:

Adding this content means we need another way to let people know how to use the form and I was wondering if we have a coach mark component that we can repurpose for this to appear the first time you use this form, like this:

If we don't have anything like this, let me know, we can come up with alternatives. I did consider having another step appear if one of these prompts is necessary but then the user is potentially tapping Leave 3x to actually leave, and it makes the leave button unpredictable as this may or may not appear.

---

On scroll

On the screenshots you've got quite a bit of content fixed at the top, I think it might be good to just let people have more space for the form, we don't need to keep so much fixed, like:

ele-leave-space-andr.mov

---

On buttons background

Where did you get the buttons from? Can we see if that component has a default background on it, or if its used elsewhere in the app? I've tried looking in the app but the only place I can see two buttons side by side is Room > Room addresses > Add local address