Reading/Web/Desktop Improvements/ja

デスクトップのインターフェースは年月とともに変化してきましたが、ベクター外装 (既定のサイトの見た目) の導入以降、ボランティアの皆さんが主導しプロトタイプやユーザースクリプト、ガジェットあるいはボランティア発想の外装としてのみ展開されてきました. いよいよ、それらの発想からいくつか取り入れ既定の体験に組み込む時期を迎えたと考えています. 読者ウェブチーム readers web team は今後2、3年の期間をデスクトップ版の体験の調査とビルドにあてて、調査結果と既存のツールを活用した改善を実施します. 目標は新しく読者や編集者になる人にもっと優しく、誰でも (編集の新人からベテランまで) サッと手軽に使えるようにするためです.

このプロジェクトは協議が始まったばかりです. まだこれといった計画もなく実際の開発もしていません. 課題として何に集中するのか、皆さんの協力でフィードバックを集めたいので、たたき案となる設計のアイデアを以下に挙げてご意見を募集します.

支援の方法
フィードバック：これまでに集まったアイデアや模式図の詳細と下位ページに目を通してから、フィードバックをトークページに投稿してください - 改善するにはどうすれば良いですか？ 考慮するべき重要な点が何か抜け落ちていませんか？

調査とアイデア：以下の第1フェーズ：設計アイデア「Phase 1: Design ideas」節を編集してアイデアや感想、過去の議論や、検討したい既存のガッジェトあるいはスクリプトへのリンクなどを追加してください.

個別のテスト：開発が始まると、個人設定においた新しい外装から直接、進行中の作業にアクセスできるようになります. 個別にオプトインしてテストできるようにします.

全ウィキ：あわせて広範なテストに協力してくれるウィキを募集します. 具体的にはログアウトしてサイト利用者向けのローカルの既定の変更なのです. もしご利用のコミュニティから関心が集まりそうだと判断した場合、なんでも質問を尋ねてから、その後、いつも活動するコミュニティで議論をしてコンセンサスを得た段階で、その話し合いへのリンクをトークページに投稿してください.

投稿は何語でもよく、長文のコメントや意見も歓迎します.

更新
このページに新規の見出しが増えた時に更新の通知を受けるには、Newsletter:Desktop Improvements updatesを購読します. 節目のマイルストーンは一斉通知ですべてのウィキにお知らせします.

May 2020: First deployment - officewiki and testwiki
This Monday we deployed the first visual change of the improved version of the desktop skin on our first production wikis - Officewiki (used internally by the WMF) and Testwiki (for general testing purposes). On these wikis, you will notice a reconfiguration of the project logo which is the first portion of our improved header. You can also turn the updated skin version on and off from the sidebar and your user preferences. In the next couple of weeks, we will also be deploying a collapsible sidebar for these wikis, followed by a deployment of these changes to our full set of test wikis.

We have also introduced a query string parameter using which you can see the state of the Vector skin on any wiki by adding the parameter ?useskinversion=2 to the url. Example: https://en.wikipedia.org/wiki/Moon?useskinversion=2

March 2020: User Research with Readers - phase 1 report
Starting in January 2020 we have been working with Hureo, a user research firm based in India, to perform a user study on how new and casual readers use the desktop interface of Wikipedia. The study was separated in two phases, with the first phase focusing on primarily English readers, and the second phase on bilingual and non-English readers. The goal of the study was to understand the experience of new and casual readers, both in terms of how they feel about the site and how they use the site, focusing in particular on the concepts of trust and welcomeness, as well as on the usability of commonly used features on the site. In addition, we were also interested in uncovering potential areas of improvement in terms of overall and feature-specific usability. The outcome of the first phase of the study is a report detailing their observations from 24 user interviews, which is available below. We will be using these results to inform future feature development for desktop improvements project.

March 2020: Full results from prototype feedback
In December, 2019 we published a prototype of the first few features of the desktop improvements project for community feedback. The prototype presented a collapsible version of the sidebar, a fixed-width layout, and a more prominent location for the language switcher. We received detailed, thoughtful feedback from over 200 logged-in users, across five languages. The feedback was mostly positive, with the majority of users seeing the proposed changes as an improvement over the current design. However there were also some areas of concern. Many of the issues raised were due to bugs in the prototype (particularly with the language switching menu), while others exposed areas for improvement that we will iterate on and/or keep an eye on during development. We have published a report which highlights the main points raised, both positive and negative, and our plans going forward in response to this feedback.

