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

このページはウィキメディア財団 コミュニティ技術チームがこれまでに作業したもしくは中断したプロジェクトを解説します。技術面の作業は完了しました。

協議はトークページで展開しており参加をお待ちしています。

Realtime Preview for Wikitext Wish Team
Allow 2010 wikitext editors to preview the page while editing
グループ:	Community Tech
チームのメンバー:	Nicolas Ayoub, Harumi Monroy, MusikAnimal, Emanuele Leoni, Sam Wilson, Szymon Grabarczuk
リーダー:	Natalia Rodriguez (product owner)
更新:	Updates

皆さん、リアルタイム・プレビュー（随時確認） の詳細ページへようこそ。 これはコミュニティ要望調査2021年で4位でした。 この記事では、この要望への対応策をまとめていきます。 皆さん、ぜひ洞察とフィードバックを投稿して、最善の改良ができるようにご協力ください。

要望の目標を要約すると： 2010年版ウィキテキストエディタの利用者に、編集中のページをリアルタイムでプレビューできるようにしてほしい。

要望の原文

背景と空間の問題

注記：混乱を防止するため、要望とそのプロジェクトの題名を変更してあり、元の名称はライブのプレビュー、現在はリアルタイム・プレビューを採用しています。 ライブのプレビューという名称の機能がすでに開発中だからです。

ウィキテキストとはウィキのマークアップ言語のことです。 ウィキのフォーマット設定に多くの利用者が使っています。 読者が実際に目にするページとは表示が異なります。 ウィキテキストを利用すると、最終的な画面表示を想像するのは難しいことがあります。 そのため、多くの編集者は変更点を公開する前に、プレビュー機能を使っています。 しかしながら、これだとウィキテキストで執筆するプロセスに余計なステップを経なければなりません。

高次のレベルでは、要望者が提示したこの問題を以下のようにまとめることができます。

編集者の皆さんは、変更点を書くときに自分が変えたいようになるかどうか、どうやって確認しているのか？

製品の立場から言うと、マークアップの出力結果を編集者の皆さんにリアルタイムで表示することは、次のように言い替えができます。

• 編集者の経験の改善として、編集の道のりで発生する余計な手順 (クリック数) を減少させる
• 誤字を見分け、ウィキテキストの破綻を書き換えて、ウィキの品質を即時に維持

解決の提案

設計の要件

編集者の皆さんが書いたコンテンツをプレビューする方法を実現するには、以下の設計要件を下敷きとします。

デスクトップ版の大きさの画面を使ってウィテキストで編集する編集者として、私にできることは以下のとおり：

• ウィキテキストの出力結果をプレビューするオプションができる
• プレビューの出力はスクロール可能で、全画面表示にしなくても出力結果の見たい要素を簡単に確認できる

範囲と制約

リアルタイム・プレビュー用ボタンには次の機能／利用シーンを想定：

• ウィキテキストによる編集ツール。 ビジュアルエディターは変更しない予定です。
• デスクトップで編集。
• 画面幅が1200 px 超、横置き表示モード（ランドスケープ）。 これはページ内の要素がごちゃごちゃにならずに表示できる標準の画面幅です。 最低の画面幅は状況により異なるはずです。 縦置き表示の場合（ポートレート）、これが既定で提供されます。

データの検証

以下の疑問点に取り組み、答えを探して問題の理解に結びつくだろうと予測しています。

• 変更点をプレビューする編集者の割合は？
  • 変更点のプレビューができると差し戻しは減るか？
• ウィキで編集をする編集者のうち、デスクトップ大の画面を使う人の割合は？
• 縦型レイアウトは既定として利用価値があるか？

この要望を採用した理由と手順は？

この要望は2021年の優先順位決定のプロセスで高得点でした。 得票数では注目度がとても高かったことから、コミュニティに及ぼす利点として影響が大きく、対応の複雑さは割合に低いだろうと予測されました。 私たちが取り組む全体的なプロセスはこちらをご参照ください。

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

更新情報

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!

2022年5月3日：提携するプロジェクト群に実装

