「分割」ボタンによるモバイルマルチレベルナビゲーション（サブレベルへのアクセス）
分割ボタンを備えたマルチレベルのキャンバス外ナビゲーションメニューをどのように処理するのかと思っていました。分割ボタンとは、ユーザーがテキスト（レベル1）をクリックしてレベル1にアクセスし、矢印をクリックしてレベル2にアクセスできる必要があることを意味します。私の場合、ユーザーはそのことを理解できません。矢印は、サブレベルへのアクセスを許可します。これが私がこれまでに作成したものです。矢印をクリックすると、アニメーションが表示され、サブメニューが現在のものの上にスライドします。
このパターンは最近よく目にしますが、ほとんどの場合、レベル1を「スキップ」します。つまり、モバイルユーザーはサブレベルにしかアクセスできず、分割ボタンの問題を回避できます。あなたはこの種の振る舞いを見ます diy.com
この問題は私が推測する矢です。 mobify （下）のような「下」矢印を使用することもできますが、サブメニューは左から（そしてメインアイテムの下に開かずに）表示されるため、奇妙に感じるでしょう。
この種のキャンバス外メニューのエレガントでユーザーフレンドリーなソリューションのアイデアはありますか？
基本的に、2レベルのナビゲーション階層があります。それは珍しいことではありません。
Mobifyアプローチから始めましょう。
- Mobifyのアプローチは、ユーザーを1つのパネルに制限したい場合や、ユーザーが頻繁に階層内を移動してスライドインアニメーションの忍耐力を持たないようにする場合に適しています。
- また、インデントや上下にスクロールすると、順序どおりの場所がすぐにわかるので、ユーザーが階層内のどこにいるのかを意識する必要がある場合にも役立ちます。
- ただし、いくつかの欠点があります。長い階層の場合、ユーザーはひどいスクロールをしてしまう可能性があります。そして、ユーザーにフォーカスのある領域に「ズームイン」させる（たとえば、百科事典をナビゲートする）階層の場合、アコーディオンアプローチはユーザーにとって圧倒される可能性があります。
これで、サブパネルアプローチに進みます。
- あなたのアプローチは完全に合理的だと思います。ただし、UXデザインによっては、レイアウトのアフォーダンスが向上する場合があります。 2ステージメニューのより現代的なバージョンは次のようになります。
左側のメニューを「メインメニュー」、右側のメニューを「サブメニュー」と呼びましょう。
これにより、スケッチの（IMO！）が次のように改善されます。
- 2つのボタンを混同しないように、戻るボタンとドリルダウンボタンには非対称のアイコンを意図的に使用してください（ナビゲーションは対称ですが、動作の流れは異なります）。
- 色を使用して、サブメニューで方向付けの感覚を提供します（ 'Birds'ヘッダーがメインメニューから引き継がれていることが明確です）
- 選択とは明らかに異なるサブメニューのヘッダーを使用して、方向付けの感覚を提供し、「目的地に到着した」という感覚でサブメニューを導き出します。メニューをクリックして別のメニュースライドを挿入すると、ユーザーが迷うようになる可能性があるため、素敵な色のヘッダーは、目的地に到着したように感じさせ、次の選択を行う前に行動を一時停止する場所を提供します。
- さらにカラフルなサブメニューヘッダーの例については、Googleのマテリアルデザインをご覧ください。
- サブメニューのヘッダーのキャプション（「鳥」）から戻るボタンを分離します。これらはさまざまな機能を実行します（「Birds」は選択可能な要素としてではなくヘッダーとして機能するようになったため）。
それは主観的ですが、メニューでは、選択のセマンティクスが言葉ではなく矢印であるため、アイテムに縦の仕切りを配置しません。例えば矢印ではなく「哺乳類」を選択したいので、縦の仕切りを削除すると、行全体がクリック可能な選択として認識され、矢印は、ドリルダウンが発生することを示すための単なるアフォーダンスです。
それが役に立てば幸い
おそらく最も一般的なモバイルデザインパターンの1つ、つまりドリルダウンナビゲーションを作成しようとしています。矢印をクリックすると、サブメニューが現在のメニューの上にスライドし、モックアップから、一番上のアイテムが元のメニューに戻るように見えます。つまり、アイテムをクリックすると、上位にあるアイテムのリストが表示され、上部に[戻る]ボタンが表示されます。これは標準のモバイルナビゲーションモデルであり、プラットフォーム間で[戻る]ボタンの位置のみが異なります。
各項目を2つのアクションに分割する方法もかなり標準的です。視覚的な分離を作成するだけで、矢印が別のコントロールであることが明らかになります。
