The new session manager beta is confusing and disorienting

[MadLittleMods]

Your use case

It looks slick but it's horrible to use and understand. The essence of some of this stuff makes sense but it's all put in a really confusing format.

Watching the video of me walking through my confusion is probably better than some of the text to understand (unmute for voice-over):

Element.Session.Manager.Beta.is.confusing.mp4

1. Unverified session security recommendations flow is bogus

1. Have the new session manager open on a screen where the dialog/modal all fits without scrolling
2. Under Sessions -> Security recommendations -> Unverified sessions, click the View all (1) action
3. Notice how nothing really happens. What am I supposed to do?
   • Something very subtle happens but it's so easy to notice because it's trying to get you to do something 2 sections down in the Other sessions section which not connected at all to what I just tried to click
   • If you have a smaller viewport, it does try to scroll to that section but even that is bad. It takes a click to show the hidden "Verify" action for the session and another click on "Verify" to actually get into the verify process for the unverified device.
4. Clicking View all (1) again after this point does nothing different. It just seems like dead broken UI

Session manager dialog open	After clicking the "Unverified sessions" -> "View all (1)" action

Notes:

• Other sessions should be renamed to Unverified sessions to match what it actually is
• There is already a Unverified sessions block under the Other sessions. No need to duplicate things.
• I'd expect just to start the verification process from the suggestion itself.

2. Sections and block UI hierarchy identity crisis

All of these border blocks are confusing.

• I open my verified session and it has a separate block that feels disconnected from what I've just expanded because of the border and because of the duplicated information.
  • It seems like we can make these blocks be the collapsed version and expand with the info they have now. Although blocks may be the wrong thing 🤷
• The Verified session block we surface by default should just be incorporated into session item itself. It makes it seem disconnected and separate from the session detail above it. It already says I'm verified by being in that section, by having a green shield, and "Verified text in the item.
  
• Too much block in block nesting
  • We surface a *Verified session block right away then expanding the session shows the same block again.
  • We surface a Unverified sessions block as a recommendation, then again under the Other sessions section, but then again when I expand an unverified device. (same with Inactive sessions block)

All of this really seems like it could use this type of Hyperplexed treatment:

• https://www.youtube.com/shorts/Wqe6saEJscA
• https://www.youtube.com/shorts/5TCkjhG1TVU
• https://www.youtube.com/shorts/NuZkHOBv3zA

3. Sign out all other sessions is under the Current sessions section

There is a Sign out all other sessions action under the context menu in the Current sessions header. But it's hidden away and it's talking about "Other sessions" which has it's own section below. Probably should just have a "Sign me out of everywhere" obvious action somewhere.

Have you considered any alternatives?

Let's compare to the current session management:

• Simple list with actions I'd want to do surfaced.
• No confusing duplicated blocks and layout
• We lost the nice hints and suggestions
• According to the old session management, I guess that session it's trying to get me to verify in the new session manager doesn't even support verification. Sooo, not sure what I'd do there if I actually wanted to do that. This issue has been split off to New session manager beta wants me to verify session that doesn't support it #23722

Additional context

No response

[thibaultamartin]

Denis and I had a similar reaction and some of the same feedback in the internal Element product feedback room earlier.

Some tweaking was done to the UI, but the global information architecture is still not very clear and a tad confusing, even for me a relatively well informed user. I'm concerned this could lead to a lot more confusing for people who are not "into" Matrix but who just use a product have conversations.

[Johennes]

1. Unverified session security recommendations flow is bogus

@janogarcia do you have thoughts on how we could improve this flow? This part seems more severe than the rest because not noticing the button effect would mean not being able to use the feature.

[janogarcia]

1. Unverified session security recommendations flow is bogus

on a screen where the dialog/modal all fits without scrolling [...] Under Security recommendations -> Unverified sessions click the View all (1) action [...] nothing happens

Agree that the described scenario is lacking some proper feedback. So, I came up with a way to provide visual feedback without requiring us to introduce deeper levels of navigation.

So, besides smooth scrolling to the list when there's enough content, now the session list background will be temporarily highlighted (and automatically fade out) each time you act on the "View all (n)" link.

Live Demo
https://b2cd74.csb.app/

Other sessions should be renamed to Unverified sessions to match what it actually is

It's actually a collection of all other sessions, which can be filtered by verification status (verified, unverified), and inactive sessions (session with 90+ days of inactivity).

I'd expect just to start the verification process from the suggestion itself.

We currently can't launch a verification process for multiple targets.

---

2. Sections and block UI hierarchy identity crisis

First, there's a bug in the current implementation, where the "Verified session" block for the current session sould be hidden when uncollapsing its details.

We show that block to educate users on the importance on verifying your sessions and what that means. Actually, the (now old) screenshot is missing a "Learn more" link for that block.

That said, I've added a little arrow shape to the container to better establish the relationship.

---

3. Sign out all other sessions is under the Current sessions section

We don't consider signing out all other sessions a common use case, that's why it's not being promoted to a primary action and kept as a secondary one instead, given that it's quite destructive.

