Faceted Navigation: Vertical Stack

RSS

Solution Elements

Comments

Problem Summary

Users need to evaluate and understand the overall navigation space and see what's available at a glance.
Users need to refine their results to locate specific records or explore relevant subsets.

Usages

In applications where the primary means of navigation is through the selection of facets and values.
In simple faceted navigation applications (as opposed to complex analytical applications requiring aggregate views of the data and/or other complex Boolean queries).

Constraints and Challenges

Co-existence of local navigation menus, which need to work in combination with the faceted navigation menu.
Users may be hit with information overload if it appears that too many choices are available.
Disparity between the height of the faceted navigation menu and the height of the search result area can mean that the faceted navigation menu extends far beyond the search result area, or vice versa, and thus one or the other is no longer visible when scrolling to the bottom of the page.

Solution Elements

Expand All

Reserve a consistent salient location on the page for available refinements.
- For cultures where the reading direction is left to right, this will typically be on the left-hand side of the screen in a vertical stack.
- For technical/complex applications such as part locators or product configurators, it may be preferable to situate the navigation menu in another position and orientation, such as near the top of the screen and horizontally oriented.
Show More...

Provide a meaningful natural language label for the entire faceted navigation menu, e.g., "Narrow your results", "Narrow or expand your results", "Refine your results", etc.

Show More...

Provide a meaningful natural language label for each facet.

Show More...

Visually group facet labels and facet values using proximity, spacing/indents, color coding, etc.

Show More...

Visually distinguish facet labels from facet values using font variations, color, justification, etc.

Show More...

Select and present a subset of facets that align with the user’s likely task flows.
- Consider what users are likely to need in various contexts. Do not present all facet choices at once and overwhelm the user with irrelevant options.
- Display additional facets only as they become relevant. For instance, display options such as “suede, patent leather, etc.” for shoes only after the user has selected “leather” as the fabric choice.
Show More...

Arrange the facets in a suitable priority order, e.g., frequency of use or alignment with common task flows.
- Note that such priorities can be based on user needs and/or business policies.
- Ensure that high-priority facets and values are immediately visible to the user without scrolling.
Show More...

Truncate the number of values displayed within a given facet to an easily scanned list.
- Provide a visual or textual cue inviting users to view the remaining values within the facet (e.g., “View all” or “More”)
- Additionally, when the user has expanded the facet, provide a visual or textual cue inviting the user to “close” the facet (e.g., “View fewer” or “Less”).
Show More...

In general, it is preferable to sort facet values by record count to surface the most common values.
- However, when a long list of facet values is shown (e.g., a list of brands for a popular product on an eCommerce site), consider sorting them alphabetically to make the list easier to scan for specific values.
- When a user toggles between more and fewer facet values, as in solution element #8, it is acceptable to change the sort order of the values accordingly.
- When displaying numerical values or ranges, it is customary to display the dimension values in alphanumeric order or use a range slider.
Show More...

Allow individual facets to be open and closed where appropriate, e.g., when there are many facets relevant to a given result set, or when the facets can be organized into meaningful groups and folded away to save space.

Show More...

Augment the display of facet values with record counts to communicate the number of matching records for each value.
- Visually distinguish the record counts so that their role is clearly secondary to the facet value itself. Consider using a smaller font and/or less-vibrant color or putting the record count in parentheses to support the distinction.
Show More...

Top

Comments (0)

Expand All

Related Patterns

Breadbox

Additional Examples

Dice

Distinguishes dimension labels from dimension values by bolding dimension labels and underlining dimension values

eBags

Distinguish the record counts from the facet values by using a less-vibrant color and putting the record count in parentheses.

Faceted Navigation: Vertical Stack

Problem Summary

Usages

Constraints and Challenges

Solution Elements

Reserve a consistent salient location on the page for available refinements.

Provide a meaningful natural language label for the entire faceted navigation menu, e.g., "Narrow your results", "Narrow or expand your results", "Refine your results", etc.

Provide a meaningful natural language label for each facet.

Visually group facet labels and facet values using proximity, spacing/indents, color coding, etc.

Visually distinguish facet labels from facet values using font variations, color, justification, etc.

Select and present a subset of facets that align with the user’s likely task flows.

Arrange the facets in a suitable priority order, e.g., frequency of use or alignment with common task flows.

Truncate the number of values displayed within a given facet to an easily scanned list.

In general, it is preferable to sort facet values by record count to surface the most common values.

Allow individual facets to be open and closed where appropriate, e.g., when there are many facets relevant to a given result set, or when the facets can be organized into meaningful groups and folded away to save space.

Augment the display of facet values with record counts to communicate the number of matching records for each value.

Comments (0)

Leave a comment...

Your comment:

Related Patterns

Additional Examples

Further Reading