Suggestion: Move UI List filter buttons to the top #87942

New Issue

Julian Eisel · 2021-04-30T17:27:21+02:00

Julian Eisel commented

2021-04-30 17:27:21 +02:00

Motivation

It's unusual to have filtering settings below the items. Usually you have the filter settings before the items you're searching in, inside and outside of Blender.
Since the list extends to the bottom, it's may be more likely that the lower boundary of the list is scrolled out of view than the upper one.
While entering a filter string, the number of visible items changes and the filter settings may jump around.
For the Asset View UI template, used for pose libraries, we enlarge the UI list so all items fit into the list, to avoid a scrolling view inside a scrolling view (rows are taller there, making this an issue). There is lots of scrolling still, especially to switch from the search button to the other settings:

Proposal
Proposal is to simply move the filter options to the top of the list.
Screenshots of a quick implementation (P2100):

Downsides

Takes slightly more space than the previous solution, which combined the triangle to expand the filter settings with the grip button.
It does feel a bit odd at first :) But I think you get used to it quickly.
If the list is at the top of the layout, its upper edge may still tend to be scrolled out of view. E.g. in the material properties.
Aesthetically not too great? The little triangle kinda fails to indicate what it's there for.

**Motivation** * It's unusual to have filtering settings below the items. Usually you have the filter settings before the items you're searching in, inside and outside of Blender. * Since the list extends to the bottom, it's may be more likely that the lower boundary of the list is scrolled out of view than the upper one. * While entering a filter string, the number of visible items changes and the filter settings may jump around. * For the Asset View UI template, used for pose libraries, we enlarge the UI list so all items fit into the list, to avoid a scrolling view inside a scrolling view (rows are taller there, making this an issue). There is lots of scrolling still, especially to switch from the search button to the other settings: ![Clipboard - April 22](https://archive.blender.org/developer/F10032742/Clipboard_-_April_22) **Proposal** Proposal is to simply move the filter options to the top of the list. Screenshots of a quick implementation ([P2100](https://archive.blender.org/developer/P2100.txt)): | ![Screenshot 2021-04-30 at 17.07.05.png](https://archive.blender.org/developer/F10047309/Screenshot_2021-04-30_at_17.07.05.png) | ![Screenshot 2021-04-30 at 17.07.00.png](https://archive.blender.org/developer/F10047311/Screenshot_2021-04-30_at_17.07.00.png) | | | -- | -- | -- | | ![Screenshot 2021-04-30 at 17.06.43.png](https://archive.blender.org/developer/F10047313/Screenshot_2021-04-30_at_17.06.43.png) | ![Screenshot 2021-04-30 at 17.06.19.png](https://archive.blender.org/developer/F10047317/Screenshot_2021-04-30_at_17.06.19.png) | ![Screenshot 2021-04-30 at 17.06.24.png](https://archive.blender.org/developer/F10047315/Screenshot_2021-04-30_at_17.06.24.png) | **Downsides** * Takes slightly more space than the previous solution, which combined the triangle to expand the filter settings with the grip button. * It does feel a bit odd at first :) But I think you get used to it quickly. * If the list is at the top of the layout, its upper edge may still tend to be scrolled out of view. E.g. in the material properties. * Aesthetically not too great? The little triangle kinda fails to indicate what it's there for.

Julian Eisel commented

2021-04-30 17:27:21 +02:00

Added subscriber: @JulianEisel

Julian Eisel commented

2021-04-30 17:28:38 +02:00

Changed status from 'Needs Triage' to: 'Confirmed'

Julian Eisel commented

2021-04-30 17:32:56 +02:00

Note that in the asset-browser-poselib branch I also added support for pressing {key Ctrl F} while hovering the list to start filtering. It automatically scrolls the view so the search field is visible.

Note that in the `asset-browser-poselib` branch I also added support for pressing {key Ctrl F} while hovering the list to start filtering. It automatically scrolls the view so the search field is visible.

