Design/Archive/UX standardization

OOUI has been the assigned standard library for Wikimedia Foundation for several years now. A lot of the information given on this page are outdated link collections which makes it only more confusing for people joining the Movement to understand what to focus on. The Wikimedia Design Style Guide and Foundation project User-Interface Standardization and the Frontend standards group are the places to look for guidelines and help instead.

We have a number of divergent UI libraries in use in MediaWiki core and extensions. This project, led by the Design team at the Wikimedia Foundation, is attempting to slowly but surely converge on a single, consistent look-and-feel for MediaWiki user interfaces.

Specifications

 * A living style guide to document styles in use
 * The Flow software as of August 2014 is the most up-to-date user of the new styles, try it.
 * Wikimedia Foundation Design/Agora Control Library lists desired controls and annotates button styles
 * File:Agora specs.pdf is an outdated but more comprehensive visual spec


 * Design work items are tracked in the "mediawiki-ui" Trello board, including an "Audit" column for standardization.

Existing libraries / conventions

 * styles in the mediawiki.ui core module
 * used by Special:Login, Special:CreateAccount, Special:PasswordChange, and Special:Search in core
 * used by extensions Echo, Flow, GettingStarted, GuidedTour, OAuth, UploadWizard (campaigns only)
 * jQuery.ui used by AFT, PageTriage, TimedMediaHandler, UploadWizard, WikiBase, WikiLove, more...
 * backbone.js/Underscore.js (PageTriage) - JS MVC framework with template support
 * Mobile ui (MobileFrontend)
 * Hogan templates
 * OOUI widget framework used by VisualEditor
 * Vector
 * Design audit has screenshots

What we are converging on

 * OOUI for rich JavaScript and widgets

To Do

 * Convert Mediawiki.ui to LESS
 * Implement Agora CSS in
 * Update inputs and textareas in mediawiki.ui to look like Flow's .mw-ui-input
 * Make mediawiki.ui a flavor/theme of OOUI


 * Use the "Agora" design in the mediawiki.ui CSS in core and extensions
 * by applying  CSS styles
 * does this for many buttons in core
 * HTMLForm in core could apply  styles by default (currently it only does it if you choose the   stacked vertical displayFormat). This was in patch set 14 of gerrit 62169
 * by rewriting buttons to use OOUI toolkit, once that has a mediawiki.ui flavor/theme.
 * Use mediawiki.ui CSS in mobile
 * Implement Agora design in VE by completing mediawiki.ui flavor/theme
 * Identify existing and required Control/UI elements
 * Highest priority is a usable Agora dialog (vs. woeful inconsistency).
 * 2014-02-12_Flow_flyout.png Next is Agora flyouts.
 * Develop live style guide:
 * ✅ auto-generate CSS examples using KSS
 * see Jon Robson auto-gen every CSS style
 * show use of client-side OOUI JavaScript
 * swap CSS (see http://pauginer.github.io/agora/ )
 * server-side form examples (in Special:Agora page in https://gerrit.wikimedia.org/r/93525)
 * Add useful descriptions to the class comments for each Widget class in OO.ui - i.e. what sort of UI element does this build?

OOUI to dos

 * ✅ Split into separate repos
 * and
 * ve-mw and mw-ui (?)
 * VE
 * ❌ Split OOUI dialog into a separate component and apply Agora styling to it
 * Documentation (intro and reference)
 * Sample code
 * Get requirements from other teams
 * Clients outside VE team.
 * RfC
 * Move this to core

UX standardization status by extension
See also Icon standardisation for use of icons by extensions.