ブログ先日、ネタ元へのリンクを分かりづらいところに貼ってしまい、人気ブロガーの方に怒られてしまいました。先日、ネタ元へのリンクを分かりづらいところに貼ってしまい、人気ブロガーの方に怒られてしまいました。気を取り直して今日はAJAXの普及などで益々多用されるようになった「タブメニュー」を作る際に気をつけるべき、ユーザビリティのガイドラインをご紹介したいと思います。ハリナックスタブユーザビリティ、13のガイドラインAjaxタブは、違うコンテンツを表示するにもかかわらず、ページを先に読み込むため、ページが切り替わるストレスが少ないことから、さまざまなサイトに導入されています。タブは同じ文脈内で一覧を作る代わりに使おう異なるエリアへのナビゲーションに使ってはいけません。言われてみればなるほどと感じます。amazon.comは、過去にこの点で失敗をしてしまったそうです。タブのタイトルはユーザーが内容を予測できるものにしようタブのタイトルが分かりづらいものだと、ユーザーを迷わせてしまいます、それでは本末転倒ですよね。ユーザーは同時に複数タブの内容を理解する必要がないもしユーザーが異なるタブの情報を比較する必要があるのならば、いくらAjaxタブといえどもユーザーの負担になります。同一ページに表示しておいたほうが良いでしょう。America”または”Americas”と表記したほうが良いということです。Financeターゲットユーザーに合わせた表記が必要ですね。選択中のタブは強調されていること選択されているタブは、他のタブよりも目立たない色にすることがベスト。少なくとも3つのタブがある場合にはうまく機能するようです。(2つの場合は必ずしもそうでなくとも分かるはず。)それ以外には、文字サイズの変更や太字、もしくは画像効果で前にあるようにみせるのもいいでしょう。非選択のタブは、はっきり目に見えるようにしよう非選択のタブを見やすくすることによって、読者に印象付けることができます。選択中のタブはコンテンツエリアにくっついていたほうが良い選択タブとコンテンツエリアがくっついていることによって、今どれを見ているのか、視覚的に訴えることができます。タブのラベルは短く、単純明快な言葉を使おう通常ラベルは1~2語であることが望ましいようです。共通点の例として、マインドマップのノードタイトルのように直感的で、尚且つ誰にでも理解できるようなものがいいのでしょうね。↓ちょっと長いですが。英語表記なら最初の文字を大文字に日本語では適応しませんが、これはMicrosoftやAppleのガイドラインでも表記されています。タブは1列でタブが複数行になってしまうと、読者に覚えられにくくなってしまい、デザインを崩すことにもなってしまいます。シンプルなデザインを心がけましょう。タブはパネル上部に配置しようサイドや下部だと、読者は見逃してしまいます。タブによってコントロールされる部分は視覚的に明確なデザインにしようタブを使うことは、索引カードを使うのと同じです。どこまでが索引カードであるかを読者が分かるものでなければなりません。タブの切り替えが速い方が良いAjaxタブを利用して切り替えの時間を極力短く、0.1秒以内にすることが大事です。プログラミングの技術が重要なわけではありません。無償で配布されているものは数多く存在しているので、そういったものを利用するだけでもかなり有効です。見てみると、当たり前と思っていたものも「こんな明確な理由があったんだ。」と、より顧客視点で理解することができますよね。三井住友銀行のアクセシビリティガイドラインも、「その理由から優先度を高くしたのか。」となかなか勉強になります。何をするにしても、相手の立場に立つというのは大切なことなんですね。16:31Mikeさん、ご忠告ありがとうございました。ごめんなさい^^;しっかりと直させていただきました。今後も何かお気づきになられたらよろしくお願いしますね。