Reading/Web/デスクトップ版の改善

From mediawiki.org
This page is a translated version of the page Reading/Web/Desktop Improvements and the translation is 100% complete.

以前のウィキペディアの既定の外装 (ベクター) は、2010年に導入されました。 その後の10年余りの期間に、拡張機能ガジェット利用者スクリプトによってインターフェースが強化されました。 そのほとんどはビジュアルまたはウィキ横断的に調整されていません。 また同時に、ウェブデザイン、あるいは閲読者や編集者の期待するものが進展しました。 そこからいくつかのアイデアを取り上げ、すべての人の既定の経験として、すべてのウィキに、整理され、一貫した方法で、持ち込むべき時期でした。

目標はウィキメディアのウィキをもっと利用者に親しみやすくして、閲読者のユーティリティを高め、既存の編集者に対するユーティリティを維持することです。私たちのサイトに寄せられる信頼を高め肯定的な感覚を増やせたか、サイトのユーティリティ(検索や言語切り替えなどよく使われる操作の使用)が向上したか測定しました。

現在、ほとんどのウィキにおいて、ログイン利用者のみが個別にオプトインできます。ですが、ますます多くのウィキで、私たちの変更が全員に対する既定として展開され、ログイン利用者がオプトアウトできるようになっています。全ウィキ群で改善が既定となるまで、既定が2022年版ベクターであるウィキを増やしています。

更新情報

2023年11月: 表示の変更、 展開先の拡大、力点を移すこと

