Design/Archive/Wikimedia User Interface
 | 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. |
Design Resources
[edit]Our most important documentation resource, where we also share all our public design assets is the Wikimedia Design Style Guide with user-interface focus. Its website and GitHub repository at the same time featuring âamong other filesâ the main widgets overview Sketch file. For developers there's additionally WikimediaUI Base LESS/CSS variables file with Wikimedia's basic user interface style values.
Current work
[edit]We manage our project, tasks and bugs on Phabricator. View our complete to-do list.
Log into Phabricator with your MediaWiki login credentials to be involved.
Problems & Goals
[edit]Problems
- A specific 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
- Deficiency in being screen-reader and keyboard-user accessible
- Deficiency in being color blind-friendly and photophobia-friendly
- Lack of mobile support like components, which are not touch-friendly
Goals
- Standardize Wikimedia's user interface components (i.e.: button, dropdown menu, radio button, list, etc.) so that they visually look and feel the same across 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.â)
- Make sure that Wikimedia project sites are largely accessible for the visually-impaired using screen-readers
- Make sure that Wikimedia project sites are largely accessible for the color blind and photophobic
- Make sure that Wikimedia project sites are largely user-friendly at all device sizes
- Support for bi-directional - RTL (right-to-left) and LTR (left-to-right) language text
FAQ on the goal-setting process
Let us know if we're missing anything else under "Goals"
Challenges & Execution
[edit]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 languages, cultures, projects and content types. With that in mind, our solutions should be a fundament for flexible use cases while preserving consistency.
Execution To solve our current interface challenges, we have resorted to building a library of components. This library will conform to these guidelines to achieve all listed goals above:
- Web Accessibility Initiative â Accessible Rich Internet Applications (WAI-ARIA)
- Web Content Accessibility Guidelines (WCAG 2.0)
Get in contact
[edit]If you run into specific bugs or feature requests, please add your task to our Phabricator board.
Alternatively, you can contact Volker E. (WMF) / Volker_E (Phabricator profile)/ IRC: Volker_E / or per email.
See also
[edit]- Create a new task in this project (Tag project âUI-Standardizationâ under "Tags" field)
- Wikimedia Foundation's main UI library âOOUIâ
- The Need for Web Design Standards by Jakob Nielsen
- May Galloway on the need for consistency at Wikimania 2014 ⢠Slide deck