タブUI詳解

サイト構築 -ユーザビリティ

Post on:2009年9月8日

はじめに

タブモジュールは複数のコンテンツを異なるパネルに配置したユーザインターフェースのデザインパターンです。
パネルが一度に表示されるのは一枚だけで、ユーザーはコンテンツに対応したタブをクリック（ホバー）して、パネルを表示させます。

タブモジュールはウェブサイトやウェブアプリケーションに掲載された情報の量に犠牲されずに、表示エリアを最適化することができます。これはコンテンツを簡単にコンパクトにする最適な手段の一つで、今日増加の傾向にあります。

このエントリーは、ウェブサイトとウェブベースのアプリケーションでの使用のためにタブモジュールのデザインパターンを論じたものです。

1. Anatomy of a Module Tab Area

タブの構造

まずは、タブの構造を説明します。

Tab control area: タブコントロールエリアは、タブのコントロールをする場所です。
Tab controls: タブコントロールは、タブを通してパネルをナビゲートするインターフェースコンポーネントです。
tab control text: タブコントロールテキストは、タブをコントロールするためのテキストです。文言は短くし、対応するパネルのコンテンツに適した内容にします。
active tab control: アクティブタブコントロールは、現在選択されているタブコントロールです。アクティブなタブは一つにします。ウェブページが表示された時にデフォルトのアクティブタブコントロールは、最初のタブコントロールにします。
Inactive tab control: アクティブではないタブコントロールは、パネルが表示されていないタブコントロールです。
Pane: ペイン（以下：パネル）は、情報が表示される箇所です。表示されていないパネルは、タブコントロールをクリックすることでアクセス可能になるように、対応したタブコントロールを設定します。
Pane content: パネルコンテンツは、パネル内に配置されたコンテンツです。
active pane: アクティブなパネルは、現在表示されているパネルです。これはアクティブなタブコントロールと対になっています。
Inactive panes: アクティブではないパネルは、現在表示されていないパネルです。対応したタブコントロールがクリックされた時にそのパネルはアクティブなパネルになります。

2. When to Use Module Tabs

タブはいつ使用するのか

タブの重要な目的は、ユーザーに関連した情報を一度にグループ化して見せることです。

比較、あるいは同時にアクセスする必要のない情報

タブを使用するということは、異なるパネルの情報をユーザーに一度に見せるということを意味します。それは適切にタブコントロールが操作された時だけ、パネルを切り替えます。
パネル内の情報が互いに比較させるものである時、あるいは同時に表示させる必要がある時は、ユーザーの苛立ちをつのらせます。

BGPatterns

反例として、この実装はタブを使用するのを避けるべきである状態です。背景のパターンをデザインする時、ユーザーはデザインに一工夫加えるためにタブを前後にクリックしていかなくてはなりません。修正をする際も、これは不必要な障害を加えます。
ユーザビリティのためにも、このタイプのコンテンツは同時に情報が表示されるべきです。

簡潔な名前で表現できる情報

タブ内のテキストの長さは、そのスペースで制限されます。そのため、タブコントロールテキストは簡単で明瞭なものでなくてはなりません。
ユーザーが何のコンテンツなのか、容易に想像できるような文言にします。

タブは簡潔なコンテンツのために

タブはモジュール式で、容易に理解できる情報を含んでいることが意図されます。

各パネルは関連するべき

タブのデザインパターンは、パネルに配置された情報はそれぞれ関係があることを意味します。同一タブ内のコンテンツはカテゴリに合理的に括られ、論理的に関連性があります。

Best Web Gallery

反例として、この実装は論理的に接点のない二つのグループの情報がタブに使用されています。この二つのグループが一緒になっている理由を理解しようする時、ユーザーはきっと混乱するでしょう。

3. Module Tabs Usability and Best Practices

タブのユーザビリティとベストプラクティス

ウェブデザインでユーザフレンドリーなタブにするために、いくつかの重要なユーザビリティについて説明します。

