2010年05月17日

困ったときのタブ頼み?

ソーシャルブックマーク  はてなブックマークに登録  この記事をクリップ!  Yahoo!ブックマークに登録  Google Bookmarks に追加  Buzzurlにブックマーク  del.icio.us に登録  | 

顔写真
ユーザビリティコンサルタント
森 祐二

タブによる表示内容の切替は、トップページのファーストビュー(スクロールせずに見られる範囲)など、貴重なスペースを効率的に使えるインターフェースとして非常に便利ですが、やみくもにタブ化してしまうと、ユーザニーズの高いコンテンツを見てもらえなくなる危険性もあります。

タブを利用する際は、主に以下のポイントに気をつける必要があります。

  1. 情報の優先度とタブの前後関係は合っているか
    タブのメタファは視覚的に「前面か背後か」という関係が強調され、暗に「背後にあるものは重要ではない」と認識されます。
    (情報が並列関係の場合は、リンクを水平に並べるなどして並列であることを表現しましょう。)
  2. ラベルだけで切り替え後の内容が想像できるか
    背後に隠れたタブに関しては、少ない文字数で「それが何であるか」を伝える必要があります。
  3. ラベルだけでユーザの興味を喚起できるか
    内容を想像させるだけではなく、それがユーザのニーズに合ったコンテンツであることを伝える必要があります。
  4. 比較や一覧性が重要な情報を別のタブに分けていないか
    当然ですが、複数のタブで分かれた情報は一覧することができませんので、情報の分類を間違えるとユーザに操作上の負担を与えることになります。

例えば、このようなタブの使い方はどうでしょう。

不動産物件を紹介するサイトの例

  1. 人口の多い(=物件情報へのニーズが強い)本州が前面に出ていることに問題はありません。
    (実際にこんな大まかな区分けをしているサイトはないと思いますが)
  2. 「北海道」というラベルだけで、「北海道のおすすめ物件」であることは容易に想像できます
  3. 自分が北海道の物件を探していれば迷わず「北海道」をクリックできます。
  4. 本州の物件を探している人が、同時に九州の物件を比較することはないはず。
    (海峡のどちら側に住むべきか悩んでいるような人は別ですが・・・)

次に、このような場合はどうでしょう。

生活情報サイトの例

  1. 料理情報のニーズが高いサイトであれば、料理が前面に出ていることに問題はありません。
  2. 「仕事」というラベルだけでは漠然としすぎて、 「求人情報」なのか、「仕事を効率的にこなすコツ」なのか、内容が想像できません。
  3. したがって求職中の人も、仕事をたくさん抱えている人も、「仕事」タブには興味がわかずクリックできません。
  4. 例えば「経済」タブの中におすすめレシピの材料費、「健康」タブの中にカロリー数が書いてあったとしたら、一覧することに意味のある情報を分けてしまっているため、いくら分類が正しくてもユーザをいらだたせることになります。

適切かつ明確な情報の分類が難しい場合は、無理に情報をタブに押し込まず、ページを縦長にして一覧表示するか、下の例のように、デフォルトで前面に表示される情報の中に、他のタブの情報を少し入れることで、ちら見せでの興味喚起を図るとよいでしょう。

Yahoo Japan!の例

ソーシャルブックマーク  はてなブックマークに登録  この記事をクリップ!  Yahoo!ブックマークに登録  Google Bookmarks に追加  Buzzurlにブックマーク  del.icio.us に登録  | 

<< オーバーレイ表示を行う際の注意点 | トップ | タブキー利用にも対応するフォームのちょっとした改善 >>



AI搭載 モーメント分析クラウド「USERGRAM(ユーザグラム)」