Posted by & filed under Forms.

Description

 

In the previous discussion about the quickly filtering for dataset, we researched the quick filter using scenario and the products (oVirt / CloudForms  / RH Customer Portal / Errata Tool / Openshift), Finding out that we could improve the current filter pattern to meet the requirement.

 

The quick filter is suitable for commonly used situation. It is based on the current Patternfly filter pattern but adding on a group of toggle button. We also changed some of the design details of the current filter pattern.

Current filter pattern can be found here: http://www.patternfly.org/pattern-library/forms-and-controls/filter/

 

Overview

 

Quick filter is a component that enables a user to quickly apply stackable filters to a table or page full of objects.It should be fast, simple and obvious.

Quick filter is displayed as a component of the Data Toolbar with a quick searching function and a toggle button group. The toggle button group is used to filter the important certain value.

 

Product example:

Design

 

Quick searching Filter

 

The quick searching filter remains the same as the current filter pattern.

  1. Attribute Selector (optional): Contains a list of the possible attributes by which to filter.
  2. Filter Query Field: Use when there are more than 15 possible values. The user’s filter query is entered here. The filter is activated when the user presses the “enter” key and all objects that do not have a match to this value are hidden.
  3. Filter Query Dropdown (optional): Use the filter query dropdown when there are less than 15 possible values to allow the user to select from a known and fixed value list (e.g a list of statuses). The filter is activated when the user selects a value. Objects that do not have this value are hidden.

 

Active filters Bar

For the active filters bar, we changed some of the design. We move the “Clear All” button to the far left. Compare with placing the button to the far right,

it is a better way to avoid the  “Clear All” button from getting out of the user’s focus when the active filters list becomes very long.

Also, the “Clear All” button will show only When there are more than one filter activated. If there is only one filter that is activated, the “Clear All” button is hidden. 

  1. Active Filter: Quick Filters are labeled with the attribute and value used to create them. Clicking the “X” in the box will remove the filter. New filters appear to the right of existing filters and are highlighted briefly upon appearance. If no active filters exist, the active filters bar is hidden.
  2. Clear All Filters: Clicking this action removes all currently active filters.

Toggle button group

The toggle button group is a new adding on. Button groups is a commonly used and obvious way to display a filter.

  1. Toggle Button Group: It can quickly filtering the most commonly activated or the most important certain criteria. The toggle button group filter is preloaded. It is not like quick searching filter, which is activated after user clicking the enter key.  The number of the toggle button group is better less than four.

More research could be found in google doc: https://docs.google.com/document/d/1sDJvSZztOj6lQwirbjupMYfesmjaRnB-sfXVn2gf-Rw/edit#heading=h.r04qxhveoov

More design details could be found in Invision: https://redhat.invisionapp.com/share/XABBZKPJC#/screens/228445030_Quick1

2 Responses to “Quick filter: Improvement for the current filter pattern”

  1. Suzanne Hillman

    Quick filter seems like a really useful thing, I agree!

    I’m not entirely sure why moving the ‘clear all’ button falls into the same bucket as quick filter, though. Is it just something that came up during research as being more likely to be a problem when you’ve got the additional filters in quick filter?

    Reply
    • Melody Zhong

      It is an improvement for the current filter. I just move the button from the top right to the top left. It came up during the research.

      Reply

Leave a Reply

(will not be published)