モバイルUXのアコーディオンメニューに代わるものは？
下記を参照してください。現在、これらのアコーディオンメニューがあります。これはモバイルに最適ですか、それとももっと良い方法がありますか？
ありがとう！
サム
モバイルのアコーディオンは混乱を招く可能性があります。開いているアコーディオンの長さがビューポートより長い場合、アコーディオンヘッダーが表示されていないため、アコーディオンが開いているか閉じているかは明確ではありません。アコーディオンを閉じるには、それを達成するためにもう一度上にスクロールする必要があります。
別の方法として、追加の「ナビゲーションレベル」を使用できます。これは、ユーザーが「一般的なヒント」をタップすると、拡張アコーディオンに現在表示されているコンテンツが右側からスライドインすることを意味します。戻るボタンを押すと、ユーザーはレベル1に戻ります。これにより、CTAを配置して下部にチップスティッキーを追加することもできます。このようにして、CTAはスクロールして見えなくなりません。
追加の「ナビゲーションレベル」のもう1つの例は、マテリアルデザインタブシステムです。 https://material.io/guidelines/components/tabs.html
ブルーノは、アコーディオンメニュー（スライドアウトメニュー）と同等の優れたアイデアを持っています。しかし、ナビゲーションの外観を向上させるデザインの微調整を行う限り、アコーディオンスタイルを維持するように投票します。
たとえば、次の場合、アコーディオン階層は認識しやすくなります。
- サブメニュー項目をインデントする
- 微妙な（内側の）影を追加して、下のレイヤーが開いているように見せます
- 開いているポートの高さを小さくして、ユーザーが開いているポートの外側を簡単にスクロールできるようにする
- アコーディオン内にアコーディオンを含めないでください（非常に混乱します）
- サブメニュー項目の右矢印を削除すると、タップすると追加メニューが右からスライドインすることが示されているようです。
あなたのモックアップは素晴らしいスタートです、サム。しかし、私からそれを聞く必要はありません。
フルスクリーンオーバーレイを試すことができます。簡単でしょう。 BrunoHが指摘したように、コンテンツが長い場合、スクロールが多すぎます。必要に応じて、戻るボタンを追加することもできますが、閉じるボタンをクリックすると同じページに移動するため、必須ではありません。
私は個人的に、アコーディオンはモバイル用の合理的なUI選択であると感じています。ヘッダーを「修正」してコンテンツをスクロールすることをお勧めします。これにより、ユーザーは展開されたビューを簡単に折りたたむことができます。