マルチレベルメニューデザインのベストプラクティス

ナビゲーションとファインダビリティは、ユーザーエクスペリエンスデザインの中心的な側面です。 ユーザーが行きたい場所に行けなかったり、必要なものを見つけられなかったりすると、イライラして他の場所を探すことになります。 特に複雑な情報アーキテクチャを備えたWebサイトでは、マルチレベルメニューはナビゲーションと検索可能性を向上させる効果的な方法であり、それによって製品の信頼を促進し、コンバージョンを促進する効率的なWebエクスペリエンスを提供します。

製品とそれらが使用されるデバイスは大きく異なるため、完璧なマルチレベルメニューを生み出す万能のソリューションはありません。 ただし、任意の画面サイズでナビゲーションと検索可能性を強化するマルチレベルメニューを作成するのに役立つ経験則があります。

任意のサイズの画面の設計のヒント

優れたマルチレベルメニューは、明確で直感的な方法で情報を提示することにより、ユーザーがすばやく移動する必要がある場所に到達できるようにする必要があります。 サイズ固有のガイドラインに入る前に、すべてのメニューに適用されるいくつかのプラクティスを見てみましょう。

2レベル以下のサブメニューを使用してください。 2レベルを超えるサブメニューは、ユーザーを混乱させ、圧倒する可能性があります。 ナビゲーションを比較的フラットに保つことで、ユーザーのファインダビリティが向上し、ユーザーがどこにいるかを覚えるのにかかる認知的負荷が軽減されます。 サイトのページ構造が深い場合は、密接に関連するページの上部にローカルナビゲーションメニューを追加することを検討してください。 たとえば、複雑なビジネスサポート製品を設計しているZohoは、各製品ページの上部、メインメニューのすぐ下に製品固有のローカルメニューを配置しました。 上部のメインメニューにはZohoのコア製品が列挙されていますが、ローカルメニューからは、ユースケースや価格などの詳細情報が記載されたページにアクセスできます。

サブメニューにアイコンのフラグを付けます。 利用可能なサブメニューがある場合は常に明確にすることで、ユーザーの期待を管理します。 おなじみの選択肢には、小さな下向きの角度のアイコンまたは三角形のアイコンが含まれます。 また、サブメニューが開いているときにポインタアイコンを反転することを検討してください。

情報を直感的に整理します。 情報の階層がユーザーのメンタルモデルと一致していることを確認してください。 たとえば、eコマースサイトでは、買い物客が商品がブランドまたは商品タイプごとに整理されることを期待する可能性が高いかどうかを検討します。 ユーザーが「靴」カテゴリをクリックした場合、サブメニューにスニーカー、サンダル、ブーツのオプションが表示されることを期待しますか？ それとも、店が持っている靴のすべてのブランドをリストしたサブメニューが表示されることを期待しますか？ ユーザー調査と競合他社調査の両方を見ると、これが明らかになります。

ユーザーが自分の居場所を常に把握していることを確認してください。 ユーザーが表示しているページに対応するメインメニューのリンクを常に強調表示します。 現在のページがサブメニューにある場合は、メインメニューのサブメニューリンクと親アイテムも強調表示します。 たとえば、政府のWebサイトを使用して運転免許証を更新する場合、メインメニューの[居住者]リンクからサブメニューの[ドライバーサービス]リンクに移動し、更新フォームのあるページに移動します。 「居住者」と「運転免許証」のリンクは強調表示されたままになります。

コピーはシンプルにしてください。 メニューは巧妙な言葉遊びの場ではありません。 リンクラベルに強い情報の香りがあることを確認してください。 これは、ラベル名をわかりやすくわかりやすくすることを意味します。これにより、ユーザーはクリックしたときに何が見つかるかをすぐに知ることができます。 コピーが明確であるほど、ユーザーは必要なものをすばやく見つけることができます。

読みやすさを優先します。 シンプルなサンセリフ書体を使用し、アイテムの周囲に適切な間隔を空けて、雑然としないようにします。 メニューの背後にあるものをすべてブロックできるように、背景が十分に不透明であることを確認してください。 ただし、サイトの全体的なブランディングを無視しないでください。 読みやすさが最優先されますが、メニューのスタイルがサイトの他のルックアンドフィールを補完することを確認してください。

クリックとタップにアクセスできるようにします。 細かい運動制御障害のあるユーザーがメニューにアクセスできるようにするには、Googleのマテリアルデザインガイドラインに従い、クリック可能な要素を少なくとも48x48ピクセルのサイズにフォーマットします。

デスクトップの設計のヒント

モバイルへの傾向が高まっているにもかかわらず、クライアントがフル機能のデスクトップサイトを必要とする理由はまだたくさんあります。 たとえば、大学や金融機関のWebサイトなど、モバイルサイトで実現可能な情報よりも多くの情報をオンラインで利用できるようにする必要がある場合があります。 または、彼らの調査によると、ユーザーは単にデスクトップに依存しているだけかもしれません。

