<span class="mt-enclosure mt-enclosure-image" /><img alt="Ajaxタブのユーザビリティ ガイドライン" src="http://web-marketing.zako.org/images/13-design-guidelines-ajax.jpg" width="514" height="204" style="" /></span>

<p>先日、ネタ元へのリンクを分かりづらいところに貼ってしまい、人気ブロガーの方に怒られてしまいました。。。以後気をつけます。</p>
<p>さて、気を取り直して今日はAJAXの普及などで益々多用されるようになった「タブメニュー」を作る際に気をつけるべき、ユーザビリティのガイドラインをご紹介したいと思います。</p>

<!--more-->
<h3 class="tips">タブユーザビリティ、13のガイドライン</h3>
<p>Ajaxタブは、違うコンテンツを表示するにもかかわらず、ページを先に読み込むため、ページが切り替わるストレスが少ないことから、さまざまなサイトに導入されています。</p>

<dl>

<dt>1. タブは同じ文脈内で一覧を作る代わりに使おう</dt>
<dd>異なるエリアへのナビゲーションに使ってはいけません。言われてみればなるほどと感じます。amazon.comは、過去にこの点で失敗をしてしまったそうです。</dd>
<dd><a href="http://www.yahoo.com/" target="_blank">Yahoo! USA</a><br />
<a rel="nofollow facebox" href="http://lh3.google.com/sigeos15/Ru_co4qIjOI/AAAAAAAAAmk/xYEfbqqF93c/s800/goog094.gif"><img src="http://lh3.google.com/sigeos15/Ru_co4qIjOI/AAAAAAAAAmk/xYEfbqqF93c/s288/goog094.gif" /></a></dd>
<dd><a href="http://www.iza.ne.jp/" target="_blank">iza</a><br />
<a rel="nofollow facebox" href="http://lh4.google.com/sigeos15/Ru_dTIqIjPI/AAAAAAAAAms/Em9OBjEtDEs/s800/goog095.gif"><img src="http://lh4.google.com/sigeos15/Ru_dTIqIjPI/AAAAAAAAAms/Em9OBjEtDEs/s288/goog095.gif" /></a></dd>

<dt>2. タブのタイトルはユーザーが内容を予測できるものにしよう</dt><dd>タブのタイトルが分かりづらいものだと、ユーザーを迷わせてしまいます、それでは本末転倒ですよね。</dd>
<dt>3. ユーザーは同時に複数タブの内容を理解する必要がない</dt><dd>もしユーザーが異なるタブの情報を比較する必要があるのならば、いくらAjaxタブといえどもユーザーの負担になります。むしろ同一ページに表示しておいたほうが良いでしょう。</dd>

<dt>4. タブはどことなく似ている自然なタイトルが良い</dt><dd>↓これは著者の例ですが、少なくともアメリカ人にはちょうど良く、国際的に考えると、"US"より"North America"または"Americas"と表記したほうが良いということです。</dd>
<dd><a href="http://finance.yahoo.com/" target="_blank">Yahoo! Finance</a><br />
<a rel="nofollow facebox" href="http://lh5.google.com/sigeos15/Ru_nuYqIjQI/AAAAAAAAAm0/I2vD2slN9oI/s800/goog096.gif"><img src="http://lh5.google.com/sigeos15/Ru_nuYqIjQI/AAAAAAAAAm0/I2vD2slN9oI/s288/goog096.gif" /></a></dd>
<dd>ターゲットユーザーに合わせた表記が必要ですね。</dd>

<dt>5. 選択中のタブは強調されていること</dt><dd>選択されているタブは、他のタブよりも目立たない色にすることがベスト。少なくとも3つのタブがある場合にはうまく機能するようです。（2つの場合は必ずしもそうでなくとも分かるはず。）それ以外には、<b>文字サイズの変更</b>や<b>太字</b>、もしくは<b>画像効果</b>で前にあるようにみせるのもいいでしょう。</dd>


<dt>6. 非選択のタブは、はっきり目に見えるようにしよう</dt><dd>非選択のタブを見やすくすることによって、読者に印象付けることができます。</dd>
<dd><a href="http://direct.tesco.com/q/R.201-6459.aspx" target="_blank">Tesco.Direct</a><br />
<a rel="nofollow facebox" href="http://lh6.google.com/sigeos15/Ru_ufoqIjSI/AAAAAAAAAnE/Z6RwPT3HlAs/s800/goog098.gif"><img src="http://lh6.google.com/sigeos15/Ru_ufoqIjSI/AAAAAAAAAnE/Z6RwPT3HlAs/s288/goog098.gif" /></a></dd>

