Organism -> Search/Filter/Sort

[justinscherer]

Analysis

Our current search/filter/sort component has gone through a lot of surgery over the last 6 months and the scars are showing. Beyond some pesky UI bugs that we haven't fixed yet, the need to include CTAs for saving searches and the sheer number and variability and logic of things to filter by has made this component a complete mess to use.

We desperately need to iron out our data model and the experience of Collections, saved searches, parent/children categories, and surveys, HXL tags. A different issue for a different day...

It's also not clear what our search actually searches for...

^^on some level, all of these data constructions are doing the same thing.

Inspiration

I fully stole a lot of how these filters work from AirBnB

Solution

Zero state

Sort open

Sort on

Filter open

Filter on

Rationale

Ultimately this inherits most of the styles from #2655 and #2789
I stole the idea of baking it into an anchored modal window and having different modal sizes for sort/filter from AirBnB as seen above.

Part of the trouble we have now is that the search/sort/filter mechanism is embedded in the top bar and doesn't feel like it directly controls the data being displayed. To mitigate this, I baked it into a data list #2665

I made creative use of our button styles to achieve on/active states, which I also stole.

[crcommons]

@justinscherer @Erioldoesdesign Does the search run the query after each letter is typed or should we put a 1 (or 2, 3...) second delay on the query or should there be a button to search once you've finished typing?

[crcommons]

A few more questions:

• Is there a reason the apply and cancel buttons are different for filter and sort?
• How do you remove the search, sort, and filters?
• If the query fails, which UI do we use to display the error

[Angamanga]

@Erioldoesdesign @justinscherer Link to QA:
http://preview.ushahidi.com/platform-pattern-library/ui-refresh/assets/html/3_organisms/#pl-pattern-filters (something appears to have happened to the input-box so you might want to wait to qa this)

[Erioldoesdesign]

Testing in Chrome Version 67.0.3396.87

FE QA notes:

• In the 'zero state' (default search state) the search magnifying glass icon is currently #1E232A in the PL code and in the design files it is #777777 (a dark grey. This is our lightest accessible grey on a white background)
  The magnifying glass should change to #1E232A for the 'focus' or 'open' state.

• The copy on the buttons/links is all caps ('SORT' 'SAVED SEARCH') and should be sentence case ('Sort' 'Saved search') for legibility. (remove text-transform: uppercase?)

• The 'focus' or 'open' state and the 'submitted' or 'on' state should have text at #1E232A (text that is being typed into the search field)

• The border should be 2px for the 'focus' or 'open' state and the 'submitted' or 'on' state

• The 'submitted' or 'on' state list of 'Sample...' requires more padding on the left:
  You can see that the list starts about a third in from the left of the 'sort' button.
  

• The copy is currently #1E232A and should be #777777 at all times:
  

- The 'focus' or 'open' state 'Cancel' and 'Apply' buttons are in the outlined and solid style in the PL. The designs show a grey 'Cancel' text in #777777 and a blue link in #0000E0 'Apply' in the bottom left and right of the drop down checkbox list:

^^^ Justin's designs actually show two different styles of these buttons you can see in the designs above. I think the button style is better that the grey link text/ blue link text version so no changes here but goo to flag the design inconsistency (sorry Justin!)

• The squares in the checkboxes look a little too big. I played with the css and got this:

Original:

My edits:

This css I did may break things elsewhere so worth checking over from FE. Illustrates the need for smaller 'black box' inside checkboxes though.

• The 'Filter open' state's titles a litter too far away for their checkboxes. I got the list checkboxes closer by editing the margin-bottom on the '.ltr-namespace fieldset legend' element (to 10px)

Also the sort/filter list appears in one long vertical. In the designs there are two vertical columns of a maximum of 4 checkboxes (either parent category or child category) per column.
@justinscherer This may become a design problem if we have 1 parent category with more than 3 child categories and the 4th child category might align to the left column in the code structure.
For now, let's keep 1 long column vertical list to eliminate this potential visual dissonance.

THIS IS GREAT WORK. I hope my QA notes aren't too heavy and are clear and understandable :heartemoji:

[sethburtonhall]

This is great @Erioldoesdesign!! Thank you. There are so many states with this component and it helps to have a QA. As you noticed, I made some "executive" decisions that I meant to communicate (default buttons instead of "gray" and "purple" left and right buttons for better consistency, one long column of checkboxes for better scaling). Your notes are very thorough and clear. I will comb through these and make the changes.

[Erioldoesdesign]

@crcommons omg I didn't answer your questions...sorry!

Does the search run the query after each letter is typed or should we put a 1 (or 2, 3...) second delay on the query or should there be a button to search once you've finished typing?

I would go with after each letter is typed with a delay. It's a typical and expected user journey now for most users. Though, question: for users with slow connections, are we adding to the load time?

Is there a reason the apply and cancel buttons are different for filter and sort?
How do you remove the search, sort, and filters?
If the query fails, which UI do we use to display the error

I picked up on the different filter/sort buttons in the design. I think that was just a design file error. We get UI 'blindness' sometimes and miss these things!

