Add special styling to facet section on mobile viewports

[ggeisler]

Broken out of #1110.

QNL raised the concern that on mobile viewports, the facet sidebar heading visually appears like a page heading. A related concern is that on mobile we have two hamburger menus (collapsed sections in the brandbar and facet section) visible in close proximity:

I don't think we want to un-collapse either section, or move the facet section from where it is. The best approach I've thought of is to put the facet heading and associated facet elements within a highlighted area (on mobile only; nothing here affects anything at lg and above, where the facet section is in a sidebar, not collapsed, and the concerns raised don't apply). The section then becomes more like a special callout section, clearly separated from the main page content and thus clearly not an inline page heading.

Steps involved:

• Hide the horizontal rule under the facet heading
• Add a 1px border around the facet section (#17377b and opacity: 50%;)
• Replace the icon on the expand/collapse button with a text label ("Show filters" when closed, "Hide filters" when open.
• Style the text label the same as the "View all" links lower on the page: color #17377b and font size 20px, same hover and active styling)
• Remove the border from the expand/collapse button

Examples

Below are how I think things would look with the changes above:

Default state (facet section collapsed)

---

Open state (facet section expanded)

---

Open, facet field expanded state

[mwerla]

@ggeisler I think the proposed solution is an improvement, but when discussing it yesterday with Wayne, we had two parallel ideas how to minimize the confusion caused by styling similar to a header:

• To make the collapsed "Find items by..." looking even more like a button (for example by using full background color instead of just the border. But I don't know how that should look then after filters expansion.
• To change the order and put the "Find items by..." below the introductory text, and shorten it, like this (sorry for the ugly styling):

[mwerla]

@ggeisler One more issue which I think still remains (potentially) confusing is the fact that we have a hamburger icon in the top right corner, and just below it, there is the main menu of the page, which (to me) looks like the expanded menu from the top right hamburger. I am afraid that users may not see the hamburger as yet one more menu to expand.

On the other hand, I just checked the Hotjar heatmap for mobile, and it looks that in the current version the three areas (hamburger in top right corner, search button, and hamburger to show filters) are tapped equally often. It's hard to say what people think when they tap it, but at least some of them do :) So - just sharing my thoughts, in case you will find them useful.

[ggeisler]

@mwerla For your first concern, about how to make the "Find items by..." look more like something the user can click on (if I'm understanding your and Wayne's concern correctly), I don't think this:

To change the order and put the "Find items by..." below the introductory text, and shorten it, like this (sorry for the ugly styling):

would be technically feasible. It would mean inserting the facet sidebar element between two sections of a separate element (the first paragraph of the home page content and the remainder of the home page content). This is probably feasible if this were a standalone web page, but it's more complicated here because the home page content comes from a defined Spotlight page and I think it would be complicated to figure out how to insert the facet sidebar into a particular spot in a Spotlight page (certainly this is not something we've ever tried to do before). And we also have to consider the search results page, where we have the same facet sidebar; there the search results page is a completely different type of page than the home page.

But here are a couple of ideas to consider, which just modify my previous mockups slightly to make it more clear that this is a toggleable section.

First thought is to just give the toggle button a contrasting background color, to draw more attention to it as a button:

---

Second idea is just a variation, where we don't change the button background color but instead use a link underline for the button label, again to make it more likely to be seen as a toggleable element:

[mwerla]

@ggeisler Personally, I would go for the design with a button then.
@waynegraham What do you think?

[waynegraham]

+1 for the button approach

[ggeisler]

@mwerla and @waynegraham Thanks for the feedback on this issue. Because of the long discussion, I'm creating a new ticket to focus on our finalized design suggestion: #1387.