Posted by & filed under Forms, PatternFly.

Description

 

After researched the quick filter using scenario and the products, Finding out that we could separate the filter function into Quick filter and Advanced filter in order to meet the different needs. 

The Quick filter is suitable for commonly used situation.It is fast, simple and obvious. It is used in the common scenario and easy to apply. 

Here is the Quick filter design: https://blog.patternfly.org/quick-filter-improvement-for-the-current-filter-pattern/

In some cases, for complicated using scenario, the quick filter can not meet the user’s need. Especially for those products that have large amount of criteria and multi select options. Developers of the products can only meet the needs by adding on more functions. We could design a new filter pattern to meet the requirement.

 

Overview

 

Advanced filter is suitable for users who want to:

  1. Quickly filter the data from a large amount of criteria
  2. Fast searching for data from a long list of value
  3. Combine multiple filter criteria into a single filter
  4. Save the custom filters that can be recalled and reapplied at another time

Here are some product examples:

1. Errata Tool

 

User : Developers / QE

Job: Working and cooperating on a certain type of advisory until the rpm package delivered to the customer.

Pain point: 

The user needs to filter and watch a certain advisory. When finish part of the work of an advisory, the user needs to deliver it to another department for review. During the review process, the user will work on other advisories. After review, the user will spend some time to configure the filter again to search the advisory to continue the work.

Since the configure field is too much, the user would like to have a function to save the custom filters that can be recalled and reapplied at another time. Currently, the user can only favorite the advisory page in browser.

 

 

 

2. Forman

 

User : Administrator

Job: Managing Linux systems.

Pain point: 

The user needs to filter and watch a certain Linux system. The user takes time to filter out the data from the multi categories. The common search field can not meet the needs well. The user needs a more accurate and visualized filter. Currently, the user can type in a rule to search.

3.Tendrl

 

User : Administrator

Job: Unify the portal of ceph and gluster storage systems.

Pain point: The user needs to filter and watch a certain storage system and filter out the data from a multiple filter criteria. Currently the filer can only filter from the single filter criteria.

4.Beaker

 

User : Developer

Job: Renting hardware.

Pain point: 

The user needs to rent a certain hardware. When filtering the hardware, the user needs to read through a long list of values and also fill in several criteria. The user would like to quickly get the correct value from the long list and to simplify the filter interaction.

 

More research could be found in google doc: https://docs.google.com/document/d/1Pw61shgHM2RmoPwsY1p0CgjdLa7pix_aCOXPrUXsy54/edit#

Design

 

Advanced filter is based on the current quick filter pattern and provides a filter solution that contains a group of dropdown menu and a custom selector.

The dropdown menu group includes single selector, single selector with search and multi selector.

The custom selector contains a button to create custom filter and also a dropdown menu for saved custom filter. It is used for users to define their own filters and save them that can be recalled and reapplied at another time.

Users could choose to implement either of the functions based on their own requirement.

Single dropdown selector

 

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. Single dropdown selector: Use when there are less than 8 possible values. The filter is activated when the user click the dropdown.

Single dropdown selector with search

 

  1. Single dropdown selector with search: Use when there are more than 8 possible values.

 

Multi dropdown selector

 

  1. Multi dropdown selector: Use when there are multiple filter criteria to search in a single filter. Click the checkbox to check or uncheck the filter. Clicking the “X” of active filters could also remove the multi filters.

Custom selector

 

The custom selector contains a “create a filter” button and a “My filter” dropdown selector. When users haven’t save any filter before. The “My filter” button will not show unless users save one.

  1. Change the name: Use when saving the custom filter. Click the field to change the name and click “Save” button to save the filter. After clicking the “Save” button the filter is activated.
  2. Cancel: Use when canceling the custom filter.
  3. Apply the custom filter: Use when applying the custom filter but not saving it.

 

  1. My filter: Use when reapplying the saved custom filter.
  2. Delete button: Use to delete the saved custom filter. When hovering one of the filter, the delete button will show.

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

 

 