デスクトップメニューは、スキャンが簡単で、明確な操作を提供し、もちろん応答性が高い必要があります。 また、リピーターが直感的に体験できるように、モバイルサイトと可能な限り一貫性を保つ必要があります。

メニューは、ホバーではなく、クリックすると開くはずです。 行う必要がある最も基本的な決定の1つは、ユーザーがサイトのメニューにアクセスする方法です。 メニューの表示をトリガーするには、親アイテム（カテゴリ名）にポインタを合わせるだけで十分ですか、それともユーザーはメニューをクリックする必要がありますか？

ホバーアプローチは人気がありますが、メニューがすべてのデバイスで確実かつ直感的に機能するようにするには、クリックして開くのが最善の方法です。 クリックアプローチにより、Webサイトは従来のコンピューターモニターとタッチスクリーンでより一貫して動作し、ホバーアプローチで発生する次のような多くのフラストレーションを回避できます。

• 狭いホバートンネル。 ホバートンネルは、メニューを開いたままマウスがナビゲートするために必要なパスです。 狭すぎると、ユーザーが目的のリンクに到達する前にメニューが表示されなくなる場合があります。
• 誤って開く。 ユーザーがページ上の別の場所に移動する途中でホバーメニューをナビゲートしようとすると、ホバーメニューが誤って開く傾向があります。 短い遅延を設定すると、その問題は解決しますが、ユーザーがメニューを開きたいときにフラストレーションを引き起こす可能性があります。
• タッチスクリーンのUXに一貫性がありません。 ホバーメニューはタッチスクリーンでは機能しません。 タッチスクリーンを検出し、タップして開くように切り替えるには、コードを修正する必要があります。 ラップトップとタブレットの間の境界線がますます曖昧になるにつれて、これらの回避策は時代遅れになる可能性があります。
• クリック可能なものに関する質問。 ホバーメニューを使用すると、ユーザーは、クリックしてみるまで、親リンクがクリック可能かどうかを常に把握できるとは限りません。 それは直感の反対です。
• アクセシビリティ。 ホバーメニューは、スクリーンリーダーを使用したり、キーボードを介してナビゲートしたりするユーザーに問題を引き起こす可能性があります。

適切なレイアウトを選択してください：ドロップダウンとメガメニュー。 デスクトップサイトが従来のメニューレイアウト（ページの上部にある水平メニューバー）を使用している場合、検討できるサブメニューには、標準の単一列のドロップダウンまたは複数列のメガメニューの2種類があります。

親カテゴリに含まれるリンクが8つ未満の場合は、ドロップダウンの使用を検討してください。 ドロップダウンメニューが垂直スクロールを必要とするほど長い場合は、情報を別の方法で整理することを検討する必要があります。おそらく、メガメニューとして、または親カテゴリを改良することによってです。

メガメニューはネストされたメニューの一種であり、通常、ブラウザの幅を拡張できる幅の広いレイアウトを使用します。 サブメニューに列にグループ化できるさまざまなリンクが含まれている場合は、このタイプのメニューを使用する必要があります。 通常、大規模なeコマースサイトではこのようなメニューが表示されます。

メガメニューを設計するときは、次のことを考慮してください。

• 画像やアイコンを追加して、情報をスキャンしやすくします。
• グループ関連のページに見出しを追加します。
• カテゴリ名が自明でない場合は、説明を追加してください。

メガメニューはモバイルで読み、ナビゲートするのが難しい場合がありますが、大画面でのUXの改善により、モバイルデバイスの情報を再構成するために追加の作業を行う価値がある場合があります。

明確なホバー状態を追加します。 クリックして開くメニューでも、クリック可能なすべての要素の明確なホバー状態を含めると、インタラクションが満足のいくものになり、リンクがアクティブであることをユーザーに安心させることができます。 クリック可能な領域の背景を少し暗くして、ホバー状態を示すことができます。 ホバー領域がクリック可能な領域と一致していることを確認してください。 テストの結果、ユーザーがより多くのガイダンスやコンテキストを必要としていることがわかった場合は、重要なものをブロックしない限り、よりわかりやすいラベル名またはツールチップを追加することを検討してください。

クリックしてサブメニューを閉じます。 ユーザーが他の場所をクリックしたとき、または別のサブメニューを開いたときにメニューを閉じることで、直感的に操作できます。 これは、ドロップダウン入力フィールドがフォームでどのように機能するかを示しているため、ほとんどのユーザーはこれをよく知っています。

デスクトップでキーボードナビゲーションを有効にします。 誰もがマウスを使用してナビゲートするわけではないため、メニューでは、ユーザーがキーボードのみを使用してナビゲートできるようにする必要があります。 これは、ユーザーがどこにいるかが一目でわかるように、すべてのリンクに明確なフォーカスされた状態が必要であることを意味します。 通常、暗い色のフレームは、フォーカスされた状態を示すのに適しています。

