Homepage layout and new advanced filters

[lucascumsille]

Fixes: https://github.com/mysociety/caps/issues/611 Fixes: https://github.com/mysociety/caps/issues/694

• [ ] Add Metropolitan and No metropolitan for County councils to the advanced filter list.

https://github.com/user-attachments/assets/a4833ee6-d1cc-45e3-a69b-40f4e83da7be

[lucascumsille]

Hey @zarino a few notes:

• Speaking with Don, he mentioned it would be great to have this deployed November-December even if the metropolitan filter is not ready for county council.
• Annie and Isaac are happy with leaving the nation filter below the type of council. I think now it also makes more sense to the user that Northern Ireland is with the nation group more than "Type of council"
• I still left the "Nation" filter in the advanced filter group, more for users that are used to the site. But I don't really have a strong opinion regarding it, happy to hide it.

Let me know if you have any feedback =)

[zarino]

Thanks @lucascumsille. While this resolves the requirements in #694 (and would eventually resolve #611 too) I wonder whether we’re just over-complicating everything.

When I look at the homepage, as it stands in this PR, my eye is darting all over the place – there’s a sea of different buttons and boxes and labels and headers and form elements and borders. Sometimes a purple roundrect means "this option is selected", sometimes it means "submit the changes in this form". And four of the main controls on the page (the council type buttons – CE UK splits all of their analysis by these types, and councils can’t be compared across these types, so they feel philosophically quite different to the other more ephemeral filters) are counter-intuitively some of the smallest controls on the page, hidden in the middle of a whole bunch of other identical buttons and form elements.

Now, I can see how we’ve got to this point. The requirements for this page have grown organically over time, and each time CE UK requests that we emphasise one bit over the others just a little bit more, we make a few more tweaks, add a few more boxes, another competing splash of colour… it’s an arms race.

I do wonder whether, actually, this is the point at which we have an opportunity to simplify rather than complicate.

So, getting back to basics, what do I think works about where we’ve got so far?

• I like your brave idea to stop treating "Northern Ireland" as a "council type" and instead present it as one of the four country filters. Technically it behaves differently to the other country buttons, but I think typical users won’t notice, and it totally makes sense to group it next to the other countries.
• I like how the things you can filter by have been moved out of a hidden "Advanced filters" modal button, and listed right there in front of you, so you can’t fail to notice that there are other ways to slice and dice the councils.
• I like how the table heading has been moved into the top left cell of the table, rather than stacking above the table, saving us some vertical space. It feels tidy.

What am I not so sure about?

• I worry there’s a lack of hierarchy in the controls. The "Show council in the Scorecard table" search input is a long way away from the table it acts on, and the council type buttons don’t feel like something that will significantly change the page content. Even though you’ve tried to emphasise the left-most filter box with a dark purple header and larger header font-size, the contents of those two filter boxes, next to each other, become almost a massive, page-wide block of controls – it feels quite intimidating! My eye wants to gloss over them, rather than take on the mental effort of parsing them.
• Displaying all of the filter options, even quite specialist ones like IMD, on pageload, adds to that visual complexity. Even though these "advanced" filter options are now much more prominent, I wonder whether most people will actually use them all? If they don’t use them all, then it seems a shame to have them taking up space.

Rather than just complaining, I figured I’d try resolving these things. 🤣 I’m not saying this is perfect, but maybe it’ll do a better job of explaining what I mean by "simplify things".

I’ll explain my thinking here:

• Using size to show a clear hierarchy on the various filter options – the most common filters (council types) are massive buttons, the next most common filters (countries when you’re looking at Single Tiers, or district types when you’re looking at Districts) are small buttons, and then further filters are less obtrusive links.
  • To reduce visual complexity, I’ve chosen to emphasise some of the filters, but de-emphasise others, and hide others. I’m imagining that all of the "links" ("Region…", "Political control…", "More…") would just open the modal that we had previously, so everything’s still accessible, just not all laid out immediately on pageload.
• Consistency in controls: the selected option in a group is always a filled-in purple button, the un-selected options are outlined purple buttons. There is no "submit", no "reset".
• The council name search input is moved closer to the table, to make it clear that when you type into it, you’re acting directly on the table immediately below.
• While I was here, I also reduced vertical padding in the hero – no need for it to take up so much space – and reverted the heavy purple search element in the nav, because my instinct is, if we want that search to be prominent, then it should be done with size and position rather than colour, which is a shortcut that just leads us into that visual hierarchy arms race again.

I admit, this is pretty radical. I’m sure there are edge-cases I’ve not handled. But hopefully it shows there’s another way to approach this problem. Happy to discuss tomorrow!

[lucascumsille]

Thanks @zarino I like it, my only concern is that is for people that use or would like to use the advanced filters is not very encouraging. I don't think we have the data to know if people would use it or not, because in the current state, using the advanced filters is a bit of a pain. With you version I would:

• If an advanced filter has been applied then we display the advanced filter section when the page reloads, that way if the user want to continue playing with the filters, they don't need to be reopening the modal. I think I would replace the modal and have it as a drawer below the nation.
• Make obvious which advanced filter are active.
• If we move ahead with the advanced filter modal, I would get rid of the accordion inside the modal, to reduce the amount of clicks.

Let me know what you think. I think we should show it to CEUK first, in case they have an option regarding the advanced filters, the thread is here.

[zarino]

• If an advanced filter has been applied then we display the advanced filter section when the page reloads, that way if the user want to continue playing with the filters, they don't need to be reopening the modal. I think I would replace the modal and have it as a drawer below the nation.
• Make obvious which advanced filter are active.

Yeah, I was toying with the idea of doing something like this, where, once a second filter has been applied ("Region: London" in this case), we break each filter group onto its own separate, labelled line:

I haven’t actually tried it out in real life, though, so don’t know whether it’d feel a bit clunky. I expect there are other alternative solutions.

[lucascumsille]

I think I would stick to select elements for advanced filters, listing them like that just seems unnecessary. That way we also would have space to display the rest of the filters, avoiding the need to reopen the filters if they want to add a new group.

[lucascumsille]

Replaced by: https://github.com/mysociety/caps/pull/706