Design/Archive/UX standardization

OOUI has been the assigned standard library for Wikimedia Foundation for several years. User experience/user-interface standardization has informed the evolution of the library together with efforts to make the interface more welcoming, simpler-to-use for new or non-technically-advanced users while retaining all the benefits for long-term contributors. A lot of the information given on this page are outdated link collections which is counter-productive for understanding the value and importance of standard user-interface for people in the Movement. 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

• mw-ui- 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 mediawiki.ui (bug 54360)
• 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 mw-ui- CSS styles
    • Gerrit change 52169 does this for many buttons in core
    • HTMLForm in core could apply mw-ui- styles by default (currently it only does it if you choose the vform 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 (Gerrit change 102581)
• 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).

  • 

    Next is Agora flyouts.
• Develop live style guide:
  •  Done 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?

UX standardization status by extension

See also Icon standardisation for use of icons by extensions.

Extension	Maintainer	Status/Blockers	UI components	Compatibility
ContentTranslation	i18n team	One mw-ui button	Agora Grid, mediawiki.ui, callouts, variety of cards (link , references, tools are presented as cards). Simple rich text formatting toolbar. The extension does not use Mediawiki chrome, uses full screen area	IE10+
Flow	Core features team	Implements additions to Agora, such as sleeper/thin buttons, tooltips, dropdown menu, WikiFont, as local override not core	jquery.ui.dialog, jquery.conditionalScroll, mediawiki.ui (+ local overrides)
MultimediaViewer	Multimedia team	Uses OOUI for "Use this file" tabbed dialog, with incomplete Agora skinning	OOUI MenuItem,TextInput, etc. widgets, ...	??
UploadWizard	Multimedia team	Uses mostly jQuery.ui, campaigns are migrated to mediawiki.ui	resizable input field, resizable textarea, inline input field, form validation, radio buttons, dropdown select lists, auto-suggest dropdown, tooltips, file input, collapsible form elements, image thumbnail selection grid, date picker, modal dialog box	IE6 and newer
MobileFrontend	Mobile web team	All internal styles and libraries except for hogan templates	buttons, full-screen overlays, toggler, button bar, segmented button	IE9 and newer (usually)
PageTriage	No one	Some internal, some jQuery.ui	backbone.js + Underscore (including use of templates), jquery.waypoints, jquery.tipoff, jquery.badge, jquery.ui.button, jquery.ui.draggable, pokey dialog	IE7?
Echo	Core features + volunteers	Some internal, some mediawiki.ui	buttons, pokey dialog, jQuery,badge	IE7?
GuidedTour	Growth	Uses mediawiki.ui controls, some redundant styles to remove from original guiders.js	Primary buttons, close icon
GettingStarted	Growth	Uses few mediawiki.ui controls, needs some new styles such as muli-line text in buttons and icons in buttons	Primary and secondary CTAs, close icon
OAuth	Platform-core		mw-ui- styles mostly, jquery.ui.autocomplete, jquery.ui.dialog
WikiLove	No one	uses jQuery.ui	jquery.ui.dialog,, dropdown select lists
WikiEditor	No one	uses some internal, some jQuery.ui	button toolbar, jquery.ui.dialog, jquery.ui.button, dropdown select lists
CentralNotice	Fundraising team	uses internal and some jQuery.ui	jquery.ui.multiselect, jquery.ui.datepicker, dropdown select lists
Special:PasswordReset (Core)	None		vform, mw.ui.primary
Special:ChangeEmail (Core)	None		mediawiki.special.changeemail (clientside form validation)
Special:Search (Core)	Platform		vform, mw.ui.primary
UniversalLanguageSelector (ULS)	Language Engineering Team	mediawiki.ui use is bug 50599, but ULS needs to work in MW 1.20	Foundation Framework grid, side tabs, buttons, flyout. local 'button blue' CSS, jquery tipsy, more?