Reading/Web/Desktop Improvements/ja

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

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

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

Research and ideas: Please edit the "Phase 1: Design ideas" sections below, to add new ideas, notes, links to past discussions, links to existing gadgets/scripts, links to good external design-patterns to consider, etc.

Individual testing: Once development begins, we will make the ongoing work available directly via a new skin option in Preferences. You will be able to individually opt-in and test the changes.

Whole wikis: We are also looking for any wikis that are interested in helping with widespread testing, such as changing the local default for logged-out site users. If you think your community might be interested, please ask us if you have any questions, then start a local discussion, and once there is local consensus add a link to that discussion on the talk page.

Longer comments and thoughts are welcome on the talkpage, in any language.

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

2019年10月：技術調査パート2
We have published the results of our technical research in preparation for beginning the work on the project. In particular, we have focused on gathering more information on the following:
 * The possibility of serving a different version of the site to logged-out users (for opt-in/opt-out and A/B testing purposes)
 * Search and the differences between the current search widgets
 * Language switching and possibilities on improving the language switcher
 * T234907 - A technical RfC on what code-base to start with

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


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

We will be iterating over this feedback over the next few weeks and plan on developing a prototype that we can test with a wider audience across wikis.

In the slideshow below is a sample of 19 of the ideas we tested. For more context, please read the full report and then give us feedback on the talk page!

September 2019: Desktop usage and behavior data analysis
As a part of our research process, we wanted to learn more about the way people currently use the site. In particular, how often they use available functionality such as links in the sidebar, language switching, and search. We have published our results. Overall, usage of sidebar links is low - only about 0.5% of all logged out users and 1.6% of all logged-in desktop users clicked on one of the pages linked in the sidebar. Language switching usage varied, generally based on the size of the wiki, with smaller wikis switching languages more often.

August 2019: Research and brainstorming at Wikimania


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

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


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

問題点の指摘

 * 1) ウィキメディアは新しい読者によそよそしい
 * Wikimedia wikis’s desktop sites are not a welcoming or familiar experience for new readers. It does not match the expectations created by the modern web and our other platforms (the Android and iOS apps as well as the mobile website).  It feels disorienting and disconnected due to the haphazardly organized navigation and interface links. In turn, this causes readers and editors to have less trust in Wikimedia wikis, to be less likely to explore Wikimedia wikis, and eventually, to use our sites less than they otherwise would (i.e. a decrease in retention).
 * 1) ウィキメディアのウィキは使い方がわからない
 * Readers (new readers especially) are unable to intuitively perform basic functions like switching languages, searching for content, or adjusting reading settings. Additionally there is a lot of clutter that distracts from the content they are interested in. New editors are faced with a similar barrier; an interface that is not welcoming or intuitive and is cluttered.  It is difficult for them to perform basic tasks necessary for contribution, such as setting up an account, opening the editor, or learning how to use special pages for moderation purposes (e.g. history pages to find&revert vandalism). All users can have problems with the sites not being properly "responsive", which leads to issues like really wide content or really narrow content (depending on screen and window sizes). By keeping the status quo, we are preventing people who are eager to contribute from being able to do so (i.e. experience bias).
 * 1) そもそもどういう論理で成り立っているのか付いていけない
 * Currently, a very small percentage of readers understand how Wikimedia wikis function. Our interfaces do not highlight the inner workings of the site in an intuitive way. Many readers are not aware that the content they are reading is written by volunteers and updated frequently, or that they can potentially contribute as well.

In addition, the large difference in experiences among our various products (desktop, apps, and the mobile web), makes it difficult for readers to know the connections between our products and to associate them with the content itself. This creates a lack of unity in the concept of Wikimedia sites.

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

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


 * Make it easier for readers to focus on the content
 * Provide easier access to everyday actions (e.g. search, language switching, editing)
 * Put things in logical and useful places
 * Increase consistency in the interface with other platforms - mobile web and the apps
 * Eliminate clutter
 * Plan for future growth

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


 * Not touching the content - no work will be done in terms of styling templates or to the structure of page contents themselves
 * Not removing any functionality - things might move around, but all navigational items and other functionality currently available by default will remain
 * No drastic changes to the layout - we're taking an evolutionary approach to the changes and want the site to continue feeling familiar to readers and editors

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


 * 第1フェーズ：2019年5月 – 9月：調査と研究、価値を創造できる場所を探し、焦点を見つける
 * 第2フェーズ：2019年7月 – 11月：フォーカスエリアの開発、アイデアのスケッチとプロトタイプ作成、会話の開始
 * 第3フェーズ：2019年10月 – 2020年1月：継続的なユーザーテストと設計の改良
 * 第4フェーズ以降：未定

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

