このページの先頭です
ここから本文です

7:6 タブを効果的な表現にする

ガイドライン

重要度:5点満点中の3点、実証度:5点満点中の3点ナビゲーションのタブはページの上部に置き、リアルの世界のタブをクリッカブルにしたような見た目であること。

解説

ユーザーは、タブがリアルの世界のタブのように見えないとき、そのタブの使い方に困惑することがあります。リアルの世界のタブは、ファイリングの引き出しに見られるようなものです。ある調査研究では、ユーザーはリアルの世界のタブのように見えるタブほどより適切にクリックできるという結果が出ました。

ソース(実証となる調査研究)

Bailey, Koyani and Nall, 2000; Kim, 1998.

事例

写真:事例の Web ページ画面
拡大画像を見る

上の2つのクリッカブルなタブは、ちょうどオフィスのキャビネットに見られるタブのような見た目です。それに対して、下の3つはナビゲーションのタブのデザインが見た目では分かりにくく、ユーザーがその上にマウスカーソルを置かないとクリッカブルであることが分かりません。マウスカーソルをもっていかないと分からないのは、ユーザーがナビゲーション部分を発見するのに時間がかかり効率がよくありません。

このページの先頭へ▲