Filtering is an action suitable for PPI whenever a large amount of information is presented. This action allows the user an option to display only a specific selection of PPI content while hiding the rest.
Example
Samantha A. Morris, PhD
Assistant Professor of Developmental Biology and Genetics
- Phone: 314-747-8618
- Email: s.morris@wustl.edu
Lilianna Solnica-Krezel, PhD
Alan A and Edith L Wolff Distinguished Professor and Head of Developmental Biology
- Phone: 314-362-8768
- Email: solnical@wustl.edu
Design Considerations
Filtering is used in the PPI container and provides clickable links to show one or more categories of information. Red is used for the text color as the clickable sign that an action will occur.
A selected state shows what information is being displayed. Since its link does not need to be clicked, a dark gray background with white text is shown instead of red. This design convention for selected states is carried over to other areas of the site as well.
Best Practices
- Use filtering to display large sets of information, especially when multiple categories are present.
- The default filter category should be “All,” which displays everything. This allows the user to decide what they would like to filter.
- Be consistent when labeling filter categories. Use concise text to describe each category.