Room header & details UI refresh (+ what's needed to remove from Labs)

germain-gg commented 10 months ago

Design: Figma document Trust & Decoration

Updated figma May 2024: https://www.figma.com/design/gpxHFDTNK796n84r1ZxYG2/Room-Header-%26-Details-(2024)?node-id=0-1

Designer: @americanrefugee PM: @daniellekirkwood / @nadonomy Developer: @germain-gg

### Room header
- [ ] https://github.com/vector-im/element-web/issues/25887
- [ ] https://github.com/vector-im/element-web/issues/25902
- [ ] https://github.com/vector-im/element-web/issues/25905
- [ ] https://github.com/vector-im/element-web/issues/25910
- [ ] https://github.com/vector-im/element-web/issues/26027
- [ ] https://github.com/vector-im/element-web/issues/25892
- [ ] https://github.com/vector-im/element-web/issues/26028
- [ ] https://github.com/vector-im/element-web/issues/25884
- [ ] https://github.com/vector-im/element-internal/issues/444
- [ ] https://github.com/matrix-org/matrix-react-sdk/pull/11448
- [ ] https://github.com/vector-im/element-web/pull/26089
- [ ] https://github.com/vector-im/element-desktop/pull/1194
- [ ] https://github.com/vector-im/element-web/issues/26326
- [ ] https://github.com/vector-im/element-web/issues/26569
- [ ] https://github.com/vector-im/element-web/issues/26568
- [ ] https://github.com/vector-im/element-web/issues/26570
- [ ] https://github.com/vector-im/element-web/issues/26571
- [ ] https://github.com/vector-im/element-web/issues/26181
- [ ] https://github.com/vector-im/compound/issues/274
- [ ] https://github.com/vector-im/element-web/issues/26585
- [ ] https://github.com/vector-im/element-web/pull/26630
- [ ] https://github.com/vector-im/element-desktop/pull/1345
- [ ] https://github.com/vector-im/element-web/issues/26656
- [ ] https://github.com/vector-im/element-web/issues/26634
- [ ] Hide the Call buttons in group rooms: https://github.com/element-hq/wat-internal/issues/157
- [ ] Hide the Voice Call button: https://github.com/element-hq/wat-internal/issues/190

### Room details
- [ ] https://github.com/vector-im/element-web/issues/26558
- [x] Close button should have a hover state
- [x] Room Name: Add padding/margin on the right and left (16px)
- [ ] https://github.com/vector-im/element-web/issues/26595
- [ ] https://github.com/vector-im/element-web/issues/26597
- [ ] New room info menu options list missing (order, name, icons, section dividers, etc.)
- [ ] https://github.com/vector-im/element-web/issues/26596
- [ ] https://github.com/vector-im/element-web/issues/26645

Open Questions

[x] @nadonomy to scrutinise whether we keep providing support for feature_right_panel_default_open
[x] @nadonomy what do we handle the notifications panel?
[x] @nadonomy @daniellekirkwood Resolve if we can deprecate feature_state_counters: https://github.com/vector-im/element-web/issues/25884
[ ] Opening room details requires clicking room header somewhere which is hardly discoverable
[ ] Cannot click to enlarge avatar from header; opens details instead
[ ] Search is hard to access; need to open details (left side), click search button (right side), then enter search string (left side); CMD+F doesn't work
[ ] Room details don't help mitigate scroll-on-hover concern on room topic

Time sheeting ⏱️

WEB: Room header & details

daniellekirkwood commented 10 months ago

pulling over from @t3chguy's comment in the now-closed issue:

https://github.com/vector-im/element-web/issues/2401 https://github.com/vector-im/element-web/issues/8667

are related and may need closing/dealing with as a part of this

daniellekirkwood commented 10 months ago

Also copying from the previous issue:

Is https://github.com/vector-im/element-web/issues/25534 invalid as we're no longer providing a drop-down header?

@nadonomy or @americanrefugee this is a question for you :)

americanrefugee commented 10 months ago

Correct @daniellekirkwood - there is no longer a drop-down menu from the room header. Click to expand the right sidebar only.

nadonomy commented 10 months ago

pulling over from @t3chguy's comment in the now-closed issue:

2401

Closed this as it's ambiguous. Tough to action. We can get fresh insights once the new implementation is testable

8667

@americanrefugee for this I think we should stress test in Figma and propose the smallest width we think works.

