ウェブサイトの階層/ドロップダウンメニューのベストプラクティス
私は、Webサイトのナビゲーションメニュー、特にマルチレベルのメニューを介してユーザーに連絡するための最良の方法を理解しようとしています。
- 世界のモバイル化が進むにつれ、ウェブも進化しています。
- ウェブサイトは「反応する」でしょう。 Webサイトは、最大のデスクトップと携帯電話のブラウザで動作するように1回コーディングされます。開発者は、ツールを使用してカスケードスタイルシートを管理し、ディスプレイデバイスに自動的に対応します。
- モバイルデバイスにないものの1つは、入力用のマウスです。その結果、マウスのホバー機能はありません。モバイルデバイスには「タッチ」機能しかありません。
- 小型のモバイルデバイスでは可能です。通常、上部のブラウザーメニューバーはメニュー表示ボタンの後ろに隠れており、そのボタンを押すと、メニューがユーザーに表示されます。 （階層化された項目を表示するためにインデントされた間隔で）全体のメニュー構造を表示することは可能ですが、これはモバイルデバイスをすぐに圧倒する可能性があります。非表示の階層型モデルは、表示スペースを節約できます。
- 大型のタブレットデバイスでは、マウスをホバーすることはまだできません。 iPadを横長モードで考えてください。
その結果、マルチレベルのドロップダウンメニューのパフォーマンスは多少変わっています。ユーザーはタッチ（またはデスクトップでのマウスクリック）を使用して、非表示のサブメニュー項目を表示します。サブメニューを選択するには、2回目のタッチ/クリックが必要です。
私の質問には、現在メニュー項目が表示されているユーザーへのフィードバックが含まれます。トップ階層のメニュー項目は簡単です。色/フォント/背景を変更して、その違いを識別します。次に例を示します。
問題は、サブメニュー選択の現在の表示に関係しています。サブメニュー項目が選択されていることをフィードバックする良い方法がないようです。ここにタッチ/マウスクリックで選択されたマルチレベルのメニュー項目を持つメニューがあります。 「タッチ」はサブメニューで利用可能な選択肢を表示します：
選択した項目は、新しいページにあるとき、および最上位のメニュー項目にタッチした後に簡単に表示できます。この場合、単純なフォントの変更（太字/斜体）が正常に機能します。
そして、これが最後のジレンマです。ウェブサイトは現在「リソース2」を表示しています。これは、Webサイトが新しいページに移動した後に表示される通常の状態です。では、トップ階層のメニューのみが表示されているときに、サブ階層のアイテムが選択されていることをユーザーにどのように伝えますか？
そして、これはメニューボタンが押された直後の携帯電話の同じページです（注：携帯電話のスタイリングはまだ完了していません。その上部のロゴは大きすぎます。そのサイズの4分の1にする必要があります。など）。同じ階層メニューシステムを表示するには：
現在のページにサブメニュー項目を表示するためのベストプラクティスは何ですか？
- メニューのすぐ下にテキストのパンくずリストを追加します（「現在、ホームページにいます」）
- 見ている特定のサブメニュー項目を直接確認できない場合でも、トップレベルのメニュー項目をスタンドアロンの選択されたメニュー項目と同じスタイルにしますか？
- 特定のページにアクセスするときにプルダウンを開いたままにしておきますか？繰り返しになりますが、これはtier2メニュー全体がプルダウンされて表示されるということです。常に。痛い。
- 最上位のメニュー項目に追加の微妙なスタイリングキューを追加します（追加のアイコン、拡大されたVキャレット記号、テキストに下線、斜体テキストなど）。
- それを隠しておきます、とにかく誰が気にしますか？ （確かに選択、また痛い。）
このためのベストプラクティスについて、体系的なスタイリングガイダンスがいくつかあるはずです。最近の顧客調査の結果を知っている人はいますか？フィードバックに感謝します。
Smashing Magazineは、モバイルウェイファインディングに関する記事を公開しました。これはかなり役立つと思います： http://www.smashingmagazine.com/2014/10/13/wayfinding-for-the-mobile-web/
これらの解決策はどれも間違っているものではありませんが、選択肢があれば、おそらく「ネストされた人形」のアプローチを出発点として使用するでしょう。これはiOSとAndroid=の両方でおなじみのパターンであり、新しいパターンを学習する認知的負担を排除します。
