Panels Redesign #41261

New Issue

Blake Stacks · 2014-07-31T05:20:08+02:00

Blake Stacks commented

2014-07-31 05:20:08 +02:00

##Creation approved by Jonathan Williamson##

Blender has a flexible panel system that allows for quick rearrangement of the UI.

Problems

Any flexible system has its problems, and Blender is no exception

Design does not promote its features
Header functions to minimize, not drag
Dragging is controlled by a small widget
Panels aren't distinctly separated from background
Panels blend into each other as well as the background
Despite underlying organization, seems disorganized

Positives

Very uncluttered
Sleek appearance
Simple

Proposal

Hopefully combine the best of both worlds

Draw the panels with a header and body background by default, rather than a divider

Keep the current default as an option (just not the default option), for older users who like it the way it is

Increase the drag area to the nearly all of the header (minus the collapse icon, of course)

Working Concept

Diff (widget-on-enter code from @JulianEisel): Wed_07-30-2014_22.13.51.03.diff
Theme (to make the panels pop!): panels_ftw.xml
{F100599}

Goals

Maintain the uncluttered aspect of the original panels
Improve drag functionality and clarity
Design an aesthetically 'clean' interface
Put Blender's Interface a step in the right direction! {icon smile-o}

Examples

Most of these have well-defined headers and body sections, so It seems apparent it is the way to go.
Some were pulled from my last patch comments, so I don't know if they're the artists dream situation, just examples...

@PawelLyczkowski-1

@Venomgfx

@Psy-Fi

@blakenator

(current attached diff/xml theme)

Thanks to @JulianEisel for the code help for the diff!

**##Creation approved by Jonathan Williamson##** Blender has a flexible panel system that allows for quick rearrangement of the UI. ## Problems Any flexible system has its problems, and Blender is no exception - Design does not promote its features - Header functions to minimize, not drag - Dragging is controlled by a small widget - Panels aren't distinctly separated from background - Panels blend into each other as well as the background - Despite underlying organization, seems disorganized ## Positives - Very uncluttered - Sleek appearance - Simple # Proposal Hopefully combine the best of both worlds # Draw the panels with a header and body background by default, rather than a divider - Keep the current default as an option (just not the default option), for older users who like it the way it is # Increase the drag area to the nearly all of the header (minus the collapse icon, of course) # Working Concept Diff (widget-on-enter code from @JulianEisel): [Wed_07-30-2014_22.13.51.03.diff](https://archive.blender.org/developer/F100603/Wed_07-30-2014_22.13.51.03.diff) Theme (to make the panels pop!): [panels_ftw.xml](https://archive.blender.org/developer/F100604/panels_ftw.xml) {[F100599](https://archive.blender.org/developer/F100599/2014-07-30_22_05_57-Blender.png)}![blender_dyn_drag_new_panel.gif](https://archive.blender.org/developer/F100601/blender_dyn_drag_new_panel.gif) # Goals - Maintain the uncluttered aspect of the original panels - Improve drag functionality and clarity - Design an aesthetically 'clean' interface - Put Blender's Interface a step in the right direction! {icon smile-o} # Examples Most of these have well-defined headers and body sections, so It seems apparent it is the way to go. Some were pulled from my last patch comments, so I don't know if they're the artists dream situation, just examples... ## @PawelLyczkowski-1 ![mockup02_06_nodesc.png](https://archive.blender.org/developer/F100591/mockup02_06_nodesc.png) ## @Venomgfx ![blender_ui_drag_widget_gone_padding.png](https://archive.blender.org/developer/F100587/blender_ui_drag_widget_gone_padding.png) ## @Psy-Fi ![Panel_Boxes.png](https://archive.blender.org/developer/F100589/Panel_Boxes.png) ## @blakenator (current attached diff/xml theme) Thanks to @JulianEisel for the code help for the diff!

Blake Stacks commented

2014-07-31 05:20:08 +02:00

Changed status to: 'Open'

Blake Stacks commented

2014-07-31 05:20:08 +02:00

Added subscribers: @blakenator, @JonathanWilliamson, @AndrewPrice, @PawelLyczkowski-1, @JulianEisel, @pablovazquez, @billrey

lower case commented

2014-07-31 05:28:48 +02:00

Added subscriber: @lowercase

lower case commented

2014-07-31 05:28:48 +02:00

