レスポンシブウェブサイト-ナビゲーションユーザビリティアドバイス
さまざまな画面サイズに対応するサイトを開発しています。サイトはかなり大きく、ページ/メニュー階層の観点から最大4レベルの深さがあります。私が今取り組んでいるのは、メインメニューをモバイルデバイスに適応させる方法です。
これまでのところ、メニューを選択リストに変換し、ページの最上部に検索フォームを保持しています。ここでの問題は、サイト内のサブページへのアクセスを処理するための最善の方法です。メインの選択リストにはトップレベルのページのみを含める必要がありますか、それともサブページ（おそらくインデント）を表示してみますか？すべてのページを表示する場合、ユーザーは必要なページに到達するまでに長い間スクロールする必要がある可能性があります。トップレベルのページのみを表示すると、クリック数が増加します（たとえば、ユーザーが希望するページが4レベルの深さの場合はそれ以上）。
別のオプションは、サブページを含むトップレベルのページが選択されたときに別の選択ボックス（メインの選択ボックスの下）を動的にロードすることです。これにより、ユーザーはアクセスしたいサブページを選択できます。
少しばかげた話ですが、この種の問題にどう対処しますか？
複雑なナビゲーション構造をサポートできないフォームファクターに適合させることにより、問題に対して純粋に情報アーキテクチャアプローチを採用しているようです。問題が発生するのは、フォームファクターが押し戻しているためです。このようなナビゲーションを扱うことを意図していません。
一歩下がって、何をしようとしているのかを見てみましょう。複数のフォームファクター（この場合はモバイルデバイス）で動作するはずのレスポンシブなWebサイトを設計しています。レスポンシブデザインの正しいアプローチは、どのコンテキストでどの情報をユーザーに提示する必要があるかを理解し、その方法を決定することです。最初のステップをスキップしているようです。
レスポンシブデザインで従うのに最適なデザインパターンは、最初にモバイルです。これは、Luke Wroblewskiによって 同名の本 で導入されたアプローチです。 =。モバイル向けの設計を開始する場合は、最小で最も単純な画面から始め、フォームファクターのサイズが大きくなるにつれて、追加することができます。物事を適合させようとして問題が発生するのではなく、代わりに、そのフォームファクタでサイトのユーザーエクスペリエンスを強化するための追加情報を自問することができます。
私の暫定的な解決策は、一歩下がって、ユーザー中心の発見プロセスを使用して、どのナビゲーションがモバイルユーザーに関連しているかを判断し、それらのみをナビゲーションに含めることです。次のステップは、モバイルの第一の観点からサイトを再構築することです。これにより、直面している問題のほとんどが最終的にはスムーズになります。
4レベルのナビゲーションメニューは、デスクトップサイトでも多すぎます。サイトに非常に直線的な分類法/階層がある場合、上位2レベルだけを簡単に維持でき、ユーザーは引き続き必要なページにアクセスできます（ほとんどの政府機関はそのようにサイトを設定しています）。
モバイルバージョンについては、いくつかの要因を考慮する必要があります。訪問者が外出中に消費する可能性が高い情報と、モバイルデバイスの画面サイズです。一部のセクションは、トップメニューからまったくリンクしてはならないこと（他の方法で見つけることもできます）、および画面に快適に表示するためにすべてを合わせることができないことを発見する可能性があります（忘れないでください）ドロップボックスを導入すると、アクティブ化するとモバイルOSのデフォルトスタイルで表示されます）。
したがって、現時点での最良のオプションは、ナビゲーションドロップダウンにトップレベルのリンクのみを保持し、より深いレベルに簡単に移動できることを確認することです（以降、レベルを上げることを心配しないでください allモバイルブラウザには、ある種の戻るボタンがあります ）。
ただし、Rahulが示唆しているように、将来的にはモバイルファーストのアプローチに固執する必要があります。
Rahulとdnbrvの両方が素晴らしい答えを示しており、モバイルファーストのパターンは断然最高ですが、理想的な世界に住んでいるわけではありません。
私は次のことをお勧めします（完璧ではないかもしれませんが、4つのレベルで立ち往生している場合-うまくいくかもしれません）
左上に表示される画面上で「フロート」する単純なJavaScriptメニューボタンを実装できます。ユーザーがページを下にスクロールしている場合、ページは移動しますが邪魔になりません。ユーザーがナビゲートする準備ができたら、ページの非表示メニューを「表示」するメニューボタンをクリックします。メニューが非常に大きいため、画面全体に表示されますが、フローティングナビゲーションボタンには「メニューを非表示」と表示され、クリックするとこのメニューが「非表示」になり、コンテンツが再び表示されます。
ナビゲーションを4つのセクションに分割して、すべてを大まかにこのようにリストすることができます
MAIN ONE
SUB 1 | SUB 2
SUB SUB 1 | SUB SUB 2 | etc
SUB SUB 1 | SUB SUB 2 | SUB SUB 2
MAIN TWO
SUB 1 | SUB 2 | SUB 3
SUB SUB 1 | SUB SUB 2 | etc
SUB SUB 1 | SUB SUB 2 | SUB SUB 2
このアイデアをもう少し理解するのに役立つブログ投稿を書きました。 （ソリューション3を参照） http://blog.bleepsystems.com/2012/solving-a-sensitive-design-navigation-problem/
お役に立てれば。
私たちが設計するレスポンシブを見るには、一般的に2つの方法があります。
スケールダウンが簡単なシンプルな1レベルのナビゲーションを作成します。
携帯電話のサイズに合わせて個別のページセットを作成します。
シンプルなセットアップでは、派手さや興奮はあまりありません。そのため、大型モニターでしか機能しない本当にクールなものを自由に使用できるマルチユースサイトと比較すると、サイト全体がやや不自然になります。したがって、eコマースであり、多くの顧客が電話を使用して注文することを期待している場合は、1番にしてください。しかし、すごい要素を提示したい場合は、2番目に進んでください。
Webが1番のトレンドを維持している場合、Webデザインの未来のために平凡な時間が来ますが、2番が主導権を握ると、最終的にブラウザーがGPUでレンダリングを実行して、私が見たいリアリズムと私が達成しようと努力していること。