Consolidated Filter Component Delivers Sustainable Solution for Object Selection

Juniper Networks / Aug 2013 - Oct 2013

Overview

Too many existing filtering features were scattered throughout Junos Space Network Management Platform. In order to make object selection easy for all tenant applications of Junos Space, we consolidated existing features with flexibility and sustainability as our main design goals. A new pattern for object selection was introduced to ease large scale network operation.

Iterating quickly made it easier to absorb the feedback from stakeholders. Ad-hoc sync-up and brainstorming sessions with the development teams made validations of technical constraint in a timely manner. 

My Role

  • Design Lead
  • Ideation
  • Sketching
  • Wireframing
 

The Story

A typical inventory view in Junos Space looked like this:

Typical Inventory View in Junos Space Platform
 

How do you find a handful of devices you need from here? On a regular basis?

Existing Filtering Methods in Junos Space

Key Issue: A variety of ways to filter the list were scattered throughout the platform. 

 

A Unified Sustainable Filtering Component

Rather than simply dumping all existing filtering methods into one place, we chose a larger challenge. We decided to create an extensible component that could easily adapt to unique needs in different Junos applications. Each application could choose to use a selected subset of available filtering methods. We also wanted the component to take up as little screen real estate as possible.

 

Exploring and Weighing Options

From The Classic Radio Buttons

  • Pro: They could be easily added to workflows and easy to implement.
  • Con: It isn’t possible to filter columns with this approach in a way that did not take up excessive screen real estate. No filter combinations appeared to be feasible.
 

To the Filter & Search box Combo

  • Pro: Search box was the first thing users would look for. By combining with the existing filters, it could go well with both embedded workflows and inventory views. 
  • Con: Business stakeholders wanted to promote the newly implemented "select by tag" which will select any items that are automatically tagged by the system-generated tags. To differentiate it from the classic search by user-generated tags, we tried to introduce "Modern View" and "Classic View" filters before a search incurs. No one understood what they meant without explanations.
 

To the Filter Panel

  • Pro: It reused the space where the existing Tags panel was. Filter criteria "token" gave intuitive feedback of applied filters.
  • Con: It used up too much space on the screen. Some Junos applications had their own left panels inside inventory view so this would divide another segment on the screen. It did not fulfill the need of filter combinations.
 

To the Filter Bar

  • Pro: It reused the space where the existing Toolbar was. Filtering methods were stackable and accommodated dynamic combinations of filters (AND or OR). 
  • Con: This approach had an overly complex appearance. The dynamic addition of filters was not straightforward enough given the limited number of filtering options that were available.
 

FINAL SOLUTION: Object Selector, a modified filter bar

  • seamlessly blended with all inventory views and workflows in all Junos applications
  • stackable with existing toolbar
  • flexible combinations of filters by the choice of the application
  • "real estate" friendly
  • all filtering methods were shown by default
  • dynamic and dismissible filtering criteria tokens
  • extendable with ‘save filter’ option for future expansion - ‘filter management’ section in the user preferences for adding/removing more primary filtering method, saving selected filter sets for future reference, etc