Design/Archive/Design audit

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 &mdash; Category:Design audit

How to
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
If there isn't an existing screenshot,
 * 1) Open a new browser window
 * 2) Turn off all browser toolbars and chrome, dismiss the find bar.
 * 3) reset your browser's zoom to standard (in Chrome View > Actual Size, in Firefox View > Zoom > Reset)
 * 4) If possible log out of the wiki site, or create a fresh account, or otherwise be sure you have no gadgets or custom CSS
 * 5) Visit enwiki if possible
 * 6) Visit a low-drama simple page as plain as possible
 * 7) Set up the page or dialog
 * 8) Resize it sensibly (no 2000-pixel wide screenshots!)
 * 9) Take a screenshot either of the window or the relevant region
 * 10) Name it 2024-August- 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.)
 * 11) Visit Special:Upload here to upload it
 * 12) Click [Browse....] and navigate to your screenshot file.
 * 13) Copy and paste the wiki markup below into the Summary: field
 * 14) * 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.
 * 15) * Expand on the description of what's shown in the screenshot.
 * 16) * Add a sentence explaining how to get to the state, e.g. "Log in, visit another user's page, click the WikiLove 'heart' icon."
 * 17) * Add a sentence identifying the browser version and system you used, e.g. "Captured in Chrome 29 on Mac OS X Lion".
 * 18) * Choose all the subcategories of Design audit that apply.
 * 19) Choose "None" as the Licensing.
 * 20) 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 ==

Category:Inconsistent buttons Category:MediaWiki 'Settings' indicators Category:MediaWiki dialogs

New design audit subcategories
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   to it to make it a subcategory.

Discussing screenshots
The Category: and File: pages are wiki pages, so we can comment on them, e.g. mention relevant UX bugs (use  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
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 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)
 * 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.