Use brightness to communicate information depth
Closed, ArchivedPublic

Description

The issue:

In the Properties, the UI elements are often hard to visually distill. The properties in the Properties Editor run together and it's hard to quickly see which panel they belong to.

Also, the colour of the panels does not communicate the information depth.

Proposed Solution:

  • Using brightness to communicate information depth
  • Clarify distinction between different panels
  • Clarify difference between headers and header contents

Example:

Details

Type
Design

This can be handled relatively easily via the theme options (at least for the most part).

Here's a quick experiment just adjusting my theme:

@Jonathan Williamson (carter2422): Indeed, this only requires changes to the theme.

If you enable Show Header and Show Background in the Properties theme, then set the Header colour to Alpha=0 and the Background colour to Alpha=1 (plus a darker colour than the Window Background), you've got this. This is a simple change and requires no real changes to the C code in Blender.

I think panel header should definitely have a different color. The above mockup and screenshot look quite strange to me though, when I look at them the first thing I see is the hierarchy inverted, as if the dark panel contents is above the light panel names?

Maybe it's that the panels don't have any border or lines between them, I'm not sure, but it just seems off somehow, I have a hard time seeing the panel contents as sunken below the header.

For what it's worth, this is how I have my theme configured, I don't think the header needs to be darker necessarily.

@Brecht Van Lommel (brecht):

I think panel header should definitely have a different color. The above mockup and screenshot look quite strange to me though, when I look at them the first thing I see is the hierarchy inverted, as if the dark panel contents is above the light panel names?

I wonder why this is? Maybe it's because the text in the number fields is brighter?

I was hoping we could avoid putting borders between the panels. We could do some other things in the way panels behave and move which would communicate the relationship better.

Here's an animated gif to illustrate (click to view):

Right now, the contents of a panel appears instantly. If it animated in from underneath the header, the relationship (below the header) would be further clarified.

@William Reynish (billrey) your slight drop shadow also helps to tie the panel and it's header together visually.

With the shadow it looks good to me.

That shadow does look nice and I find it compliments the flat design quite nicely.

No resolution or activity in over 3 months,
archiving, listed in the wiki.
Can re-open when we have time to handle this one.