Community Wishlist Survey 2021/Real Time Preview for Wikitext

Add links
From Meta, a Wikimedia project coordination wiki
< Community Wishlist Survey 2021
This is an archived version of this page, as edited by NRodriguez (WMF) (talk | contribs) at 18:30, 14 September 2021. It may differ significantly from the current version.
Other languages:
Real-Time Preview for Wikitext Wish Team Translate
Allow wikitext editors to preview the markdown when editing
Group:Community Tech
Team members:Nicolas Ayoub, Harumi Monroy, MusikAnimal, Emanuele Leoni, Sam Wilson, Szymon Grabarczuk
Lead:Natalia Rodriguez (product owner)
Updates:Updates

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 markdown in real time when editing.

Original Wish Original Wish Original Wish Original Wish Original Wish Original Wish Original Wish Original Wish Original Wish Original Wish

Background & Problem Space

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-markdown 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 markdown, 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 (horizontal 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?

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

September 14, 2021

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 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.

We'd love 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:

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:

Vertical Desktop Layout

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

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:

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

Retrieved from "https://meta.wikimedia.org/w/index.php?title=Community_Wishlist_Survey_2021/Real_Time_Preview_for_Wikitext&oldid=22019478"