I would say the user would delete the text in the search bar (it should stay active) and the search results should reset. Either that or we need a 'clear search' button/text link This is one for @justinscherer to have a think about.

Good point! so if there are no results for a search term? We need to display text that says as much. Another consideration for @justinscherer I would say.

(Sorry to load you up with @ mention's Justin...)

[crcommons]

@Erioldoesdesign If we have a delayed query, it would affect slow connections in that it would fire off requests to the API whenever a user paused while typing. So I would recommend a search button perhaps.

We definitely need some way to clear the filters and sort, and need to decide how to clear the search (depending on which search implementation we use).

[justinscherer]

I picked up on the different filter/sort buttons in the design. I think that was just a design file error. We get UI 'blindness' sometimes and miss these things!

great catch. Let's keep the link style for the CTAs in both sort and filter windows.

I would say the user would delete the text in the search bar (it should stay active) and the search results should reset. Either that or we need a 'clear search' button/text link

When the user submits a query and the results are listed, clicking on the text in the search bar will highlight all of the text. They can then delete it as they wish.

Good point! so if there are no results for a search term? We need to display text that says as much.

Nice catch. Lets say "We didn't find anything that matches your search." in 14px Lato regular in #1e232a

[justinscherer]

great catch. Let's keep the link style for the CTAs in both sort and filter windows.

@sethburtonhall talked me out of this one. Let's use buttons. Sorry for the flip-flop

[sethburtonhall]

@Erioldoesdesign I have integrated your feedback.

Moving back into Design QA pipeline for final approval.

ushahidi/platform-pattern-library@c97d9bf

[crcommons]

@justinscherer So if a user has selected a variety of sorts, filters, and a search, they'll have to go through and remove each one individually? There won't be a way to clear the search completely?

[justinscherer]

So if a user has selected a variety of sorts, filters, and a search, they'll have to go through and remove each one individually? There won't be a way to clear the search completely?

Great point. The "Cancel" should be a "Clear all" and clicking outside the box or on the sort/filter boxes would do what "Cancel" does...i.e. closes the filter/sort pane without making any changes.

[justinscherer]

QA:

border-radius on checkboxes should only be 2px

left and right padding between the text and the inside edges of all buttons should be 34px

checkboxes should have 21px of vertical spacing between them

border of open sort pane should be #777777, not #1e232a

checkboxes and buttons should all be 21px spaced from the edges of the box

unclicked checkboxes have a 1px border of #777777 clicked checkboxes have a 2px border of #1e232a

min height for the open sort/filter box is 225px

border radius of open filter pane is 2px not 3px

[justinscherer]

In the results list, the leading on the detail text for each row item should be font-size + 6px so in this case, 20px

[justinscherer]

Filters with lists of checkboxes/radios of more than 4 items should display them in two columns. should

[sethburtonhall]

@justinscherer I made all revisions except two column checkbox/radio. I am still working on this but I wanted to highlight @Erioldoesdesign's comment from above to make sure.

Also the sort/filter list appears in one long vertical. In the designs there are two vertical columns of a maximum of 4 checkboxes (either parent category or child category) per column.
@justinscherer This may become a design problem if we have 1 parent category with more than 3 child categories and the 4th child category might align to the left column in the code structure.
For now, let's keep 1 long column vertical list to eliminate this potential visual dissonance.

[justinscherer]

@Erioldoesdesign
re:

This may become a design problem if we have 1 parent category with more than 3 child categories and the 4th child category might align to the left column in the code structure.
For now, let's keep 1 long column vertical list to eliminate this potential visual dissonance.

You're right about this. However, I think the benefit of not having eternal 1 column lists outweighs the risk of losing the indent when there's a parent with a tonne of children. The many children use case feels like an edge case to me, but of course I have zero data or testing to back that up...

What do you think?

[Erioldoesdesign]

Definitely keen to not have an eternal single column. Perhaps there's something code-wise that can override the layout if this were to occur? Like a rule that always has child categories display in the same 'column' as the parent and then the next parent would carry on the 2-column format?

Sounds a bit complicated but not impossible to my rudimentary understanding of code!

[justinscherer]

"a rule that always has child categories display in the same 'column' as the parent and then the next parent would carry on the 2-column format?"

Sounds good to me. Let's see what @sethburtonhall and/or @Angamanga says when they're back.

[Erioldoesdesign]

Everything looks good here to me apart from this issue around double/two column checkbox list in the expanded filter dropdown...

@sethburtonhall Can you take a look at my comment above and see if you can have a dig around to find a potential "rule that always has child categories display in the same 'column' as the parent and then the next parent would carry on the 2-column format"

If it's a no then I believe Justin still wants the 2-column view.

[Erioldoesdesign]

Updating this ticket with a comment from our design sync today in that we're going with a single column of checkboxes for sort and filter as the 2-column, max 4 items proved difficult to layout with anomalies for checkbox lists of uneven numbers.

Moving back into ready for FE because I believe @sethburtonhall is currently working on what we discussed

[sethburtonhall]

This is ready for QA here

[Erioldoesdesign]

This looks fly. Closing this ticket :D