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 — 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-11-10 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
    1. Click [Browse....] and navigate to your screenshot file.
    2. 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.
    3. Choose "None" as the Licensing.
    4. 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

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

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

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)

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

• Design team's mediawiki.ui board for project management in Trello tracks some consistency issues.