web-dev-qa-db-ja.com

Webアプリケーションの水平および垂直メニュー

現在、ウェブサイトでトップ水平メニューを見つけることは非常に一般的です。そのいくつかの理由は、習慣と ヤコブの法則 かもしれません。

Webアプリケーションでは、上部または左側に同じようにメニューが表示される場合があります。ほとんどの場合、垂直メニューと水平メニューの組み合わせのようです。一定の理由はありません。

どうやらその件に関して実際の取り決めはありません。したがって、次の質問:

Webアプリケーションでメニューの向きを選択するときに関連する理由/要因は何ですか?

ナビゲーションメニューについて話している-他のページにつながる-アクションメニューではない-現在のページを変更する

質問はタブレットや携帯電話に関するものではありません。網羅的でなくても大丈夫です。個人的な方法論も答えになります。

19
Gildas Frémont

水平メニューは、複数のレベルをサポートしません。ネスティングやインデントは実現が難しく、多くの記事やUX.SEで広く文書化されている、使いにくい多くのソリューションにつながります。私は Windows 8ウェブサイト の大ファンではありません。たとえば、第3レベルの深さでそれは奇妙になります。

Webドキュメントは通常、垂直方向にスクロールするようにレイアウトされています。人々はこの方向へのスクロールに慣れています。ハードウェアインターフェイス(マウス、トラックパッド)と現在のHTML/CSS標準は、主に垂直スクロールをサポートするように設計されています。これにより、通常はWebドキュメントの幅が固定され、コンテンツに合わせて高さが自由に拡大されます。 水平方向のスペースがすぐに問題になります

特に、16ピクセルのフォントサイズを使用しながら1024ピクセル幅の画面に対応する必要がある場合は、通常、水平メニューに表示できる項目の数に非常に厳しい制限があります。たとえば、視力が限られている場合など、ユーザーはWebでフォントサイズを変更できます。これにより、この問題が増加します。この宇宙問題に対する実際の解決策はほとんどありません。水平メニューを複数行に折り返すことも問題があります。 1つの項目だけが新しい行に折り返される場合、メニューの視覚的な統一性が損なわれます。折り返すと、複数のレベルを持つことがほぼ不可能になり、ドロップダウンメニューが妨げられます。

アプリケーションのコンテキストでは、別の問題がナビゲーション用の垂直メニューの選択をサポートします。通常、現在のページと対話するためのUI要素(たとえばボタンバー)がレイアウトされます水平に。これは、PhotoShopとIllustrator(および同様のもの)を除いて、ほとんどの一般的なデスクトップアプリケーションと一致しますが、どこにでもボタンを配置するだけです:)。また、すべての使用可能な機能がユーザーに表示されるようにするには、ボタンを表示する必要があります。人々は垂直にスクロールすることに慣れていますが、ほとんどのディスプレイは実際には水平方向により多くのスペースを提供します。また、アクションは通常、単語ではなくアイコン(特に「保存」や「削除」のように一般的な場合)を使用して提供できるため、水平方向に多くのスペースを節約できます(ただし、垂直方向にはほとんどスペースがありません)。

水平バーを使用すると、そのバーをビューポートに固定する可能性も提供されます(つまり、ユーザーがスクロールしても画面の上部に表示されたままになります) )。これは、Webベースのメールクライアント、およびFacebookやTwitterなどの多くのWebアプリで現在一般的な動作です。垂直ボタンバーを修正することはできますが、垂直スペースがより制限され、すぐに問題が発生する可能性もあります。 Facebookの水平バーはビューポートに固定され、垂直メニューはページとともにスクロールします。これは、水平メニューの強力な利点です。そのため、最も重要なナビゲーションを選択することができます。

したがって、多くの点で水平メニューが好ましい。あなたがあなたがあなたがサポートする必要があるスクリーンとフォントサイズのためにあなたの仕事をすることができるなら、それのために行ってください。ボタンバーなどで視覚的に区別するようにしてください。

ただし、垂直メニューは長さと奥行きの両方でより適切に拡大されます。したがって、多くのアイテムを提供する必要がある場合は、垂直メニューに移動します。

また、両方を使用することもできます。トップレベルの水平方向のナビゲーション、サブレベルの垂直方向と左側。または、メガメニューと混ぜてください。

15
Koen Lageveen

情報アーキテクチャを支援するには、水平メニューと垂直メニューが必要です。そうしないと、古いAmazonウェブサイトにあるようなメニューになってしまう危険があります(残念ながら画像を見つけることができませんでした)。

通常、水平メニューはより高いレベルで、おそらく水平サブナビゲーションで使用されますが、水平サブナビゲーションの3番目のレイヤーは必要ないので、垂直レイヤーが必要です。その時点で、タブやフィルターなどの他のナビゲーションオプションを登録することができます。

サイトに深くネストされたページがない場合、言及したすべてのものが適用されます。それは実際のコンテンツに依存する可能性があります-フォルダー/タグのリストのための側面にスペースがあるので、ブログは縦型のものによく適しています。

考慮すべきもう1つの側面-メニューは成長し続けますか?もしそうなら-垂直がより適しています。ここでもブログの例が適切です。

幸運を

2

ユーザーインターフェースは、最初にコンテンツ用に設計する必要があると言っても差し支えないと思います。ユーザー環境、ハードウェアデバイス、習慣などの要素は非常に変化しやすいため、これらを考慮することははるかに困難です。一方、コンテンツの場合は、要素のタイプ、アイテムの数、および相互作用/動作を考慮に入れることがはるかに実現可能です。

質問に答えるために、トレンドは、大量のコンテンツを表示するために水平メニューの方が(メガドロップダウンメニューのように)より受け入れられるように見えるのに対し、垂直メニューはこの目的にあまり使用されていないように見えると思います。それ以外の場合は、通常、コンテンツ(情報アーキテクチャの設計分析を含む)から始めて、該当するリストされたポイントの一部またはすべてを調べます。

1
Michael Lai