Spaces panel expand and collapse interaction

[niquewoodhouse]

We've seen in research that the expand/collapse interaction for the spaces panel is annoying and hard to use for most people.

We also know from research that subspaces might not live in this area or that we even require an expandable panel, so we should be reluctant to spend much effort on this interaction.

Adding some quick gif ideas:
1

2

3

4

[ShadowJonathan]

Related: #17604

[t3chguy]

@niquewoodhouse what is the task wanted from the web team based on this issue?

[t3chguy]

If we want any animation we will first need to implement a resizer for the space panel otherwise the width is automatic and thus not animatable

[t3chguy]

@niquewoodhouse / @nadonomy where does this slot into our new Milestones sheet?

[ShadowJonathan]

@niquewoodhouse i just saw the updated GIFs, a personal favourite would be 4 with a less "thick-lined" collapse icon. But i quite like the ideas set forth for now. 👍

[nadonomy]

@niquewoodhouse thanks for exploring!

On 1:

• Love love love the smooth motion between the states
• I don't have much affordance from the small button stylised as a circle. Is the design more intuitive if we use a larger, square, button which pops out over the right of the space panel?
• The interaction overall looks like it might have legs

On 2:

• Building on my middle point on 1, this is more what I was thinking! Idea: Try stylising as the same size and radius as the explore rooms button, placing it to the right of the space panel (obscuring space name etc), using the same background as the space panel.
• I like the idea of the space panel rounding as it helps develop the hierarchy of the space panel being a background, and the other panels layered on top. Does a softer radius feel more visually cohesive?

On 3:

• I like the discoverability of hamburger
• I'm unsure how I feel about printing the Element logotype. I think it's good to build more equity, but on the pure subjective spark joy level a part of me wonders if it's a bit tacky? It reminds me of when you get crappy stickers on new physical products. Need to think more on this, totally not resolute on my opinion.
• Really love the icon changing on hover to hint at interaction. The specific iconography reminds me of a trident, or type setting, though. Wondering how else we could stylise.

On 4:

• The alpha transition feels really primitve compared to how polished the other motion comps do (you did this to yourself!)
• Logomark only feels like a way more tasteful way to re-enforce brand equity.
• Find the icon stroke too heavy (colour, weight), I wonder if this might feel better overall with iconography closer to 3?

Overall, some really nice direction(s)!

[niquewoodhouse]

@nadonomy thanks for reviewing, following your notes I iterated the different options:

1:

• Amended button design to be more like others

ele-web-space-panel-interaction-01.mp4

2:

• Amended button design
• Softer radius on expanded panel

ele-web-space-panel-interactions-02.mp4

4:

• Amended alpha transition
• Amend icon

ele-web-space-panel-interactions-04-2.mp4

[t3chguy]

Proposals 3&4 are incompatible with IA1.1