Hans Goudey commented

2021-04-30 17:38:09 +02:00

Added subscriber: @HooglyBoogly

Hans Goudey commented

2021-04-30 17:38:09 +02:00

That looks good to me. The consistency of having searching at the top of lists like elsewhere is nicer.

One thing I'd suggest is having the little arrow to the left of the search box that appears rather than above it. It looks weird for the arrow to have a row of its own.

That looks good to me. The consistency of having searching at the top of lists like elsewhere is nicer. One thing I'd suggest is having the little arrow to the left of the search box that appears rather than above it. It looks weird for the arrow to have a row of its own.

Harley Acheson commented

2021-04-30 18:31:07 +02:00

Added subscriber: @Harley

Harley Acheson commented

2021-04-30 18:31:07 +02:00

Sorry the the rambling response. I definitely prefer filtering on the top, but doing so like this actually increases my revulsion for this control.

There will be many newish users who look at this control and have no idea what the odd, out-of-place triangle is at the bottom. Moving it to the top also does not help inform anyone what it does. In fact we lose space for list items because we have to reserve space for it. Which is a bit odd since we already reserve space on the right-side for controls.

I'd just add a "filter" button to the top of the right-side controls. Click it and the list items move down slightly and a filter input box is added. It would be the full width of the list area, so inverting and reversing would be icons inside that input on the right side (forgot what we call that). The act of opening it would turn on filtering, clicking on "filter" button again would turn off filtering and close that input. Although closing should not clear the box of text if any.

I'd also remove all the interior padding from the list itself - the space around all the items inside the list, to above the first item, below the last, and to left and right of every item. I'd also remove the bottom gripper image and just allow dragging on a hit area that is the entire horizontal width but starts at bottom list edge and extends a bit below - with a width comparable to our area borders. These two changes would give us at least an extra item in the a typical list space.

Although this would add another button to the right-side controls, those could use a think anyway. There is no need to show "-" unless an item is selected, Same with the move buttons

Sorry the the rambling response. I definitely prefer filtering on the top, but doing so like this actually increases my revulsion for this control. There will be many newish users who look at this control and have no idea what the odd, out-of-place triangle is at the bottom. Moving it to the top also does not help inform anyone what it does. In fact we lose space for list items because we have to reserve space for it. Which is a bit odd since we already reserve space on the right-side for controls. I'd just add a "filter" button to the top of the right-side controls. Click it and the list items move down slightly and a filter input box is added. It would be the full width of the list area, so inverting and reversing would be icons inside that input on the right side (forgot what we call that). The act of opening it would turn on filtering, clicking on "filter" button again would turn off filtering and close that input. Although closing should not clear the box of text if any. I'd also remove all the interior padding from the list itself - the space around all the items inside the list, to above the first item, below the last, and to left and right of every item. I'd also remove the bottom gripper image and just allow dragging on a hit area that is the entire horizontal width but starts at bottom list edge and extends a bit below - with a width comparable to our area borders. These two changes would give us at least an extra item in the a typical list space. Although this would add another button to the right-side controls, those could use a think anyway. There is no need to show "-" unless an item is selected, Same with the move buttons ![UIListFilter.png](https://archive.blender.org/developer/F10048131/UIListFilter.png)

Joseph Eagar commented

2021-05-01 02:06:54 +02:00

Added subscriber: @JosephEagar

Joseph Eagar commented

2021-05-01 02:06:54 +02:00

What about a magnifying glass icon (or whatever search icons are called) instead of the triangle? Seems like that would be clearer to users?

Eugene Du commented

2021-05-02 09:24:07 +02:00

Added subscriber: @APEC

Eugene Du commented

2021-05-02 09:24:07 +02:00

I like @Harley design with a little change to the search icon and comparison on example materials area height

original small		new off		new on
original big		big new off		big new on

