Build functional prototype for R&S search filters research

[davidmpickett]

Quick links

• Prototype factory
• Clickable prototype

General

• Mobile version
• Is desktop needed?

Landing page

• Search interface
• Top task links go to corresponding article & canned search pages
• Benefit and Topic cards/links go to corresponding search results page(s)

Filter drawer

• Selectable/unselectable checkboxes within filter accordions
• Open / closable accordions
• Collapse all / Expand all works for accordion group
• X button to close Filter Drawer
  • [Stretch] - have it reset checkboxes to state they were in when drawer was opened (aka discard changes)
• "Filter By" heading
• Clear All button
  • Unchecks all check boxes
  • Sets all filter chips to hidden
  • Reset heading counters
• Apply filters button
  • Some type of logic that connects these selections to possible search results pages
• ??? - Should buttons remained fixed while accordions scroll?

Filter chips

• Removable on search results pages
• Clear all link removes all filters
• Clickable on individual article pages
• ??? - Wrapping of short chips for multiple on one line?
• ??? - Exact positioning of clear all link

Search results pages

• Canned search
• Single topic example
• Single benefit example
• Single audience example
• Various combinations of multiselect

Article pages

• top links from landing page
• specific target pages for tasks

[davidmpickett]

I couldn't help myself and so I made a proof of concept of interactive checkboxes https://www.figma.com/proto/cg8VNnxFOxw7lb10FVHpi5/Resources-support?node-id=504-6762&node-type=frame&t=H3f92G4wis7WfCE9-1&scaling=min-zoom&content-scaling=fixed&page-id=504%3A6304

[davidmpickett]

End of Sprint Update
Pulled in and did quick proof of concept for interactive core. Still a lot of work left to do

[jilladams]

This will continue in Sprint 17, Dave is not here a full sprint, and this is likely to roll into Sprint 18.

[davidmpickett]

Got the core logic of the filter drawer working:

• Checkbox state is stored in variable
• Accordion header dynamically updates to reflect number of checkboxes selected
• Filter chips show or hide based on checkbox state
• Accordion is openable and closeable

filterprogress.mov

[davidmpickett]

Filter Drawer and linked Filter Chips are built out. Shared with @mmiddaugh and @FranECross in with two clarifying questions Slack

https://www.figma.com/proto/cg8VNnxFOxw7lb10FVHpi5/Resources-support?node-id=661-18[…]ing=fixed&page-id=504%3A6304&starting-point-node-id=504%3A6762

[davidmpickett]

Today's progress:

• Dismissing a filter chip now unchecks the corresponding checkbox
• Spacing between filter chips is now consistent no matter how many chips are shown/hidden
• Collapse and expand all functionality added to Accordion Group
• Filter chips reorganized to holistic alpha sort
• Clear all button unchecks all boxes and hides all filter chips

[davidmpickett]

End of Sprint Update:

• Filter Drawer is mostly complete
• Basic proof of concept to link Results visibility to Filters is in place with one result
• Reordered filters per product docs
• Made buttons in filter drawer stay in place while other content scrolls