Page MenuHome

UI Experiment - Panel Sections
AbandonedPublic

Authored by Harley Acheson (harley) on Aug 29 2019, 2:42 AM.

Details

Summary

Mostly just an experiment to stare at.

This patch changes panel sections so that the titles are shown as contained inside their sections when opened. With the current behavior it can sometimes not be obvious which section belongs to each title or subtitle.

A capture explains this better. The left shows how it looks now, the right how it looks after this patch is applied:

By changing the background color of the open section title, it better becomes a title for that section. The separation is clearer, the title serves its purpose a bit better. It seems to work even better as complexity is added. It is much clearer what "Bounds" is in the right capture.

Note that I also remove the right-side "drag" handle for open sections. So you can't drag an area while open. That may or not be a big deal, but I just thought it looked nicer like that.

Diff Detail

Repository
rB Blender

Event Timeline

For me this is worse than what we have now. I don't see it really solving any problem, and as far as I know it's non-standard in UI design in general.

Gotta agree with Brecht here. It breaks the hierarchy and makes the separation much worse IMHO. I'd rather have mouse hover highlighting of panels if there's an issue with separation.

That's how my brain sees it, so with this update, the sub-panels look a lot clearer to me.
I think it's a movement in the right direction.

How would this look with multiple sections open beneath each other? Wouldn't this make the separation between them worse?

@Brecht Van Lommel (brecht) - > For me this is worse than what we have now...

Yes might be just a personal preference based on how individuals imagine these things to actually exist in relation to each other.

...and as far as I know it's non-standard in UI design in general.

I can't quickly think of anything remotely like this in other software so standard or not might not apply. But in the general case, when content is in an enclosed area and has a title, that title is also enclosed with it. So a section consists of a block with title and content together. The right side of the following binds the two things together better:

@Julien Kaspar (JulienKaspar) - How would this look with multiple sections open beneath each other?

Here are two neighboring sections open at once. Current behavior on left, after patch on right:

To my eye, on the left I have to struggle to see what belongs to which as there are so many more background color changes. On the right it reads faster (to me anyway) because there is just two open sections so just two blocks of differing background.

I can't quickly think of anything remotely like this in other software so standard or not might not apply.

Lots of other software has panels like this, for example Maya and Modo.

A more extreme example. The current behavior on the left, after patch on the right:

For me, the left side doesn't clearly indicate which section belongs to what. The hierarchy is hard to quickly see. The right side just reads faster.

On the left it can be difficult to tell that "Layout" is not a peer of "Adjust" and "Time", for example, but that is not an issue on the right. "Shadow" is clearly a text shadow on the right. "Style" and "Layout" are clearly peers on the right.

For me this is worse than what we have now.

I agree.
It's more difficult to spot things with this change, also It's not standard.

Lots of other software has panels like this, for example Maya and Modo.

Yes, even c4d.

Lots of other software has panels like this, for example Maya and Modo.

Yes, even c4d.

Can you send me any examples of how they deal with multiple levels? So something like the Text Effect Strip / Style / Shadow example shown above? I have only seen captures that show single levels.

@noki paike (amonpaike) - my proposal...

That is clearer to me. But again, this might just be a difference in the way we see these things.

Those section rules in your mockup look awesome. I didn't play to much with that but only wanted to make sure they "added up" nicely when two adjacent sections were opened. Yours would "double up" between two open sections. Mighty be okay or might be a situation we'd have to deal with. Anything could be done.

There's no problem with the panels, there's a problem with the sub-panels whose header is not highlighted and does not look like a part of the sub-panel. See how sub-panels done in the above mentioned C4D, for example.

But yes, does look nice in the extreme case. No doubt that "Layout" is a part of "Effect Strip"

maybe it's just a matter of the separation line of a color that isn't too sharp ... just the bare minimum needed to make it clear where the panel start and end ... and maybe it's just a matter of taste :)

@noki paike (amonpaike) - ...bare minimum needed to make it clear where the panel start and end...

Your strong rules definitely improves what I was trying to address: the way open sections and subsections do not show their relationships well.

@Harley Acheson (harley) try it like this:

Add the Themes option - "Sub-Panel Header".
If it's transparent, the result will be as it is now.
But if you set it equivalent to "Sub Background", it will be as you suggest.

Leave the top level panels as they are.

Maybe something like that...

I still prefer the existing design, I don't much like the headers and buttons "floating" like that.

Here the panel headers are in the nuance between the level above them and the level below them - when opened. This way the headers have their own nuance, but is still a level/step down from the top level. Maybe it's too hard to notice?

On a different note, maybe 2. level could be indented too(Shadow):

Your strong rules definitely improves what I was trying to address: the way open sections and subsections do not show their relationships well.

did you then tried to encode this?
it seemed to work

Definitely a cool experiment worth checking out, but it seems to be going against a pretty strong convention without a whole lot of benefit. Adding additional colors or lines to address the concerns just ends up adding more noise than the original. I'd vote for keeping it as-is, though there are two things that I think would help with cleaning up panel headers.

-Only show drag area on mouse over, so that it's always usable but looks clean like your proposal
-Align check boxes to the right so that hierarchy doesn't get confused. With check boxes on the left, a panel can look to be the same level as its sub-panel (Simplify and Viewport in the example below). It's also just harder to scan quickly.

(This uses the check box alignment from T65965 to make the levels even more clear)

I think there are multiple issues at play here. Most of the examples are from panels that mix root-level settings and sub-panels without clarifying the relationship between them. Some of these sub-panels, like the object bounds sub-panel, could be eliminated completely by using single-line layouts that place a checkbox and a color selector or number field on the same line. In cases where the sub-panel is too large to be condensed to a single line and it has a header toggle, that toggle can be used as a center-aligned button that controls the visibility of a box sub-layout containing the relevant settings, removing the need for a sub-panel. In the remaining cases, new sub-panel draw options, such as outlines or hierarchy lines, or new collapsible sub-layouts, may be more useful than a unilateral change in how sub-panel headers are drawn.

In any case, the most effective way to comparison test these changes is to implement them as draw options that are used by a dev addon for side-by-side comparisons within a single Blender instance.

I think the important part is that top-level panels are separated clearly. If this is done well, the relationship between top-level panels and sub-panels becomes obvious. And sub-panels get a visually less important role, as it should be.
It doesn't matter much how deep a sub-panel is in the hierarchy, as long as it's clear which top-level panel it belongs to. That relationship is the context that matters most.

Here are a couple of things we could do to visually separate top-level panels better:

  • Mouse hover feedback (highlighting and maybe only showing drag handles on mouse hover).
  • Draw panels as boxes. Might be tricky to get to look clean (e.g. we could only draw boxes for open panels), but should communicate relations better.
  • Keep the sub-panel drawing simple, pretty much like it is now.

Check some screenshots from some old experiments I did:

This may be too extreme for what we need and there are no sub-panels. Point is the overall direction.

Also, see T41261 for more discussion on the visual language of panels.

@Julian Eisel (Severin) absolutely agree with you, and in a sense gives it a sort of sense of refreshed and modernization as well as a better distinction between one panel and another

@Julian Eisel (Severin) With rounded corners those boxes could look great! It also emphasizes how you can drag them around which isn't totally apparent otherwise.

@Julian Eisel (Severin) I think the important part is that top-level panels are separated clearly...

The most important part of your samples is how the content of open panels appears together with the section titles. Right now we are purposely separating the two and muddying what belongs to what.

But that is also what I was doing with this patch. I just didn't also want to deviate too much from our current default drawing style since so much of that is dependent on theme settings.

Following is a combination of your box-drawing sample with how I like open sections to look: