Filters radio-buttons are arranged in a way that is difficult for usability.
This issue was discussed in usability meeting 7 Oct 2022.
Rearrange radio-buttons into vertical groups for better correlation with cognitive perception and technical functionality.
| Comment | File | Size | Author |
|---|---|---|---|
| #14 | Screenshot 2022-11-22 at 5.24.29 PM.png | 124.22 KB | srishtiiee |
| #9 | Screenshot 2022-10-11 at 10.26.18 AM.png | 124.22 KB | utkarsh_33 |
| #9 | Screenshot 2022-10-11 at 10.26.49 AM.png | 132.93 KB | utkarsh_33 |
| #7 | mobile_first.jpg | 106.22 KB | rkoller |
| #7 | widescreen.jpg | 239.06 KB | rkoller |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
rkollerComment #4
utkarsh_33 commentedComment #6
utkarsh_33 commentedComment #7
rkollerthanks for working on the issue. i've successfully applied MR273. one detail that needs discussion is the huge gutter between the columns. i've taken a screenshot on a widescreen where that gutter is pushed to the extreme:
stylewise my first thought was if such a huge gutter the filter column should be aligned to the left border of cards for LTR. in the current state of the patch it is does not but for wide screens and it would make the gutter even more broad and even harder for the eyes to process (eventhough the eye would have some sort of guidance by the alignment to the card borders). the better choice might be to make the three columns more compact with a more narrow gutter like in the screenshot in the proposed resolution section. the only thing i wonder is, there isn't one interface element, like checkboxes or radiobuttons, i can think of with more than a single column in the admin interface (aside table layouts like
/admin/content,/admin/structure/types/manage/article/form-displayand alike) so it might need some design input?it also has to be discussed how the mobile first output should be handled. with the current patch you get two columns and the third underneath
would it make sense to make it single column and stack the three filters underneath each other?
Comment #8
simohell commentedI my screenshot I was using
justify-content: flext-startto align the groups left. It would be good to RTL version also, of course.I think we should avoid using any width percentages as we don't know the future number on radio-button groups. There has been discussion on possible additional filters. Also in the narrow viewport version we see that width in percentages will create issues.
As for using columns: there are trade-offs between using multiple columns and using sinlge column. I chose to propose multiple columns to avoin scrolling and to have shorter space between filter section top and content section top. Also as the filters work like an accordion it is better if in all/most cases we can see the whole accordion content at once.
Comment #9
utkarsh_33 commentedI have attached the screen shots of the latest merge request's results.
Please suggest any other changes if required.
Comment #10
shwetaDevkate commentedComment #11
tim.plunkett@shwetaD I'm not sure what changes you've made since the last commit to the MR. Please make changes there directly (or in a new MR), not in a patch
Comment #14
srishtiiee commentedNoticed one small thing, the space between the label and first radio button is too small which is making the text look crowded while the space between the two radio buttons looks sufficient. Can we increase the spacing between the label and the first radio button for all three groups.
Comment #15
utkarsh_33 commentedComment #16
srishtiiee commentedComment #21
chrisfromredfinComment #23
tim.plunkett