Put account / space / room headers next to each other

[frandavid100]

Your use case

Element Web has recently been redesigned in order to create a clearer hierarchy of global, per space, and per room actions. As a result, the spaces and rooms list now look like this:

It's a huge improvement over the old UI, but I think that the hierarchy can still be made clearer if the search bar is moved to the bottom and the account / space / room headers are put next to each other, like this:

See how similar elements would be distributed that way:

Versus how they are distributed with the current layout:

Have you considered any alternatives?

No response

Additional context

No response

[SimonBrandner]

@niquewoodhouse, I think you might be interested in this

[niquewoodhouse]

It's a huge improvement over the old UI, but I think that the hierarchy can still be made clearer if the search bar is moved to the bottom and the account / space / room headers are put next to each other, like this:

Thos does make that hierarchy clearer and may be roughly where the UI ends up going. It was an earlier design option but wasn't used for the first release as:

• One of the project aims was to not create frustrations/shock with moving regularly used parts of the UI to very different locations. So the new search is not far away from the old search, the avatar is not far away from the old position. This moves search quite far away from where it originally was and it felt like a risk to do so early into the changes. As well as this, from some testing and research sessions we've seen new users tending to scan for search around the top of the UI, so we felt confident this approach would also be slightly more challenging for new users to use.

Versus how they are distributed with the current layout:

The filter for members might not be in it's most natural/expected position, and it works as a filter of an already visible list, whereas the filter on the left in the room list is searching things which might not be included in the current view (eg rooms in a not selected space).

I hope this doesn't discourage you @frandavid100 from continuing to make great suggestions, I just wanted to explain why this option wasn't used for the earliest versions we're currently testing.

[frandavid100]

Thos does make that hierarchy clearer and may be roughly where the UI ends up going.

I'm really, really glad to hear that.

It was an earlier design option but wasn't used for the first release as one of the project aims was to not create frustrations/shock with moving regularly used parts of the UI to very different locations. So the new search is not far away from the old search, the avatar is not far away from the old position. This moves search quite far away from where it originally was and it felt like a risk to do so early into the changes.

I think that makes a lot of sense.

As well as this, from some testing and research sessions we've seen new users tending to scan for search around the top of the UI, so we felt confident this approach would also be slightly more challenging for new users to use.

I don't have a strong opinion on where the search bar (/button?) should go; the most important part of my suggestion is what the title says.

I actually tried putting the search bar near the top of the rooms list, but decided against that because I thought it looked like the search was specific to the active space, which it's not. So in order to make it as clear as possible that it's not space-related, I ended up putting it as far as possible from the space header; and that's why it's at the bottom on the mockups.

Not advocating for the search bar to go there specifically, just explaining why it ended up there on the mockups. But I'm sure there may be other good places for it.

The filter for members might not be in it's most natural/expected position, and it works as a filter of an already visible list, whereas the filter on the left in the room list is searching things which might not be included in the current view (eg rooms in a not selected space).

That makes sense too. It could be a bad idea to make them both look too similar, when they don't do the same. That reminds me I made this alternative mockup, which might be of interest:

As you see, this design puts the search bar (and the quick settings) on a bar that is visibly separate from the spaces and rooms lists, and could help convey the idea that it's not a filter for either list.

Again, not advocating for this design, just saying it exists.

I hope this doesn't discourage you @frandavid100 from continuing to make great suggestions, I just wanted to explain why this option wasn't used for the earliest versions we're currently testing.

Quite the opposite, thanks a lot for taking the time to explain. It's really encouraging to see one's ideas taken into consideration.