Filters

Owned by Sara Greenwood, created
Last updated: Apr 06, 2022
3 min read

Status

In progress

Impact

High / Medium / Low

Driver

Festivals & Events calendar

Approver

Contributors

@Uni (Hwa Young) Oh @Derek Matthew @Joseph McLarty @Sara Greenwood

Informed

Due date

Resources

 Relevant data

 Background

Multiple styles for filters are being used on http://toronto.ca. This is to review what is currently used and then to define the standard.

Examples

Description

Example

Description

Example

Used on Quick Maps

Filter is collapsed by default (can be changed)

  • Text is blue link style

  • Expand button is blue circle with white plus sign

When expanded:

  • Grey background

  • Labels with blue background, white text

  • Drop-downs, checkboxes, or “buttons” for filters

With Active Filters:

  • Ability to clear all filters or remove individual filters

Filter collapsed by default
Cultural Hotspot Tours – City of Toronto

 

Used on Nuit Blanche History site

Filter is collapsed by default

  • Text is blue link style

  • Expand is a grey + on right hand side, matching accordion style

When expanded

  • White Background

  • Labels are bold text, no background

 

 

 

Used on Festivals & Events Calendar

Fits within Right-rail

Not collapsed

Stays visible as the list on left scrolls

 

 

Used on eFUN

 

 

Search Results

  • Right-rail space used for additional filters and suggestions

 

“Overlay” filter used on Vision Zero

  • Sidebar is collapsible

  • Mix of filters (drop-downs, toggles)

  • Filters are grouped within accordions

 

 

 

Recommendation

Create design standard for 2 types of filters: full filter and a sidebar/overlay filter. Initial design to concentrate on the full filter:

Collapsed View

 

Expanded View

 

Filter Types:

  • Drop-down

    • For single selection

  • Checkboxes

    • For multi-select

    • Currently may be styled as traditional checkboxes or as selectable “buttons” (e.g. cooling centres)

  • Toggle

  • Start (Date/Time) to End (Date/Time)?

  • Calendar?

 

Clear Filters

 Options considered for page filter

 

Option 1

Option 2

 

 

Option 1

Option 2

 

Description

Quick Map style

Nuit Blanche style

Other?

Pros and cons

  • Established pattern

  • Collapse/Expand design is distinct from accordion design

  • Clear Filter is easy to use

 

  • Some design elements are not consistent with standards - square corners, font sizes, spacing of elements

  • Having a single input per field set can look “heavy” depending on types of inputs.

  • Design is consistent with standards for forms

  • Clean design

 

  • The +/- being on the far right may be hard to see when only a single collapsed element

  • It isn’t obvious that the “Clear” button beside the search box resets the filters

  • No option to remove an individual filter

 

Estimated cost

SMALL

Medium

 

 Action items

Decide design for collapsed with filters applied - based on current design for QuickMaps
Need decision on using using Icons on Checkboxes - recommending to remove from checkboxes and create a separate legend for maps.

 Outcome