Skip to content

UX: Dashboard - Filtering

About

As the groupoptimize group is working on migrating existing reports and dashboards to the shared dashboard framework there is a need to define how filters should work at a page level and panel level.

Constraints to keep in mind:

  • Dashboards need to support both page and panel level filters at once
  • In certain cases, not all panels in a dashboard will be affected by the page level filter

Currently we only have dashboards that are either all pre-filtered and have no page-level filters (example 1) or have dashboards where all panels are affected by the page-level filter (example 2).

Questions:

  • How does the UI communicate when page level filters are updated?
  • How do we indicate if a panel has not been affected by applied filters?

Summary of problems:

  1. Unclear filtering hierarchy between global dashboard filters and individual panel filters
  2. Missing rules for handling cases when panels have fixed filtering requirements or filtering limits
  3. Uncertainty whether date range filtering should operate at dashboard level or panel level

Each of these problems requires resolution to create a coherent, usable filtering system that meets user needs while maintaining technical feasibility.

Proposal

Considering the guidelines below...

  • Prioritize page level filters.
  • Panels that are not affected by the page level filter should have a visual indication. In this case, we use UI text to say: "Last 30 days".
Dashboard with only page-level filter Dashboard with page-level and panel-level filters applied
filtering-dashboards-page-level-only filtering-dashboards-page-level-and-panel-level

Filter Hierarchy:

  • Page-level filters first: Apply broader filters at the page level to set the overall context for data analysis (Time period: Last 30 days)
  • Panel-level filters for specifics: Use Panel-level filters to see specific details within the broader context set by page filters (Time aggregation: Day, Week, Month). 
Example of page-level and panel-level working together
filtering-dashboards-page-level-and-panel-level-usecase

Checklist

  • Create proposals
  • Solicit feedback
  • Iterate on feedback
  • Share out final proposal to UX and data
  • Open MR to update Pajamas guidelines

Guidelines and best practice

Expand

Filter Hierarchy:

  • Page-level filters first: Apply broader filters at the page level to set the overall context for data analysis (Time period: Last 30 days)
  • Panel-level filters for specifics: Use Panel-level filters to see specific details within the broader context set by page filters (Time aggregation: Day, Week, Month). 

User Experience:

  • Visual indicators: Clearly indicate which filters are active on the page and within each panel using visual cues like UI text or icons. 
  • Filter interaction design: Ensure smooth transitions between page and panel filters, avoiding unexpected data changes when applying multiple filters. 
  • Limit filter options: Provide a manageable number of filter choices to prevent user confusion. 

Data Exploration and Insights:

  • Prioritize relevant filters: Highlight the most important filters based on the user's primary analysis goals. 
  • Dynamic updates: Ensure data visualizations update seamlessly in real-time as filters are applied. 

Design Considerations:

  • Clear labeling: Use descriptive labels for both page-level and panel-level filters to enhance understanding. 
  • Logical grouping: Organize filters into categories based on data relationships for easier navigation. 

Examples of good practices:

  • Sales Dashboard:
    • Page-level filter: Select a time period (month, quarter, year).
    • Panel-level filter: Choose a specific sales region within the selected time period to see detailed sales metrics for that region.

Current use cases that need to be addressed

Edited by Libor Vanc