Design/Archive/Wikimedia User Interface

Problems we're solving & Goals User stories Share your story Collaborate with us

=Currently working on...=

High-priority

Make sure our interface is accessible to screen reader and color blind and photophobic users.
 * Create https://phabricator.wikimedia.org/T88023
 * Wrap MediaWiki footer to HTML5 tag
 * OOjs UI Input validation should be annotated with more ARIA attributes
 * Accessibility for keyboard users and screen readers
 * Improve color palette to comply with WCAG 2.0 and color-deficiency-friendly

Full to-do list

We manage our project, tasks, and bugs on Phabricator. View our complete to-do list.

Log in to Phabricator with your Mediawiki login credentials to be involved in this project.

= Problems & Goals =

Problem


 * One icon (i.e.: star icon) can have many different meanings (i.e.: featured article, watch list, watch current page, portal of the week). This happens throughout Wikimedia projects even within the same culture and language. Conversely, one meaning can be represented by a few different icons.
 * One component type (i.e.: button, menu) with the same use case is implemented in many different ways
 * Not completely screen-reader accessible
 * Not completely color blind-friendly and photophobia-friendly
 * Lack of mobile support and components are not finger-friendly

Goals


 * User interface components (i.e.: button, dropdown menu, radio button, list, etc.) that visually look and feel the same across any templates and pages within WikiProjects, Wikipedia article pages, every language Wikipedia, *MediaWiki documentation pages, Meta-wiki, and so on.
 * Strengthen the mental model of our components (i.e.: button, menu, dropdown, text field) by reusing the same component type for the same use case (example: To “delete a comment," we should always use a red button. We should never use a green button to “delete a comment.” Conversely, we also shouldn’t use a red button to “create a new topic.”)
 * Completely accessible Wikimedia project sites for the visually-impaired using screen-readers
 * Completely accessible Wikimedia project sites for the color blind and photophobic
 * Completely accessible to all device sizes
 * Support for bi-directional text RTL (right-to-left) and LTR (left-to-right)

Let us know if we're missing anything else under "Goals"

= Challenges & Execution =

Challenges


 * Wikimedia projects are built and improved by a large community of both technical and non-technical contributors. With that in mind, the solution must also be accessible for all kinds of contributors.
 * Our users' and contributors' use cases are varied across multiple languages, culture, project and content type. With that in mind, the solution should be flexible for varied use cases while preserving consistency.

Execution

To solve our current interface problems with these challenges in mind, we have resorted to building a library of components. This library will conform to these guidelines to achieve all listed goals above: We want to hear about your thoughts around this execution method.
 * Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA)
 * Web Content Accessibility Guidelines (WCAG 2.0)

=Team=


 * MGalloway (WMF) / violetto / IRC: violetto ([mailto:may@wikimedia.org Contact me] for design-related questions)
 * VEckl (WMF) / Volker_E

=See also=
 * [ Create a new task] in this project (Tag project "UI-Standardization" under "Projects" field)
 * Work-in-progress library called OOjs UI
 * The Need for Web Design Standards by Jakob Nielsen
 * May Galloway on the need for consistency at Wikimania 2014 • Slide deck