Also you can alternatively perform that action as well in the "Other sessions" list by using the the "Select all" checkbox. So, there's currently two wasy to discover and perform that action.

We can always reconsider promoting it as primary action, based on usage and feedback. 👍

---

Hope all of this give a bit more helpful context.

[MadLittleMods]

2. Sections and block UI hierarchy identity crisis

I think there is more to this point than needing an arrow trying to connect it to the subject.

These blocks that go below the list item start getting a lot more confusing to associate to the right thing when you've expanded multiple items in the other sessions list.

It feels like the list item could transform to the block and/or the list item could be the top part of the block itself.

Don't take this literally but this is some form a transforming block, https://dribbble.com/shots/3757219-Collapse-And-Expand-Concept

And a simple mock-up doesn't even need to move this information around (notice no duplicated block below the list item as it is now):

Collapsed:

Expanded:

Current approach for reference

Collapsed:

Expanded:

[janogarcia]

That's an interesting exploration, but we would need to account for many other moving parts like the selection state etc.

It's also worth noting that the example screenshot has some layout/styles issues that make it not follow the intended design spec.

For example, the session details container should be indented, with its left edge aligned to the text of the session tile.

[MadLittleMods]

For example, the session details container should be indented, with its left edge aligned to the text of the session tile.

@janogarcia That looks worse than current imo (at least stands out as not right). I can see how it's trying to address the problem with hierarchy though.

My point is that the blocks upon blocks and within the list get out of hand.

That's an interesting exploration, but we would need to account for many other moving parts like the selection state etc.

👍 It's just a mock-up. On the selection state point, I don't think it would need to be any different from current with the checkbox and changing the avatar. We could iterate that point to be even better but it's not something that stands out to me.

[thibaultamartin]

This still looks confusing to me. I don't really understand the indentation, nor why the title "Element Web: Firefox on macOS" is repeated twice. The intended body and the list element with the bottom facing arrow don't seem obviously connected to me.

The "sessions" header doesn't seem particularly connected to the elements below it either. The dropdown has an arrow which is at the same place that other arrows below but it does a completely different thing. At first sight it's quite difficult to understand what is happening on this screen

[weeman1337]

I agree with the other feedback:

• The session title, for instance „Element Web: Firefox on macOS“ is duplicated.
• I cannot really explain why, but the box showing up, when I click the expand button doesn't feel like it belongs to the row where I clicked the button. An expanding box, like Eric mentioned could eventually be an improvement.
• The „boxes in boxes“ looks a bit too much in UI as well.

Beside of that I welcome the re-work of the session management 👍

[Johennes]

@MadLittleMods and I conversed a little more about this in private. We do have a number of people objecting to the current UX now. At the same time, we did have a (greater) number of people not object to the UX during ideation, implementation and testing. This is overlaid by the fact that the session management isn't an area of the app that sees high-profile usage and that once OIDC arrives, it'll move into the OP web interface anyway. Both of these certainly lower my own interest to spend much time discussing this.

Personally I do think that overall the UX is good enough though I admit that I'm not a particular fan of the boxes within boxes style either. To prevent us putting more time into discussing this on a theoretical level, maybe it'll be a good next step if somebody submitted a PR showcasing some of the changes that were proposed here. Seeing them side by side and being able to actually try them in a deployment of Element Web might make it easier to reach consensus.

[janogarcia]

So, I've been exploring ways to mitigate the last remaining feedback points in a way that would require little/limited engineering effort.

It's a mix of early explorations I did while working on the session manager but now accounting for the feedback above.

Changelog

Improved visual relationship and hierarchy for session tile and details

More obvious/explicit nesting for the session details card, which edges now align to the width of the session tile text contents.

Also, I brought the session details card closer to the session tile.

Remove redundancy

No duplicate session names. The "Rename session" action can now be decoupled from the card heading.

@Johennes If moving forward with this, I'd recommend implementing the first variant, given that the second is less visually prominent and could require more effort (moving the edit form to a modal dialog).

Minimize chrome/visual noise

Removed the divider between the session validation status card and the session details list.

---

↓ Updated design

↓ Original design for reference

The original design was initially ideated to be rendered on a standalone/separate session details view (you would need to navigate back and forth between the session list and the details view). Still, I eventually kept it in context for quicker batch comparison and more straightforward implementation.

---

Other explorations

Borderless card

The borderless version goes a step further in removing chrome/noise and helps align the session details text content to the same vertical lines as the session tile contents. We lose the enclosure provided by the bordered card, though.

Expanding tile

The expanding tile pattern is maybe a bit more visually heavy/complex, but it's something we could easily test live as it's adding just a global border to the "Borderless card" implementation.

---

There are even more explorations on the related Figma file, but I didn't consider them as successful as the three above.

Also, a quick note on feedback.

When sharing feedback, always remember to ask yourself why it is not working for you — how it's preventing you from moving forward or making it more difficult to understand a specific interaction or piece of information, etc. That can help uncover the underlying issues behind seemingly subjective feedback.