Design/Archive/Design audit
This page is outdated. |
We want a lightweight means of organizing and presenting MediaWiki UX elements. Over the long term categorizing on-wiki screenshots is the lowest-overhead way to do it. Anything else is harder to maintain, too granular, and leads to repetition.
Category pages and image File: pages are regular wiki pages with talk pages, so people can comment on them, watch them, discuss them. (And/or people can create regular wiki articles referring to these images.)
Go see it — Category:Design audit
How to
[edit]Just add all the subcategories of Category:Design audit that apply to a screenshot. You can find screenshots by browsing Category:MediaWiki screenshots.
(You can even add local comments and categories on mediawiki.org to screenshots that are on https://commons.wikimedia.org ; look in commons:Category:Wikipedia_screenshots and commons:Category:Mediawiki and then edit the same file on mediawiki.org.)
New screenshots
[edit]If there isn't an existing screenshot,
- Open a new browser window
- Turn off all browser toolbars and chrome, dismiss the find bar.
- reset your browser's zoom to standard (in Chrome View > Actual Size, in Firefox View > Zoom > Reset)
- If possible log out of the wiki site, or create a fresh account, or otherwise be sure you have no gadgets or custom CSS
- Visit enwiki if possible
- Visit a low-drama simple page as plain as possible
- Set up the page or dialog
- Resize it sensibly (no 2000-pixel wide screenshots!)
- Take a screenshot either of the window or the relevant region
- Name it
2024-10-06 Name of UI feature.png
(Explanation: cruft accumulates! putting the date in the filename saves people wasting time looking at a three-year old screenshot that hasn't been un-categorized.) - Visit Special:Upload here to upload it
- Click [Browse....] and navigate to your screenshot file.
- Copy and paste the wiki markup below into the Summary: field
- Explanation: content=none means your screenshot only contains MediaWiki UI elements rather than copyrighted material (hence "Visit a low-drama simple page"), and you're probably using the Vector skin.
- Expand on the description of what's shown in the screenshot.
- Add a sentence explaining how to get to the state, e.g. "Log in, visit another user's page, click the WikiLove 'heart' icon."
- Add a sentence identifying the browser version and system you used, e.g. "Captured in Chrome 29 on Mac OS X Lion".
- Choose all the subcategories of Design audit that apply.
- Choose "None" as the Licensing.
- Click [Upload file]]
Here's the wiki text for a screenshot image file, copy and paste this into the Upload "Summary" textarea:
What the screenshot shows on which wiki.
How to get to this state.
Captured in browser NN on system VERSION.
== Licensing ==
{{MW-screenshot|content=none|skin=vector}}
[[Category:Inconsistent buttons]]
[[Category:MediaWiki 'Settings' indicators]]
[[Category:MediaWiki dialogs]]
New design audit subcategories
[edit]You can add new categories: name them either "MediaWiki element names" or "Inconsistent element names".
(Explanation: category names need to make sense on their own, so a plain name like "Validation" is bad.)
After saving, click each red (=new) category link and add [[Category:Design audit]]
to it to make it a subcategory.
Discussing screenshots
[edit]The Category: and File: pages are wiki pages, so we can comment on them,
e.g. mention relevant UX bugs (use [[bugzilla:NNNNN]]
).
If you comment on an existing screenshot, put your comments in a subheading == Agora design discussion ==
so other clients of the screenshot aren't confused.
To Do
[edit]On-wiki image annotation tool to annotate screenshots?
- @User:S Page (WMF): At Commons there is commons:Help:Gadget-ImageAnnotator, which uses the "Add a note" button directly underneath the image (eg this image has annotations commons:File:WEF on the Middle East Arab and foreign Ministers.jpg). Images that are annotated on commons do not show those annotations at wiki's that pull the image in locally.
- The gadget isn't currently installed at en.wiki or meta or here though. It appears to be a default gadget at commons (though not labeled as such in Special:prefs)
- That's all I can find, with a brief look. Maybe we can install it here? Quiddity (talk) 21:39, 3 July 2013 (UTC)
- Thanks, that gadget looks great to me and surely beats creating, uploading, and categorizing a new image with annotations. I'll see what WMF designers think. S Page (WMF) (talk) 00:16, 4 July 2013 (UTC)
- @User:S Page (WMF): See w:Help_talk:Gadget-ImageAnnotator#Is this still working? for a current discussion with the gadget's dev, with a couple of examples. and details on its flaws. Quiddity (talk) 22:57, 20 August 2013 (UTC)
- Thanks, that gadget looks great to me and surely beats creating, uploading, and categorizing a new image with annotations. I'll see what WMF designers think. S Page (WMF) (talk) 00:16, 4 July 2013 (UTC)
- Phabricator has a Pholio tool for uploading and commenting on mockups, we'll probably use that -- S Page (WMF) (talk) 23:10, 3 July 2014 (UTC)
Also, commons' slideshow gadget would be useful to advance through images.
See also
[edit]- Design team's mediawiki.ui board for project management in Trello tracks some consistency issues.