[Spike] investigate UI/SOLR for using "OR" instead of "AND"

[weiweishi]

Is your feature request related to a problem? Please describe.
As a user, I would like to be able to select multiple options in the author facet category, and
I would like the search logic to be "OR", so I can select same author with the variation (Jane Doe or J. Doe or Jane M. Doe etc)
Similarly with the department facet - Work done here #1060

• Initial investigation on UI options, and Solr configuration that would enable the use of "OR" instead of "AND"

[pgwillia]

New egg experience
facets presented

click on option and apply is presented

updates counts for other facets

[pgwillia]

From https://articles.uie.com/faceted_search2part2/

Multiple Selection from a Facet

The most common use case for faceted search or navigation is to select at most one value per facet, but there are at least two ways from which a user might select multiple values from the same facet:

Disjunctive (OR) selection. Selecting a range (e.g., a price or date range) may be a kind of disjunctive selection, depending how the values are represented.
Conjunctive (AND) selection.

The design challenge is to communicate to users whether selecting multiple values from a particular facet is disjunctive or conjunctive—particularly if the site offers both behaviors. Users are notoriously bad at inferring Boolean logic from subtle cues.

It is important to use an interface that not only is self-consistent but also adheres to familiar conventions. For example, the check boxes in Figure 7.6 adheres to the convention for disjunctive selection.
results in Help
Figure 7.6: Results for “ribs” in New York at www.yelp.com.

There are fewer interfaces that allow conjunctive selection from the same facet, but a convention for those that do is to present the selections as ordinary links, as with the topic facet in Figure 7.7.
results in fcla
Figure 7.7: Results for “tax law” at www.fcla.edu.

The approach may make the user think that he or she is drilling down a hierarchy, but fortunately that misinterpretation is consistent with the narrowing effect of conjunctive selection.

Perhaps most importantly, we urge caution in combing disjunctive and conjunctive selection in the same interface. Users who can understand such a complex process will be better served by the ability to construct Boolean queries at a command line.

A rule of thumb is that facets that are typically singly assigned to documents (e.g., brand, document type) work well with disjunctive selection, whereas facets that are often multiply assigned to documents (e.g., consumer electronics features, topic) work well with conjunctive selection.

[pgwillia]

• Many examples https://www.smileycat.com/faceted-navigation-design-gallery/2/
• More examples http://ui-patterns.com/patterns/LiveFilter/examples
• One gmail style search example implementation http://documentcloud.github.io/visualsearch/
• thoughtful analysis of search/filtering for mobile https://medium.com/@thierrymeier/filtering-and-sorting-best-practices-on-mobile-61626449cec

[pgwillia]

Example from Crate & Barrel

This is the style that would work if there wasn't a lot of options within a filter category.

Menu for categories/taxonomy

Filters are ANDed together

Can choose criteria which are ORed together

[pgwillia]

Atlassian Jira deals with filters that have a lot of content.

You can select multiple options that seem to OR values together. Each click results in an automatic update of the content in the background. Breaks the back button browser functionality.

[pgwillia]

From https://baymard.com/blog/horizontal-filtering-sorting-design

In short: our usability study showed that a horizontal filtering and sorting toolbar is only appropriate for certain types of e-commerce sites – yet for those sites, it can significantly outperform the traditional left-hand filtering sidebar.

it only works well for industries and site types that naturally have few filters.

Specifically, make sure that:

• Filtering values are implemented as a custom drop-down interface, that
• Allow multiple filtering values of the same type to be selected,
• Auto-apply and live-update the product list as each value is clicked, and
• Display any applied filtering values outside the drop-down.

• Wayfair https://baymard.com/ux-benchmark/case-studies/wayfair/design-examples/2738
  
• Newegg https://baymard.com/ux-benchmark/case-studies/newegg/design-examples/2746
  
• Sears Brand=Levi's&Brand=NYDJ https://baymard.com/ux-benchmark/case-studies/sears/design-examples/2698
  
• L.L. Bean &prefv1=Corduroy|CoolMaxhttps://baymard.com/ux-benchmark/case-studies/ll-bean/design-examples/3322
  
• Target https://baymard.com/ux-benchmark/case-studies/target/design-examples/2686
  
• Macy's https://baymard.com/ux-benchmark/case-studies/macys/design-examples/3358
  
• Nordstrom &size='2%3Aregular10~~7'|'2%3Aregular12~~8' https://baymard.com/ux-benchmark/case-studies/nordstrom/design-examples/2682
  
• Amazon https://baymard.com/ux-benchmark/case-studies/amazon/design-examples/3150
  
• Musician's Friend - the interesting thing here is checkbox for OR radio button for AND https://baymard.com/ux-benchmark/case-studies/musicians-friend/design-examples/3389
  

[pgwillia]

jupiter/app/models/jupiter_core/search.rb