February 2020: Update on initial features and overall feature sequence

 * We have began building the opting-in and opting-out structure for the project. The setting for turning the improvements on will be within the user preferences list for logged-in users. For test wikis, the improvements will be on by default, but logged-in users will be able to turn them off anytime via their preferences or a button in the sidebar. Please see the Opting in and Release Plan page for more details and mockups.
 * We have also published the current list of features considered for the project as well as the sequence we plan on building them in. As we will be testing each individual feature prior to building, this list is subject to change based on the feedback we receive.

February 2020: Feedback Round 1 Summary
We have finished our first round of feedback for the prototype of the first few features of the desktop improvements project: the new header, collapsible sidebar, and improved language switching. So far, the results have been mostly positive, with the majority of users seeing the changes as a significant improvement over the current design. However, we also found a few areas for improvement that we will iterate on and consider during development. Here are a few highlights of the results so far:


 * A majority of the editors who tested the prototype really liked the new location of the language switcher.
 * A few editors raised concerns around internationalization and the ability to switch languages using one click.
 * A majority of the editors liked the collapsibility of the sidebar, especially for readers
 * There were some concerns around the amount of white space introduced with a collapsible sidebar and fixed-width layout
 * We saw many requests for a dark/night mode for the site

We are currently running the second feedback round on English and Polish Wikipedias. If you haven’t had a chance yet, please let us know your thoughts on the prototype page. Once both feedback rounds are completed, we will be publishing a more in-depth report.

2020年1月: 言語切り替えの利用者テスト
前月の12月、言語切り替え (サイドバーに設置) の使用感テストを行い、この機能を文のヘッダ (訳注：最上部の欄外) に配置した例と比較しました. 21人の利用者を対象にプロトタイプを試してもらい、言語切り替え機能の配置を変えると使いやすいかどうか確認しました. テスト結果は仮定を裏付け — 試験グループ(新しい配置) は、対象グループ (従来の配置) よりも言語の切り替えにかかる時間が短かったのです. これらの結果に基づきこの位置へ言語選択機能を配置換えする件は、デスクトップ改善プロジェクトの一貫として、さらに掘り下げる予定です.

