水平メニューと垂直メニューの長所と短所?


11

私は長い間、水平方向のナビゲーションメニューを使用するのか、垂直方向のナビゲーションメニューを使用するのかを考えたことがあります。私は以前、さまざまなWebサイトで両方を使用したことがあり、それぞれに長所と短所があることを確認できます。

この問題に関して利用可能な具体的なデータはありますか?アクセシビリティとユーザビリティの問題に興味があります。

回答:


3

スペースの問題とスキャンのしやすさの他に、考慮すべき他のいくつかの要因があります。

水平方向に配置されたメニュー(水平方向に配置された言語のメニュー)は、1つのアイテムから次のアイテムに移動するためのより多くのマウスの動きを意味します。

ただし、垂直メニュー項目から対応するフライアウトメニューに移動するよりも、水平メニューの最上位メニュー項目から対応するドロップダウンメニューに移動する方が簡単です。共有エッジが非常に小さいため、ドロップダウンに比べてフライアウトでは対角問題が大幅に拡大されます。

そして、速度を目標とする問題があります。縦に並んだメニューは、横に並んだメニューよりも「奥行き」があります。つまり、ユーザーはオーバーシュートした場合に備えて大きなバッファーを持っているため、ユーザーはメニューに向かってより高速でマウスを動かすことができます。もちろん、水平メニューがドキュメントの上端または下端(つまり、無限の深さ)に沿って配置されている場合、これは問題点です。

結局、それはウォッシュだと思います。デザインに最も適合するものを選び、そこから使いやすさを最適化します。それがページの残りのためにその下に巨大な空の列を作成することを意味するならば、あなたは縦メニューを使いたくないでしょう。また、レイアウトの幅を2000pxにする必要がある場合は、水平メニューを使用しないでください。


4

まあ、私は開発者/プログラマー/コーディングの人です。

つまり、私はそのような質問に答える前に、常に設計に関する情報を求めています。Jakob Nielsenの記事は気に入っています。投稿する前に調査するからです。

これらのリンクが役立つと思います。

今私の意見です。特にメガドロップダウンの使用を検討している場合は、水平メニューの使用がメインナビゲーションの最初のオプションです。

また、ユーザーが自分自身をすばやく見つけるのに役立つ補助ナビゲーションとしての水平ブレッドクラムの使用。

縦型のナビゲーションメニューは好きですが、広告のように見える傾向があり、ユーザーに見えないようになっています。まず、縦型メニューがバナーやGoogle広告のようになっていないことを確認してください。

2つ目は、「コンテキスト」ナビゲーション、関連コンテンツの表示、またはサブセクションアイテムの垂直メニューを使用することです。


いい視点ね。2層ナビゲーション(メインおよびコンテキスト)を備えたほとんどのサイトでは、後者に垂直サイドメニューを使用していると思います。
Lèseはmajesté

はい。ヤコブ・ニールセンはありませんいくつか ...この種の問題の研究を:)
JoséNunoFerreira

0

1つ以上の単語のメニュー項目がある場合、スクロールが必要になる前に、水平メニューにいくつまで収まるかには物理的な制限があります。したがって、このため、メイン/トップレベルのアイテムには水平メニューを優先する傾向があります。

アクセシビリティに関しては(視覚的には問題ないと想定して)、同じようにマークアップできるため、それほど大きな違いはないかもしれません。たとえば、リンクの順不同リスト。


0

私は失態の答えの反対を投稿するつもりです...

左から右に読みますが、上から下にスキャンする傾向があります。メニュー項目が縦に配置されている場合、項目が上にあると、項目をすばやく比較するのが簡単になります。

リンクの数が少ない場合は、水平で問題ありません。名前は短く簡潔にしてください。6〜7以下にしてください。もちろん、他のオプションは組み合わせです-水平方向にいくつかの「ヘッダー」があり、そのカテゴリのすべてのドロップダウンをホバーします。


「上から下にスキャンする傾向があります」は、どのような観察または研究に基づいていますか?所見があれば説明してください。研究の場合は引用してください。「アイテムが相互に上にある場合、アイテムをすばやく比較する方が簡単です。」どうして?アイテムを比較するには、人間のメモリにアイテムをロードする必要があります。アイテムのロードが速いほど、比較が速くなります。人間の心は超短期記憶で約7項目しか保持しません。7項目以上の設計は...人間が処理できる以上のものです。引用:ワーキングメモリ容量- en.wikipedia.org/wiki/...
失策

