開いているサブメニューをユーザーが他のサブメニューを開いたときに折りたたむ必要がありますか？
例として Google Material design website をご覧ください。サイドバーのメニューに大きなサブメニューがあります。
サブメニューはページの読み込み時に閉じられます。
Material design
Motion
Style
Layout
...
メニュータイトルをクリックすると、そのサブメニューが展開されます
Material design
Introduction
Environment
Material properties
Elevation and shadows
What's new
Motion
Style
Layout
...
別のメニュータイトルをクリックすると、開いているサブメニューが折りたたまれますか？
オプションA：
Material design
Motion
Style
Color
Icons
Imagery
Typography
Writing
Layout
...
オプションB：
Material design
Introduction
Environment
Material properties
Elevation and shadows
What's new
Motion
Style
Color
Icons
Imagery
Typography
Writing
Layout
...
オプションA（アニメーション化する可能性があります）では、サブメニューが折りたたまれた後、ユーザーのカーソルが別の要素の上にあります（不適切です）。スクロールする必要なしに、よりきれいな方法でメニューを表示します。
オプションBは、不要なアクションをトリガーしません（オプションAは何らかのアクションをトリガーします）。開いたばかりのサブメニューを表示するには、ユーザーがスクロールする必要がある場合があります。ユーザーは開いたサブメニューを閉じて、何を開いたのかをはっきりと確認する必要がある場合があります。
ユーザーの期待とは何ですか？どのオプションがユーザーのタスクを容易にしますか？
編集：
余談ですが、これを ナビゲーションパターン-ナビゲーションドロワーの拡張 で読みました。
折りたたまれたセクションを選択すると、そのレベルがインラインで展開され、その外側のすべてのレベルが非表示になります。
これはオプションAのように見えます。ただし、これはオプションBを適用する同じWebサイトでは適用されません。
ユーザーがアクションをトリガーしたら、それを発生させます。トグル/スイッチのように動作しない限り、別のアクションを同時に開始しないでください。
説明：ここでユーザーはカテゴリ（マテリアルデザイン、モーションなど）の1つをクリックします。それは、ユーザーがそのカテゴリーについてもっと探求したいという感覚につながります。それは彼/彼女が現在開いているカテゴリーを閉じたいと思っているという意味ではありません。それで、それは開いたままにする方がよいです。
ちょっと待って！それはいくつかの問題を抱えているので、私の質問はオプションB（質問で述べたように）ではありません。
コンポーネントの下にリンクの長いリストが表示されます。パターンを切り替えるには、カテゴリを切り替えるためにより多くのスクロールが必要です。しかし、それは私をそれほど傷つけません。
私をもっと傷つけるのはこれです：
私はUXデザイナーですが、マテリアルデザインでナビゲーションのどこを検索すべきか、どこを検索すべきか混乱しています。
「コンポーネントまたはパターンの下にありますか？」
カテゴリの問題は、カテゴリ自体です。カテゴリは他人が設定しているため、ユーザの心に設定するには時間がかかります。ここのナビゲーションは、本の目次のように機能するはずです。
それで、それは常にすべてを開いておく方が良いです。
要するに、私はオプションAよりもオプションBを好みます。また、オプションBの方が効果的だと思います。
はい！それは閉じる必要があります。ユーザーが要素を比較または交換したい場合（つまり、それらはカスタマイズ可能です）、またはドラッグアンドドロップできる場合など、サブメニュー項目間に直接的な関係がない限り。
サブメニューが閉じる理由はn個あります。
- 省スペースになります。 （スクロールの問題が発生する可能性が低い）
- 非常に多くのオプション内でユーザーが迷子になる可能性が少ない（認知的負荷が少ない）
- ユーザーが初期状態に戻るためのステップ数が少ない（つまり、開いているすべてのメニューを閉じる）
- メニュー内に2つ以上のレベルがある場合はさらに難しくなります（ とにかくお勧めしません -ポイント4）
- 少ないスペースでテキストコピー（長いテキスト）に柔軟性を持たせるのは困難です。
などなど...
そして、ユーザーの期待に関する限り、現在のサブメニューのほとんどは、1つが他をクリックするとすぐに自動的に折りたたまれるため、ユーザーはメンタルモデルを形成しています同じの。彼らはほとんどすべてのケースでサブメニューが閉じることを期待するでしょう。
また、この質問は- 以前に開かれたサブメニューは、新しい兄弟を開くと自動的に折りたたまれますか？
オプションAで説明しているのはアコーディオンメニューです。これは、ウィジェットツールボックスでの有効なウィジェット相互作用であり、特定の状況で理想的です（@Harshit Choudharyが説明）。
https://developer.yahoo.com/ypatterns/navigation/accordion.html
アコーディオン（またはアコーディオンメニュー）はグループ化された折りたたみパネルのセットであり、限られたスペース内の多数のリンクや他の選択可能なアイテムへのアクセスを提供します。
各埋め込みパネルは、通常、特定のパネルのタイトル（または展開/折りたたみ要素）にカーソルを合わせるかクリックして、オプションの単一のサブセットを表示することにより、個別に展開できます（通常は残りを折りたたんだままにします）。
http://ui-patterns.com/patterns/AccordionMen
用途
- 通常のサイドバーメニューのメリットを望むが、すべてのオプションをリストするスペースがない場合に使用します。
- Webサイトに2つ以上のメインセクションがあり、それぞれに2つ以上のサブセクションがある場合に使用します。
- メインセクションが10未満の場合に使用します。
- メインナビゲーションに表示するレベルが2つしかない場合に使用します。
オプションBを使用すると、開いているすべてのメニューグループを表示するためだけにユーザーにスクロールを強制する可能性があり、そうするとユーザーエクスペリエンスが低下するため、これはすべてメニューグループとサブメニュー項目の数に依存します。
メニューグループラベルは、ユーザーへの唯一の道案内であるので、明確で明確にする必要があります。アコーディオンメニューの課題の1つは、サブメニュー項目が非表示になっていることです。そのため、ユーザーはどこに何があるかを知識をもって推測する必要があります。
はい、いいえ、ただし、この特定のケースでは終了します。
他の回答はユーザーの期待の観点から論じてきましたが、それはユーザーに提示する必要があるアフォーダンスと、開いた2つのメニューのコンテキストを決定することでどのような意思決定が役立つかにかかっています。
この場合、さまざまなセクションを含む線形のドキュメントがあり、サブメニューはサブセクションへの直接リンクとして機能します。ユーザーはあるサブセクションから別のサブセクションに直接ジャンプする場合がありますが、この線形階層内で決定を行ってジャンプするために、両方のサブセクションを同時に表示する必要がある場合はありません。
この例とは反対に、eコマースWebサイトにあるさまざまなタイプのフィルターのサブメニューを含むサイドバーメニューを想像してみてください。その場合、たとえば価格のフィルターと配達時間のフィルターなどを操作するために両方のサブメニューを開くと、明らかにメリットがあります。両方のサブメニューのコンテキストは、ユーザーが行う主要な情報と決定に影響を与えるため、意思決定のために追加のサブメニューが必要な場合、開いているメニューは開いたままにする必要があります。
それを簡単に
ユーザーがメニューの外側の領域をクリックまたはタップするたびにメニューを折りたたむだけです。
（他のアプリケーションで発生するのと同じです）。
これは通常、ユーザーがメニューUIが発生することを期待する方法です-フォーカスが離れた後、メニューを人工的に開いたままにする必要はありません。