Jump to content

Reading/Web/Desktop Improvements/機能/固定ヘッダー

From mediawiki.org
This page is a translated version of the page Reading/Web/Desktop Improvements/Features/Sticky Header and the translation is 92% complete.
Languages:
Phabricator で追跡中
タスク T283505

デスクトップ版改善プロジェクトの一環として、一般に利用されるツールのうちページ最上部にしか提供してこなかったものを変更します。 新しい機能では、ページのどこを表示中でもこれらのツールを「常時表示の」あるいは「固定した」ヘッダとして使えるようになります。 読者にも編集者にも、これらのツールが使いやすくなるよう目指しています。 現状ですと、ページ最上部までいちいちスクロールしなければならないと認識しています。

経緯と目的

現状では、ウィキページ上で利用者用の機能は画面最上部および／もしくは左端のパネルにしかありません。 長い記事のページでは最初の数段落を過ぎてしまうと、利用者はツールなどにアクセスするときはわざわざ上にスクロールする必要があります。 この対処法として考えられるのは、サイトヘッダ（および／または記事のヘッダ）を「画面に常時表示」にすることです。 これにより、スクロール ダウンしてもヘッダーは画面上部 (コンテンツの上) に固定されます。

さらに、現状では閲覧者にも貢献者にもページ内の移動機能がほとんど提供されていません。 このため、特定のページを他のページと区別するのが困難です。

私たちの目標 :

  • ページ内のどこを表示していても機能性と可読性を両立させること。
  • ナビゲーションのためだけに閲覧者や編集者がページを上下にスクロールする手間を省くこと。

使用事例

  • 閲覧者としては、自分が読んでいる記事が何なのか常に知りたいし、そうすればサイト内での位置や移動先を把握できます。
  • 編集者なので、ページのどこからでも重要な機能にアクセスしやすくしてほしいし（例＝編集、履歴の表示またはトークページへ移動）、いちいち画面を上までスクロールして時間を無駄にしたくありません。
  • 私は複数の言語版を読むので、ページを読んでいる途中でいつでも言語を切り替えたいし、よくわからない単語や文にぶつかった時にすぐに別の言語版を表示したいです。

機能の説明と要件

常駐型／固定のヘッダーは、利用者がページ内で表示していた見出しを越えて画面をスクロールしたときに、ページ最上部に表示されます。

  • 匿名利用者には、ヘッダーに次の項目を表示します。
    • ウィキのロゴ
    • 検索
    • ページ名
    • 節の見出し
  • ログイン利用者には、ヘッダーに次の項目を表示します。
    • ウィキのロゴ
    • 利用者ツールメニュー（利用者ツールのページをご参照）
    • 検索
    • ページ名
    • 節の見出し
    • トークページのリンク
    • 履歴ページのリンク
    • ソースの表示および／または編集のリンク（ウィキ単位の個人設定に依拠）
    • 言語切り替え機能

ヘッダーのスクロールの挙動は、ログイン利用者のニーズに対応させること

  • 注記：現在、担当チームではスクロールときっかけに関してさまざまな挙動をテストしており、ヘッダーの表示をページのスクロール動作やタブの遷移に合わせることも対象にしています。 さらにヘッダーを常駐させる方法も 実験してみる予定です

ヘッダーは解像度が低くても対応可能とする (最低 500pxまで)

設計要件とガイドライン

試作品

https://people.wikimedia.org/~jdrewniak/dip/p4.html#/en/wiki/Moon

匿名利用者

Note: for the first iteration of the sticky header, the header will only be available for logged-in users

匿名利用者用のウィキメディアのウィキ群における「常駐」ヘッダー機能の表示案の試作品

ログイン利用者

ログイン利用者用のウィキメディアのウィキ群における「常駐」ヘッダー機能の表示案の試作品

定性的テスト

ユーザーテスト

メインのページ: Sticky Header and Table of Contents User Testing

常駐型ヘッダーに設ける項目の優先順位を理解するという目標を設置して、常駐型のヘッダーのユーザーテストは閲覧者と編集者を対象に、3つのロケーションと言語版で実施しました。 For the first iteration of the sticky header, we will be removing triggering behavior and making the sticky header persistent as per request of a number of the editors involved in the user testing. We will then evaluate the change once live. また現在の試作版も使い心地をテストしました。

テスト結果は繰り返し開発において、ヘッダーに盛り込むリンクの選定、ヘッダーを常設するか、きっかけで表示させるか挙動の検討に使いました。 このテストの全結果を参照。

試用品テスト

2021年5月、30ウィキにわたりログイン利用者で試作品テストを実施しました。 テストでは常駐型のヘッダーならびに利用者メニューを対象に、使い心地と機能性についてフィードバックを集める意図で 設計してあります。訳

初期の結果を見ると、テスト参加者の非常に多くの人が常駐型ヘッダーに対して肯定的な体験を報告しています。 参加者はページのどこを表示しても、常に重要な機能を利用できるのはよいと回答しました。

