wrote:

Hello design! *TL;DR* Help pages are just like encyclopedic pages on Wikipedia, but they have not the same goal: when you need an information to contribute, you need it quick. Since January, French Wikipedia community[6] has begun an important project: redesigning Help namespace. With this project, we want to create a specific design for help pages, with defined blocks to organize key points, big and readable titles, more friendly TOC, etc. The result is visible on two mockups[1][2] and a live demo[3]. This new design is quite ready, and we planned to deploy it on our common.css a few weeks ago in order to run some tests with new users. But some users has some rationale concerns about the deployment itself: we planed to create a new design by adding new CSS to the common.css file. This involves an important risk of conflict if there is an important skin update in the future. For us, next steps are: 1/ validate the choices we made for this new interface, 2/ create a separate skin (with an extension? An other solution?). We need you to help us on these two points. *Long version* On French Wikipedia - and I assume this is the same on other projects - help pages are just a an out-of-date mix of technical information without any organization. They are not easy to read! We also often have barbaric changes on Help namespace, by people who believe they are writing an article. With this design project, we plan to create more friendly help pages. We are working on two points: * the *content* (text, images) is rewritten in order to be shorter, more precise, and focused on what newbies ask all the time. We have separated basics from advances and expert knowledge. We are busting all not up-to-date information, pure technical stuff or jargon on basic help pages, encyclopedic style, etc. We are making a clear separation between technologies, with wikitext on one side and VE on the other[4]. * the *design* in order to have a presentation which is clear, more readable and efficient, and of course, user friendly to update. A page with the new design is now is divided into 4 big parts : * header * toc * contents * bottom We also have generic elements. First, the *header* presents (a lot of) information about the page: * a description which indicates the purpose of the page * a difficulty level (basics, advances, expert) in order to avoid surprises when a newbie reads the page * information about user status (when an account is needed, or autopatrolled status for example) * information about the concerned product (wikitext or VE) * links to relative contents, parent contents, etc. We have made a classification for help pages, based on action verbs (insert, create, discuss...). All this is included in one template. This is the only important template on an help page. The *TOC* is reduces to h2 and h3 titles, others are not displayed. By this, it is easier to read the TOC. When we modify an help page, we need to be more concise or create a specific page in order to detail a long point which requests h4 or h5 titles. The TOC displays h2 titles as a main title (bolder) and h3 as sub element (inline elements). By this, we emphasize key points and reduce the need of scrolling on the whole TOC when searching information. *Content* is composed of blocks, delimited by gray blocks. A block starts with a h2 title and stops when an other h2 title starts, with a visible white delimitation. The rule is now one information = one block (where I add a reference, how I add a reference, etc.). h3 titles are sub elements in their parent block. There are separated from the other elements by an horizontal gray line. An important padding makes the text column narrower, and easier to read. We are also working on best practices: add a tl;dr on the first section (called "à retenir" - not fo forget), short text on h3 sections, and more. When wikitext and VE are available to edit, we add on the *bottom* page a list of useful links: how to insert a link, a template, an image, etc. We also put generic informations about editing (no copyvios, reliable sources). We can imagine to have a form who takes feedback from readers (who says Article Feedback Tool?). In order to reduce efforts when reading the pages we have change some *generic elements*. The page has a max-width at 1,000 pixels. Text font has been enlarged by 0.1 em and titles redesigned to be like titles used on Flow (and quite more visible). Concerning colors, we have used the MediaWiki UI palette[5], especially the orange - which is a symbolic color for work in progress or constructions - and gray, already used on other products (Flow, MediaViewer). All these changes are inspired by other help pages on other big websites (Google docs, GMail, Facebook, Twitter, YouTube...): every time, content pages design and help pages design are different. You know you are on a place where you can have some help and some information. But not on Wikipedia. *And now?* Now this project is stopped, for the design part at least. We (the community) have some questions about the next steps. * Is there an official way to validate the choices we made for this new interface? We can run a test, but we don't have tools (or skills) for this. * in order to deploy this new design, we can create an extension. We have volunteers for this, with strong skills (some of them are already volunteers developers for MediaWiki). But is it the best way? Is there other ideas or solutions? We need you to help us on these two points. We will also be happy to have any feedback or advice about our project. :) On behalf of the Projet:Aide et Accueil[6], Benoît / Trizek [1] https://commons.wikimedia.org/wiki/File:Aide_Insérer_une_référence_Éditeur_… [2] https://commons.wikimedia.org/wiki/File:Aide_Homonymie_fr.wikipédia.png [3] On French Wikipedia, go to your preferences <https://fr.wikipedia.org/wiki/Spécial:Préférences>, *Gadgets* tab, and activate *MiseEnPageEspaceAide* gadget. Then go to Aide:Sommaire <https://fr.wikipedia.org/wiki/Aide:Sommaire> and browse help pages. [4] Example of page making the distinction between VE and wikitext, with a link to reach each technology : https://fr.wikipedia.org/w/index.php?title=Aide:Ins%C3%A9rer_une_r%C3%A9f%C… [5] https://commons.wikimedia.org/wiki/File:Mwuipalette.png [6] https://fr.wikipedia.org/wiki/Projet:Aide_et_accueil _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

wrote:

... This new design is quite ready, and we planned to deploy it on our common.css a few weeks ago in order to run some tests with new users. But some users has some rationale concerns about the deployment itself: we planed to create a new design by adding new CSS to the common.css file.

This involves an important risk of conflict if there is an important skin update in the future.

For us, next steps are: 1/ validate the choices we made for this new interface, 2/ create a separate skin (with an extension? An other solution?).

* in order to deploy this new design, we can create an extension.

We have volunteers for this, with strong skills (some of them are already volunteers developers for MediaWiki). But is it the best way? Is there other ideas or solutions?