As a user, I want to select 1 or more filters to facet search results #119
Labels
B15.1
i&t.skip
Skip I&T of this task/ticket
p.must-have
requirement
the current issue is a requirement
sprint-backlog
💡 Description
From the initial designs, it was not entirely clear how to implement multi-select faceting. Need improved, detailed workflows for this.
Engineering Details
Generally, the idea for the multi-select faceting is when one value of a particular
facet type
is selected, thatfacet type
list is "frozen". The counts associated with the values in the list may change, but the values in the list remain constant in order to allow for multi-select.Key principles:
page type
facet field should NOT be multi-select (new development) - page types have pretty clear delineations where when a user selects one, sending them down that path makes sense(0)
displaying next to the facet field value.Success Criteria
The following scenarios walk through a few examples of utilizing the multi-select faceting feature. We will ignore the
page type
facet field for the time being since it is fairly straightforward how that applies. Shorthand/abbreviations for the queries and names below for simplicity. Use LIDs and the full names in the implementation.Scenario 1
fq=ref_investigation:msl
msl (167)
and the rest havename (0)
fq=ref_investigation:msl OR ref_investigation:m2020
msl (167)
andmars2020 (197) and the rest have
name (0)`instrument, targetfq=ref_investigation:msl OR ref_investigation:m2020&fq=ref_instrument=mars2020.sherloc
msl (167)
andmars2020 (197) and the rest have
name (0)`mars2020.sherloc (25)
fq=ref_investigation:msl OR ref_investigation:m2020&fq=ref_instrument=mars2020.sherloc OR ref_instrument=msl.chemcam
msl (167)
andmars2020 (197) and the rest have
name (0)`mars2020.sherloc (25)
andmsl.chemcam (20)
Additional Information
Other key principles to keep in mind when implementing faceting (from ChatGPT):
• Clear Labels and Organization: Use clear and intuitive labels for facets and organize them logically (e.g., grouping related facets together).
• Multi-Select Capability: Allow users to select multiple values within the same facet (e.g., selecting both "Red" and "Blue" under the "Color" facet).
• Checkboxes for Selections: Use checkboxes or toggles for selecting multiple options, making it obvious that users can select more than one.
• Search Within Facets: If there are many options within a facet, provide a search bar to quickly filter facet values.
• Faceted Search Preview: Show the number of results for each facet value (e.g., "Brand A (24)"), allowing users to see the impact of their selection before applying it.
• Real-Time Filtering: Update the results and available facet options in real-time as users make selections, ensuring a smooth and responsive experience.
• Adaptive Facets: Dynamically adjust the availability of facet options based on current selections to prevent dead ends (e.g., disabling or hiding facet values that have zero results).
• Breadth-First Approach: Consider showing all facet values initially but indicate which have results (or fade out options with zero results) to guide user choices.
• Indexing and Caching: Use efficient indexing (like Elasticsearch or Solr) and caching mechanisms to speed up search queries, especially for large datasets.
• Lazy Loading Facets: Load only the most relevant facets initially, and use lazy loading for additional facets or options when needed.
• Debounced Queries: When implementing search-as-you-type within facets, use debounced queries to reduce the number of server requests.
• AND vs. OR Behavior: Clearly define how selections within and across facets work:
o Within a Facet: Use an OR operation (e.g., selecting "Red" and "Blue" in "Color" should show items that are either Red OR Blue).
o Across Facets: Use an AND operation (e.g., selecting "Red" in "Color" and "Cotton" in "Material" should show items that are both Red AND Cotton).
• Negation Options: Consider allowing users to exclude certain values (e.g., "Not Blue"), which can be useful for narrowing down results.
• Selected Facet Indicators: Clearly show which facets are active, using highlights, bold text, or different background colors.
• Removable Facet Chips: Display selected facets as removable chips or tags at the top of the search results, allowing users to quickly deselect them.
• Reset Option: Provide a "Clear All" button to reset all facet selections easily.
• Scalable Data Models: Ensure that the database or search engine is designed to handle large volumes of data and complex queries.
• Configurable Facets: Allow admins to configure which facets are displayed, their order, and their default behavior (e.g., collapsed vs. expanded).
• Prioritization of Facets: Highlight the most relevant or popular facets based on user behavior or business priorities.
• Responsive Design: Ensure the facet panel is responsive and optimized for different screen sizes. On mobile, consider using collapsible sections or sliding panels.
• Keyboard and Screen Reader Support: Implement keyboard navigation and screen reader support to ensure the faceted search is accessible to users with disabilities.
• Track User Interactions: Capture analytics on how users interact with facets (e.g., which facets are most used) to refine the experience over time.
• A/B Testing: Experiment with different facet arrangements, labels, or behaviors to determine what works best for your audience.
• Feedback Mechanism: Provide a way for users to give feedback if they can't find what they're looking for, which can help identify gaps in the facet options.
By following these principles, you can build a robust and intuitive multi-select faceted search that enhances the user experience, drives engagement, and improves findability.
The text was updated successfully, but these errors were encountered: