Template folding

Translate this post

Based on several usability studies, the usability user experience team has identified that template text and syntax is a major hindrance to new users, making them feel less comfortable editing pages.
As such, one approach that we’ve been experimenting with is collapsing templates into expandable “capsules”. This improves the readability of the wikitext.[1]
Image (1) Screen-shot-2010-04-15-at-3.25.47-PM.png for post 3813
The full wikitext of the template is available with the expansion arrow. Additionally, a more user-friendly template editing form is available by clicking on the template name or the ‘pop-out’ symbol to the right of the name.
Since this is an experimental feature that is largely proof-of-concept, it does have a few limitations:

  • Currently only works on Firefox with the editing iframe enabled
  • Pasting content into the expanded template (or inserting a newline in Linux) can break the template, depending on the source of the content.
  • The implementation is relatively slow, so slower and older computers can appear to hang, especially on pages with large templates
  • Templates are not converted into capsules as you type; only templates that were there on initial page load are wrapped

We’re still working on these, but in the meantime, test it out on our sandbox[2] and let us know what you think!
[1]We’re working on making the displayed name more customizable on a per-template basis so the collapsed version more accurately summarizes what it’s collapsing, ie displaying the title of an infobox rather than the word “infobox”.
[2]This is currently prepopulated with some articles about large US cities. For some good examples, check out:
New York City, Boston, or Chicago
Nimish Gautam, Research Analyst

Archive notice: This is an archived post from blog.wikimedia.org, which operated under different editorial and content guidelines than Diff.

Can you help us translate this article?

In order for this article to reach as many people as possible we would like your help. Can you translate this article to get the message out?

Inline Feedbacks
View all comments

This is a great idea.
How about moving article metadata (categories and translations) outside the body of the article, too?

Yes great idea
Do you think syntax highlighting would be helpful in the edit box? I don’t find any thing about it on the usability wiki…

@A: interesting idea…we haven’t found that those have the same ‘intimidation to new users’ factor, but would be great for aesthetics
@Trazeris: we haven’t really focused on syntax highlighting because we want to move towards giving the user more of a “you’re editing a document” feel rather than “you’re writing code” feel. That having been said, we do have infrastructure for syntax highlighting in place and may have a limited version of it in the future.

Amazing feature. Perhaps, people change to Firefox to use it ; )
A question. Template parameters which exist in the template code, but are not included in the article syntaxis, are they shown? I think they must be shown in grey color.
Also, a brief description in the inputs text when they are empty would be useful to explain what value is expected.

@Nimish: Ok that’s a good point
Does it mean you will try to do a WYSIWYG editor like WIkia/use Wikia editor?
Will you implement an autosave feature? Maybe the HTML5 local database could help you, it’s a major issue for my users, they tend to publish multiple times the same article to avoid losing work…

This is really a great step, but I really don’t like the look of those buttons in the middle of the monospaced text. Have you considered something more “backwards-compatible” (regarding the visual aspect, I mean)? Perhaps something like Lorem ipsum dolor sit amet{{cite web|…}}, consectitur adipiscing elit. with the “…” being a link to the expanded version, either the form version or directly in the wikitext (according to the user preference, perhaps in the form by default). What do you think?

Argh! My tags were striped! 🙁
Is there any html we can use in here? Test: bold, italics, link

Argh! My tags were striped! 🙁
Is there any html we can use in here? Test: bold, italics