Outliner Popovers Design #68853

New Issue

Nathan Craddock · 2019-08-20T04:49:35+02:00

Nathan Craddock commented

2019-08-20 04:49:35 +02:00

With the recent addition of synced selection and the planned changes in #68502 (Outliner Sorting and Dragdrop) and #68498 (Outliner: Mode Toggling), the outliner filter popover has become crowded with unrelated options. Some display modes like Orphan Data and Blender File use the filter popover to filter ID types. To keep consistency with these display modes, and the file browser redesign, non-filtering options could be split into a separate Outliner options popover for sorting, syncing, and drawing.

The options popover could then be drawn in the Sequences display mode to give access to the selection syncing toggle and search options.

An additional filter option to draw row icons could also be added to reduce visual clutter.

With the recent addition of synced selection and the planned changes in #68502 (Outliner Sorting and Dragdrop) and #68498 (Outliner: Mode Toggling), the outliner filter popover has become crowded with unrelated options. Some display modes like Orphan Data and Blender File use the filter popover to filter ID types. To keep consistency with these display modes, and the file browser redesign, non-filtering options could be split into a separate Outliner options popover for sorting, syncing, and drawing. ![filter_popover.png](https://archive.blender.org/developer/F7677063/filter_popover.png) The options popover could then be drawn in the Sequences display mode to give access to the selection syncing toggle and search options. An additional filter option to draw row icons could also be added to reduce visual clutter. ![no_row_icons.png](https://archive.blender.org/developer/F7674177/no_row_icons.png)

Nathan Craddock commented

2019-08-20 04:49:35 +02:00

Added subscriber: @natecraddock

Julian Eisel commented

2019-08-20 10:20:33 +02:00

Added subscriber: @JulianEisel

Julian Eisel commented

2019-08-20 10:20:33 +02:00

The file browser redesign which is currently in progress involved similar changes, see #62971. So the solutions chosen should be consistent across the outliner and the file browser.
This is an older screenshot, although I think not much has changed in the popovers since then:

The file browser redesign which is currently in progress involved similar changes, see #62971. So the solutions chosen should be consistent across the outliner and the file browser. This is an older screenshot, although I think not much has changed in the popovers since then: ![Screenshot 2019-07-25 at 13.14.25.png](https://archive.blender.org/developer/F7628097/Screenshot_2019-07-25_at_13.14.25.png)

Nathan Craddock commented

2019-08-21 05:13:45 +02:00

@JulianEisel thanks for the suggestion. I will update the design to use two popovers for consistency.

Nathan Craddock changed title from ~~Outliner Filter Popover Design~~ to Outliner Popovers Design

2019-08-21 05:54:27 +02:00

Gavin Scott commented

2019-08-22 04:01:29 +02:00

Added subscriber: @GavinScott

Gavin Scott commented

2019-08-22 04:01:29 +02:00

Here are my comments from the DevTalk thread about the current 2.81 layout (some of which are already being addressed here):

There seems to be a lot of "whitespace" in the top half of the popover.

I would try something like squishing all the first four options together and removing the Search header, for example:

Sync Selection
Sort Alphabetically
Case Sensitive Search
Exact Match

That ordering and the addition of the word "search" seems sufficiently descriptive and highlights Sync Selection as the most major mode setting.

