Design/Archive/Wikimedia Foundation Design/Patterns and components

Alerts, warnings and errors
We recommend to:
 * Avoid warnings if undo is possible. Since a warning breaks the action flow of the user, it is usually preferred to notify of the action and allow a way to undo it to the user. For example, after licking a delete button it is preferred a message that says "Your post as been deleted. Undo." than a warning saying "Are you sure you want to delete this post?".

Tooltips
A tooltip is a method of revealing additional information about something within the interface to the user without cluttering up the system or forcing the user to visit a new page.

We recommend:
 * Create contrast with the content background. Use a background color for the tooltip that distinguishes it from the content background.
 * Strongly indicate what the tooltip is connected to. The use of "weak" and shallow pointers is strongly discouraged as users with poor vision may have difficulty associating the tooltip with its affordance
 * Keep revealed information succinct. Consider character budgets of around 200 characters, with a "learn more" link if more information is available

We do not recommend:
 * Using tooltips which are only activated upon hover. Hover behaviors are fine and good but are not possible in the realm of touch devices.

Behaviors
Tooltips should be designed thinking for touch interfaces first and mouse interaction second. "Hover only" tooltips can be considered with progressive enhancement but should never be essential to the use of the software.

Tapping or clicking on the tooltip affordance should activate the tooltip until it is dismissed. Tooltips should have multiple ways to be dismissed (not all will be appropriate for any one tooltip):


 * Including a "close" affordance within the tooltip (an "X" button)
 * Clicking anywhere outside of the tooltip
 * Clicking within the tooltip
 * Automatic closing after a specified time

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.

Section 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).

Contextual menus
Contextual menus are represented as drop-down menus associated to a content element they affect.

We recommend to:
 * Group options.
 * Use a check mark for multi-estate elements.

Flyout Dialogs
Flyout dialogs are control panels which are tightly coupled to their activation affordance. Flyout dialogs are similar to tooltips but are typically more robust in function.

Flyout dialogs should have the following behaviors:


 * A clear pointer to the activation affordance
 * A "close" control, which
 * cancels all activity within the flyout (returns it to default state)
 * closes the flyout

Clicking (or tapping) anywhere outside of the flyout should close the flyout.