モバイル画面のデザインのヒント

モバイルファーストをまだ設計していない場合は、ハンドヘルドデバイスのメニューを最適化する必要があります。 従来のメニューレイアウトが非常に小さな画面でうまく機能することはめったにありません。デスクトップのメニューバーを縮小するだけでは、誰もそれを読むことができなくなります。 これらのガイドラインは、小さな画面に正常に移行するのに役立ちます。

メインメニューを簡素化します。 スマートフォンの画面は非常に小さいため、デスクトップメニューに表示される情報の多くは最初は非表示にする必要があります。 メインメニューバーは非常にシンプルである必要がありますが、見つけやすさを向上させるために最も重要なリンクを表示することをお勧めします。 メニューバーを画面の下部または上部に貼り付けることができます。

メニュートリガーを追加します。 モバイルメニューの全部または一部が非表示になっている可能性があるため、ユーザーはそれを見つける方法が必要になります。 メニューバーまたは手の届きやすいフローティングボタンにハンバーガーアイコンを追加することは人気のあるソリューションであり、多くのユーザーが認識しているでしょう。 ただし、ハンバーガーメニューだけが選択肢ではありません。 年配のユーザー向けに設計している場合は、たとえば「メニュー」という単語が含まれるボックスを使用する方がよい場合があります。 または、サイトの機能をより目立たせたい場合は、代わりに上部または下部のタブ付きメニューに表示することをお勧めします。

メニューをサイドバーに置きます。 モバイルメニューをデザインする方法はたくさんあります。 全幅レイアウトを使用できます。これはどのような状況でも機能します。 一番下の引き出し。リンクが少ない場合に最適です。 または、サブメニューのない小さなメニューの未来的なオプションである円形のコーナーメニュー。 暗い半透明の背景を持つサイドバーを使用してページのコンテンツをブロックし、気を散らすものを取り除き、ユーザーが簡単にタップして閉じることができるようにすることをお勧めします。 また、不快な体験を避けるために、左からスライドするアニメーションの使用を検討してください。 サイドバーメニューとボトムドロワーメニューの場合は、メニューが垂直方向にスクロール可能であることを確認してください。これにより、小さい画面や横向きモードで何も途切れることがありません。

ユーザーがメニューを簡単に閉じることができるようにします。 ユーザーは直感的にメニューをタップして閉じることができますが、Xボタンを追加することも検討してください。 ハンバーガーアイコンをXに変えるか、メニューの右上隅に追加することができます。

単一のサブメニューには展開セクションを使用します。 メニューにサブメニューのレベルが1つしかない場合は、展開セクションの使用を検討してください。 親アイテムの下に展開し、わかりやすくするために別の背景色を使用できます。 また、ユーザーが同時に複数のサブメニューを展開できるようにすることもできます。 親アイテムの右側にある下向きの角度または三角形のアイコンを使用して、サブメニューが使用可能であることを示すことを検討してください。

メガメニューと複数のサブメニューを重複するメニューに置き換えます。 複数のサブメニューを展開したり、メガメニューを再構成したりする必要がある場合は、重複するアプローチを選択してください。親の下または横にあるサブメニューを展開する代わりに、サブメニューで親を置き換えます。 このアプローチでは、最初のレベルを除くすべてのパネルに「戻る」リンクを含める必要があります。 トップレベルメニューの場合、親アイテムに直角アイコンまたは右矢印を使用することを検討してください。

サブメニューを事前に開きます。 デスクトップでは、現在のページとその親を強調表示すると便利です。 小さな画面では、これをさらに一歩進めることを検討してください。 ユーザーがタップしてメインメニューを開き、現在表示しているページがサブメニュー内にある場合は、サブメニューも自動的に開くことを検討してください。そうすれば、ユーザーは他のメニュー項目との相対的な位置を理解できます。

明確で一貫性を保つ

ナビゲーションは、カスタマーエクスペリエンスの重要な要素です。 ユーザーは、スカベンジャーハントに参加したり、メニューの作成に必要以上の時間を費やしたりすることを望んでいません。 必要なものが簡単に見つからない場合は、クライアントのリソースをサポートコールに縛り付けたり、さらに悪いことに、ビジネスを別の場所に移したりする可能性があります。

適切に設計されたマルチレベルメニューは、複雑な情報アーキテクチャを備えたWebサイトの重要なコンポーネントです。 これらのガイドラインは、ユーザーの調査やテストに取って代わるものではありませんが、さまざまなユースケースで役立ちます。

Toptalブログでさらに読む：

• 情報アーキテクチャの包括的なガイド
• レスポンシブデザイン：ベストプラクティスと考慮事項
• モバイル向けの情報アーキテクチャの原則（インフォグラフィック付き）