Lines 40 to 42 in 26c3624

	values.each do |value|
	fq << %Q(#{key}: "#{value}")
	end

jupiter/app/models/jupiter_core/search.rb

Line 51 in 26c3624

fq: fq.join(' AND '),

https://lucene.apache.org/solr/guide/6_6/the-standard-query-parser.html#TheStandardQueryParser-BooleanOperatorsSupportedbytheStandardQueryParser

The OR operator is the default conjunction operator. This means that if there is no Boolean operator between two terms, the OR operator is used. The OR operator links two terms and finds a matching document if either of the terms exist in a document. This is equivalent to a union using sets. The symbol || can be used in place of the word OR.

To search for documents that contain either "jakarta apache" or just "jakarta," use the query:

"jakarta apache" jakarta

or

"jakarta apache" OR jakarta

[pgwillia]

Bread crumbs could group filter category values with a common background and border, but seperate values to remove individually.

There are a lot of considerations for facet navigation.

• side panel vs top
• show all options always vs show currently displayed + show all reveal button
• each click updates the results vs select + apply to update
• mixing AND (radio button) & OR (checkbox) vs uniform experience where all facets behave the same

[weiweishi]

Dev team is going to review the options and adding comments to the tickets re: recommended solutions.

[weiweishi]

@murny will chime in on the UI design based on @pgwillia's initial investigation

[murny]

Original Goal

As a user, I would like to be able to select multiple options in the author facet category, and
I would like the search logic to be "OR", so I can select same author with the variation (Jane Doe or J. Doe or Jane M. Doe etc)

Initial investigation on UI options, and Solr configuration that would enable the use of "OR" instead of "AND"

What we currently have

• Search results are shown, with facets on left side column.
• Can click on any "checkbox" (checkbox in quotes as its actually a link styled with fontawesome to appear like a checkbox) to narrow search results by Facet selection. Similar with limiting by Year, you can hit the "Limit" button.
• Once facet item clicked, we sent a get request to backend and reload a fresh page
• Fresh page has search results narrowed by facet item. Facets on side left panel have been rearranged, where selected facet is now first facet shown in list. For the selected facet it only shows the one selected item within facet which is now showing as a checked checkbox. Finally above the search results a "selected filter" button showing currently applied facets is shown. Clicking on this button removes the selected filter and refreshes the page showing the results without this facet being applied.
  
  Same events happen above on mobile, only instead of a left sidebar, we have a "Filter results" button which pulls out a side tray:
  
  

Simplest solution to achieve what we want

Ultimately we simply just want to be able to select multiple items within the SAME facet. When we do this, these items will be applied as an "OR" query in SOLR.

How to achieve this? Let's use the Author Facet in our example here.

• After clicking on a author, "Jane A. Doe" in the author facet, we need to render all the authors in the author facet and make them clickable again. We currently only showing the selected "Jane A. Doe" and hiding the rest.
• When clicking on an additional author, say "Stephen A. Smith", we need update the results by "OR"ing these two authors together, while "AND"ing any other facets that have been applied. We will need to append "Stephen A. Smith" to the URL as an additional author facet.
  • Rails has a way to make these query params show up as an Array in the controller, which I'd recommend following. Which looks like we are already doing? For example the query param would look like this in ERA: facets[all_contributors_sim][]: Chopoidalo, Cindy which means by adding another author to it, facets[all_contributors_sim][]: Jane, Doe we get an array back such as params[:facets][:all_contributors_sim] => ["Chopoidalo, Cindy", "Jane, Doe"]. This should make things much easier for ourselves
  • We will most likely need to do some work here in the backend, such as jupiter/app/models/jupiter_core/search.rb as Trica mentioned above. We need to take this array and apply "OR" between each item within the array.
• Results get updated accordingly by applied facet items. Facets items being applied need to be shown in left side panel accordingly. Applied facet buttons need to be updated to show multiple OR facet items.

Basically above is really not much different then how we currently doing "Subject / Keyword" with the exception that these are being applied as "AND" instead of "OR".

From the UI point of view though they are doing exactly what we want:

and query params are coming in as an Array:

We can select multiple of them within the same facet, however since they are being "AND", each item you select reduces the number of items and their counts. It should work like Newegg, where counts remain constant unless your "AND"ing with another facet.

Possible Enhancements

• Applied Filters could show more information. Such as the facet they belong to, and if we "OR"ing this could be shown much better as well. Newegg does a good job here.
  Below you have no idea what these applied filters correspond to what facets:
  
  But Newegg makes this very easy to understand:
  
  "Reset" button is also a nice touch to reset all filters

• Use labels for our filters/sort by. As you see from above example you know what these buttons correspond to on the Newegg site as its clearly labeled "Filters". We can improve our "sort by" as well by using a label and the dropdown, it will make the default sort more clearer too. As right away you get to see the sort being applied. Currently its not clear what the default sort is being applied to the list as it just shows "Sort by". Might be good for accessibility too.
  
  vs
  

• It might make it easier if the facets were a real form, with real checkboxes instead of links and fontawesome checkbox icons? Might clean up quite a bit of logic within our view helpers, etc. This also applies to the "Sort by" dropdown which is just a dropdown of links. Would give a UX more like other big ecommerce sites linked above which is what users are more familiar with.

• Really like Neweggs solution to this problem, lots of ideas we could potentially borrow from them. Another one is any Shopify site (Staples.ca comes to mind but they "OR" everything even between facets) since its based on Ruby on Rails.

• Tricia added a lot of interesting articles/ideas above with regards to different solutions for mobile (sliding tray vs full page modal, etc), top horizontal facets vs sidebar vertical facets, and many more examples. All of these could be explored in more detail and experimented with. Discovery Phase 2 mockups implement a top horizontal facets implementation, could be another reason to go that way (so we can share and reuse code between the two sites and users will have the same experience across UofA Library websites).

Possible Concern

• With users able to OR as many items within a facet, this could result in very large URLS. For example simply selecting every Subject/Keyword and every facet I could from the above example, I got my URL to about 1020 characters:
  
  With the added ability to OR facets, this could result in very large URLS. It sounds like chrome has a soft limit of 2048 characters (2 MB) for their URL Length. Looks like a few ecommerce sites will compress their URLs somehow (Amazon, Newegg, etc). Others will limit the number of items in a facet being applied (Best Buy only allows 2 items within a facet to be applied at a time).
  • This point sounds like its mute. As Shopify works exactly like the way we are doing it. On a Shopify website (Staples.ca for example), I easily got my URL length over 3500 characters by applying every facet I could and everything still worked just "fine" (until i tried to refresh it and it became unresponsive...) 🤔.