looks like we're running in circles here ;)
http://lists.blender.org/pipermail/bf-blender-cvs/2011-January/033472.html

looks like we're running in circles here ;) http://lists.blender.org/pipermail/bf-blender-cvs/2011-January/033472.html

Julian Eisel commented

2014-08-01 01:33:05 +02:00

Another example:

This uses a bit of a different approach but integrates nicely into the rest of Blender's GUI.

The drag area vs the panel open/close area

I think best would be to leave most space of the panel header for the open/close interaction as this is a much more common operation than reordering panels. However we could still increase the size of the drag area a bit and add a mouse hover feedback to the icons.

@blakenator, btw you don't need to add a xml-theme, you can also change theme values in init_userdef_do_versions(void) (source/blender/editors/interface/resources.c), which is another inevitable file for UI coding

### Another example: ![panels_ui_4_res.png](https://archive.blender.org/developer/F100832/panels_ui_4_res.png) ![panels_ui_3_res.png](https://archive.blender.org/developer/F100829/panels_ui_3_res.png) This uses a bit of a different approach but integrates nicely into the rest of Blender's GUI. ### The drag area vs the panel open/close area I think best would be to leave most space of the panel header for the open/close interaction as this is a much more common operation than reordering panels. However we could still increase the size of the drag area a bit and add a mouse hover feedback to the icons. ___ @blakenator, btw you don't need to add a xml-theme, you can also change theme values in `init_userdef_do_versions(void)` (source/blender/editors/interface/resources.c), which is another inevitable file for UI coding

Blake Stacks commented

2014-08-01 05:05:58 +02:00

@JulianEisel, how do you do the corner-rounding?

Here's an updated example diff, Thu_07-31-2014_21.52.22.40.diff, no xml now. I don't know if it's the right way to do it, but it's a stab.
Also, the collapsing is a more used part of the ui, but I think the idea behind the panels should be more focused on their singularity and portability. Their portability is more difficult to emphasize in other ways than the clear triangle icon of the collapse functionality. I do agree that the minimize area should be increased, but of how much I am not sure.

@JulianEisel, how do you do the corner-rounding? Here's an updated example diff, [Thu_07-31-2014_21.52.22.40.diff](https://archive.blender.org/developer/F100847/Thu_07-31-2014_21.52.22.40.diff), no xml now. I don't know if it's the right way to do it, but it's a stab. Also, the collapsing is a more used part of the ui, but I think the idea behind the panels should be more focused on their singularity and portability. Their portability is more difficult to emphasize in other ways than the clear triangle icon of the collapse functionality. I do agree that the minimize area should be increased, but of how much I am not sure.

Albert commented

2014-08-01 15:29:22 +02:00

Added subscriber: @wevon-2

Albert commented

2014-08-01 15:29:22 +02:00

more exemples

more exemples ![mockup_widgets_example.jpg](https://archive.blender.org/developer/F100911/mockup_widgets_example.jpg)

Blake Stacks commented

2014-08-02 03:48:10 +02:00

@wevon-2 I think unless the whole UI team agrees, we should keep the blender style, but your concept would be cool looking!

Here's the updated prototype: Fri_08-01-2014_20.45.34.42.diff

IMO it still seems a bit cluttered. Anyone have any ideas? Even bad ideas are better than no ideas!

@wevon-2 I think unless the whole UI team agrees, we should keep the blender style, but your concept would be cool looking! Here's the updated prototype:![bevel_panel_default.png](https://archive.blender.org/developer/F101029/bevel_panel_default.png) [Fri_08-01-2014_20.45.34.42.diff](https://archive.blender.org/developer/F101032/Fri_08-01-2014_20.45.34.42.diff) IMO it still seems a bit cluttered. Anyone have any ideas? Even bad ideas are better than no ideas!

Blake Stacks commented

2014-08-03 03:33:20 +02:00

I have an idea. How about dividing the header between the collapse icon and the text? While I'm not too fond of the cluttering effect, it would delineate the different functions much better than what we have currently.

Blake Stacks commented

2014-08-03 03:34:35 +02:00

Accidentally pushed post too early :P
Here's a mockup:

Or maybe conversely with the drag icon...

Accidentally pushed post too early :P Here's a mockup:![panel_split_collapse_header.png](https://archive.blender.org/developer/F101275/panel_split_collapse_header.png) Or maybe conversely with the drag icon...

Albert commented

2014-08-03 08:57:39 +02:00

Personally, I prefer the previous version

Jonathan Williamson commented

2014-08-03 15:51:45 +02:00

Just a suggestion for all of these mockups. Try to simplify the panel down to it's bare components and determine precisely how it works, what does what, and so on before ever touching the actual design. It's very easy to get caught up in UI design and forget about the key functionality :)