9 Responses to “Advanced Filter”

  1. Great work! I have a couple of questions:
    * Does the “Attribute Selector” (with multiple attributes) offer the same functionality as using multiple “Single dropdown selector with search” widgets? If so, are there usage guidelines for selecting one option over the other, or when it’s useful to present both?
    * Custom selector: Are the options in the “Create Filter” dialog the same filter options that are presented in the toolbar? If so, then why not just use those and then save the query as a custom filter? Or is this a widget to show/create a new filter that is not already being presented in the toolbar?
    Thanks!

    Reply
    • Melody Zhong

      Hi Liz, Thank you for your reply.

      *Its a good question. Ideally, the Attribute Selector presents different things from the “single dropdown selector with search”. If the Attribute Selector can meet the needs. Users do not need to add the single dropdown selector. The single dropdown selector is used when there are more values that cannot be presented in the Attribute Selector (For eg, in example 2, Forman, sometimes users want to search a certen key, and the key value is not in the table. Its in the detail page and hard to find. But its a quite important value. And the key list might be very long.)

      * Custom selector has the different options than that are presented in the toolbar. You can see the “utilization” and “host name” are not in the filter. They are actually from the header of the table below the filter. Here just give an expamle when the filter cannot meet the needs. Users could define their own filter. The content of the custom filter depends on the certain product of how much criteria they have.

      Reply
  2. Hi Melody,
    Please forgive all of my questions, but I want to be sure that I understand because we’re working on a similar issue. So a few more questions:
    * Attribute Selector: Judging by your response it sounds like the text input field in the Attribute Selector is truly a search field, rather than a type-ahead for a list within a category?
    * Custom selector: OK, so it sounds like that is for adding and customizing filters based on what’s available in the table data? We’re looking for a means to save a filter/search query as a filter preset option (more similar in spirit to the toggle buttons that you have on the quick filter.)

    Reply
    • Melody Zhong

      Hi Liz
      * For the Attribute Selector, the search field is used together with the filter dropdown. The search filed is not a gernal search field. User could choose a value from the dropdown and type in a key word. The search result will be : “filter name: key word”. It is the same as the current patternly filter please refer to http://www.patternfly.org/pattern-library/forms-and-controls/filter/

      * Custom selector: Yes. And based on the data that user needs. It doesn’t have to all come from the table data. (for eg, tags, labels, etc.) Does the quick filter meet your requirment or you may need a better solution?

      Reply
  3. Suzanne Hillman

    Hi Melody!

    Cool idea!

    I keep getting stuck on the pain point descriptions, though. They feel too specific to the tool you want to create, rather than describing pain points and going from there to possible solutions.

    For example, in the developers and QE needing to work together on errata example, your pain point starts with a user needing to filter and watch a certain advisory. Maybe they do, and maybe they don’t.

    That’s too specific: I think in this case, a user needs to know what advisories they need to work on, their priority order, and what state they are in; and be able to pass them back and forth with other departments. They probably also need to know which advisories they specifically need to work on, rather than their entire group, so there’s less chance of repeating someone else’s work.

    It is entirely possible that an advanced filler and saved filters will be the right solution! But part of the point of the description of a pain point is that there isn’t only one possible solution.

    Maybe instead of an advanced filler, and saving filtered states, you want an interface that presents a user a list of errata that they:
    1) could start work on, in priority order, and no one else in their group has yet touched;
    2) worked on, but are currently in process in another department;
    3) worked on and is back in their department, in priority order
    4) haven’t touched, but is back in their department, in priority order, and they could help somehow.

    Do you see what I’m trying to say here? I’ll take a look at the rest of the post soon, but I kept getting stuck on that and only just had the words to explain what I was getting stuck on.

    Reply
    • Suzanne Hillman

      Hi again! I’m not entirely sure what part of this post you’re looking for feedback on: ways to improve the usability of the mockups you’ve created, confusions about how the advanced filter works, something else entirely? I’m hoping to focus my attention before I start taking about something unrelated to what you specifically worked on.

      Reply
    • Melody Zhong

      Hi Suzanne, thank you very mucn for your advice!
      I have comeup with an new design for the filter issue. It is more generic rather than going into a certain user case. As you said, it is only one possible solutions. Would you like to help me to do some a user testing on that? Thank you !

      Reply
  4. Regarding Custom filter/ Create Filter – Typically as a user I won’t be creating a filter upfront and save it ..basically I will be saving the filter that I might have already applied and save that for future.

    Reply

Leave a Reply

(will not be published)