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.

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) In the description, expand on the description of what's shown in the screenshot. If it's not obvious, 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".
 * 13) Choose "MediaWiki screenshot" as the Licensing.
 * 14) Click [Upload file]]

Immediately click [Edit source] on the new file's page and replace   with the following wiki markup

, where you choose all the subcategories of Design audit that apply. Explanation: content=none means your screenshot only contains MediaWiki UI elements rather than copyrighted material (hence "Visit a low-drama simple page"), you're probably using the Vector skin.

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
Is there an 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)