1
@blunders:あちこちで読んださまざまなものに基づいていますが、特定の研究を紹介することはできませんでした。再:アイテムの比較-同時に左から右に比較するため、垂直方向の方がはるかに簡単です。特定の単語を探している場合は、それぞれの最初の1文字または2文字を瞬時にスキャンできます。水平的には、一方を読み、次にもう一方を読み、それぞれを処理する必要があります。これはJakob NielsenのWebサイトのどこかにあると思います...
DisgruntledGoat

0

答えはおそらく両方を使用する時があると思われますが、アイトラッキング調査が示している限り、目はページをF字型パターンでスキャンしているので、ナビゲーションを左上または左上に保つことがおそらく最善です。上。

ナビゲーションリンク(ホーム、私たちについて、連絡先など)の上部にある水平メニューや、カテゴリ、記事などの左側のメニューのように、両方を組み合わせて使用​​することもできます。

ドロップダウンメニューに関して考慮すべきもう1つのポイントは、SEOに影響を与える可能性があることです。Search Engine Landの Danny Sullivan は、ドロップダウンメニューはすべてのページへのリンクを多く持つことでリンクの権限を弱めることができ、階層メニューはリンクジュースをより適切に渡すことができると示唆しています。また、ユーザーが探しているものを見落とす可能性のあるドロップダウンで、ナビゲーション要素をユーザーに非表示にする理由。


0

私見、私は主要セクションを水平メニューとして分類する傾向があります。垂直メニューのアクティブな主要セクションの説明セクションとして。

たとえば:

------------------------------------------------------------------------------
Home News Product
------------------------------------------------------------------------------

|      About Us          | |                                            |
|      Mission           | |      Here is describing content            |
|      Contact Us        | |                                            |

ホーム、ニュース、製品が主要なカテゴリとして機能するため、横レイアウトでそれらを維持しました。会社概要、ミッション、お問い合わせはホームページの最も説明的なセクションであるため、簡単にアクセスできるようにコンテンツ表示部分の横に縦メニューを配置しました。


0

非常にシンプルです。読みやすいのは何ですか。ABCDEFGHIJKLMNOP...Zまたは

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
.
.
.
Z

それを読んでいるとき、あなたの目がどのように動くかについて考えてください。最初の例では----などです。2番目の例ではZZZなどです。目がZパターンで動くことを意味します。Zパターンを使用すると、最初の情報よりも次の情報の点について、より多くのことを考える必要があります。情報が最後の情報に近いほど、使いやすくなります。情報がコンパクトであるほど優れており、いつでもスペースを追加できますが、一部の情報はこれまでコンパクト化されるだけです。たとえば、次のようにスペースを追加できますが、例2の最長の終了を測定すると、長さがさらに短くなります:ABCDEFGHIJKLMNOPQRSTU VWXYZ

私は誰かが研究や何かを投稿するだろうと確信していますが、私は間違っているとさえ言うかもしれませんが、私の論理はそれを理解するのに十分単純であり、私には理にかなっており、私に伝えるための空想的なレポートは必要ありませんそれが正しいか間違っているか...私はファンシーレポートが意味をなさないと推測しているので、与えられたテストの構造に基づいたデータのサンプルにすぎません...

それで、あなたはどう思いますか?


1
あなたは、水平が常に良いことを意味するように思われますか?この特定の例-非常に短いメニュー項目に同意します。しかし、アイテムが冗長になるとすぐに、横に並べると非常に乱雑になる可能性があります。
MrWhite

@ w3d:真実ですが、それは別の主題です。つまり、それは現在の核心事項とは関係のない追加の要素であることを意味します。あなたが投入することができる多くの要因がありますが、それらは目前の核心事項に直接関係しません。例:こんにちは、こんにちは、こんにちは-大文字と小文字を区別することで、読みやすさが変わりますが、これは追加の要素です。
2010年

2
彼が言っていることはそれがうまくスケーリングしないということです。確かに、サイトを設計したときのサブメニューは短く、開発プロセス中に追加されたのは数項目だけでした。1年後、手に水平な混乱が生じました。
cinqoTimo 2010年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.