Design/Archive/Wikimedia Foundation Design/Patterns and components

Lists: showing and manipulating data elements
Depending on the size of the lists several organization and manipulation techniques may be applied such as allowing filtering, sorting and searching elements in a list.

Filtering
Filtering allows the user to access a subset of interest from the list according to a criteria. The criteria can be expressed either as a single option choice (exclusive filters) or as a multi-dimensional filter (where multiple values are available for each filtering criteria considered).

Exclusive filters
For exclusive filters we recommend to:
 * Show filters directly above data. By showing the different filters directly in the list header, users can discover them easily and better understand they are views on the data displayed.
 * Filters will be presented following the style of links (blue without underline).
 * If there are a high number of filters, some of them can be collapsed into a more filters drop-down menu.
 * A filter to show all elements is normally included and it is usually located either as the first or last filter from the list.
 * Highlight the active filter.' Highlighting the active filter is done by changing the color of the fragment of the separator used between the list header and the data.
 * Selected filter label will be presented as emphasized text but not as a link since it is no longer interactive.

Multi-dimensional filters
For filters that allow to adjust multiple dimensions at a time we recommend to: For example, a dimension such as "Filter by date" may be composed of "Any moment" (default option), "today", "this week", "this month".
 * Make each dimension exclusive. Define categories where the user can select just one option for each and a default non-filtering option (all) is selected by default.

Sorting
When adding sorting options we recommend to:
 * A drop-down menu at the right. The common representation and location are a simple drop-down menu located at the right of the list header.
 * When only two options are provided it can be represented as a pair of toggle buttons o radio buttons.
 * Name sort criteria in a way that expresses the direction. By expressing the ordering direction the label becomes self-descriptive. For example, it is better to use "Newest" and "Oldest" than having a "by date" criteria and a separate selection for the ordering direction ("Ascendent", "Descendant").

Searching
When the number of elements is high, and they have properties the user use to identify them, search is a good option to reduce the complexity of the list.

When adding a search filtering to a list we recommend to:
 * Make search flexible. Do not force the user to use a single format or property for the search. For example, the Universal Language Selector allows users to search for a language name using the language name in a different language or ISO codes.
 * Do not force the user to filter in advance. If search is performed across different categories of content it is preferred not to make the user to indicate the category before the search is performed. It is preferred to perform the search for all the categories and provide filtering options in the result page to show only the results of a specific category.
 * Anticipate the user with suggestions. By provide as-you-type suggestions to the user would make the search process more fluent.
 * Leverage the no results found message. When no results are found inform the user of this, include the term he used for the search in the message (to increase the chance of detecting typos) and provide alternative instructions/suggestions/tips for the search.

List creation
When creating a list of elements (such as files to be uploaded or the languages the user speaks), we recommend to:
 * Make elements removable. By including an "X" icon, elements can be removed from the list.
 * Include an add button.
 * Optimize the workflow for repeated actions. If the user is building a list he will probably add more than one item. Any shortcuts that can be provided to repeat the action may make the process moe fluent. For example, the Universal Language Selector support for multiple language selection keeps the language list open so users can add new languages without opening the the selector again. The

Menus
In order to represent different sections for some content.

We recommend to:
 * Highlight the current section. The current section can use a color decoration rectangle at the initial extreme of the section label and a modified background color (see examples below).