December 2019: Prototype testing
Between December 2019 and February 2020, we will be performing tests on a prototype for the first few features of the desktop improvements project. We will be gathering feedback from a variety of test wikis by encouraging editors to participate using a central notice banner. We ran the banners and received feedback from the majority of our test wikis during December 2019. In February 2020, we will continue running the banners on English and Polish Wikipedias. So far, the feedback we have received is mostly positive but we have also identified some areas of our prototype that we will iterate on based on the feedback. We will be publishing the results of the first round of feedback over the next few weeks, and of the second, sometime in February. In the meantime, we encourage you to give us feedback (if you haven't yet) on the prototype page.

2019年10月：技術調査パート2
このプロジェクトの準備段階で行った技術的調査の結果を公開しました. 具体的には以下の各点に重点をおいて情報を集めました.
 * ログアウトした利用者ごとにサイトを異なるバージョンで提供できるかどうか (選択してオンオフを切り替えたり A/B テスト向け)(英語版)
 * 検索と現在の各種の検索ウィジェットの比較(英語版)
 * 言語切り替えと言語変更機能を改善する可能性(英語版)
 * T234907 - 基本にするコードベースを選ぶための RfC(英語版)
 * EventLogging の修正と作業に与える影響

We reached out to all wikis with a MassMessage, and asked for communities to volunteer to be test wikis for this project.

2019年9月：ウィキマニアで調査報告


ウィキマニア2019の会期中には、デスクトップ版の改善計画を告知するという目標に沿って編集者と面談し、複数の暫定的な設計案に貴重なフィードバックを集めました. 調査内容は利用者面談、自由形式のフィードバックの話し合い、プレゼンに続いて課題ごとに分かれた議論を行ないました. 皆さんからのフィードバックは報告書とPDF版の発表資料のまとめ (英語版) を公開してあります. 総括として、提示した注力部分ならびに提案のプロトタイプへの反応は肯定的でした. しかしながら改善が必要な部分も特定できました.

このフィードバックに基づき、今後数週間は繰り返し作業を行い、もっと多くの観衆を対象にウィキ横断でテストしたいと考えています.

以下のスライドショーには、テストをした提案から19件を紹介します. ぜひ報告書全文に目を通して、トークページに感想を投稿してください！

2019年9月：デスクトップ利用と挙動のデータ分析
調査のプロセスの一環として、皆さんがどのようにサイトを利用しているか知りたいと考えました. 具体的には既存のたとえばサイドバーのリンク類や言語切り替えパネルや検索などの機能をどんな頻度で利用しているのかが課題です. 調査結果を公表しました. 総体的にサイドバーのリンクの利用は低率でした - サイドバーに表示されるリンクボタンを押した人は、ログアウトした利用者のたった 0.5%、ログイン利用者でデスクトップ版を使う人の 1.6% でした. 言語切り替えパネルの使用頻度にはばらつきがあり、全体としてウィキの大きさに反比例し、規模が小さいウィキほど言語切り替えの頻度が高くなりました.

2019年8月：ウィキマニアで行った調査とブレーンストーミング


ウィキマニアではコミュニティのメンバーで経験が長い人と話をするチャンスがありました. カンファレンスの会期5日間でプロジェクト案を説明でき、多くの設計アイデアに貴重なフィードバックを得ました. 実施したアウトリーチは利用者インタビュー、自由形式のフィードバックの話し合い、プレゼン兼ブレーンストーミングです (現場で使ったスライド集をこのページ内に置きますのでご参照ください. ) インタビューの結果と、フィードバックの概要は近日中に公開予定です.

2019年8月：技術調査
プロジェクトのさまざまな技術面の可能性を探るため、チームは1週間をかけて単一の問題 - デスクトップ版使用で折りたたみ式サイドバーを実現する方法 - を課題に、アプローチを変えてハックしました. この実験の結果を活用して改善策の技術的構造、また改善策を盛りこんだ外装を想定できないかと願ったからです. 実験の詳細は以下のとおりです.


 * ベクター外装をフォーク、サイドバーを折りたたみ式にする
 * ミネルヴァ外装にデスクトップ用サイドバーを作る. 質問にあがった検討課題：「デスクトップとモバイルで共通の外装は実現できませんか？」
 * 折りたたみ式サイドバーはユーザースタイル限定で作る

問題点の指摘

 * 1) ウィキメディアは新しい読者によそよそしい
 * ウィキメディアのウィキ群のデスクトップサイトでは、新しい読者に歓迎されているとか親しみがあるとか感じさせることがありません. 最新のウェブや他のプラットフォーム（Androidアプリ、iOSアプリ、モバイルウェブサイト）での経験から生まれる期待には一致しません. なんだか迷子になった気分やよそよそしさを感じる原因は、無計画に開発され、雑多なナビゲーションやインタフェースリンクにあります. それは回りまわって、読者と編集者がウィキメディアのウィキ群に寄せる信頼の低さや、ウィキメディアのウィキ群を探索したいという気持ちが置きにくく、結局は本来ならもっと使うはずなのにサイトの使用が減る原因となっています（つまり定着率が下がること）.
 * 1) ウィキメディアのウィキは使い方がわからない
 * 使い始めたばかりの読者 (特に新しい読者) は基本的な機能を直感的に実行できず、言語の切り替え、コンテンツの検索、表示設定の調整ができません. さらに加えて興味のあるコンテンツを読みたくても、混乱が多くて道がそれてしまいます. 壁に直面しているのは新しい編集者も同様で、インターフェイスに慣れないから疎外感を感じるし直感的に使えないし、ごちゃごちゃしているのです. 貢献に必要な基本タスクを実行することさえ困難で、アカウントを設定したい、エディターを開きたい、仲裁を受けるため特別ページの使用方法を習えたい (例：破壊行為の発見や回復のため編集履歴を参照する) などです. サイトが適切に「反応しない」という問題は、ユーザーならだれでも抱えているかもしれないし、コンテンツの横幅が広すぎるとか、逆に細長くなりすぎるとか（画面とウィンドウのサイズに対応）などの問題にもつながります. 現状維持は貢献したい人を妨害しています (つまり経験のバイアスが発生).
 * 1) そもそもどういう論理で成り立っているのか付いていけない
 * 現在、ウィキメディアのウィキ群の機能を理解している読者はごくわずかです. 私たちのインターフェースは直感的な方法でサイトの内部動作を強調しません. 多くの読者は自分が読んでいるコンテンツの執筆者はボランティアであり頻繁に更新されること、または自分も同様に貢献できるかもしれないことを知りません.