@daniellekirkwood would you be able to pull some analytics insights on this pls? Knowing what resolutions are in use in the wild would help. We could also formalise this in the project README (with browser support etc) for posterity.

https://github.com/vector-im/element-web/issues/25534

Commenting there - @americanrefugee your input is welcome too.

nadonomy commented 10 months ago

@germain-gg updated the issue tasklist to include https://github.com/vector-im/element-internal/issues/444 which details how we should solve notifications.

nadonomy commented 10 months ago

@germain-gg on feature_right_panel_default_open - I talked through this logic with others today and the sentiment was that's really difficult to work on simple stuff in Element Web today so let's simplify the flags where we can.

I checked analytics and there's little useful to discern on this one. So, I think let's remove it and monitor for any feedback we get on develop after we merge.

Ai-rin commented 9 months ago

I never liked defaults with no member list visible. Now when you removed feature_right_panel_default_open, i have no way to fix it. 👎👎👎

daniellekirkwood commented 9 months ago

@germain-gg & @janogarcia / @americanrefugee I don't have enough familiarity with screen widths to be able to read this chart... however, as asked for here's some data!

https://posthog.hss.element.io/insights/8oug6Lje

germain-gg commented 9 months ago

We need to accomodate this https://github.com/matrix-org/matrix-react-sdk/pull/11475 in the new room header too

Looping @charlynguyen in as the developer who's been looking at the knocking feature

americanrefugee commented 6 months ago

@kerryarchibald Here are the deltas I found between develop.element.io vs. the design...

Room Header

Order of buttons on the right should be Video Call, Voice Call, Threads, Facepile
Change Video icon to Video Solid
Public Room icon button missing background on hover
Check spacing of icon buttons, should be 8px between all items
Clicking the header should expand/close on-click (currently, clicking the header when the side panel is open to another section goes to Info)

Details

Search button
- Hover effect should be instant, not dissolve/animate
- Tooltip should appear below icon button (after 300ms)
Close button
- There should be a hover state
- Tooltip doesn't match the design, and should appear below icon button (after 300ms)
Room Name
- Add padding/margin on the right and left (16px)
Room description missing
Tab navigation missing
New room info menu options list missing (order, name, icons, section dividers, etc.)
People view (mostly) not implemented
- Sub nav missing
- New Search button missing
- Invite people button wrong (should be an icon-only primary)
- People list not done
Threads view not implemented
- Sub nav missing
- Total number of threads missing
- "Mark all as read" text link missing
- Change Thread icons in list to outline version, not solid
Profile views not implemented
Room details for a direct message not implemented

@nad Did I miss anything?

nadonomy commented 6 months ago

@nad Did I miss anything?

Wrong username btw 😬. But the major one to add from my side is Widgets not being implemented, as they're designed as a subview now.

Johennes commented 6 months ago

Thanks both, I've added your points to the task list in the issue

daniellekirkwood commented 6 months ago

"Facepile & room icon layout issues when the window isn't wide enough"

i added as this happened...

Context: In terms of how wide Element is, it's just over half my laptop screen.

daniellekirkwood commented 6 months ago

Threads view not implemented: "Mark all as read" text link missing

We don't have this functionality (only at a room level) so I'm going to remove it from the DoD of this issue and the iterations issue

daniellekirkwood commented 6 months ago

There's a "post removing the room header from labs" version of this issue that I've taken some details from here and added to it: https://github.com/vector-im/wat-internal/issues/75

I've also moved some of @Johennes ' questions to the questions section as they're not yet actionable, they need to be discussed.

Will cross reference the list in Aaron's comment to make sure nothing has been lost in the move over.

Thanks!

nadonomy commented 6 months ago

@kerryarchibald on the open questions:

Opening room details requires clicking room header somewhere which is hardly discoverable

Do you have any background context to adding this here? We did user testing and this hasn't come up so far. The collective conclusion we arrived at was to ship and learn.

Cannot click to enlarge avatar from header; opens details instead

Happy to defer to @americanrefugee on this.

Search is hard to access; need to open details (left side), click search button (right side), then enter search string (left side); CMD+F doesn't work

We're making a bunch of known compromises here until we have unified search. @kerryarchibald is there anything specific you think we should address before shipping? @americanrefugee are there any low hanging tweaks you think we should entertain?

Room details don't help mitigate scroll-on-hover concern on room topic

