Reading/Web/Desktop Improvements/Features/Page tools/ja

デスクトップ改善プロジェクトの主な目標のひとつは、利用者がインターフェース内にあるすべてのリンクとツールを直感的に使いやすくすることです.

現在のところ、私たちのインターフェースはウェブサイトに関連するリンクとツール、そしてページ自体に関連するリンクとツールの間の区別をしていません. メインページ、おまかせ表示、最近の更新、は前者のグループです. リンク元、関連ページの更新状況、このページを引用、は後者のグループに属します. この混同が新規読者の混乱を招いています. 新規編集者もそれぞれのリンクが何をするものなのかよくわかりません. これらのグループが混在することによって、ツールを自然に探索することが著しく難しくなっています.



背景と目標
以下のためにページツールを表示する方法を再検討したいと考えています：
 * 個別のページのためのツールとウェブサイト全体のためのツールを区別しやすくする
 * それぞれのリンクの目的が何なのか、リンクに触れることなく直感的に理解しやすくする
 * これらのツールへのアクセスを持続的に提供し続ける

目次の第3回試作品テストによって、私たちのツールの重要性と持続的なメニューの有意性が浮き彫りになりました. この機能を設計したとき、必要とする人が簡単にアクセスできることを確実にすることに焦点を当てました. 読む体験において読むことを妨げたり押しつけたりしないことも重要でした.



使用事例

 * 読者または編集者として、ページの構造をより良く理解できるようにページツールとグローバルツールを素早く区別したいです
 * 読者または編集者として、自分が必要とするツールを見つけるのに多くの時間を費やさないようにページツールとグローバルツールに素早くアクセスしたいです
 * 読者または編集者として、自分の体験が自分のニーズを満たすように、いつも見たいツールを選択できるようになりたいです

機能の説明と要件

 * 1) ページツールのみを含む新しいメニューが作成されます
 * 2) その新しいメニューはページツールとしてより直感的な場所に配置し、リンクの場所とリンクの目的を視覚的にリンクさせます
 * 3) グローバルツールまたはページツールを固定して、読むあるいは編集するニーズに適合させるオプションがあります
 * 4) グローバルツールおよびページツールのメニューは、ログイン利用者に対して既定で持続的に（固定して）利用可能です
 * 5) グローバルツールおよびページツールは、匿名利用者に対して既定で持続的に（固定して）利用可能ではありません

調査と設計


目次との関係
最も楽しみにしている変更のひとつは、目次をページの横に移動し、下にスクロールしても利用可能なように固定したことです. 調査とテストを通じて、この変更は人々にとって、ページに着いてすぐに概要がわかるようになるという利点があり、読む体験の間中より簡単にページを見て回る役に立つであろうということがわかりました.

大多数のフィードバックは肯定的でした. ほとんどのコミュニティのメンバーは新しい目次の場所と機能性を気に入り、全体的に変更を支持しています. ほとんどのインターフェースへの変更と同様に、目次の移動にはいくつかの課題がついてきます. コミュニティのメンバーが提起した主な課題は、「目次を移動させた先の場所に元々あったサイドバーメニューをどこに置くべきか？」ということでした. 以下でこの課題に対処するための私たちの提案を説明します. これは試作品テストの次の回の主題でもありました.



私たちの短期的な解決策
短期的な解決策として、サイドバー全体を現在の位置で利用可能なままにすることを決めました. 折りたたみ可能なままにし、サイドバーの状態（つまり開いているか折りたたまれているか）は引き続きページ間で持続します. （したがって開いたら、サイトを見て回るとき開いたままになります. ） 変更されることになったもの：サイドバーを開いたとき、目次がページの下へ押し下げられることになりました. こちらがどのように動作するのかの録画です：

これが最適な解決策であるとは思いませんでした. むしろ目次を公開して前進し続けることができるようにするための応急処置に近いものでした. そして変更後、目次が以前よりもはるかにページの下になったので、一歩後退したように感じた人がいるかもしれないことも理解しています.



私たちの長期的な解決策
コミュニティのフィードバック、およびデータ収集からわかったいくつかのことが、私たちの提案に情報を与えています： さらに、私たちがこのプロジェクト全体を通して完遂しようとしていることは、論理的な場所にものを移動することです. すべてのページツールをひとつの領域に入れる方が、あるものはサードバーにあり、他のものはページのコンテンツの上のツールバーにあるという現状よりも理にかなっていると考えています.
 * 1) ほとんどの編集者は目次の新しい位置を気に入っています
 * 2) 一部の編集者にとってはページツール（例えば、リンク元、関連ページの更新状況、ウィキデータ項目、など）がページに着いてすぐに利用可能であることが重要です
 * 3) Most of the global navigation items in the main menu (e.g. Current events, Contents, etc.) are used infrequently
 * 4) 一部の編集者は大きなスクリーンを持っており、ページの向こう側にある空間をもっとうまく使えるインターフェースにしたいと考えています