<dt>7. 選択中のタブはコンテンツエリアにくっついていたほうが良い</dt><dd>選択タブとコンテンツエリアがくっついていることによって、今どれを見ているのか、視覚的に訴えることができます。↓</dd>
<dd><a rel="nofollow facebox" href="http://lh6.google.com/sigeos15/Ru_veoqIjTI/AAAAAAAAAnM/jbdypnPXZlQ/s800/goog099.gif"><img src="http://lh6.google.com/sigeos15/Ru_veoqIjTI/AAAAAAAAAnM/jbdypnPXZlQ/s288/goog099.gif" /></a></dd>

<dt>8. タブのラベルは短く、単純明快な言葉を使おう</dt><dd>通常ラベルは1~2語であることが望ましいようです。共通点の例として、<a href="http://web-marketing.zako.org/web-tools/online-mindmap-tools.html">マインドマップ</a>のノードタイトルのように直感的で、尚且つ誰にでも理解できるようなものがいいのでしょうね。</dd>
<dd>↓ちょっと長いですが。。。<br />
<a rel="nofollow facebox" href="http://lh6.ggpht.com/sigeos15/SNNQjByuSpI/AAAAAAAAGhY/fFfqHPgRLl4/s800/2326154515_21a47a84ca_o.jpg"><img src="http://lh6.ggpht.com/sigeos15/SNNQjByuSpI/AAAAAAAAGhY/fFfqHPgRLl4/s288/2326154515_21a47a84ca_o.jpg" /></a></dd>

<dt>9. 英語表記なら最初の文字を大文字に</dt><dd>日本語では適応しませんが、これは<a href="http://msdn2.microsoft.com/en-us/library/aa511493.aspx" target="_blank">Microsoft</a>やAppleのガイドラインでも表記されています。</dd>

<dt>10. タブは1列で</dt><dd>タブが複数行になってしまうと、読者に覚えられにくくなってしまい、デザインを崩すことにもなってしまいます。シンプルなデザインを心がけましょう。</dd>

<dt>11. タブはパネル上部に配置しよう</dt><dd>サイドや下部だと、読者は見逃してしまいます。</dd>
<dd><a href="http://quote.yahoo.co.jp/" target="_blank">Yahoo!ファイナンス</a><br />
<a rel="nofollow facebox" href="http://lh5.google.com/sigeos15/Ru_5VYqIjUI/AAAAAAAAAnU/pE-UxS_ai1w/s800/goog100.gif"><img src="http://lh5.google.com/sigeos15/Ru_5VYqIjUI/AAAAAAAAAnU/pE-UxS_ai1w/s288/goog100.gif" /></a></dd>

<dt>12. タブによってコントロールされる部分は視覚的に明確なデザインにしよう</dt><dd>タブを使うことは、索引カードを使うのと同じです。どこまでが索引カードであるかを読者が分かるものでなければなりません。</dd>
<dd><a href="http://pipes.yahoo.com/pipes/" target="_blank">Yahoo Pipes</a>
<br /><a rel="nofollow facebox" href="http://lh4.google.com/sigeos15/Ru_82IqIjVI/AAAAAAAAAnc/AJ3dmNA-WVM/s800/goog101.gif"><img src="http://lh4.google.com/sigeos15/Ru_82IqIjVI/AAAAAAAAAnc/AJ3dmNA-WVM/s288/goog101.gif" /></a></dd>

<dt>13. タブの切り替えが速い方が良い</dt><dd><a href="http://e0166.blog89.fc2.com/blog-entry-179.html" target="_blank">Ajaxタブ</a>を利用して切り替えの時間を極力短く、0.1秒以内にすることが大事です。ただし、プログラミングの技術が重要なわけではありません。無償で配布されているものは数多く存在しているので、そういったものを利用するだけでもかなり有効です。</dd>
</dl>


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

<ul>
<h4 class="tips">関連情報</h4>
<li>Via:<a href="http://www.useit.com/alertbox/tabs.html" onclick="javascript:urchinTracker('/go/Under_link');">Tabs, Used Right: The 13 Usability Guidelines (Jakob Nielsen's Alertbox)</a></li>
<li><a href="http://web-marketing.zako.org/web-marketing-news/" onclick="javascript:urchinTracker('/go/Under_link');">WEBマーケティング記事一覧</a></li>
<li>Tips一覧</li>
</ul>