web-dev-qa-db-ja.com

ナビゲーションバーとタブの違いは何ですか?

最近私は(潜在的に)自分自身を見つけました 水平/上部ナビゲーションバー(h-nav-bar)の性質とタブセット 知らずに。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

少なくとも私にとっては、それらが異なることを知っています。たとえば、タブ付きバージョン(上)のアイテム(1、2、3、4)間でナビゲーションメニュー(垂直メニューなど)を共有することはありませんが、h-nav-barバージョン(未満)。

誰もが一方と他方の認知の違いは何かについてより多くの洞察を提供できますか?ユーザーはどちらか一方に何を期待しますか?

11
edgarator

タブは、ナビゲーションバーとは異なり、互いに関連していると見なされます。

通常、タブはデータを分離するために使用され、何らかの形で関連しています。プロフィールは、個人、プロフェッショナル、教育のタブに分割できるタブに表示できます。主に、同じ階層に関するデータを表示するために使用されますが、性質が異なり、データを編成するためにも使用されます。

一方、ナビゲーションバーは、相互に関連していない可能性があるさまざまなトピックに使用されます。

ユーザーテストを実行しているユーザーの場合、ナビゲーションバーをクリックすると、現在のページとは異なる、または現在のページに関連している可能性がある別のページに移動するとユーザーが考えることがわかりました。彼らはそれを通常のナビゲーションリンクのように解釈します。タブの同じユーザーは、同じページにいると思いますが、親または開いているタブに関連するデータが表示されます。彼は、ページが関連データのない完全に新しいページに移動することを期待していません。

14
ajayashish

2つは同様の設計目標を共有することがよくありますが、タブセットはより強力な視覚的メタファーであると私は思います。タブセットあり:

  • ユーザーがタブを選択したときに変化する画面上の領域は明らかです
  • 一度に選択できるタブは1つだけであることは明らかです
  • タブセットは共有テーマを意味します

Steve Krugは Do n't Make Me Think! でタブの利点について書いていますウェイバックマシンエクスペリエンスのために!)これが 抜粋 です。

1
wiegand