使いやすいタブ型ナビゲーションの5つのポイント

The Usability Postのエントリーから、押さえておきたい、タブ型ナビゲーションの5つのポイントを紹介します。

5 Steps for the Perfect Tabbed Navigation Menu

使いにくいタブの例

キャプチャ画像は、使いにくいタブ型ナビゲーションのサンプルです。
現在位置は「Site Details」と「Statistics」のどちらに見えますか?
タブがより大きく、下のグレーと同じ色だから「Site Details」ですか? タブのすぐ下の白色が同じだから「Statistics」ですか?

下記は、使いやすいタブ型ナビゲーションを実装する5つのポイントです。

  1. アクティブなタブとコンテンツの接点
  2. アクティブなタブと他のタブの色
  3. アクティブなタブのテキストの色
  4. タブのリンクエリアの大きさ
  5. タブの来訪時の状態

アクティブなタブとコンテンツの接点

アクティブなタブは、そのコンテンツとの接点が繋がっている必要があります。

使いやすいタブの例:1

アクティブなタブと他のタブの色

アクティブなタブを目立たせるために、他のタブと異なる色を使用します。
3Dっぽくする場合は他のタブを暗くします。

使いやすいタブの例:2

アクティブなタブのテキストの色

アクティブなタブのテキストの色を変えると、更に他のタブとの差別がつきます。

使いやすいタブの例:3

タブのリンクエリアの大きさ

リンクエリアはテキスト箇所のみではなく、タブ全体がリンクエリアになるようにします。

使いやすいタブの例:4

タブの来訪時の状態

タブ型ナビゲーションがあるページに、ユーザーが初めて訪れた時でも、タブの一つがアクティブになっているようにします。
ユーザーはアクティブなタブを見つけると、これをナビゲーションとして認識し、現在位置および他のコンテンツを把握することができます。

アクティブなタブが無いと、それはタブではなく、ただのボタンとして認識されてしまうこともあります。

sponsors

top of page

©2018 coliss