@kerryarchibald Can you link to more context on the 'scroll-on-hover' concern? User quotes would be great (we could take this to internal if we don't want to look over verbatim quotes in public for privacy).

t3chguy commented 6 months ago

CMD+F doesn't work

Its a default-off pref

Johennes commented 6 months ago

All of the feedback quoted below was from me, not Kerry.

@kerryarchibald on the open questions:

Opening room details requires clicking room header somewhere which is hardly discoverable

Do you have any background context to adding this here? We did user testing and this hasn't come up so far. The collective conclusion we arrived at was to ship and learn.

There's no further background other than me finding this hard to discover and having seen other Element employees raise the same concern. Not a hard block if design is confident in this experience.

Search is hard to access; need to open details (left side), click search button (right side), then enter search string (left side); CMD+F doesn't work

We're making a bunch of known compromises here until we have unified search. @kerryarchibald is there anything specific you think we should address before shipping? @americanrefugee are there any low hanging tweaks you think we should entertain?

I don't have a good alternative proposal. Searching just feels basic enough to me that I think I'd prefer it to be accessible with just one click or at least without having to cursor from left to right to left.

Room details don't help mitigate scroll-on-hover concern on room topic

@kerryarchibald Can you link to more context on the 'scroll-on-hover' concern? User quotes would be great (we could take this to internal if we don't want to look over verbatim quotes in public for privacy).

This was flagged by M in the WAT lobby a few weeks ago when briefly had the labs flag defaulted to on.

Johennes commented 6 months ago

CMD+F doesn't work

Its a default-off pref

Oh! Do you know why this is off by default?

t3chguy commented 6 months ago

I believe that was the ask at the time, however many years ago

americanrefugee commented 6 months ago

@kerryarchibald @nadonomy @Johennes

Cannot click to enlarge avatar from header; opens details instead

Happy to defer to @americanrefugee on this.

I see no value in clicking to enlarge the room avatar from the header. If the user clicks the avatar in Room info, then show full size image.

Search is hard to access; need to open details (left side), click search button (right side), then enter search string (left side); CMD+F doesn't work

We're making a bunch of known compromises here until we have unified search. @kerryarchibald is there anything specific you think we should address before shipping? @americanrefugee are there any low hanging tweaks you think we should entertain?

Jano and I discussed this at length with Germain. We all felt that the solution we arrived at is the best compromise until we can properly address search globally.

The only other solution would be to add the search icon into the room header (example), as it is currently. However...

This takes us further away from the vision/concept, and closer to what we have today
A search icon in the header adds clutter, and we would probably need to explore a new search icon for this specific case so that it looks proportional to the other icon buttons
Search is broken in general, and so we're spending a lot of time/energy on coming up with non-ideal solutions

As for the actual search box that appears below the header after clicking the search icon button...

In order to prioritize delivery over perfection, we decided to keep the experience exactly as is. Otherwise, anything else we design / propose would incur further development time and possibly open other cans of worms downstream.

Bottom line: I say we ship what we envisioned (search from Room details panel) and learn. If there's significant blowback, we can move search back to the room header. But hopefully we can fix search for real and all of these issues go away :)

Johennes commented 6 months ago

There's a "post removing the room header from labs" version of this issue that I've taken some details from here and added to it: vector-im/wat-internal#75

Great, thank you. I'm wondering if we could move https://github.com/vector-im/element-web/issues/25884 back into this epic because it'll just mean deleting code so should be fairly trivial.

daniellekirkwood commented 6 months ago

There's a "post removing the room header from labs" version of this issue that I've taken some details from here and added to it: vector-im/wat-internal#75

Great, thank you. I'm wondering if we could move #25884 back into this epic because it'll just mean deleting code so should be fairly trivial.

Yes! We can do that. I wasn't sure if the deletion of old code would happen before or after we take the header our of labs. That item can sit in either Epic but must be done either way.

daniellekirkwood commented 6 months ago

Also @kerryarchibald (sorry for the number of pings on this issue for you now!) Can you confirm that we're maintaining all the Analytics events we currently have in the new version of the header and right panel? 🙏

kerryarchibald commented 6 months ago

Also @kerryarchibald (sorry for the number of pings on this issue for you now!) Can you confirm that we're maintaining all the Analytics events we currently have in the new version of the header and right panel? 🙏

All the right panel events are still in place

"WebRightPanelRoomInfoPeopleButton"
"WebRightPanelRoomUserInfoBackButton"
"WebRightPanelRoomInfoSettingsButton"
"WebRightPanelMemberListInviteButton"
"WebRightPanelRoomUserInfoInviteButton"
"WebRightPanelThreadPanelFilterDropdown"

Made a ticket to reinstate one that was lost: WebRoomHeaderButtonsThreadsButton https://github.com/vector-im/element-web/issues/26585

@daniellekirkwood some interactions have moved from the room context menu into the right panel - favourite, invite, leave - should we add new events for those actions, or reuse the context menu events? WebRoomListRoomTileContextMenuFavouriteToggle, WebRoomHeaderContextMenuLeaveItem

janogarcia commented 6 months ago

@americanrefugee Thanks for the mockup.

A search icon in the header adds clutter, and we would probably need to explore a new search icon for this specific case so that it looks proportional to the other icon buttons

If we moved Search back to the header, I wouldn't recommend coming up with an alternative Search icon for that context. The icon dimensions are already proportional, the main difference being its lighter visual weight being an outline icon while the other icons on the header are solid.

A solid magnifying glass icon for Search wouldn't be that recognizable/intuitive. So we either turn all icons there to outline style or just accept that difference. I'd say, let's accept the difference given that this would be just an interim workaround. We expect Search to be properly addressed at some point, moving it to a more appropriate place.

daniellekirkwood commented 6 months ago

Made a ticket to reinstate one that was lost: WebRoomHeaderButtonsThreadsButton #26585

Thank you, this button is the one I need to inform some decisions on the Stuck Notifications work. This issue should be done before we release from labs so I'll add it to the task list. Hopefully it won't take long?

@daniellekirkwood some interactions have moved from the room context menu into the right panel - favourite, invite, leave - should we add new events for those actions, or reuse the context menu events? WebRoomListRoomTileContextMenuFavouriteToggle, WebRoomHeaderContextMenuLeaveItem

On the posthog side I can combine events really easily so if we create new 'accurately' titled events then that's not a problem for me. It's fairly low priority so if it's going to take time, leave it be :)

nadonomy commented 6 months ago

@kerryarchibald pivoting from the internal discussion to here - on when to delabs.

We were guiding our decision making by ensuring we're not removing functionality outright, with things re-shuffling between the header and right panel. Once we've hit that point, then it just becomes a question of how polished we want the first thing we ship to be.

Personally I think it'd make sense to:

Delabs once the header, initial right panel, and navigation of subviews (controls for back/close/etc) are up to spec.
Delabs at the start of a release cycle, so we give ourselves maximum time on develop to iterate.
Ship iteratively after that.

kerryarchibald commented 6 months ago

Delabs once the header, initial right panel, and navigation of subviews (controls for back/close/etc) are up to spec.

@nadonomy what specifically does up to spec mean here?

nadonomy commented 6 months ago

Delabs once the header, initial right panel, and navigation of subviews (controls for back/close/etc) are up to spec.

@nadonomy what specifically does up to spec mean here?

LGTM from yourself/Aaron/Jano/Danielle.

janogarcia commented 6 months ago

@nadonomy Makes sense.

Just to make sure we're on the same page, by “Ship iteratively after that.” do you mean any new improvement/request that may come up in the future that is not part of the current spec on Figma, or do you mean cutting down the scope somehow for the current spec and polishing/finalizing it in a subsequent iteration? I guess you mean the former.

nadonomy commented 6 months ago

@nadonomy Makes sense.

Just to make sure we're on the same page, by “Ship iteratively after that.” do you mean any new improvement/request that may come up in the future that is not part of the current spec on Figma, or do you mean cutting down the scope somehow for the current spec and polishing/finalizing it in a subsequent iteration? I guess you mean the former.

I mean just delabsing and shipping as soon as we can in all cases - as that was Kerry's original prompt. My understanding is the changes being labs flagged is adding complexity.

So my sense is if we can ship with a smaller scope first, let's just do it instead of holding back. We can ship polish iteratively (from Figma, or from user insights...).

@daniellekirkwood also happy to defer to yourself on scoping - I just heavily advocate for point 1 in this comment for minimally viable to ship.

kerryarchibald commented 6 months ago

With the fix for video rooms, I think the new room header and right panel has feature parity with the legacy room header + right panel. Up to @daniellekirkwood and @janogarcia, but this is my vote for moving the remaining room details tasks here to the post-delabs iteration.

daniellekirkwood commented 6 months ago

iiuc only the room header is in labs (the right panel is not) which means the only thing on the list that remains is: https://github.com/vector-im/element-web/issues/25884 which i don't think blocks us from de-labsing.

i think the remaining items in this issue would be priority after de-labsing but they're not causing us to stay in labs...

when talking about releasing from labs we've talked about doing that at the beginning of a cycle so we have the maximum amount of time available to test internally/ in nightly or develop. I think that still applies, and it lines up with the releases as such that we could do that this week and the RC is next week? Am I calculating that correctly?

Johennes commented 6 months ago

The counter feature from https://github.com/vector-im/element-web/issues/25884 is not present in the new room header. We need to clean up its labs flag but that can happen together with removing the old header code which should be a separate post-delabs task.

For release, we should ideally enable it by default on nightly and develop to gather some more feedback. That can happen asap and doesn't need to align with our release cycle.

t3chguy commented 6 months ago

@Johennes I don't think that's true

Johennes commented 6 months ago

Hm, ok. Looks like I misunderstood this then and that makes me question why we didn't remove it directly (there are a few closed PRs linked from the issue). Given that it's under its own labs flag, I don't think it should block defaulting the new header in any case though.

americanrefugee commented 6 months ago

Adding a task:

[ ] Use normal / outlined version of User icon instead of User Solid for the "People" in the room details menu

Screenshot

Johennes commented 6 months ago

Added to https://github.com/vector-im/wat-internal/issues/75

janogarcia commented 6 months ago

Related visual bugs mentioned in internal discussions:

[ ] "Invite"comp icon seems to be using an outdated assets (optical centering is somewhat off)
[ ] Change "Favorite" label to "Favourite"
[ ] Favourite icon is using the wrong asset (the one specific for large icons, which causes a thin stroke when rendered at the default 24px size)
[ ] Remove capital "C" in "Export Chat"
[ ] @americanrefugee I guess "Poll history" should be just "Polls" (same as we have just "Files"), can you confirm?
[ ] The "Encrypted" badge background is set to a darker color in the color scale. It should implement the one on the design spec instead.
[ ] The subtle horizontal dividers shouldn't reach the container edges (refer to design spec).

Johennes commented 6 months ago

I've added these to https://github.com/vector-im/wat-internal/issues/75 as well since this seems to all be in the side panel which currently isn't labsed anyway.

daniellekirkwood commented 5 months ago

Unassigning this epic as it is currently paused.

daniellekirkwood commented 5 months ago

Worth tracking these two issues:

Note: Compound was sold in order to improve accessibility throughout the product. We should ensure that we continue to drive that focus via these components.

dbkr commented 4 months ago

I've estimated a day for each of the bugs on the room details list here (not including adding the missing options) so let's say this is about ~~a week's~~ worth for the room details stuff.

Edit: actually, scratch that, there might be some compound work involved with at least some of the components, so make it two weeks.

domestomas commented 3 months ago

I'm not sure if this is the right place to mention it, but it would be nice if the items from right panel would also open in the right panel - at least these that could easily fit in. People, files and pinned are already there, so why not move also "Polls", "Export chat" and "Copy link" to the right panel? I am not sure about "Invite" (maybe could also?), and "Settings" would really not fit, but the theree mentioned should fit without problems.

bblacher commented 3 months ago

When using the new room header, the "Layout" option when inside an element call is missing. Because of this there is no option to increase the size of another screen share when sharing the screen yourself. (My own screen share gets put into spotlight and there is no way to switch to "Freedom Layout" because the button is missing in the new room header.)

I know I can maximize the other screen share but then element is in full screen, this is sub-optimal. https://github.com/element-hq/element-web/issues/27299

daniellekirkwood commented 2 months ago

feedback on the room header that the new height and moving icon makes it hard to use the window

daniellekirkwood commented 4 weeks ago

Opening room details requires clicking room header somewhere which is hardly discoverable

We think that people will discover this easily.

We want to be wary of adding more buttons to the header

We have done studies with the new room header

Cannot click to enlarge avatar from header; opens details instead

Yup, we're ok with this

Opening up the details screen opens the details which enlarges the image

Search is hard to access; need to open details (left side), click search button (right side), then enter search string (left side); CMD+F doesn't work

Room details don't help mitigate scroll-on-hover concern on room topic

t3chguy commented 3 weeks ago

Search is hard to access; need to open details (left side), click search button (right side), then enter search string (left side); CMD+F doesn't work

Cmd+F is opt-in on Electron, on Web it is the browser's search instead.

Room details don't help mitigate scroll-on-hover concern on room topic

Not sure what this is asking

element-hq / element-web