アクティブなタブコントロールは効果的にハイライトする

パネルはどれがアクティブであるか、ユーザーは知っていなくてはいけません。そのため、アクティブではないタブコントロールと容易に識別が可能なようにします。

アクティブなタブは、パネルがアクティブであると同時にビジュアル的にアクティブであることを明示します。

タブコントロールは一行で

タブの典型的な例で、水平型のタブコントロールがあります。通常、タブコントロールは複数行にはしません。

タブコントロールを一行以上にするということは、階層関係を持つ場合です。

複数行のタブコントロールがあるということは、多くのパネルをもっていることを意味します。そして、もしかして、タブコントロールのテキストが長すぎる傾向があるので、簡潔に短くできるか検討してください。

パネルの切り替えは素早く

タブの使用目的の一つとして、コンテンツを素早く表示し、インタラクティブで対話型のプレゼンテーションを期待しているはずです。

そのため、パネル間のナビゲーションの遅延、パネルの切り替えにページのリロードは避けてください。
CSSやJavaScriptを使用してアクティブではないパネルは視覚的に隠すように実装します。AJAXでダイナミックに読み込むのは選択肢としてあり得ます。しかし、スクリーンリーダーのユーザーへの配慮も忘れないでください。

タブのテキストは短く的確に

タブの幅は数を増やすほど、スペースが狭くなることを意味します。タブコントロールのテキストはコンテンツに対して主要な文言を使用し、ユーザーが容易に素早く理解できるようにします。
適切で論理的なキーワードをパネルのコンテンツに使用することは非常に重要です。タブコントロールのテキストは熟考すべきです。

CBS.com

これは反例です。このタブコントロールのテキストはパネルを切り替える際、そこに何も期待するべきかのコンテクストがありません。

Navigant consulting

これも反例です。パネルに何の情報を含むか伝えていません。不確かなもので、ユーザーに混乱をあたえるでしょう。

内側のパネルはスクロールしない

タブと相互に作用するスクロールバーはユーザーに付加的な債務となります。
情報にアクセスするために、タブコントロールをクリックするだけではなく、パネルのもっと下にコンテンツがあるかどうかスクロールバーを使用する必要があります。

パネル内のスクロールバーは、タブのデザインの長さが問題です。パネルのエリアがコンテンツに対して、充分な高さを持っていないときは拡張を検討してください。
また、パネルごとに可変の高さにする事も考慮してみてください。

4. Module Tabs Accessibility Considerations

タブのアクセシビリティ

ウェブのアクセシビリティは、現在最もホットなトピックの一つです。
ある特定の個人にとってアクセスを困難なものにしないために、タブを構築するとき念頭におくべき若干のアクセシビリティの問題について説明します。

タブにはコントラストの高い色を

タブコントロールは、アクティブなものと、アクティブではないものを区別できるようにそれぞれコントラストの高い色を使用します。

Yahoo! News

これは反例です。この実装ではアクティブなタブコントロールとアクティブではないタブコントロールが極めて少しのコントラストしか違いがありません。これは眼がいいユーザーのためには素晴らしいものかもしれませんが、視力の弱いユーザーにとっては厄介なものでしょう。

アクティブではないパネルはスクリーンリーダーでも可読に

アクセシブルであるために、タブは視覚的にアクティブではないパネルを隠しますが、DOMツリーからは取り除くべきではありません。これはスクリーンリーダでアクセスができません。

セマンティックなHTMLで実装

タブコントロールをリスト要素で実装するということは、スクリーンリーダーにタブコントロールがエレメントのセットであると認知させることができるので、アクセシビリティを改善します。

キーボードでの操作も考慮

マウス操作ではなく、入力装置にキーボードを使用するユーザーも考慮してください。
簡単な方法としては、[Tab]キーを使うことです。[Tab]キー操作でタブコントロールが可能かどうか検証してください。タブコントロールにフォーカスが合わせられた際に[Enter]キーを押した時、パネルをアクティブにします。