Facets

Summary

• Grid. The .wui-facet is always part of a grid. Make sure you use the modifier .wui-gird--sm and the right utils for paddings and margins.
• Collapsing. Every facet is collapsable.
• Combine multiple values. Within a facet, all filter values are linked with an OR logic. Two facets, on the other hand, are linked by an AND logic.

Multiple selection facet

• Search. For facets with more than 8 items there is a search. The search is always server-sided.
• Heights and Scrolling. The section with the selected buckets is as high as it gets. The bottom section is usually high enough to fit 10 buckets, but this height may vary from case to case. If there are more than 30 buckets in the lower section, additional buckets are loaded gradually via endless scrolling.
• Sorting. The buckets are sorted in descending order by number of hits or alphabetically.
• Checkboxes. Zero, one, or many filter values can be selected. These are linked to each other by means of the OR logic. Visually, this functionality is indicated by the use of checkboxes.
• Default selection. No checkbox is selected. Since no selection or restriction has been made yet, the resulting set includes all filter values.
• Number of hits. Buckets with (0)-hits are not displayed.
  In special cases it can happen that a bucket has (0)-hits. Namely, if the search result is subsequently restricted by the facets to such an extent that facets that have already been set are no longer in the hit list.

For each selected option there is a .wui-tag which can also be used to deselect the option. Labels

Drilldown facet (single selection)

• Search. Unlike the other facets, this one is not searchable.
• Structure. This facet is basically a .wui-drilldown inside a .wui-panel
• Height. The facet is usually high enough to contain all items, so no scrolling is needed.
• Sorting. The items are sorted in descending order by number of hits.

In the following example, all statuses are displayed at once. The default items and the items for navigating back and forth are never displayed at the same time. They are only shown here for the sake of clarity.

Single selection facet

We essentially distinguish between two types of single selection facets.
Self-enclosing options and The real mutually exclusive options.

Some points that apply to both types of single selection facet:

• Search. The list of filter values should not be too long. For the rather short list of options a search is usually not needed.
• Height. The facet is usually high enough to contain all items, so no scrolling is needed.
• Radio button. There has to be excactly one selected option. Visually, this functionality is indicated by the use of radio buttons.
• Default selection. By convention, one option must always be selected. This way the user has the possibility to return to the original state - even after a selection has been made. To ensure that all items are visible at the beginning, the "all options" option is selected by default.
• User Selection. The selected option (as opposed to other facets) is not moved to the top position - it stays where it is.

Self-enclosing options

As usual with radio buttons, only one option can be selected. However, this one selected option includes other options as well. Typical examples are:

• A rating facet with options like
  "3 stars and more 4 stars and more 5 stars"
• A delivery time facet with options like
  "1 workweek and faster 3 business days and faster"
• A delivery range facet with options like
  "50km and closer 25km and closer".

• Sorting. The options are sorted from detailed to general. The number of hits increases as each more general option includes the previous one. The most inclusive option is always at the bottom.
• Number of hits. Buckets with (0)-hits are displayed so that the user is always aware of all the possible options. (e.g. "Did I get a new task in the last 10 days?").

The real mutually exclusive options

Facets with exactly one possible option are rather rare. For the vast majority of facets it makes sense that the user would like to select multiple values or include more specific values. An exception is a facet of the Bulletin Board board, where a choice can be made between "Search" and "Offer".

• Sorting. In this case, the options are sorted alphabetically. The "all options" option is at the top and selected by default.

When it comes down to a "yes-no-selection", we always use a single checkbox.