What happens when "Sort Alphabetically" is off? Is it creation order, or what? There should be a tooltip that explains this (currently there's no tooltip for this option).
The currently un-checked options in this panel are too dark. They actually appear disabled and it looks like you should not be allowed to select those search options for example. I was actually surprised to discover that across Blender selected checkbox text does actually get slightly brighter but it's a very subtle effect that should be used here as well.

When - [ ] Objects is deselected it makes sense to show the sub-options below it as "disabled" but the drastic dimming should only be used to indicate something is actually disabled and currently not applicable and potentially not enableable.

With "Sync Selection" as well as the search options, the "filter" icon feels less and less appropriate and maybe it should really be changed to a settings "gear" icon. Having filter options in settings feels more right than putting non-filter options under "filter".

Here are my comments from the DevTalk thread about the current 2.81 layout (some of which are already being addressed here): 1) There seems to be a lot of "whitespace" in the top half of the popover. I would try something like squishing all the first four options together and removing the Search header, for example: - [ ] Sync Selection - [ ] Sort Alphabetically - [ ] Case Sensitive Search - [ ] Exact Match That ordering and the addition of the word "search" seems sufficiently descriptive and highlights Sync Selection as the most major mode setting. 2) What happens when "Sort Alphabetically" is off? Is it creation order, or what? There should be a tooltip that explains this (currently there's no tooltip for this option). 3) The currently un-checked options in this panel are too dark. They actually appear disabled and it looks like you should not be allowed to select those search options for example. I was actually surprised to discover that across Blender selected checkbox text does actually get slightly brighter but it's a very subtle effect that should be used here as well. When - [ ] Objects is deselected it makes sense to show the sub-options below it as "disabled" but the drastic dimming should only be used to indicate something is actually disabled and currently not applicable and potentially not enableable. 4) With "Sync Selection" as well as the search options, the "filter" icon feels less and less appropriate and maybe it should really be changed to a settings "gear" icon. Having filter options in settings feels more right than putting non-filter options under "filter".

William Reynish commented

2019-08-22 17:30:32 +02:00

Added subscriber: @WilliamReynish

William Reynish commented

2019-08-22 17:30:32 +02:00

In many cases I’ve seen, the Outliner header is already full. If we split the popover in two, the header will be too large and push the Add Collection button out of view in many common setups. So even though it would be nice to split them apart, it may be less practical.

Instead we could simply use a different icon than the filter, or just accept that the Filter popover includes some options that are not strictly speaking filter options. Although search at least is also related to filtering.

In many cases I’ve seen, the Outliner header is already full. If we split the popover in two, the header will be too large and push the Add Collection button out of view in many common setups. So even though it would be nice to split them apart, it may be less practical. Instead we could simply use a different icon than the filter, or just accept that the Filter popover includes some options that are not strictly speaking filter options. Although search at least is also related to filtering.

Nathan Craddock commented

2019-08-22 18:42:01 +02:00

@WilliamReynish, I think using a new icon and some reorganization would be good, then the popover could be shown in sequences view which doesn't have filtering options.

I made this mockup that uses a two column layout for a portion of the popover

@WilliamReynish, I think using a new icon and some reorganization would be good, then the popover could be shown in sequences view which doesn't have filtering options. I made this mockup that uses a two column layout for a portion of the popover ![filter_popover.png](https://archive.blender.org/developer/F7674200/filter_popover.png)

noki paike commented

2019-08-22 18:49:47 +02:00

Added subscriber: @nokipaike

noki paike commented

2019-08-22 18:49:47 +02:00

in view of these new changes, can you do the search item resizable? here's how it looks on my laptop and every time I have to keep it wide to see the filter icon ..

in view of these new changes, can you do the search item resizable? here's how it looks on my laptop and every time I have to keep it wide to see the filter icon .. ![Screenshot (304).png](https://archive.blender.org/developer/F7687717/Screenshot__304_.png)

William Reynish commented

2019-08-22 19:05:40 +02:00

Indeed, search could expand/contract depending on if you are actually using it or not. That would help a lot.

@Zachman Dual column we could do, and then have one column for Filter and another for Display.

Note that in your current dual column mockup, things are jumbled together somewhat, and we don't use the term 'Draw' unless referring to a drawing tool for making marks. Instead use Display or Filter.

In general, this popover mostly contains filter options, so there is also an argument to keep the Filter icon.

Indeed, search could expand/contract depending on if you are actually using it or not. That would help a lot. @Zachman Dual column we could do, and then have one column for Filter and another for Display. Note that in your current dual column mockup, things are jumbled together somewhat, and we don't use the term 'Draw' unless referring to a drawing tool for making marks. Instead use Display or Filter. In general, this popover *mostly* contains filter options, so there is also an argument to keep the Filter icon.

Juan commented

2020-10-30 08:12:22 +01:00

Added subscriber: @jc4d

Philipp Oeser removed the

Download

What's New

Blender Studio

Manual

Developers Blog

Documentation

Benchmark

Blender Conference

Development Fund

One-time Donations

Outliner Popovers Design #68853