AJAXタブを作る際の13のユーザビリティガイドライン。…

WEBマーケティング ブログRSSフィード

AJAXタブを作る際の13のユーザビリティガイドライン

2007 年 9 月 19 日 | コメントが2件あります。 | Posted in Ajax, WEBマーケティング用語
スポンサードリンク
Ajaxタブのユーザビリティ ガイドライン

先日、ネタ元へのリンクを分かりづらいところに貼ってしまい、人気ブロガーの方に怒られてしまいました。。。以後気をつけます。

さて、気を取り直して今日はAJAXの普及などで益々多用されるようになった「タブメニュー」を作る際に気をつけるべき、ユーザビリティのガイドラインをご紹介したいと思います。

タブユーザビリティ、13のガイドライン

Ajaxタブは、違うコンテンツを表示するにもかかわらず、ページを先に読み込むため、ページが切り替わるストレスが少ないことから、さまざまなサイトに導入されています。

1. タブは同じ文脈内で一覧を作る代わりに使おう
異なるエリアへのナビゲーションに使ってはいけません。言われてみればなるほどと感じます。amazon.comは、過去にこの点で失敗をしてしまったそうです。
Yahoo! USA
iza
2. タブのタイトルはユーザーが内容を予測できるものにしよう
タブのタイトルが分かりづらいものだと、ユーザーを迷わせてしまいます、それでは本末転倒ですよね。
3. ユーザーは同時に複数タブの内容を理解する必要がない
もしユーザーが異なるタブの情報を比較する必要があるのならば、いくらAjaxタブといえどもユーザーの負担になります。むしろ同一ページに表示しておいたほうが良いでしょう。
4. タブはどことなく似ている自然なタイトルが良い
↓これは著者の例ですが、少なくともアメリカ人にはちょうど良く、国際的に考えると、”US”より”North America”または”Americas”と表記したほうが良いということです。
Yahoo! Finance
ターゲットユーザーに合わせた表記が必要ですね。
5. 選択中のタブは強調されていること
選択されているタブは、他のタブよりも目立たない色にすることがベスト。少なくとも3つのタブがある場合にはうまく機能するようです。（2つの場合は必ずしもそうでなくとも分かるはず。）それ以外には、文字サイズの変更や太字、もしくは画像効果で前にあるようにみせるのもいいでしょう。
6. 非選択のタブは、はっきり目に見えるようにしよう
非選択のタブを見やすくすることによって、読者に印象付けることができます。
Tesco.Direct
7. 選択中のタブはコンテンツエリアにくっついていたほうが良い
選択タブとコンテンツエリアがくっついていることによって、今どれを見ているのか、視覚的に訴えることができます。↓
8. タブのラベルは短く、単純明快な言葉を使おう
通常ラベルは1~2語であることが望ましいようです。共通点の例として、マインドマップのノードタイトルのように直感的で、尚且つ誰にでも理解できるようなものがいいのでしょうね。
↓ちょっと長いですが。。。
9. 英語表記なら最初の文字を大文字に
日本語では適応しませんが、これはMicrosoftやAppleのガイドラインでも表記されています。
10. タブは1列で
タブが複数行になってしまうと、読者に覚えられにくくなってしまい、デザインを崩すことにもなってしまいます。シンプルなデザインを心がけましょう。
11. タブはパネル上部に配置しよう
サイドや下部だと、読者は見逃してしまいます。
Yahoo!ファイナンス
12. タブによってコントロールされる部分は視覚的に明確なデザインにしよう
タブを使うことは、索引カードを使うのと同じです。どこまでが索引カードであるかを読者が分かるものでなければなりません。
Yahoo Pipes
13. タブの切り替えが速い方が良い
Ajaxタブを利用して切り替えの時間を極力短く、0.1秒以内にすることが大事です。ただし、プログラミングの技術が重要なわけではありません。無償で配布されているものは数多く存在しているので、そういったものを利用するだけでもかなり有効です。

こう見てみると、当たり前と思っていたものも「こんな明確な理由があったんだ。」と、より顧客視点で理解することができますよね。三井住友銀行のアクセシビリティガイドラインも、「その理由から優先度を高くしたのか。」となかなか勉強になります。何をするにしても、相手の立場に立つというのは大切なことなんですね。

関連記事

スポンサードリンク

この記事へのリンク生成

この記事へのリンクURL
この記事へのリンクタグ
表示サンプル：AJAXタブを作る際の13のユーザビリティガイドライン - WEBマーケティング ブログ
この記事へのリンクタグ(その２)
表示サンプル：AJAXタブを作る際の13のユーザビリティガイドライン(WEBマーケティング ブログ)
この記事はAjax, WEBマーケティング用語のカテゴリに属する記事です。 この記事へのコメントを RSS 2.0 でフォローすることも出来ます。

コメント

  • Mike: 2008 年 9 月 19 日 14:08

    気になる点がありましたので報告します

    1) IE6 から見るとナンバリングが崩れていました
    10. 11. 12. と、10以降のナンバリングが崩れて見えます
    ■Firefox から見た場合
    10. タブは1列で
    ■IE6 から見た場合
    10タブは1列で

    2) flickr の画像がリンク切れ
    http://farm2.static.flickr.com/1189/734052586_cbaf70bb81_m.jpg
    この画像が無くなっているようです
    修正をご検討ください


  • sigeo: 2008 年 9 月 19 日 16:31

    Mikeさん、ご忠告ありがとうございました。

    明らかに確信犯です。。ごめんなさい＾＾；

    しっかりと直させていただきました。

    今後も何かお気づきになられたらよろしくお願いしますね。


コメントする