I like @Harley design with a little change to the search icon and comparison on example materials area height |original small ![search_mockup_small_original.png](https://archive.blender.org/developer/F10049566/search_mockup_small_original.png)||new off ![search_mockup_small_new_off.png](https://archive.blender.org/developer/F10049568/search_mockup_small_new_off.png)||new on ![search_mockup_small_new_on.png](https://archive.blender.org/developer/F10049570/search_mockup_small_new_on.png)| | -- | -- | -- | -- | -- | |original big ![search_mockup_big_original.png](https://archive.blender.org/developer/F10049573/search_mockup_big_original.png)||big new off ![search_mockup_big_new_off.png](https://archive.blender.org/developer/F10049575/search_mockup_big_new_off.png)||big new on ![search_mockup_big_new_on.png](https://archive.blender.org/developer/F10049593/search_mockup_big_new_on.png)|

Sybren A. Stüvel commented

2021-05-14 15:46:07 +02:00

Added subscriber: @dr.sybren

Sybren A. Stüvel commented

2021-05-14 15:46:07 +02:00

In #87942#1154369, @Harley wrote:
I'd just add a "filter" button to the top of the right-side controls.

That looks much more intuitive to me!

There is no need to show "-" unless an item is selected, Same with the move buttons

When the buttons are there but disabled, at least you know:

that the functionality exists,
where to find it, and
why it is disabled (if that's included in the tooltip, which IMO it should).

That's all lost when the button would be removed altogether.

In #87942#1154892, @APEC wrote:
I like @Harley design with a little change to the search icon and comparison on example materials area height

I think the filter icon is better in this case. IMO "Search" should go to the first (and subsequent) matches, whereas "Filter" should reduce the list of items to only those that match.

> In #87942#1154369, @Harley wrote: > I'd just add a "filter" button to the top of the right-side controls. That looks much more intuitive to me! > There is no need to show "-" unless an item is selected, Same with the move buttons When the buttons are there but disabled, at least you know: 1. that the functionality exists, 2. where to find it, and 3. why it is disabled (if that's included in the tooltip, which IMO it should). That's all lost when the button would be removed altogether. > In #87942#1154892, @APEC wrote: > I like @Harley design with a little change to the search icon and comparison on example materials area height I think the filter icon is better in this case. IMO "Search" should go to the first (and subsequent) matches, whereas "Filter" should reduce the list of items to only those that match.

Jason schleifer commented

2021-11-24 20:11:46 +01:00

Added subscriber: @JasonSchleifer

Dave commented

2021-12-20 01:52:55 +01:00

Added subscriber: @djcampbell1914

Dominik Fill commented

2022-02-19 00:27:47 +01:00

Added subscriber: @dominikfill

Ethan-Hall commented

2022-04-11 21:20:08 +02:00

Added subscriber: @Ethan-Hall

Ethan-Hall commented

2022-04-11 21:20:09 +02:00

@Harley The invert icon (↔) does not change when invert is toggled (unlike the reverse icon). So, wouldn't it need to be embossed?

Ethan-Hall commented

2022-04-11 21:39:41 +02:00

In #87942#1160763, @dr.sybren wrote:
When the buttons are there but disabled, at least you know:

that the functionality exists,

where to find it, and

why it is disabled (if that's included in the tooltip, which IMO it should).

That's all lost when the button would be removed altogether.

Yes. This is important for keeping the UI approachable.

In #87942#1154892, @APEC wrote:
I like @Harley design with a little change to the search icon and comparison on example materials area height

I think the filter icon is better in this case. IMO "Search" should go to the first (and subsequent) matches, whereas "Filter" should reduce the list of items to only those that match.

The filter icon could be used to enable the text search filter; however, I would still like to see the magnifying glass icon on the left side of the text field to make it clear what the box does. Other places in the UI that have a text search filter use that icon.

> In #87942#1160763, @dr.sybren wrote: > When the buttons are there but disabled, at least you know: > 1. that the functionality exists, > 2. where to find it, and > 3. why it is disabled (if that's included in the tooltip, which IMO it should). > > That's all lost when the button would be removed altogether. Yes. This is important for keeping the UI approachable. >> In #87942#1154892, @APEC wrote: >> I like @Harley design with a little change to the search icon and comparison on example materials area height > I think the filter icon is better in this case. IMO "Search" should go to the first (and subsequent) matches, whereas "Filter" should reduce the list of items to only those that match. The filter icon could be used to enable the text search filter; however, I would still like to see the magnifying glass icon on the left side of the text field to make it clear what the box does. Other places in the UI that have a text search filter use that icon.

Ethan-Hall self-assigned this 2022-04-13 08:28:27 +02:00

Ethan-Hall commented

2022-04-13 08:28:27 +02:00

I can handle the changes.

Ethan-Hall commented

2022-04-13 10:54:37 +02:00

In #87942#1154369, @Harley wrote:
I'd just add a "filter" button to the top of the right-side controls. Click it and the list items move down slightly and a filter input box is added. It would be the full width of the list area, so inverting and reversing would be icons inside that input on the right side (forgot what we call that). The act of opening it would turn on filtering, clicking on "filter" button again would turn off filtering and close that input. Although closing should not clear the box of text if any.

Changing the behavior so the filter is disabled when hidden is not so simple. It would require another way to disable the alphabetical and reverse ordering like in a popover. Otherwise when the user hides the filter options, they would expect the name filtering and sorting to be disabled.
This is change would be better suited for another task.

I'd also remove all the interior padding from the list itself - the space around all the items inside the list, to above the first item, below the last, and to left and right of every item. I'd also remove the bottom gripper image and just allow dragging on a hit area that is the entire horizontal width but starts at bottom list edge and extends a bit below - with a width comparable to our area borders. These two changes would give us at least an extra item in the a typical list space.

I would like to keep the gripper icon, but removing the interior padding looks nice.
This change would also be better for a different patch.

I don't think the dropdown context 'special' menu should be connected to the show filtering toggle. The dropdown menu is not providing more filtering options, and thus, it should remain separate.
The dropdown button could be moved above the add (+) button, but I will also leave that for another patch.

> In #87942#1154369, @Harley wrote: > I'd just add a "filter" button to the top of the right-side controls. Click it and the list items move down slightly and a filter input box is added. It would be the full width of the list area, so inverting and reversing would be icons inside that input on the right side (forgot what we call that). The act of opening it would turn on filtering, clicking on "filter" button again would turn off filtering and close that input. Although closing should not clear the box of text if any. Changing the behavior so the filter is disabled when hidden is not so simple. It would require another way to disable the alphabetical and reverse ordering like in a popover. Otherwise when the user hides the filter options, they would expect the name filtering and sorting to be disabled. This is change would be better suited for another task. > I'd also remove all the interior padding from the list itself - the space around all the items inside the list, to above the first item, below the last, and to left and right of every item. I'd also remove the bottom gripper image and just allow dragging on a hit area that is the entire horizontal width but starts at bottom list edge and extends a bit below - with a width comparable to our area borders. These two changes would give us at least an extra item in the a typical list space. I would like to keep the gripper icon, but removing the interior padding looks nice. This change would also be better for a different patch. > ![UIListFilter.png](https://archive.blender.org/developer/F10048131/UIListFilter.png) I don't think the dropdown context 'special' menu should be connected to the show filtering toggle. The dropdown menu is not providing more filtering options, and thus, it should remain separate. The dropdown button could be moved above the add (+) button, but I will also leave that for another patch.

Ethan-Hall commented

2022-04-13 20:51:43 +02:00

Tell me how you feel about this proposal.
I used a similar layout based on @Harley's post, but I scaled back the scope of the changes for the focus on this patch. I'm trying to make the minimal set of changes required to move the filtering options while limiting the downsides.
I started by updating the old code from @JulianEisel's quick implementation, but I had to completely alter it beyond recognition.

Motivation

Everything mentioned in the original task.
The little triangle does not do a good job of indicating that it reveals filtering options.
The padding and spacing around the filter text input area reduces the space for viewing the text.
Expanding the filter options causes the panel to expand and the UI elements to move which is not ideal.

Proposal
We should move the filter options above the list box and add a filter toggle icon that will show/hide the filtering options.
Any additional visual improvements that do not directly help achieve this goal will need to wait for another patch.

Screenshots from my WIP patch. (I think I have most things figured out in the C/C++ code. I just need to go through more of the Python scripts and update them.)

{F13009119 size=full}	{F13009120 size=full}
{F13009121 size=full}	{F13009122 size=full}	{F13009123 size=full}

Downsides

Takes slightly more horizontal space than the previous solution to include the filter options toggle (if a column of buttons does not already exist.)
The filter button is defined in the Python scripts, so addon developers will have to deal with this in one of three ways.

Do nothing. The filtering options are not displayed. The user can enable them by using Ctrl F but AFAIK, cannot disable them once again.
Add a line to the Python UI script that permanently enables the filtering options with no toggle for the user to turn it off.
Add a line or two to enable the the filter options toggle button and button column (if it does not already exist).

Existing Issues This Will Not Solve

There is no visual indication that the filtering/sorting options are enabled when the buttons are hidden.
Changing the index of an item while a sorting option is enabled can be a bit confusing.

Tell me how you feel about this proposal. I used a similar layout based on @Harley's post, but I scaled back the scope of the changes for the focus on this patch. I'm trying to make the minimal set of changes required to move the filtering options while limiting the downsides. I started by updating the old code from @JulianEisel's quick implementation, but I had to completely alter it beyond recognition. **Motivation** * Everything mentioned in the original task. * The little triangle does not do a good job of indicating that it reveals filtering options. * The padding and spacing around the filter text input area reduces the space for viewing the text. * Expanding the filter options causes the panel to expand and the UI elements to move which is not ideal. **Proposal** We should move the filter options above the list box and add a filter toggle icon that will show/hide the filtering options. Any additional visual improvements that do not directly help achieve this goal will need to wait for another patch. Screenshots from my WIP patch. (I think I have most things figured out in the C/C++ code. I just need to go through more of the Python scripts and update them.) |{[F13009119](https://archive.blender.org/developer/F13009119/material_list_ui.png) size=full}|{[F13009120](https://archive.blender.org/developer/F13009120/material_list_ui_show_filter.png) size=full}| | | -- | -- | -- | |{[F13009121](https://archive.blender.org/developer/F13009121/mesh_list_ui_empty.png) size=full}|{[F13009122](https://archive.blender.org/developer/F13009122/mesh_list_ui_full.png) size=full}|{[F13009123](https://archive.blender.org/developer/F13009123/mesh_list_ui_full_show_filter.png) size=full}| **Downsides** * Takes slightly more horizontal space than the previous solution to include the filter options toggle (if a column of buttons does not already exist.) * The filter button is defined in the Python scripts, so addon developers will have to deal with this in one of three ways. 1) Do nothing. The filtering options are not displayed. The user can enable them by using `Ctrl F` but AFAIK, cannot disable them once again. 2) Add a line to the Python UI script that permanently enables the filtering options with no toggle for the user to turn it off. 3) Add a line or two to enable the the filter options toggle button and button column (if it does not already exist). **Existing Issues This Will Not Solve** * There is no visual indication that the filtering/sorting options are enabled when the buttons are hidden. * Changing the index of an item while a sorting option is enabled can be a bit confusing.

Pratik Borhade commented

2022-04-14 04:28:20 +02:00

Added subscriber: @PratikPB2123

Philipp Oeser removed the

Download

What's New

Blender Studio

Manual

Developers Blog

Documentation

Benchmark

Blender Conference

Development Fund

One-time Donations

Suggestion: Move UI List filter buttons to the top #87942