Increase utility among our existing audiences, proxied by:


 * Interactions
 * Increase searches per session by 5% over the course of the project
 * Increase language switching per project by 5% over the course of the project
 * Affinity
 * Increase in positive and welcoming sentiments towards the site (via surveys and user testing)
 * Increase in sentiments of trust and credibility (measured via surveys and user testing)

調査と設計のプロセス
General note: our process is not particularly strict. It is based loosely on research and design process best practices, however it is also relatively emergent and flexible, in that we are engaging in ad hoc activities and explorations as they feel appropriate. While we've outlined the research and design process in three phases below, in practice the phases overlap. Additionally, for the time being there doesn't seem to be a clear way of separating research activities from design activities (they are interrelated) so we're discussing them together.

Phase 1. Investigation and research, figuring out where we can create value, finding focus (May 2019 – September 2019)

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

We began by considering the current default experience on desktop (Vector) and asking ourselves: in what ways can we improve upon this? Where are opportunities to modify the interface in order to create a better experience for all readers and editors? How can we make it easier for people to do the things they want to do? How can we create a more pleasing reading environment? Of course while exploring these questions we kept in mind the project's constraints. The research and design activities we engaged in in order to explore these questions included:


 * Understanding the history of the desktop interface
 * Reading previous Wikipedia research conducted by the Wikimedia Foundation or other research institutions and individuals
 * Discussions at our team offsite to develop a shared understanding of the project and generate ideas
 * Winter, Timeless, and other Wikipedia redesigns
 * Reading about redesigns/updates of other large websites (Reddit, Twitter, etc.)
 * Conducting an audit of other large websites to try and glean common structural elements

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


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

Additional, more feature-specific, ideas that came up: reading preferences (e.g. dark mode), share button, larger edit button / add new article button (for smaller wikis) / making it more obvious how to "get involved", article stats / activity summary.

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

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

The research activities and conversations in phase 1 helped us develop a better understanding of the landscape we were working within (i.e. the desktop interface). It also helped us develop potential focus areas to further investigate (while still remaining open to new ideas). Our next goal was to dig a bit deeper into the focus areas through sketching, prototype, and most importantly conversations with the community. The research and design activities included:


 * Understanding past work, research, and experiments in respective focus areas
 * Obtaining general usage data about the respective focus areas
 * Sketching out and prototyping early ideas to help facilitate conversations
 * Forming early hypotheses
 * User interviews and other feedback at Wikimania
 * Community feedback via MediaWiki (happening soon)
 * User interviews with newcomers and casual readers (happening soon)
 * User testing on usertesting.com (happening soon)

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

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

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

第1フェーズ：設計のアイデア出し
A few of the many ideas that have been suggested are below. Please add any prominent ideas and links you know of:


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

コンテンツに注目、ユーザーインターフェースとコンテンツを見分けやすくする Easier access to everyday actions 使いやすく合理的な配置をする
 * サイドバーの一部を折りたたみ式にする
 * サンプル：ヘブライ語版ウィキペディアその他 ...
 * 調査：言語リンクを折りたたみ式にした場合の有用性イニシアティブ調査Usability initiative research on collapsible languages links、同イニシアティブによるサイドバー内の折りたたみ模型Usability initiative mockups on collapsible sections within the sidebar
 * 折りたたみ式サイドバー
 * サンプル：Wide Skin (enwp のスクリプト)、Hide Vector sidebar (同左)、Timeless 外装サイドバー(反応型レイアウト) その他...
 * 浮動式のサイドバー
 * サンプル：FloatSide (enwp のスクリプト) その他...
 * Sticky header with search, table of contents, edit links
 * Examples: FloatHead (enwiki script), FloatHead (another enwiki script), Floater (enwiki script), Winter (historical prototype), Timeless (alternative skin), ...
 * Research: Usability-wiki
 * More prominent language switching (moving the language switcher to the top of the page)
 * Examples: Timeless skin at 1325px or wider and at 1085px or thinner, ...
 * Sticky table-headers
 * Examples: Gadget-StickyTableHeaders (enwiki gadget)
 * ユーザーメニューの統合 (例：ドロップダウン・メニュー内の「ログアウト」「個人設定」「ベータ版」などは折りたたむ)
 * サンプル：Compact personal bar 縮小版の個人用メニューバー
 * ログアウトした利用者の個人設定
 * サンプル：アクセシビリティ設定/個人設定のチケットAccessibility settings/preferences (T91201) その他 ...
 * 記事の操作指示をサイドバーから記事内に移動
 * サンプル：Winter、幅が1085px 以下の場合、外装は Timeless その他 ...