しかしながら、参加者のまとまった群 (20%以下) は常駐ヘッダーの現れ方そのものに難点を示しました。 参加者の大部分はさまざまなきっかけで表示されるよりも、ヘッダーはページに常駐の方が良いと記しました。 参加者の中に、きっかけを与えるとヘッダーが表示されるのを肯定しながらも、見えたり消えたりするタイミングが早すぎるため困ったと示した人が数名いました。

今後の段階として、ヘッダーが現れたり消えたりするトリガー （きっかけ）の評価をする予定です。 今後も常駐型のヘッダーに関して、ページに常に表示させる実験を続ける予定です。 これらの変更点は、パイロットウィキ群における繰り返し開発では常駐ヘッダーを導入する初回に表示させる計画です。

定量的テスト

初回の展開後、パイロットウィキ群をモニターし、利用者リンクについてビフォーアフターの使用の状況を比較する予定です。 これらのリンクのいくつかは件数は少なくても確実にアクセスが増えるだろう、中でもトークページと変更履歴への遷移について、そう予測します。

Results from A/B test on pilot wikis

From Jan 5 to Jan 31, 2022, we ran an A/B test to assess the impact of deploying the sticky header. The test ran on 22 of our pilot wikis. Logged-in users who were assigned to the treatment group with the new skin version saw the sticky header while users in the control group saw the old feature.

The primary goal of the AB test was to test the hypothesis that the sticky header decreases the need to stroll to the top of the page. We also studied following two questions:

  • What is the clickthrough rate (per pageview or per session) of each item on the sticky header?
  • What is the ratio of clicks of sticky header items to the corresponding items at the top of the page?

Overall, there was an average 15% decrease in scrolls per session by logged-in users on the 15 pilot wikis in the treatment group (with the new sticky header), compared to the control group (without the sticky header). This indicates that our hypothesis was correct - adding the sticky header to the page reduced the need to scroll to the top of the page significantly.

The full report is available at this link.

Results from A/B test for edit button in the sticky header

To evaluate the impact of introducing an "edit" button within the sticky header, we ran two A/B tests. These two A/B tests were designed to help us learn how the new edit button within the sticky header impacted the likelihood:

  1. People would publish the edits they started
  2. The edits people published would get reverted

What follows are the conclusions we're drawing from these A/B tests and details about the Wikipedias that participated in them:

  1. People were more likely to complete the edits they start using the sticky header
    Of all the edits people initiated throughout both A/B tests, there was a 2.8% and a 6.8% increase in the percent of people who were able to successfully complete at least one edit using the edit button within the sticky header, in AB Test Experiment #1 and #2 respectively. This is in comparison to edits people started using other edit buttons present on the page.
  2. Edits people initiated and published using the sticky header were less likely to be reverted
    Of all the edits people published throughout both A/B tests, the edits people started using the new edit button within the sticky header were less likely to be reverted than edits started using other edit buttons present on the page.

Note: We are able to confirm that edits published using the sticky header were less likely to be reverted than edits publishing using other edit buttons present on the page. Hovewer, we are unable to confirm and share a specific percentage decrease in revert rates because of a relatively high margin of error. Learn more in the test report.

The first test ran between 6 July and 8 August 2022 on 15 Wikipedias. At these projects, 50% of people included in the A/B test were shown the sticky header without an edit button within it and 50% of people were shown the sticky header with an edit button within it.

The second test ran between 16 August and 1 September 2022 on two Wikipedias: Vietnamese and Indonesian. At these projects, there were three equally-sized test groups:

  1. A control group that did not see or have access to the new sticky header
  2. A treatment group that saw the new sticky header without an edit button within it
  3. A treatment group that saw the sticky header with an edit button within it.

よくある質問

自作のテンプレートで 常置型の要素を使っています。常置型の目次を導入とのことですが、どうすれば競合を予防できますか?

常置型ヘッダの最終行に追加するには、その要素に.mw-sticky-header-element クラスを付与します。

常置型ヘッダのドロップダウンメニューに項目を追加したいんですが？

mw.util.addPortletLink('p-personal-sticky-header', '#', 'test', 'myfeatureid')
mw.util.addCSS('.mw-ui-icon-vector-gadget-myfeatureid:before { background-image: url(/w/resources/lib/ooui/themes/wikimediaui/images/icons/code.svg); }' );

How do I add icons to the sticky header

We currently do not officially support extending the sticky header in this way.

Why is there no language button in my sticky header

Go to preferences, and tick the box "Use a compact language list, with languages relevant to you." to enable languages in the sticky header.

Why is the sticky header not showing on a certain page?

The sticky header is currently only visible to logged in users using modern browsers on allowed actions and allowed namespaces when the user has scrolled down the page. At time of writing it is only enabled on namespaces: Main, Main talk, User, User talk, Wikipedia, Template, Help, Category, Portal, Module[1] but not old revisions, diffs, history or edit pages[2].

関連項目

脚注

  1. ↑ https://github.com/wikimedia/Vector/blob/master/resources/skins.vector.es6/stickyHeader.js#L535
  2. ↑ https://github.com/wikimedia/Vector/blob/master/resources/skins.vector.es6/stickyHeader.js#L548
Retrieved from "https://www.mediawiki.org/w/index.php?title=Reading/Web/Desktop_Improvements/Features/Sticky_Header/ja&oldid=6347186"