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

Post on:2008年8月20日

sponsors

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

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

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

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

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

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

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

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

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

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