さらに当社のさまざまな製品 (デスクトップ版、アプリ、モバイルWeb) の経験に大きな違いがあり、読者が当社の製品間のつながりを理解したり、それをコンテンツ自体に関連付けることが難しくなります. これによりウィキメディアのサイト群に概念の統一性がなくなっています.

閲覧者のタイプ別まとめ：

目標
以下の項目を目指して取り組みます.


 * 読者がコンテンツに集中しやすくする
 * 日常の操作 (検索、言語の切り替え、編集など) を簡単にできるようにする
 * ボタン類を論理的で便利な場所に置く
 * 他のプラットフォームのインターフェースとの一貫性を高める - モバイル版のアプリとWebなど
 * 混乱を解消する
 * 将来の拡張を予定する

制約
これらの項目は明確に意識して進行します.


 * コンテンツはノータッチ - スタイルテンプレート関連あるいはページのコンテンツの構造そのもの関連は着手しません
 * 機能の除去はしません - 配置場所は変わるとしても、ページ操作関連の項目その他の機能は、現状で既定である限り、存続します
 * レイアウトに急激な変更は加えません - 変更には進化型の取り組み方をするため、閲読者にも編集者にもなじみのあるサイトを維持するつもりです

タイムライン
大まかな進行タイムラインは以下のとおりで、進捗状況に合わせて調整します.


 * 第1フェーズ：2019年5月 – 9月：調査と研究、価値を創造できる場所を探し、焦点を見つける
 * 第2フェーズ：2019年7月 – 11月：フォーカスエリアの開発、アイデアのスケッチとプロトタイプ作成、会話の開始
 * 第3フェーズ：2019年10月 – 2020年1月：継続的なユーザーテストと設計の改良
 * Phase 4: January 2020 - May 2020: Prototype feedback and iteration. Building out first features - new header and collapsible sidebar
 * Phase 5: May 2020 - July 2020: Prototype, user test, and ship at least 4 features to test wikis
 * Phase 6+: July 2020 - TBD: Continuing with feature sequence

評価指標
プロジェクトの全工程で使うコアな評価指標は、暫定的な一覧を以下にまとめました. 何をどう改善するか具体的に決め、項目を増やしたり反復したりする予定です.

既存の観衆の実用性を高めるため、次の方法を行います.


 * 相互作用
 * セッション単位の検索をプロジェクト期間中に、 5% 増加させる
 * プロジェクト単位の言語切り替えをプロジェクト期間中に、 5% 増加させる
 * 親和性
 * サイトに対して肯定的で歓迎する印象を増やす（調査とユーザーテストによる）
 * サイトに感じる信頼と信用を増やす（調査とユーザーテストで測定）

Feature Sequence
This is a summarized overview of the features we are considering adding or iterating on throughout the course of the project. A more detailed list is available on a separate page - we encourage looking through that page for more information. As we go through with design, requirements gathering, and user testing for each feature, we will also publish a separate page per feature with more detail. These will be linked from the title of the feature.


 * 1) New Header
 * 2) Collapsible Sidebar
 * 3) Moving language links to the article title bar
 * 4) Sticky site and article headers
 * 5) User Menu
 * 6) Improved search
 * 7) Improved language switching
 * 8) Table of contents
 * 9) Article tools
 * 10) General aesthetic refinements

調査と設計のプロセス
一般的な注記：このプロセスの進行は別に厳密ではありません. 大まかには研究と設計プロセスの最善手法に基づき、どちらかというと緊急対応で柔軟で、適切だと感じたときに臨機応変に臨時の活動と調査を進めていきます. 概要は以下の3つのフェーズで説明しますが、実際の調査および設計プロセスは、フェーズが重複します. それに加え、当面は「研究」と「設計」の活動を明確に区別する方法がないように思われるので (どちらも相互に関連するため)、議論は一緒にします.