私たちの提案には2つの主要な部分があります： こちらがこれら2つの部分の可視化です：
 * 1) サイドバーを2つのメニューに分ける：グローバルリンクがあるメインメニュー、およびページ特有のリンクがあるページツールメニュー
 * 2) ページツールをページの向こう側に移動して、他のページツール（履歴、編集、移動、など）の近くにする

ステップ1：2つのメニューに分ける



ステップ2：ページツールを移動する



更新されたインターフェースはこのようになるでしょう：



こちらが更新されたインターフェースで可能ないくつかの構成を示す録画です：



注記
上述の提案に加えて、さらに2つの変更があります： 
 * 1) Moving the page title bar above the toolbar.
 * 2) * In general we see the title bar being useful to all users, whereas the toolbar is more relevant to experienced users and contributors. Therefore we think it makes sense to have the titlebar come first, and the toolbar below
 * 3) ** Specific example: the titlebar now has the language switcher in it, and we think language switching is more valuable to most people visiting the site than the items in the toolbar
 * 4) ** Possible future example: in the future we're hoping to add additional reader tools to the interface (such as Share, Font settings, etc.) and plan on putting them in the titlebar, next to the language switcher
 * 5) * From an information architecture standpoint the links and tools in the toolbar are related to the page you are on, so it makes sense to have the title above and the related links and tools below
 * 6) * From a readability standpoint it's nice to have the page title be the first thing you see
 * 7) * Our mobile skin, Minerva, shows the titlebar above the toolbar, and it's generally a best practice to be consistent when possible. Possible supporting evidence:
 * 8) ** Timeless and Winter both place the titlebar above the toolbar
 * 9) ** Google Docs places the page title above the toolbar
 * 10) Restyling the tabs and other elements on the page
 * 11) * これは進行中の工程です. The styles included in the mockup above are not final, rather they are just stripped down versions to serve as placeholders while we continue to work on visual design stuff.

定性的テスト


編集者対象の試作品テスト
2021年12月、私たちは30ウィキにわたり目次の試作品テストを実施しました. この試作品テストの結果はページツールメニューの開発に極めて重要でした. 詳細については目次試作品テストの結果と次の段階についてのアイデアをご参照ください.

2022年4月にページツールをメインメニューから分離して、ページの反対側に移動した試作品をテストしました. また、試作品ではページタイトルをページツールバーの上に配置しました.

フィードバックの要約：
 * 15を超える異なる言語で244人の編集者からフィードバックを受け取りました.
 * ✅ 大多数の人々はページツールをメインメニューから分離し、ページの反対側に移動することを支持しています
 * ✅ 大多数の人々はページタイトルをページツールバーの上に移動することを支持しています
 * ⚖️ 2つのメニューが既定で開いているのと閉じられているのでは、かなり均等に意見が分かれました
 * 😀 多くの人々が目次がページの横にあって、ページを下にスクロールしたときに利用可能であることをいかに気に入ったかについて言及しました
 * 最も詳細なフィードバックはメインメニュー、目次、およびツールメニューを隠したり表示したりする挙動に関するものでした. 主なポイントは：
 * メニューを隠したとき、（2回クリックすることなく）完全に隠れるべきです
 * When you hide a menu it should be more obvious where it has gone
 * The hamburger menu icon should disappear when the main menu is moved to the sidebar
 * The labels for hiding/moving the menus should be better (or use icons instead)
 * The tools menu, if it has been moved to the sidebar, should remain visible as you scroll down the page
 * The tools menu, table of contents, and main menu should hide automatically when the screen gets narrow
 * You should be able to collapse the table of contents manually, at any screen size

We've attempted to address all of the points above in this updated prototype. Keep in mind that the prototype is not perfect. Hopefully it is sufficient to communicate the main ideas: Deutsch · English · Nederlands · Tiếng Việt · Español · Français · Italiano · Polski · Svenska · Pусский · Yкраїнська · فارسی · 中文 · 日本語

更新された試作品もご参照ください. 

ガジェットの互換性
ガジェットの互換性についての情報は、このPhabricatorチケットで入手可能です. 以下のガジェットはテストされており、問題なくページツールメニューで動作するはずです：


 * Twinkle (the TW menu should insert itself after the page tools menu)
 * MoreMenu (The "Page" menu is inserted before the Page Tools menu. The "User" menu, only visible on user pages, is also inserted before the Page Tools menu.)
 * ProseSize
 * RTRC
 * Add a toolbox link to reload the current page with the system message names exposed

いくつかの理由のために互換性を維持することができました：


 * 1) The Page Tools menu is rendered server-side, which maintains the expected JS execution order (i.e. the expected HTML menu exists when the gadget JS executes).
 * 2) We maintain the same IDs that were previously used to target this menu by gadgets.
 * 3) When we move the menu, we maintain the JS behaviour and events that have already been bound to the HTML elements by gadgets.

We also tested the Page Tools persistence feature with gadgets and did not notice any loss of functionality. The only noticeable difference is that, when the menu is pinned by default, you can sometimes see the addition of new links after the page loads. This could potentially cause a layout-shift, but that would only be an issue if the Page Tools was pinned by default for anonymous users and a gadget that adds a link was also enabled for anonymous users (unlikely).