Problem/Motivation
During the usability sessions, some participants confused the filter form items with the 'add content' action link.
Some participants started to fill out the form items, and then pressed 'Add content', thinking they were creating content of that type and title.
Proposed resolution
Wrap the form items in a fieldset titled 'filter', to visually encapsulate the form.

Remaining tasks
Design review
- Implement the suggestions
- Test
User interface changes
Clearer tabs for the content type pages
API changes
None
Data model changes
None
Comments
Comment #1
lewisnymanRelated: #2417111: Replace container-inline with form--inline to display forms horizontally.
Comment #2
pguillard commentedI guess we should do the same for "add people" in the people adminitration page (/admin/people)
I can't figure out how to add a fieldset there, for this specific view filter. However it would be easy with CSS.
Comment #3
pguillard commentedHum... my solution looks more like a hack, but it works, and it seems it doesn't break the tests.
Any hints appreciated !
Comment #4
pguillard commentedComment #6
lewisnymanThanks for working on this. This adds a fieldset around all views exposed filters but that seems to have the desired affect. Is it possible to move the submit button inside the fieldset as well?
Also tagging with accessibility because it affects accessibility.
Comment #7
pguillard commentedI moved the submit button inside the fieldset as well (both Apply and Reset).
But again, it must be improved !
Comment #9
pguillard commentedI didn't succeed to troubleshoot the tests.. And the fieldset is applied for any views filter..With many impacts, and maybe.. bugs.
So I think there is a better solution : CSS. No impact. And the result is the one we want.
Here is the patch, without interdiff, cause it is a new one.
Comment #10
dawehnerHa, I like the fact that we might just need to use CSS, not sure though whether this would be okay accessibility wise.
@pguillard Do you maybe know more about that?
I certainly think we should not add a fieldset to the markup for all views. This is a special case potentially here
Comment #11
pguillard commentedIn terms of accessibility, I guess we bring nothing and remove nothing.
Comment #12
mgiffordLooks that way. Seems like a good UX improvement though.
Comment #13
pguillard commentedI would say RTBC ?
Comment #14
lewisnymanInstead of copying the CSS, I would prefer it if we could add a reusable class. That is inline with our CSS standards. Would that be possible?
Comment #15
lewisnymanAlso see: #2113903: Introduce a 'pane' component to visually group form items
Comment #16
pguillard commented@LewisNyman : should I go for #14 or wait for the pane task and #15 ?
Comment #17
lunk rat commentedThis same issue came up again today in another usability test at UMN.
Comment #18
pguillard commentedA new patch with extra CSS in classy/css/exposed-filters.css which I think is much better (Anyway #9 was not applying anymore).
I could also add an extra class, "views-exposed-wrapper" for instance.
Comment #19
pguillard commentedComment #21
leandro713 commentedi've applied patch #18, the interface looks now much more clear
BEFORE


AFTER
Comment #22
yoroy commentedI looked at how field sets are used elsewhere in core admin and I'm only finding collapsible ones. Even found a similar interface for URL aliases:
(I don't think the blue Filter button is a good idea there)
So maybe we should make this a collapsible fieldset as well with a title of "Filter content".
Comment #23
leandro713 commentedAlso, i would include the below section «with selection» into the fieldset or would create another fieldset for this.
The title of the first fieldset would be «FILTER CONTENT», as stated @yoroy
The title of the second fieldset would be «MODIFY CONTENT»
Comment #24
yoroy commentedComment #25
yoroy commentedComment #26
yoroy commentedComment #27
yoroy commentedComment #28
pguillard commentedI just try to revive this issue :
So #18 was made with CSS changes
I got back to #7 with a form filter.
Comment #29
pguillard commentedComment #31
pguillard commentedTets will not pass, but it should be slightly better..
Comment #35
yoroy commentedComment #36
tomatkins commentedI am working on this issue at Drupalcon Dublin. Reconfiguring initial GIT configuration (I cloned 8.3.x., at the sprint. According to documentation I need to be working off of 8.3.0-dev. Submitting patch to this issue or to https://www.drupal.org/node/2785051 by COB today Saturday Oct.1.)
Comment #37
tomatkins commentedPatch submitted on other "similar issue" - https://www.drupal.org/node/2785051 - This current issue remains.
Comment #39
ckrinaI'd like to pospone the development here until a generic & integrated design for VBO and filters has been decided. See #2721807: Design for filters and bulk operations.
Comment #40
ckrinaSince the design has been reviewed in #2721807: Design for filters and bulk operations, together with the new design for VBO, this issue can continue.
Comment #52
bnjmnmAddressed in #3329996: Claro bulk operation form has been redesigned