第1フェーズ　調査と研究、価値を創造できる場所と焦点を見つける (2019年5月 – 同9月)

 * メインのページ：/Research and design: Phase 1

現状のデスクトップ版の既定の外装 (Vector) の検討から取りかかり、自分たち自身のユーザー・エクスペリエンスを振り返ることから始めました. これをどう改善できるだろうか. 読者と編集者すべてにとってより良いエクスペリエンスを作るには、インターフェースのどこに変更するきっかけがあるだろうか？ 人々がやりたいことをより簡単に行うにはどうすれば？ もっと快適な読書環境を作成するには？ もちろん、これらの質問を調べる間にプロジェクトの限定条件に目を配りました. 左記の質問を掘り下げようとこれまで行った研究と設計活動には以下が含まれます.


 * デスクトップ版インターフェイスの歴史(英語版)
 * これまでウィキメディア財団または他の研究機関や個人が実施した、ウィキペディアの研究(英語版)
 * アイデアを生み出すためにチームがオフサイトで議論し、プロジェクトの共通した認識づくりを実現
 * 外装の Winter と Timeless およびウィキペディアの設計の変更
 * 大規模なウェブサイトが設計変更／更新した話 (Reddit、Twitterその他)(英語版)
 * ごく普通の構造上の要素を集めるため、他の大規模なウェブサイトを精査する

第1フェーズの成果は次の通りです. デスクトップ版インターフェースをもっと掘り下げて理解し、改善のうち注力する部分の提案が出ました. 注力する部分の厳密な判定基準はありませんでした. 総体として実施可能な改善かどうかに基づいたものの、それぞれの範囲には次の例のように幅があります. 「閲読の経験として視線が散らないようにしてほしい 」「表示言語の切り替えをもっと楽にしたい 」. 注力する部分の提案を紹介します.


 * 閲読の体験に集中できる「邪魔されない」環境づくりのため、ナビゲーションのリンクを統合または利用者の選択で折りたたみ式にします. 以下を対象にします.
 * メインのサイドバーのページ遷移
 * 記事用ツール
 * 利用者用ツール
 * 言語版の切り替え
 * 検索
 * 記事内の移動 / 目次

もっと機能に固有なその他のアイデア：閲読の個人設定 (例：ダークモード)、共有ボタン、編集ボタンを大きくする／新規記事ボタンを追加 (小規模なウィキの場合)／「参加する」方法、記事の統計／活動の要約をもっと明確に示す.

第2フェーズ：集中するエリアを決め、アイデアを具体化し試作品を作り、協議を開始(2019年7月 – 同年11月)

 * メインのページ：/調査と設計：第2フェーズ

第1フェーズの調査と話し合いにより、作業を行う周辺状況 (つまりデスクトップ版インターフェース) をもっと現実的に把握できました. また、どの注目分野が (今後の新しい提案を受け入れる余地を残しつつ) さらに調べる対象となるか、進展させるきっかけにもなりました. 次の目標は注目分野を少しずつ掘り下げるため、アイデアスケッチや試作品づくりと、何よりも重視するのはコミュニティとの話し合いです. ここまでの調査と設計の動きには以下が含まれます.


 * 当該の重点範囲における、これまでの調査、作業や実験を理解する
 * 当該の重点範囲における、全般的な利用データの入手
 * 下案の段階でスケッチと試作を始めて会話を促す
 * 初期の仮説を立てる
 * ウィキマニアで行った利用者インタビューその他のフィードバック
 * コミュニティからMediaWikiを介してフィードバックを受け付ける（近日公開予定）
 * 初心者や偶然、訪問した読者との利用者インタビュー（近日公開予定）
 * usertesting.comにおけるユーザーテスト（近日公開予定）

第2フェーズの成果は以下を目指します. 注力するエリアで特定のインターフェース改善のスケッチを提示してあり、その反応を集めてどの改善策に実施する価値があるか、把握を練り上げ (つまり情報周知と対案や意見で裏打ちされ)、進行過程案を示して実施するべき改善策の実現方法を提案します.

