Main Page

Rationale

We care about consistency. Just as Wikipedians care about consistent infobox content across certain content, and consistent writing style, we want us to care more about consistent styling. MediaWiki projects can sometimes be complicated and intimidating to users. UI can play an important part in helping newcomers understand our interfaces.

Note this style guide describes some elements that are not yet implemented in the OOjs UI toolkit.

How to use this guide

Color

The MediaWiki theme uses color to convey meaning, establish mood, strengthen brand, give affordance for interaction, and provide additional feedback. The specific hues and shades have been selected with cultural relevance, differences in ability to perceive color and contrast, harmony, and aesthetics.

Style

The presentation of a given control. Some control types have more styles than others, example of styles would be Normal, Toolbar, Quiet, Stacked (full width).

Intention

Controls convey their Intention through color. In most cases. Some controls have a neutral initial appearance and only show their intention color when the user interacts with them. Less frequently color indicates an action is complete. There are five semantic colors (Progressive, Constructive, Destructive, Inform, and Warn), variants of those colors, and a limited palette of gray colors.

Intention colors

Controls are either primary or neutral. Primary buttons express their intention colors at all times, even when not focused or hovered. Neutral buttons do not show intention unless hovered or focus. When constructing a form or workflow, only one control should be a primary button. Never use more than one colored button on the same interface as it confuses users. It adds to the cognitive load and makes decision harder and more intimidating. Colors are guides, not labels.

Neutral

Grey is used when an action is neither progressive, constructive, nor destructive. Use neutral grey when an action does not have any specific importance over other actions on the page (i.e.: If a button is not the primary action or the next step in a process, use grey.)

Progressive

Blue is the color of progressive actions. It conveys to the user that they are starting or continuing a multi-step process.

Constructive

Green is the color of constructive actions. It conveys to the user they are completing a single or multi-step process. In most case Constructive color shows the user what will happen. In others it is feedback that the action has completed. For example, thanking a user, adding a page to a watch list.

Destructive

Red is the color of destructive actions. It conveys to the user destructive, harmful, or serious actions the user can take. This could mean deleting data, blocking a user, hiding content, or deleting an account. A confirmation step or undo action should follow interactions with Destructive controls.​

Inform

Yellow is the color of confirmation actions. It conveys to the user a message, control, or step in a process they should pay special attention to. Inform is neither good or bad, it intends to make the user pause and think before proceeding. Overuse reduces impact, so use sparingly. An example could be a page notice or an interstitial requiring authentication.

Warn

Orange is the color of warning. It conveys to the user their action may fail or have serious consequence but are not destructive. Some examples could be that an edit is likely to encounter an automated block due to the nature of the content, or that a preference is being reset to a default options.

Control ordering

Most of the control and layout elements in Mediawiki automatically flip according to the direction of the language’s script (for example, Urdu, written in Farsi, is read from right to left). The order of the controls should also adhere to the same directionality. While examples may show only one variation, The software will automatically flip the interface when its being used in right-to-left language contexts.

For any grouping of control the ordering is important, interfaces should read based on the direction of the language’s script — top to bottom, and left to right in case of Western scripts , or top to bottom, and right to left in case of Eastern Scripts. Taking the example of English — with the Primary Action appearing at the righthand side of the interface, at the top in the case of dialogs and small screen interfaces such as phone or tablet, and either the top or bottom in the case of large screen interfaces. For desktop/large screen interfaces top or bottom orientation should be based on whether the contents of the screen or dialog are optional to interact with. Try not to move the controls from top to bottom within a particular process as this can be distracting to users.

Control states

Disabled

A control which does not accept focus or user interactions. Disabled state can result from certain criteria not being met in a workflow, invalid input in a control, or related control. We do user form validation and show controls as disabled wherever possible to reduce or prohibit users from submitting invalid data and receiving an error.

Press

When user clicks or taps on a control, it shows the press state for the duration of the click or tap.

Active/Toggled

When user clicks or taps a Select control. For controls which have an on state this state is used to show the user the control is in an active position.

Focused

When user navigates with their keyboard or assistive input device the focus state is used to let the user know that further input is expected.