MediaWiki UI

This page is obsolete. It is being retained for archival purposes. It may document extensions or features that are obsolete and/or no longer supported. Do not rely on the information here being up-to-date.

See Codex, the design system for Wikimedia instead.

MediaWiki UI has been deprecated and we recommend that you use Codex as replacement library for your user interface needs.

For info about the user interface of MediaWiki, see Design System Team, Wikimedia Product Design team, or the Front-end standards group.

MediaWiki UI is a set of user interface components in core. It provides features such as buttons, checkboxes, inputs, anchors and more. The Design team and many developers participate in its development.

Why are we building it?

Consistency is something we care about. 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.

User interface can play an important part in helping newcomers understand our interfaces. Various community members have been involved in styling controls for use across the site in templates and this documentation is scattered in various places for example this color guide on Wikipedia, we have not created the same level of documentation in our code and are keen to rectify this.

What is the scope?

To begin with we are targeting the many forms across MediaWiki. The goal is to make inputs, checkboxes, buttons, drop down menus and radio buttons consistent across the site and to be user friendly on both desktop and mobile. This will also result in a noticeable styling change which as with all styling changes is bound to be appreciated by some and upset others. The aim is to make controls easier to understand for a user unfamiliar with the interface without having to resort to reading the buttons. To take an example, on the edit page we currently have a 'save page', 'show preview', 'show changes' and cancel button. By styling the 'save page' button differently from the 'show preview' we can convey meaning that they have different impacts. The save button will result in a change of state in the wiki whilst the show preview will be harmless.

How you can help

We want to make it easier for community members to make things look beautiful and consistent by providing a reference guide of controls that have had their input and are flexible and generic enough for use in different contexts. The Living style guide is generated from the code that produces the MediaWiki software and we encourage people to look at it, and identify places where the controls do not fit nicely. We want to iteratively improve these controls in a way that fits in with the style of the site. A lot of the code in MediaWiki is now 10 years old and as a side effect of this will be improved to help with this consistency. Help us identify pages which are not using the controls or using them in a way that doesn't fit with the style guide.

I don't like the design!

That's fine. You might associate a certain tone of blue with Facebook, you might think a certain red colour is too aggressive or that a checkbox looks too big in a certain context. We want to understand these concerns. One of the goals of this project is to build a Living style guide that developers can use as a reference to build things quickly, in many cases without needing a designer. We want to encourage the same API use and same markup. In short we want people to care about consistency more. There is a Phabricator project where you can raise concerns about the UI and help make the software better.

Using standard markup will make it easier for you to override the styling and propose improved versions. We see this as a moving target. Like software, the design is never done.

The controls are too big!

One of the goals of this project is to make the site more accessible^[1] and for mobile and desktop to have consistent designs. As a result, certain things may appear bigger than you are used to on desktop. Certain forms with lots of controls may take up much more space than they used to. We want to understand pages where the design does not fit and make them better.

How will this affect my skins?

Currently the styling changes will affect all skins, but whether this is correct or not, we are not sure. We hope that by running a beta feature experiment we can understand this. We believe the entirety of MediaWiki would benefit from semantic markup and consistent styling however it's not clear if skins other than Skin:Vector would benefit from the new styling. Please let us know what you think on the talk page.

Contents