第3フェーズ ユーザーテストの継続、設計の改善続行 (2019年10月 – 2020年1月)
第3フェーズは次の項目に充てる見通しです. 第2フェーズで特定されたアイデアのテストと、学んだことを活用した設計の改良. 実際にウィキ上でベータ展開してテストする課題が出てくる可能性があります. その課題を割り出し、ベータ版で具体的にテストする方法を決めて (つまりどのデータを追跡するか決めること、挙動に基づく決定の下案を作ること).

第3フェーズの成果は以下を目指します. 設計をほぼ完成させ (かつ通常は実装段階で必要な調整を見込んでおき)、ベータ版の実装において、何を課題として学習するか、入手した情報に基づきどんな決定もしくは変更をするか、あらかじめ想定しておきます.

第1フェーズ：設計のアイデア出し
提案された「多くの 」アイデアの一部を以下に紹介します. 著名なアイデアやリンクを追加してください.


 * 編集者の皆さんにご注意：発想やリンクの追加、コメントのトークページ投稿は編集英語版で行ってください. 「tvar」マークアップは後で処理しますので、飛ばしてかまいません. 

コンテンツに注目、ユーザーインターフェースとコンテンツを見分けやすくする

 * サイドバーの一部を折りたたみ式にする
 * サンプル：ヘブライ語版ウィキペディアその他 ...
 * 調査：言語リンクを折りたたみ式にした場合の有用性イニシアティブ調査Usability initiative research on collapsible languages links、同イニシアティブによるサイドバー内の折りたたみ模型Usability initiative mockups on collapsible sections within the sidebar
 * 折りたたみ式サイドバー
 * サンプル：Wide Skin (enwp のスクリプト)、Hide Vector sidebar (同左)、Timeless 外装サイドバー(反応型レイアウト)、WikiWand...
 * 浮動式のサイドバー
 * サンプル：FloatSide (enwp のスクリプト) その他...
 * Tabs in sidebar to organise all the tools and navigation: 1) TOC, 2) Site navigation, 3) Tools (for editing, page info, gadgets), 4) Bookmarks (feature request)
 * The tab icons serve also to collapse/reveal the sidebar.
 * TOC in sidebar: fixed to the screen, separately scrolled.
 * Example: WikiWand
 * Pin-able infobox: show a pin icon in top-right corner of the infobox. When pushed, pin the infobox on the right side of the screen in a column that stays on-screen and scrolls on its own, similar to the sidebar on the left.
 * Collapsible article sections: see at the bottom of the WikiWand page + add a short scrolling effect.
 * Responsive width
 * Responsive content (enwiki/mw gadget), 3 column CSS (personal css),

日常の操作にすばやくアクセス

 * 見出しに付箋タイプの検索、目次、編集リンクを並べる
 * サンプル：FloatHead (英語版ウィキペディアのスクリプト)、FloatHead (同左), Floater (同左)、 Winter (古い試作版)、Timeless (代替用の外装)……
 * 調査：利用のしやすさ(英語版)
 * 使用者が多い言語版に切り替え (ページ最上部に言語切り替えパネルを移動)
 * サンプル：Timeless 外装を幅 1325px 超と幅 1085px 以下で表示した場合……
 * 表の見出しを付箋タイプに
 * サンプル： Gadget-StickyTableHeaders (英語版ウィキペディアのスクリプト)
 * ページの最上部に移動
 * サンプル:ToTopButton (英語版ウィキペディア用スクリプト)
 * Paragraph (¶) symbols on headings: visible only when hovering, next to the edit icon, to easily copy links to sections.

使いやすく合理的な配置をする

 * 利用者メニューの統合 (例：ドロップダウン メニュー内の「ログアウト」「個人設定」「ベータ版」などは折りたたむ)
 * サンプル：Skin:Timeless、縮小版の個人用メニューバー
 * ログアウトした利用者の個人設定
 * サンプル：アクセシビリティ設定/個人設定のチケット (T91201) その他 ...
 * 記事の操作指示をサイドバーから記事内に移動
 * サンプル：Winter、幅が1085px 以下の場合、外装は Timeless その他 ...
 * 記事のあいだを楽に移動する - ページをすべて読み込まず、背後で JS を用いてページのコンテンツのみ読み込み
 * サンプル：変更履歴スライダー拡張機能は差分とWeekipediaを楽に移動できる.