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
