Use brightness to communicate information depth #38036

Closed
opened 2014-01-02 22:39:29 +01:00 by William Reynish · 20 comments

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:

Properties_info_hiearchy_outline.png

**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:** ![Properties_info_hiearchy_outline.png](https://archive.blender.org/developer/F60659/Properties_info_hiearchy_outline.png)
Author
Member

Changed status to: 'Open'

Changed status to: 'Open'
Author
Member

Added subscriber: @billrey

Added subscriber: @billrey

Added subscriber: @JonathanWilliamson

Added subscriber: @JonathanWilliamson

Added subscriber: @BartekMoniewski

Added subscriber: @BartekMoniewski

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:
Screenshot_2014-01-03_13.34.03.png

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: ![Screenshot_2014-01-03_13.34.03.png](https://archive.blender.org/developer/F61159/Screenshot_2014-01-03_13.34.03.png)
Author
Member

@JonathanWilliamson: 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.

@JonathanWilliamson: 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.

Added subscriber: @brecht

Added subscriber: @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?

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.
panels_dark_header.png

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. ![panels_dark_header.png](https://archive.blender.org/developer/F61428/panels_dark_header.png)
Author
Member

@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):
panel_anim_render.gif

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.

@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): ![panel_anim_render.gif](https://archive.blender.org/developer/F61866/panel_anim_render.gif) 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.

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

@billrey your slight drop shadow also helps to tie the panel and it's header together visually.
Author
Member

@JonathanWilliamson: That's true.

@JonathanWilliamson: That's true.

With the shadow it looks good to me.

With the shadow it looks good to me.

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

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

Added subscriber: @PawelLyczkowski-1

Added subscriber: @PawelLyczkowski-1

Added subscriber: @ideasman42

Added subscriber: @ideasman42

Changed status from 'Open' to: 'Archived'

Changed status from 'Open' to: 'Archived'
Campbell Barton self-assigned this 2016-03-10 06:39:11 +01:00

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

No resolution or activity in over 3 months, archiving, listed in [the wiki ](http://wiki.blender.org/index.php?title=Dev:Source/Development/Todo/UserInterface#Archived_Design_Tasks). Can re-open when we have time to handle this one.

Added subscriber: @michaelknubben

Added subscriber: @michaelknubben
Member

Added subscriber: @JulianEisel

Added subscriber: @JulianEisel
Member

Going through old UI ToDo tasks. The new sub-panel design and the new themes make quite some use of this. So marking the ToDo item as done.

Going through old UI ToDo tasks. The new sub-panel design and the new themes make quite some use of this. So marking the ToDo item as done.
Sign in to join this conversation.
No Label
Interest
Alembic
Interest
Animation & Rigging
Interest
Asset Browser
Interest
Asset Browser Project Overview
Interest
Audio
Interest
Automated Testing
Interest
Blender Asset Bundle
Interest
BlendFile
Interest
Collada
Interest
Compatibility
Interest
Compositing
Interest
Core
Interest
Cycles
Interest
Dependency Graph
Interest
Development Management
Interest
EEVEE
Interest
EEVEE & Viewport
Interest
Freestyle
Interest
Geometry Nodes
Interest
Grease Pencil
Interest
ID Management
Interest
Images & Movies
Interest
Import Export
Interest
Line Art
Interest
Masking
Interest
Metal
Interest
Modeling
Interest
Modifiers
Interest
Motion Tracking
Interest
Nodes & Physics
Interest
OpenGL
Interest
Overlay
Interest
Overrides
Interest
Performance
Interest
Physics
Interest
Pipeline, Assets & IO
Interest
Platforms, Builds & Tests
Interest
Python API
Interest
Render & Cycles
Interest
Render Pipeline
Interest
Sculpt, Paint & Texture
Interest
Text Editor
Interest
Translations
Interest
Triaging
Interest
Undo
Interest
USD
Interest
User Interface
Interest
UV Editing
Interest
VFX & Video
Interest
Video Sequencer
Interest
Virtual Reality
Interest
Vulkan
Interest
Wayland
Interest
Workbench
Interest: X11
Legacy
Blender 2.8 Project
Legacy
Milestone 1: Basic, Local Asset Browser
Legacy
OpenGL Error
Meta
Good First Issue
Meta
Papercut
Meta
Retrospective
Meta
Security
Module
Animation & Rigging
Module
Core
Module
Development Management
Module
EEVEE & Viewport
Module
Grease Pencil
Module
Modeling
Module
Nodes & Physics
Module
Pipeline, Assets & IO
Module
Platforms, Builds & Tests
Module
Python API
Module
Render & Cycles
Module
Sculpt, Paint & Texture
Module
Triaging
Module
User Interface
Module
VFX & Video
Platform
FreeBSD
Platform
Linux
Platform
macOS
Platform
Windows
Priority
High
Priority
Low
Priority
Normal
Priority
Unbreak Now!
Status
Archived
Status
Confirmed
Status
Duplicate
Status
Needs Info from Developers
Status
Needs Information from User
Status
Needs Triage
Status
Resolved
Type
Bug
Type
Design
Type
Known Issue
Type
Patch
Type
Report
Type
To Do
No Milestone
No project
No Assignees
8 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: blender/blender#38036
No description provided.