In this case, before a design can be finalized, we need solid proposals for how the panel functionality changes (if at all), particularly with regards to the open/close arrow, the header, and the drag widget.

A good practice in UI design is to explicitly keep all design out of it until the functionality is determined. This is where you'll see a lot of professional UI designers only working in pen and pencil for the first stages. When polished design elements are added we often become biased towards or against the design and can longer evaluate the functionality well.

Just a suggestion for all of these mockups. Try to simplify the panel down to it's bare components and determine precisely how it works, what does what, and so on before ever touching the actual design. It's very easy to get caught up in UI design and forget about the key functionality :) In this case, before a design can be finalized, we need solid proposals for how the panel functionality changes (if at all), particularly with regards to the open/close arrow, the header, and the drag widget. A good practice in UI design is to explicitly keep all design out of it until the functionality is determined. This is where you'll see a lot of professional UI designers only working in pen and pencil for the first stages. When polished design elements are added we often become biased towards or against the design and can longer evaluate the functionality well.

Sean Olson commented

2014-08-03 18:56:24 +02:00

Added subscriber: @liquidape

Warren Bahler commented

2014-08-04 13:40:47 +02:00

Added subscriber: @WarrenBahler

Tillmann Schütz commented

2014-08-10 21:52:56 +02:00

Added subscriber: @ionarn

Tillmann Schütz commented

2014-08-10 21:52:56 +02:00

Hey,

I just want to throw in some ideas for the general design we could think about.
My main idea is to better distinguish the panels from each other and to simplify the the whole interface like shown in design proposals from other users.

I would like to hear some opinions of you. Maybe some ideas can be merged or some other ideas develop during discussions.

Bright version

Dark version