従来 (?vectorzebradesign=0)
更新後(?vectorzebradesign=1

ゼブラ試作版から発想を得た様式

Zebra #9 試作版(ゼブラ#9)の一環として、直近の情報更新2回で説明しましたが、見た目について2種類の変更をしました。配色による領域の分離と、その他のCSS の修正です。前回の報告のとおり A/B テストでは配色による領域の分離が改善になることを証明できませんでした。そこで、その他のCSSの修正に焦点を移し、それらの変更点を実装しようとしているところです。変更前後をプレビューするには、URL パラメータを使ってください:?vectorzebradesign=0(変更前)と?vectorzebradesign=1(変更後)。変更点は次のとおりです:

  • ドロップダウン型のメニュー類(サイドメニュー、目次、ユーザーメニュー、ツールメニューをピン留めしていない場合)の枠線とドロップシャドウ(影)の色を薄くします。
  • ドロップダウンメニューにある"サイドバーに移動"/ "非表示"ボタンは、角括弧で挟む代わりに背景色をグレーにします。
  • メインメニューを側部に配置(ピン留め)したとき、背景色がグレーにならないようにします。代わりにどのメニューも側部に置いたときの見た目を同じにします。
  • 左右のカラムを同じ幅にします。
  • 上記の変更により、左右両方にメニューをピン留めしたときの本文領域の幅がやや狭くなります。
  • 目次と本文領域の間の隙間を減らします。

ウィキペディアで11月半ばに以上の変更を展開した言語版は次のとおり。フランス語版、カタロニア語版、ヘブライ語版、ポーランド語版。これらの変更点は、2-3週間以内にはすべての言語版に展開の予定です。これらは将来の変更の素地となるもので、たとえば読者の使いやすさ用のメニューなどに備えます。

2022年版ベクター外装の開発を継続

2022年版ベクターの解説動画

前回の更新以降、以下の複数のウィキペディアで既定の外装を変更しました。ドイツ語版、ヒンディー語版、ハンガリー語版、ノルウェー語版(ブークモル)、スウェーデン語版。あわせて、この外装の解説用に短編動画を公開。さらにデザインチームが揃えたロゴを受け取りましたので、姉妹プロジェクトへ広く展開する準備も完了しました。

  • 2022年版ベクター外装を既定の外装にしたのは、英語版を除くウィキブックス、ウィキニュース、ウィキクオート、ウィキバーシティ、さらにメタウィキです。
  • 未展開の姉妹プロジェクトとの対話を重ね、展開の日程を決めていく予定で、英語版を除くウィキソース、ウィクショナリー、ウィキボヤージュから取り掛かります。

ウィキソース固有の名前空間に対する制限付き幅/全幅の既定の設定のように、一部のプロジェクトでは調整が必要です。ガジェットやユーザースクリプトも更新が必要になるかもしれません。変更が必要なのが外装自体かコミュニティが制御するコードかによって、修正もしくは変更の補佐を喜んで行います。ご質問や変更点の追加など、ぜひデスクトップ版の改善のトークページに投稿するか、もしくはメールにて直接、担当の SGrabarczuk (WMF)(S・グラバルチュク)にご連絡願います。

デスクトップとモバイルの読みやすさ改善に注力

チームは作業の力点を移し、読者のアクセス性向上プロジェクトに取り掛かります。外装の2022年版ベクターとMinerva(ミネルバ)を対象に、文字組み(タイポグラフィ)の改善、ダークモードの導入を施します。ぜひプロジェクトページを開き、詳細と関与する方法をご参照ください。

2023年9月: コンテンツ分離 (Zebra #9) A/B テストの結果

2023年6月、インターフェースのコンテンツ分離レイアウトを変えて比較実験を行いました。 この試作品はテストしたデザインを示しており、これを "Zebra"(ゼブラ) と呼んでいます。 可読性を向上させ、ページのコンテンツ(本文)に集中しやすくすることが目標でした。 この比較実験ではプロトタイプのデザインと、現状のベクター2022が採用する白ベースとを対比させました。 実験の結果から以下のことが示されました:

  1. セッション単位のページビューは Zebra を見せた対象グループのほうが 3% 増
  2. セッション単位の編集回数は Zebra を見せた対象グループのほうが 3.4% 減
  3. 目次のクリック率が17%減少
  4. セッションあたりのページツールのピン留めが87%増加

テストの設定の見直し後、データの矛盾を引き起こす問題は何も見つかりませんでした。 次に、テストの結果に影響するかもしれない他の因子を調査しました。 編集およびページ閲覧の減少のうちかなりの量が1200ピクセルよりも狭い画面サイズによるものであることがわかりました。 これらの結果を利用者テストの結果と組み合わせました。 テストデザインとコントロールデザインの間で可読性に有意な差異は示されませんでした。

試作品は、テストした形式では、可読性を向上させず編集に悪影響を及ぼす可能性があるという結論になりました。 テストした形式でこの試作品の開発は進めないことに決定しました。 代わりに、以下のようにして可読性を向上させコンテンツへの集中を改善する計画です:

  1. タイポグラフィ(文字組み)に変更を導入し、可読性とコンテンツの理解の向上に焦点を当てる。 これは新しいプロジェクト、Accessibility for readingの目標です。
  2. Zebraに改善を導入し、狭い画面に最適化し、テストを繰り返す。

目標は何だったのか?

たとえば洋服を保管するとして

以前、インターフェースは……

……利用者が予測する動きにマッチしていませんでした。 ……ごちゃごちゃしていて、直感的に理解できませんでした。 ……コミュニティの視点を強調していませんでした。 ……モバイル版と一貫性がありませんでした。

  1. デスクトップ版のインターフェースは、現代的なウェブプラットフォームを使う利用者には見慣れない挙動でした。それで使い方の感覚が失われ、断絶されたような感じがしました。ナビゲーションとインターフェースのリンクは無計画に編成されていました。
  2. ごちゃごちゃしていたため、利用者の気が散ってページを開いた目的に集中できませんでした。閲読者がコンテンツに集中するのが困難でした。言語の切り替え、コンテンツの検索あるいは閲読の設定の調整などが、直感的にできませんでした。新規編集者はアカウントを設定したり、エディターを開いたり、あるいは調整目的のために記事ではないページを利用する方法を学んだりすることが直感的にできませんでした。
  3. ウィキメディアのウィキ群がどのように機能しているのか理解している読者はごくわずかでした。多くの読者は自分が読んでいるコンテンツがボランティアによって執筆され頻繁に更新されること、または自分も同様に貢献できることを知りませんでした。
  4. デスクトップ版のインターフェース、アプリ、モバイルウェブ版では、経験に大きな違いがあるため、閲読者は私たちの製品群をひとまとめのものとして把握しにくくなっていました。ウィキメディアサイトのコンセプトに統一感がありませんでした。

変更の進め方

原則

コンテンツへの介入はしません。 既存の機能を廃止することはありません。 ベクター以外の外装は変更しません。 既存のガジェットから発想を得ています。 大がかりな変更を一気に導入することはありません。

  1. 取り組む対象はインターフェースに限定します。書式テンプレートやページ上のコンテンツの構成、地図のサポート、ウィキ間テンプレートは作業の対象外です。
  2. ベクター以外の外装は、私たちが取り組む調整の対象外です。ベクターはレガシー版を凍結、新機能は新しい既定のベクターの一部として実装に取りかかります。
  3. 私たちが加えた変更は目で見てすぐわかりますが、裏では革新的な取り組みを行い、閲読者にも編集者にもサイトのなじみやすさが変わらないようにしました。それぞれの機能について、個別に議論、開発、展開しました。
  4. ボランティアをしてくれる多様な早期導入ウィキ(ウィキペディアと姉妹プロジェクト群の両方)と協働して私たちの改善をテストしました。
  5. 開発の前後の両期間に、データを収集しました(A/Bテスト経由、複数回の試作品フィードバック募集など)。結果が著しく否定的だった場合には、変更を巻き戻すことを約束しました。
  6. 多くのウィキを分析した結果、たくさんの便利なガジェットの存在に気づきました。なかには間違いなく、表に出して既定の利用者体験に組み込むに値するものもありました。
  7. インターフェースの要素を移動しましたが、かつて既定で利用可能だったナビゲーション用の項目およびその他の機能はすべて維持しました。


実装計画と日程

この外装をあらゆるウィキで既定にする準備ができました。

The timeline

早期導入ウィキの一覧(テストウィキ) 

ウィキの最初のグループ (上のタイムラインの ※ マーク):

ウィキの 2 番目のグループ (上のタイムラインの † マーク):

ウィキの 3 番目のグループ (上のタイムラインの ‡ マーク):

ウィキの 4 番目のグループ (上のタイムラインの § マーク):

小規模ウィキの最初のグループ(上のタイムラインの ¶ マーク): 

参加と連絡先

  • ニュースレターを購読
  • 翻訳: 以下の関連ページの翻訳にご協力ください:
優先すべき翻訳 

トップ3

  1. Reading/Web/デスクトップ版の改善
  2. Reading/Web/Desktop Improvements/よくある質問
  3. Reading/Web/Desktop Improvements/機能

その他の優先すべき翻訳

  1. Template:Reading/Web/Desktop Improvements/Talk page intro
  2. Template:Reading/Web/Desktop Improvements/Features/Navigation
  3. Template:Reading/Web/Desktop Improvements/Header
  4. Reading/Web/Desktop Improvements/更新
  5. Reading/Web/Desktop Improvements/リポジトリ
  6. Template:Reading/Web/Desktop Improvements/Office hours announcement

すべての翻訳対象ページへの直接リンク


追加した機能