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

This page is a translated version of the page Reading/Web/Desktop Improvements/Features/Sticky Header and the translation is 100% complete.

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

経緯と目的

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

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

私たちの目標 :

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

使用事例

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

機能の説明と要件

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

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

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

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

ヘッダーは解像度が低くても対応可能とする (最低 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

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

ログイン利用者

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

定量的テスト

利用者テストの実施

常駐型ヘッダーに設ける項目の優先順位を理解するという目標を設置して、常駐型のヘッダーのユーザーテストは閲覧者と編集者を対象に、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. また現在の試作版も使い心地をテストしました。

テスト結果は繰り返し開発において、ヘッダーに盛り込むリンクの選定、ヘッダーを常設するか、きっかけで表示させるか挙動の検討に使いました。 Special:MyLanguage/Reading/Web/Desktop Improvements/Repository/Sticky Header and Table of Contents User Testing#Sticky headerこのテストの結果全文はこちら

試用版のテスト

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.


開発者向けの留意点として組み込み

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

常置型ヘッダの最終行に追加するには、その要素に.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); }' );

関連項目