リアルタイム・プレビュー機能の特定版をポーランド語版ウィキペディアに展開しました。先方のコミュニティから改善点のフィードバックの投稿に協力してもらい、他の利用者用に展開する準備に使う同意をもらいました。展開の全体プランをご参照ください。

この機能は、さまざまなウィキメディアのプロジェクト群で最も利用率が高いエディタ (2010年版ウィキテキストエディター) に変更を加えることになります。そこで、全員に機能を展開する前に、ベータ機能としてロールアウトすることに決めました。こうしておくと全面的な展開の前に、フィードバックの収集と改善が実施できるからです。

新しいツールを使った挙動を理解しようと、利用者と早い段階からパートナーを組み、改善に取り組もうとしています。それぞれの利用者の接続状態に応じて、プレビュー欄の再読み込みを自動化した時と手動にした時のさまざまなパターンを観察して評価することが目的で、その詳細は以下のとおりです。

• Automatic reload: Debounce time. プレビュー欄が自動的に再読み込みする間、既定のデバウンス時間の長さは十分で体験が流れるようにつながりますか？
• Automatic reload: Discoverability of the manual reload button. プレビュー欄が自動的に再読み込みする間、手動で再読み込みするボタンはその欄にカーソルを入れた時に見つけやすいですか？

and/or

• Manual reload: Discoverability/Display time of the manual reload status bar. プレビュー欄が自動的に再読み込み「しない」場合は状態を示す帯を表示して、手動で再読み込みするように促します。その帯は目につきやすいですか？ あるいは利用者の作業の邪魔になりますか？

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!

2021年11月2日：設計の利用者テストで分かったこと

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.
• ある利用者から報告があり、ウィキテキストの入力とプレビューの出力の関係は常にもっと把握しやくなるはずとのことです。その軽減には、両方の表示欄で対応する文を強調表示す、また画面スクロールあるいは編集行動と一致させる方法はないか、探究しています。

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!

2021年9月14日：設計の次の段階

フィードバックをありがとうございます

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

横置きと縦置きの対照

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.

公開質問：皆さんのご意見募集中！

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

提案されたデザイン

デスクトップ版の横型画面用レイアウト

新しいボタンを追加します。 これにより、編集者は画面の横余白でリアルタイムのプレビューができるオプションを利用できるようになります。

注記：上記のピンク色のボックスは、ボタンに注目してもらうために塗ってあるだけで、利用者にはこの色では表示しません。

編集者は上記で目立つように示したボタンをクリックすることができます。 実行した場合、以下のレイアウトによって出力結果をスクロール可能な固定コンテナでプレビューできます。

デスクトップ版の縦型画面用レイアウト

デスクトップ用の縦型モニタを使うと、以下の新しいUIの要素が表示されるようになります。

注記：上記のピンク色のボックスは、ボタンに注目してもらうために塗ってあるだけで、利用者にはこの色では表示しません。

編集者は上記で目立つように示したボタンをクリックすることができます。 実行した場合、以下のレイアウトによって出力結果をスクロール可能な固定コンテナでプレビューできます。

技術者はこれら変更点について作業を始めました。 MediaWiki コアに変更を導入する予定です。 このデザイン案について皆さんのご意見を募集します。 特に次の点について関心があります。

• ボタンの配置と文字をわかりやすく
• デザイン案の全般的な印象

デザイン案について、皆さんからご意見やその他の考えるべきことをぜひ教えてください。

公開質問：皆さんのご意見募集中！

上記の解決法はまだ提案中で、これから変わっていきます。 ぜひ皆さんからのフィードバックをトークページにてお聞かせください。 皆さんの洞察を参考に、別のアプローチ方法やリスク、解決法を考えていきたいところです。

以下の質問を皆さんにお尋ねします。

• 皆さんの編集の方法にどんな影響が出そうですか？
• 拡張ボタンにつけたアイコンは、利用者に機能をきちんと伝えるか？ うまく共有できているか？

参考リンク

• ライブ・プレビュー (現在の作業の範囲外)
• 要望の原文
• ウィキテキスト