Community Wishlist Survey 2021/Real Time Preview for Wikitext/fi

From Meta, a Wikimedia project coordination wiki
Jump to navigation Jump to search
This page is a translated version of the page Community Wishlist Survey 2021/Real Time Preview for Wikitext and the translation is 1% complete.

Hello all, and thanks for coming to read more details about Real-time preview. This was the #4 wish in the Community Wishlist Survey 2021. This article will outline our approach to building a solution of this wish. We are asking for your feedback and insight so that we may make the best possible improvement.

Wish Objective Summary: Allow Wikitext editors to preview the page in real time when editing.

Original Wish

NOTE: To avoid confusion, we renamed the wish title and project name from Live Preview to Real-time preview. This is because there is a different feature called Live Preview already.

Wikitext is a wiki markup language. This is used by many users for formatting on wikis. It looks different from what the readers see. Working with the wikitext, it may be difficult to predict what the final result would look like. This is why many editors use the preview functionality before publishing the change. However, this requires an extra step separate from the writing-wikitext process.

At a high level, we can summarize the problem of the original wish as follows:

How do editors ensure the changes they are making produce the output that they want?

From a product standpoint, allowing editors to view the markup output in real-time could:

  • Improve the editor experience by reducing the number of extra steps (clicks) inside the editing journey
  • Allow editors to catch typos, revise broken wikitext, and fix it immediately maintaining the quality of the Wikis

Proposed Solutions

Design requirements

The following are a set of design requirements that could provide editors with a way to preview their content.

As a user editing in wikitext using a desktop size screen, I can:

  • Have an option to preview the output of wikitext
  • Make the preview output scrollable so that I can easily preview elements on the output without it taking the full screen

Scope and Constraints

The real-time preview button will be available for/on:

  • Wikitext-based editing tools. We will not be changing the Visual Editor.
  • Desktop editing.
  • Screens wider than 1200 px for landscape mode (horizontal layout). That is standard width for fitting all elements on the page without being cluttered. The minimum width may change. On the portrait mode (vertical layout), this will be available by default.

Data Investigations

We are working on answering the following questions which will help deepen our understanding of the problem:

  • How many editors preview their changes?
    • Does previewing changes lead to less reverts?
  • How many editors use desktop-size screens to edit on the wikis?
  • Does the vertical layout make sense to default to?

Why and how did we accept this wish?

Community Tech Wishes Prioritization Score.png

This wish scored high in our prioritization process for 2021. It was very popular in terms of number of votes, impactful in terms of the benefit for the community, and had a relatively low complexity estimate. Please read about our full process here.

Status Updates

November 2, 2021: Findings from user testing of designs

Hei kaikki,

Many thanks for your support and great feedback on the proposed designs. Thank you for comments on the talk page, as well as the latest "Talk to Us" video call. We have learned more about how experienced users edit.

Also, we have conducted usability testing on the platform. 5 editors took part. Below you will find some of the findings and insights:

  • Half of the users found the new "Preview" button in the toolbar. One of the reasons for this could be behavioral patterns developed over the existing "Show preview" button in the footer of the editor box. We are designing a low-friction pulsating dot with a guide popup. We hope this will make it easier to notice the new feature.
  • All users found the existing "show preview" button.
  • All users understood the difference between both buttons. One could be used while editing (offering a quick glimpse at the output). The other could be more helpful for proofreading before publishing the changes.
  • One user reported that it might always be easy to understand the relationship between the Wikitext input and the preview output. To mitigate this, we are exploring ways to highlight the text in both panes and align the scrolling or editing behavior.


  • Not all of these editors are experienced users. Although this wish is intended to be helpful for every user – we assume that less experienced editors will tend to use the Visual Editor over the wikitext editor. This will make the new feature less relevant for them.
  • We are also working on improving the scaling of both panes. We want to allow for optimal support to both small and ultra-wide displays alike.

Again, thanks so much for your feedback!

September 14, 2021: Next steps about the design

Thank you for your feedback

Hello all, we are back with an update on the proposed designs for this wish. Thanks for all of your comments on the talk page. We heard what you said and synthesized the feedback as follows:

  • The button to preview the wikitext output should be more intuitive, the person clicking it should know what it does.
  • The button to preview the text should be in the toolbar.

We then took a second try at creating the following set of designs. We are proposing a new button appears in the toolbar:


We are proposing than when user previews the content, the preview button label remains "blue" to indicate that the preview state is on, and activated:


The preview button would turn back to black if users toggle it off and the preview would disappear.

Horizontal vs Vertical

Please note that these proposed designs are illustrative. We only included a vertical version because we are currently investigating if the ability to have a wide screen will still be an option given the planned and upcoming work on Web desktop improvements which would limit the page to 960px in width, making it too cluttered to have a horizontal view.

Open Questions: We want to hear from you!

  • Does the new button placement seem more intuitive to the workflows in the toolbar?
  • Does the current proposed layout feel like there is enough space to view both the wikitext and the output?

Thanks so much for your continued feedback on the talk page!

August 27, 2021: Initial Design Feedback

Proposed Designs

Horizontal Desktop Layout

A new button will appear. This gives editors the option to preview the text on the side in real-time:

Live Preview-collapsed-horizontal annotated.png

Note: The pink box above is just to draw attention to the button, it will not actually appear to users.

Editors will be able to click on the button highlighted above. If they do that, the following layout would allow them to preview the output in a scrollable fixed container:

Live Preview-expanded-horizontal.png

Vertical Desktop Layout

The following new user interface element will appear when a user has a vertical desktop screen:

Live Preview-collapsed-vertical annotated.png

Note: The pink box above is just to draw attention to the button, it will not actually appear to users.

Editors will be able to click on the button highlighted above. If they do that, the following layout would allow them to preview the output in a scrollable fixed container:

Live Preview-expanded-vertical.png

The engineers have begun work on these changes. We are introducing the changes inside of MediaWiki core. We'd love to hear your thoughts on our proposed designs. We'd especially love feedback on:

  • Making the copy and button placements intuitive
  • The overall feel of the proposed designs

We're looking forward to hearing your thoughts on our proposed designs and any other considerations!

Open Questions: We want to hear from you!

The solutions above are proposed and in early stages. We'd love to hear your feedback on the talk page. Your insight can help us understand other approaches, risks, and solutions.

These are our questions to you:

  • How do you think this will influence the way you edit?
  • Does the icon on the expand button prepare the editors to understand what it does? Is it distrupting?

Relevant Links