I was looking at the panel sections on the Properties editor, and wondering why it looks so disorganized.
Some of the headers have checkboxes that screw up the alignment of the titles. And all the arrows add to the visual noise without actually doing much for us. The section dividers do not extend to the edges, so when open it is not obvious that they divide entire panels and not just content within a section.
The following shows the panels closed, with the current situation on the left. On the right I have removed the arrows and lined up all the titles. I hope you will agree that it is much easier to scan the list of titles on the right than on the left. I have also removed the diagonal drag widgets as we can just show them on hover instead.
Another issue is that with themes we can change the header backgrounds and the the backgrounds of the panels. This should be enough to do almost anything with styling but there is something missing…
If we change the background colors of the headers then all of them change at once, natch. Changing the panel backgrounds basically makes the open panels look different from the headers. But this means that there is always a disconnect between the color of the header and its related panel (unless everything uses the same color of course).
Best to illustrate this with an example of something we can’t do now. On the left is what it could look like while hovering the mouse over the “Shading” header. Click it and it will open to show what you see on the right. There you see that the header and open panel section share the same color. This way it is very easy to see which is an open section and what are closed headers.
On the right image you will notice that the checkboxes and titles in the header line up with the checkboxes and text in the panel.
Does this proposal still support the opening of multiple panels at once or does it change the UI to solo-mode only?
I kind of like the idea of a darker shading for open panels and the aligned text in the first example, though without the arrows there would need to be a different indicator that shows the user that they are panels and can be opened.
Yes, this would still support multiple open panels. Being able to see which ones are open versus closed gets even more important with more panels open.
though without the arrows there would need to be a different indicator that shows the user that they are panels and can be opened
I’d argue that little triangles aren’t really good visual indicators of what happens when you click on a panel. We have learned that is what they mean in this case, but we’d also learn pretty quickly that panels can open, especially when they are shown better as above.
The triangles facing right or down work (a bit) with multi-level branch and leaf structures but they are really pretty obscure when you think about it. It is just an arrow pointing at the title. If we really needed to have something there a “+” and “-” would work better.
No doubt your update looks cleaner when all panels are collapsed, but I’d argue that it’s also less functional. The arrows aren’t noise; they’re a clear indicator of whether a panel is collapsed. Though removing the arrows gives a cleaner list, there’s no visual cue that gives any hint that the panel is collapsible at all… let alone indicate the [un]collapsed state.
If the idea is to make collapsed panels the default state, then this might work… though there should still be some hint that the panels can be expanded. However, I personally prefer a workflow where I can quickly scan the Properties editor for information without clicking (of course, scrolling is the trade-off that I need to accept in that scenario)… I very rarely collapse any of my panels. For that workflow, removing the arrows is problematic because it removes the hint that I could collapse a panel if I wanted to do such a crazy thing as that.
Perhaps there’s a way to remove the arrows, but still give a visual cue regarding collapsiblity?
What we have extra here is the ability to color the headers for expanded panels differently from those that are collapsed. Here it is three open panels. The collapsed panels, like “performance” stick out like a sore thumb.
I understand that (and see it quite clearly). From an organizational standpoint, there’s no doubt that these changes are more pleasant to look at. But there’s no hint or cue that clicking Performance is going to expand it… or that clicking on Post Processing will collapse that panel. And without a clear panel header for each panel, you create an unintentional hierarchy… that is, it appears as if Post Processing is a subhead of Performance (rather than them being separate panels).
Maybe the check boxes are the ones you need to move to get the alignment to match up. Personally the arrows really communicate that the panels are collapsible and seperate to me. With them I can quickly segregate the panels but without them I actually thought “sampled motion blur” was part of “anti aliasing”. “sampled motion blur” and “shading” also looked like one panel
I’m not saying this idea is perfect, just something to play with. I can’t think on any downsides to allowing the themes to color an open header differently from a closed one. Since the default would be same as it is now.
But we still have to recognize that how an interface works is always something that needs to be learned, and the fact that we’ve already learned the current version can color our perceptions of it. In the previous screenshots the exact same information is being conveyed. On the right we see whether a panel is open or not by the color of the entire section. On the left we know the same based purely on the shape of that one small triangle.
Personally the triangle direction, on its own, doesn’t say “this area expands and collapses.” We are just used to that meaning here. A better drop-in replacement would be “+” and “-” but then we still have the horrible alignment issues caused by the header checkboxes. They can be moved to the right of title, and that looks fine when panels are closed but doesn’t help when they are open.
But I might make a new mockup that shows it like that…
Here is the that last sample, but with the header checkboxes moved to the right of the titles, and with our built-in “+” and "-’ icons uses to indicate the section state. I find the icons a bit bright but it still should show the idea even if those icons could be toned down or replaced. Probably drawn in the same color as the titles as we have now.
If the ± were drawn in the same color as the arrows (using theme colors) then I would definitely vote for that latest version Harley! It is much clearer and nicer to look at.
Here are the simple case again with all the panels closed to compare how it looks now compared to having everything lined up. I find it much easier to read quickly, but it might be how I look at it so others might not see it the same way. The “plus” also does a better job of indicating that there is more to see.
The left image below is showing how the closed “Shading” panel would look while hovering your mouse over it (and so showing the grab area). The right image is how that same panel looks after it is opened.
Nice work - it would be good to tidy up some of the properties panel UI
The plus/minus makes sense. Using the circled plus minus from the Outliner (without the vertical/horizontal connecting lines) would reiterate a theme already established in the UI (those are a bit small though). Maybe a small dark grey circle with a plus or minus as negative space. The plus minus used in the mock-up image are commonly used to add or remove a property/modifier.
>>Edit - nevermind this first part. You replied while I was typing… looks pretty good.
Having the on/off check box at the header level adds a bit of clutter, and could be moved into the contents as an on/off or ‘enable’ item. Most of the time one goes into the contents to mess with settings anyway. This way only an open/close icon and Text would be seen from the header level, and you could leave the check box on the left of the item as it is throughout.
As far as the contents of the header, the color difference is great, but why not also use indention? Shifting the contents over a column or just a half column would be a small loss of horizontal space, but it would make a huge visual difference when scanning the properties panel to find which is open or closed.
I like your +/-.
However, -1 on putting the checkboxes on the right of the title. Sometimes, the width of the panel window is too narrow (or the title too long) and the checkbox wouldn’t be visible anymore. Besides, we’d fall back down to the original proplem you decried: things are not properly aligned. It’s better if the checkboxes are aligned.
The last rendition is quite good due to the fact the the text is lined up nicely. Makes it more comprehensible. You might want to line up checkboxes too on the far right to see how it looks. Or put it between the text and the “plus” sign with the text still being aligned as seen in your example.
How about aligning the checkboxes to the right border? That way the text is in line but you can still tell if the configuration is correct without actually reading the text (by the graphical pattern).
The +/- is an improvement, but you still have the issue of implied hierarchy. The panel header needs to some indication that it’s a header when it’s expanded. The +/- isn’t sufficient for that. A line under the header or a subtle color difference for the header would likely do the trick. But as it stands now, Post Production still appears to be a subhead of Performance.
But I think that part is already covered by the proposal. Right now we can define colors for the header and for the panel content area. By adding the ability to select a different header color for open versus closed sections the theme designers can take what I’ve given and give you what you’d prefer. So although I am showing the open header color the same as the open panel color that doesn’t have to be the case and would depend on the theme.
