Community Wishlist Survey 2021/Real Time Preview for Wikitext

Hello all, and thanks for coming to read more details about Realtime 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.

This page documents a project the Wikimedia Foundation's Community Tech team has worked on or declined in the past. Technical work on this project is complete.

We invite you to join the discussion on the talk page.

Realtime Preview for Wikitext Wish Team
Allow 2010 wikitext editors to preview the page while editing
Group:	Community Tech
Team members:	Nicolas Ayoub, Harumi Monroy, MusikAnimal, Emanuele Leoni, Sam Wilson, Szymon Grabarczuk
Lead:	Natalia Rodriguez (product owner)
Updates:	Updates

Wish Objective Summary: Allow users using the 2010 wikitext editor to preview the page in real time when editing.

Original Wish

Background & Problem Space

NOTE: To avoid confusion, we renamed the wish title and project name from Live Preview to Realtime 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 realtime 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 realtime 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?

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.

Release Timeline

Release Timeline

Item	Status	Actual Date	Target Date	Notes
Deploy to test wiki for user testing purposes	Complete	2022-03-30	2022-03-30
Enable on Beta cluster – Beta English Wikipedia and Wikisource only, since Realtime Preview changes the UI slightly for everyone even when you don't have it turned on	Complete	2022-03-30	2022-03-30
Merge MVP for QA to Review	Complete	2022-04-26	2022-04-08
Confirm MVP Top Priority tasks merged and QAd	Complete	2022-04-26	2022-04-08
Get a final greenlight from Design QA	Complete	2022-05-19	2022-04-15
Train w work deployed to Polish Wiki	Complete	2022-04-26	2022-04-27	Designer to schedule user video calls to observe users and design accordingly
First pilot wiki as an opt-out beta feature: plwiki	Complete	2022-04-26	2022-04-27
Announcement on project page & any tool-specific pages	Complete	2022-08-17	2022-04-30
Pilot wikis as an opt-in beta feature: huwiki, fiwiki	Complete	2022-05-26	2022-05-24
Pilot wikis with Vector-2022, as an opt-in beta feature: cawiki, viwiki, fawiki	Complete	2022-06-14	2022-06-14	After phab:T307725 is complete
Get greenlight from Performance Review	Complete	2022-10-17	2022-05-24
Announcement in WMF internal #release-announcements Slack channel	Not Started
Bugs identified and cut	In Progress			Should happen as soon as we release to the first wiki
Bugs triaged	In Progress			Should happen as soon as we release to the first wiki
Announcement in Tech/News	Complete			To be done when releasing to all wikis: Tech/News/2022/31 Tech/News/2022/33 Tech/News/2022/35
Release to group 0 as opt-in Beta (T314150)	Complete	2022-08-02	2022-08-02
Release to group 1 as opt-in Beta (T314182)	Complete	2022-08-23	2022-08-17
All wikis as opt-in Beta	Complete	2022-08-31	2022-08-31
Graduate Beta Feature to feature for all	Complete	2023-01-12	2023-01-09

Status Updates

Aug 17, 2022: Available as an opt-in beta feature for most wikis

After gathering feedback from the pilot wikis (cawiki, viwiki, fawiki, plwiki, huwiki, and fiwiki – thank you all!) we have released this feature to group 0 and group 1 as an opt-in beta feature. We plan to release to group 2 this August 31st as an opt-in beta feature. We plan to let it sit behind the Beta feature tab for 6-8 weeks, listening to feedback and improving the feature if any bugs arise. After that time window, we plan on graduating it from a beta feature to a feature for all 2010 Wikitext Editor users. To enable this feature from inside your beta preferences, be sure that the Realtime feature is enabled, and that the New Wikitext mode is disabled.

Screenshot of MediaWiki beta preferences

We would love to hear about how you enjoy using this tool and any other feedback from all of you in the Talk page!

May 3, 2022: Launching to partner projects

We have launched a version of the Realtime preview feature to Polish Wikipedia. Its community has agreed to partner with us and give us feedback on how to improve it before we launch to the rest of the users. Please find our complete Release Plan.

This feature touches one of the most used editors (Wikitext 2010) across wiki projects. We've thus decided to roll it out as a Beta Feature before we release the feature to everyone. This will allow us to collect feedback and make improvements before we release to everyone.

We are partnering with users early on to understand behavior on the new tool and make improvements. Depending on the user’s connection, we are aiming to observe and evaluate patterns regarding the automatic and manual reloads of the preview pane, as follows:

• Automatic reload: Debounce time. When the preview pane is automatically reloading, is our debounce time sufficient to provide a fluid experience?
• Automatic reload: Discoverability of the manual reload button. When the preview pane is automatically reloading, is the manual reload button that appears while hovering over the preview pane easy to find?

and/or

• Manual reload: Discoverability/Display time of the manual reload status bar. When the preview pane is NOT reloading automatically, the user will see a status bar inviting them to manually reload. Is the discoverability of the bar sufficient? Is the status bar obstructive to the users’ workflows?

We will aim to observe both of these scenarios for users with stable high-speed internet connections. In both cases, we will be performing the test on two pages: one short article without images (for faster reload time) and another one with a large content and multimedia assets (for slower reload time).

Aside from our main investigation, we will also be observing the following during our screen-sharing sessions with users:

• Discoverability of the overall feature: although users will be notified of the existence of the realtime preview feature, and the potential relationship between the latter and the "Show preview" feature.
• User screen sizes- This data could be helpful to understand how useful the Realtime Preview is for folks with a smaller screen. Does this make their experience too crowded?
• Usage of syntax highlighting/Code Mirror
• Understanding that both panes do not have a synced scrolling behavior.

If you would like to give us any feedback on any of the open questions above, please reach out to us in the talk page as we are eager to hear about the usability of this new feature. Thanks for building with us!

November 2, 2021: Findings from user testing of designs

Hello everyone,

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

Acknowledgments:

• 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:

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

• Live Preview (NOT what we are doing)
• Original Wish
• Wikitext