Jetpack: Instant Search: Early Design Feedback

[gibrown]

I went through and tested a bunch of themes and took some notes. Some of these are bugs and some of these are more questions/opinions. If you think something is done/addressed/etc, then just check it off. Some of these may already be obvious, but when I wasn't sure I added them to the list.

• [ ] On mobile, should the filter toggle show a count or bubble when there are active filters?
• [x] There should be an X in search box for clearing it right?
• [ ] Should ESC clear the search and then exit the overlay? Currently immediately exits the overlay. I feel like I want it to only exit the overlay once it has cleared the box. Maybe we should also rescroll the page back up to the top when the user first hits ESC?
• [ ] On mobile should starting to scroll to the top immediately show the search bar and filter toggle so the user doesn't have to scroll all the way up?
• [ ] Bringing up my heated topic again... I'm curious what the overlay would feel like if we tried to open it after the user starts typing into a search box.
• [ ] Do something different for search results with no content https://cloudup.com/cw5x5p5GaSt http://gibrown.wpsandbox.me/demo/?blog_id=20115252&theme=storefront&s=related%20psts
• [x] Should we have a max height on the titles? Some themes are very large https://cloudup.com/cYBNJ2YQtp4 colormag theme http://gibrown.wpsandbox.me/demo?blog_id=20115252&theme=colormag&s=related https://cloudup.com/cO2utrhHsRj http://gibrown.wpsandbox.me/demo?blog_id=20115252&theme=twentytwenty&s=related%20psts
• [ ] A lot of cases where my browser autocomplete still shows after the overlay opens https://cloudup.com/c8uyIMaHlBo
• [x] Theme bug in zerif-lite: bad css on filters: https://cloudup.com/cZ6Tl7CN-io for http://gibrown.wpsandbox.me/demo/?blog_id=20115252&theme=zerif-lite&s=related
• [ ] Theme bug in 2015 weird break on filters http://gibrown.wpsandbox.me/demo?blog_id=20115252&theme=twentyfifteen&s=related%20psts https://cloudup.com/cy-YEMc6bwz
• [ ] Theme weirdness in storefront: the text color in the close button is black (maybe this won't matter when we change to an X) http://gibrown.wpsandbox.me/demo/?blog_id=20115252&theme=storefront&s=related%20psts

[jsnmoon]

• [ ] Should ESC clear the search and then exit the overlay? Currently immediately exits the overlay. I feel like I want it to only exit the overlay once it has cleared the box. Maybe we should also rescroll the page back up to the top when the user first hits ESC?

Related: https://github.com/Automattic/jetpack/issues/14306

[keoshi]

• [ ] There should be an X in search box for clearing it right?

This is being added as part of this PR: https://github.com/Automattic/jetpack/pull/14423

[keoshi]

• [ ] Should we have a max height on the titles? Some themes are very large

I think that's something we'll have to accept since the overlay is inheriting styles from the base theme. Undeniably some will look better than others, but my best guess is that the minute we impose some harsher rules for all themes is the moment we'll break compatibility with some of them.

I do think we should keep logging these to evaluate if it's a bigger problem than assumed initially.

[bluefuton]

A lot of cases where my browser autocomplete still shows after the overlay opens

What browser is this in @gibrown?

I wonder if we can prevent it by disabling search inputs that aren't in the overlay when the overlay is open.

[bluefuton]

Theme bug in zerif-lite: bad css on filters: https://cloudup.com/cZ6Tl7CN-io for http://gibrown.wpsandbox.me/demo/?blog_id=20115252&theme=zerif-lite&s=related

Should be fixed in #14493.

[gibrown]

What browser is this in @gibrown?

I'm using Chrome.

[gibrown]

@keoshi adding to this I was playing around with mobile and had a few questions:

• I thought we had planned to have the filter button slide in the filters from the side and take over the screen rather than doing a drop down from the button? https://wp.me/p9xfpQ-yC#comment-1324 (though now I see in later Figma designs that that changed, may not be that big a deal)
• I feel like as soon as any of the filter or sort options get selected we should close the filter box and reload the results?
• Selecting the dropbox for sorting zooms in the page on Chrome mobile (iOS). https://cloudup.com/cVrNq5PxgCI
• I guess the styling for the sorting options doesn't match the design either and it probably would be faster to change sorting if it is not a drop down on mobile. cc @jsnmoon

[gibrown]

Broke all of these out into separate issues so we can separately prioritize them.