[QA] Optimize Search & Filter interactions

[xmatthewx]

Forgive me if this is already filed somewhere. There are a few opportunities to polish the Project search and filter interactions. None seem like blockers, though filtered search might confuse some people.

1. None found – when a search or filter reveals nothing, we should display a friendly note.
2. Loading – there's a slight lag between changing a filter or sort, and the results that are displayed. It sometimes feels like the interaction failed (particularly on sort). We might hide the current projects listed on user input, before new projects render.
3. Mobile – Search and Topics blend into a single white box (see below). Could use a pixel or two of margin.
4. Mobile Sort - Alignment of items is off. I recommend we hide sort feature on small screens. Debatably less useful.
5. Filtered Search – Currently, Topic and Search are linked. We only list projects that fit both fields. I'd expect this in an advanced search on a huge database. In browsing here, this confused me at first. I selected a Topic. Didn't find what I wanted. Then I entered a Search team. I got zero results. I thought I entered a typo because I expected it to search everything, not the topic I picked before. Open for debate: While not everyone will have this expectation, I recommend we clear Topics on new searches. Better to disappoint power users than confuse or block everyone else.

[alanmoo]

All great points! Which should be prioritized? 3 and 4 are pretty quick to fix, 1 and 5 shouldn't be difficult though I can see a few potential issues. 2 might take a little longer.

[hannahkane]

I'm pretty sure @kristinashu mocked up a search results page with "none found" at some point, but I can't find it in the redpen now. Perhaps we can wait until she's back to resolve that one (not a blocker for release).

I completely agree on point 5. We're setting people up to narrow their search too much.

If 3 and 4 are easy, maybe we aim to do those now.

[kristinashu]

Great ticket! I've updated these to the order suggested above and added a few notes:

• [ ] Mobile styling – Search and Topics blend into a single white box and the alignment of sort is off. These are both covered in https://github.com/mozilla/science.mozilla.org/issues/353
• [ ] None found – when a search or filter reveals nothing, we should display a friendly note.

• [ ] Filtered Search – Currently, Topic and Search are linked. We should clear Topics on new searches to reduce the number of 0 results.
• [ ] Loading – there's a slight lag between changing a filter or sort, and the results that are displayed. It sometimes feels like the interaction failed (particularly on sort). We might hide the current projects listed on user input, before new projects render.

[alanmoo]

This seems like low-hanging fruit that should be tackled sooner rather than later, as it would improve the UX a good amount.