Make Pages panel different width from Navigator

I think making them have different width is not a solution, in fact wf makes it probably to save space and looks super inconsistent

I am not sure what can be done to help the perception.

Is it possible that the main issue is that pages tree and navigator tree looks the same, that's why its easy to confuse them?

So the tree itself could be the reason, not the panel.

funny enough both are same type of trees and in theory they should look the same, but in webflow they are historycally diferent

We could add a search function to pages, maybe it would help, but then again we might later want to add search to navigator too, so will again look too similar

I am not sure what's the best way to make them more identifyable but its not the width

I think something very little could be there that eye catches on quickly and removes the issue, but not sure what exactly

navigator always has css preview at the bottom btw, but pages doesn't

but i am guessing you are talking about micro reaction when looking at the tree

Consistency is great, until it starts causing problems.
In this case, I'd argue these two panels do two totally different jobs, hence absolute consistency isn't necessary.

A high level of consistency, sure. But 100% isn't necessary. Different width wouldn't be detrimental to the UX. I think it would actually benefit the user.

consistency is also a result of a good system, so its automated, in this case you want to introduce intentional inconsistency, but the right way to do it is not random thing just so that its inconsistent

Well, sure, not random 🙂 I didn't say paint the text red 😄

it has to be something intentional

Of course.

making different width is random basically

Well... kinda. I see a different issue, that makes it not very effective down the line, potentially. If the user can resize the Navigator panel, then the width differentiation becomes worthless.

So, agreed, there has to be a better way of solving this!

When switching pages, how about de-emphasizing the "canvas"—sorry if I'm using a terrible name for it—a bit? By adding a semi-transparent overlay, so that it's still visible, but visibly "inactive" or "de-focused?"

Re: consistency – coherency should always be the end goal, and sometimes that warrants making things slightly less consistent.

Of course, just my personal opinion. 🤓

exactly

wait, you ran into it right now because when switching pages, pages panel stays on top?

this is already fixed and will be released in a few hours, when switching pages, pages panel will be closed

ah no, its already closing in production

Great question! I was changing something in page settings, so "extended" page panel. Then I closed the "settings" part, but the Pages panel stayed open.

and then you clicked instance on canvas and pages stayed?

that's getting fixed, temporarily regression

only navigator stays when undocked, all other panels close when you select an instance

Exactly!

got it, then its probably a non-issue and will be already fixed by closing

this wasn't intentional at all

OK, that will make it less of a problem, but I still wish there was a clearer distinction between the panels 🙂

This will probably then solve itself as the UI gets more features, respectively

Thanks for the chat and info, Oleg.

this may solve itself as these getting more features and start looking more and more different

ah lol

yeah, exactly 😄

just read your sentence

Cheers mate, it's a pleasure being here in this moment and witnessing the Webstudio team make history 🙌

same, so much attention to detail!

Not sure whether the fix has already been pushed to prod. I noticed another confusing behaviour: when I open the Page settings panel for any page, and don't close it, it will give that page a very visible blue outline. So much so, that it appearas as that is the active/selected page, even when it isn't. The active/selected page has only a subtle blue background fill, and IMHO it isn't as noticeable.

Attaching a video of what that looks for me.

Suggestions:

1. When the side panels close—manually, or because the user selected an instance—perhaps also close the Page settings panel and remove the outline from that page altogether. So that the next time the user opens the Pages panel, they only see the currently selected page as the differently styled in the panel.

What do you think? 🙂

the fix was deployed yeserday, yes

looking at your findings