Hey, I just want to throw in some ideas for the general design we could think about. My main idea is to better distinguish the panels from each other and to simplify the the whole interface like shown in design proposals from other users. I would like to hear some opinions of you. Maybe some ideas can be merged or some other ideas develop during discussions. ![Blender_UI-Proposal_Bright_Rab03.png](https://archive.blender.org/developer/F102301/Blender_UI-Proposal_Bright_Rab03.png) Bright version ![Blender_UI-Proposal_Dark_Rab02.png](https://archive.blender.org/developer/F102302/Blender_UI-Proposal_Dark_Rab02.png) Dark version

michael knubben commented

2014-08-10 22:19:27 +02:00

Added subscriber: @michaelknubben

Blake Stacks commented

2014-08-10 23:40:41 +02:00

@ionarn I think those would play very nicely with @venomgfx's widget redesign, but IMO it still needs some indicator that it can be dragged. I have taken the last week to think about this issue, and have come up with this idea (many similarities to yours):

And some not pinned:

(Pay no attention to the colors in the mockup, those are just for emphasis)
Notes:

This design places the functions by most used (most used function first):
Collapsing (whose click area extends to the end of the text)
Dragging

Pinning

The dot on the right would be the pin area (should still have the pin icon, not a circle, when pinned, this is just a pre-vis).
Pinning should be more thoroughly implemented in the UI to provide
improved consistency in the interface
improved functionality
The drag widget would hide when the mouse is not in the header

What do you think?

@ionarn I think those would play very nicely with @venomgfx's widget redesign, but IMO it still needs some indicator that it can be dragged. I have taken the last week to think about this issue, and have come up with this idea (many similarities to yours): ![2014-08-10_16_17_06-New_Project_Fluidui.com.png](https://archive.blender.org/developer/F102338/2014-08-10_16_17_06-New_Project_Fluidui.com.png) And some not pinned: ![2014-08-10_16_17_06-New_Project_Fluidui.com.png](https://archive.blender.org/developer/F102340/2014-08-10_16_17_06-New_Project_Fluidui.com.png) (Pay no attention to the colors in the mockup, those are just for emphasis) **Notes:** - This design places the functions by most used (most used function first): - Collapsing (whose click area extends to the end of the text) - Dragging # Pinning - The dot on the right would be the pin area (should still have the pin icon, not a circle, when pinned, this is just a pre-vis). - Pinning should be more thoroughly implemented in the UI to provide - improved consistency in the interface - improved functionality - The drag widget would hide when the mouse is not in the header What do you think?

Warren Bahler commented

2014-08-12 01:06:21 +02:00

@ionarn , I really like the clean look of your mockup, but @JonathanWilliamson has requested that design specific discussion be kept for later; could be as part of #38037

@blakenator , some thoughts on your suggestions:
I'm not sure about the drag area following the text for two reasons:

the text can actually run off the area border when the panels are in a narrow format- thus leaving no drag area

2.the drag-able area would change from panel to panel, making it confusing when rearranging multiple panels.I would rather just see a consistent drag area- perhaps the two areas could be assigned by dynamic percentage(like 60% toggle / 40 percent drag).

Also there was a pretty strong consensus against adding the pin icon to the toolbar panels, mainly for the reason that the amount of use it gets doesn't justify the clutter it brings to the interface.It ended up in the drop down menu , which I think is a good compromise.

@ionarn , I really like the clean look of your mockup, but @JonathanWilliamson has requested that design specific discussion be kept for later; could be as part of #38037 @blakenator , some thoughts on your suggestions: I'm not sure about the drag area following the text for two reasons: 1. the text can actually run off the area border when the panels are in a narrow format- thus leaving no drag area 2.the drag-able area would change from panel to panel, making it confusing when rearranging multiple panels.I would rather just see a consistent drag area- perhaps the two areas could be assigned by dynamic percentage(like 60% toggle / 40 percent drag). Also there was a pretty strong consensus against adding the pin icon to the toolbar panels, mainly for the reason that the amount of use it gets doesn't justify the clutter it brings to the interface.It ended up in the drop down menu , which I think is a good compromise.

Blake Stacks commented

2014-08-12 05:07:31 +02:00

@WarrenBahler, now that you've said that, I agree that the pin icons take up excess space, but they should still be implemented similarly across all panels.
Also, the percentage would still lead to an overflow issue when the region is too small in the same circumstance as before. We could clamp the width of the drag panel to a minimum though, and that would lead to a never-disappearing interface...

@WarrenBahler, now that you've said that, I agree that the pin icons take up excess space, but they should still be implemented similarly across all panels. Also, the percentage would still lead to an overflow issue when the region is too small in the same circumstance as before. We could clamp the width of the drag panel to a minimum though, and that would lead to a never-disappearing interface...

Warren Bahler commented

2014-08-13 02:52:48 +02:00

Also, the percentage would still lead to an overflow issue when the region is too small

not if it scaled dynamically with the exposed panel width - I have no idea if this is possible though

also I'm not sure what a pinning a panel does in a normal (non tabbed)context like the properties editor; stay on top?

the right click menu could be utilized to expose some other "hidden" commands as well, like "Collapse all ", and "Expand all": currently except in the toolbar its just an empty menu.

>Also, the percentage would still lead to an overflow issue when the region is too small not if it scaled dynamically with the exposed panel width - I have no idea if this is possible though ![Untitled.png](https://archive.blender.org/developer/F102677/Untitled.png) also I'm not sure what a pinning a panel does in a normal (non tabbed)context like the properties editor; stay on top? the right click menu could be utilized to expose some other "hidden" commands as well, like "Collapse all ", and "Expand all": currently except in the toolbar its just an empty menu.

Blake Stacks commented

2014-08-13 20:04:02 +02:00

@WarrenBahler, what do you think about just adding a minimum size, because even with the percentage (which can easily be done btw), we can have extreme situations where you end up with just one or two dots.

We could make the dots align to the right of the panel and go left, with the width dynamically changing with a set minimum like this (blue highlighted one):

My concern with this design is that it is off balance in the sense of having a large icon on the left and none on the right; we are an art program, so we should still follow the rules of art. :P

Also, in essence, the properties panel already has tabs, they just look different.To answer you question: yes, panels would stay on top.

@WarrenBahler, what do you think about just adding a minimum size, because even with the percentage (which can easily be done btw), we can have extreme situations where you end up with just one or two dots. We could make the dots align to the right of the panel and go left, with the width dynamically changing with a set minimum like this (blue highlighted one): ![2014-08-13_12_53_07-New_Project_Fluidui.com.png](https://archive.blender.org/developer/F103003/2014-08-13_12_53_07-New_Project_Fluidui.com.png) My concern with this design is that it is off balance in the sense of having a large icon on the left and none on the right; we are an art program, so we should still follow the rules of art. :P Also, in essence, the properties panel already has tabs, they just look different.To answer you question: yes, panels would stay on top.

Blake Stacks commented

2014-08-13 20:08:44 +02:00

Wow, again I pushed submit too early...
@WarrenBahler I do agree with your 'hidden' functions statement though.

Wow, again I pushed submit too early... @WarrenBahler I do agree with your 'hidden' functions statement though.

Warren Bahler commented

2014-08-14 00:34:58 +02:00

Now I see what you mean,what I had in mind was just a static sized widget which would overlay the text when necessary, like in the example; but would represent the larger drag area. exactly like the toggle icon represents the entire toggle area.This keeps things cleaner, but there would be no visual division between the two target areas.

Blake Stacks commented

2014-08-16 05:07:14 +02:00

I just realized this: any indicator splitting the panel header would have run-off problems if the text overlaps the drag area; how would you separate two overlapping areas?

Maybe the solution lies in truncating the text with ellipsis...

I just realized this: any indicator splitting the panel header would have run-off problems if the text overlaps the drag area; how would you separate two overlapping areas? Maybe the solution lies in truncating the text with ellipsis...

Blake Stacks commented

2014-08-16 05:25:54 +02:00

The text would already be unreadable after a certain point, and this is pretty much the standard in other applications anyway, so this way we could keep a constant spacing between the drag area and collapse area.

If we do it right, the space itself could be the divisor. Or, on the mouse entering the header, we could highlight the drag area slightly:

I personally like the combination better, and if we take the middle (mean, average) color between the header and body, we could get just the right amount of emphasis.

The text would already be unreadable after a certain point, and this is pretty much the standard in other applications anyway, so this way we could keep a constant spacing between the drag area and collapse area. ![2014-08-15_22_11_00-New_Project_Fluidui.com.png](https://archive.blender.org/developer/F104216/2014-08-15_22_11_00-New_Project_Fluidui.com.png) If we do it right, the space itself could be the divisor. Or, on the mouse entering the header, we could highlight the drag area slightly: ![2014-08-15_22_15_55-New_Project_Fluidui.com.png](https://archive.blender.org/developer/F104222/2014-08-15_22_15_55-New_Project_Fluidui.com.png) I personally like the combination better, and if we take the middle (mean, average) color between the header and body, we could get just the right amount of emphasis.

Warren Bahler commented

2014-08-16 15:24:22 +02:00

Personally I think the text really shouldn't have anything to do with the functionality, it's just a label. The respective drag and toggle areas should be independent of text, because of the obvious reasons that you just pointed out - the areas would change size depending on the length of the text.

I think a simple right aligned widget like in the task example is the cleanest and simplest way to communicate the drag area, but increasing the area some would make it easier to grab.

Personally I think the text really shouldn't have anything to do with the functionality, it's just a label. The respective drag and toggle areas should be independent of text, because of the obvious reasons that you just pointed out - the areas would change size depending on the length of the text. I think a simple right aligned widget like in the task example is the cleanest and simplest way to communicate the drag area, but increasing the area some would make it easier to grab.

Matthew DeSilvey commented

2014-11-13 06:04:07 +01:00

Added subscriber: @mdesilvey

Brecht Van Lommel commented

2018-10-31 11:24:31 +01:00

Added subscriber: @brecht

Brecht Van Lommel commented

2018-10-31 11:24:31 +01:00

Changed status from 'Open' to: 'Archived'

Brecht Van Lommel closed this issue

2018-10-31 11:24:31 +01:00

Brecht Van Lommel self-assigned this 2018-10-31 11:24:31 +01:00

Brecht Van Lommel commented

2018-10-31 11:24:31 +01:00

Archiving old task, outdated by new theme and properties layout in 2.8.

Sign in to join this conversation.

No Label

Download

What's New

Blender Studio

Manual

Developers Blog

Documentation

Benchmark

Blender Conference

Development Fund

One-time Donations

Panels Redesign #41261

Problems

Positives

Proposal

Draw the panels with a header and body background by default, rather than a divider

Increase the drag area to the nearly all of the header (minus the collapse icon, of course)

Working Concept

Goals

Examples

@PawelLyczkowski-1

@Venomgfx

@Psy-Fi

@blakenator

Another example:

The drag area vs the panel open/close area

Pinning