タブUI詳解

タブUIの構造や特長、設置の判断、ユーザビリティ、アクセシビリティ、実装のポイントや機能の拡張方法、実装例やスクリプト例をSmashing Magazineから紹介します。

Module Tabs in Web Design

Module Tabs in Web Design

以下、その意訳です。
※原文では「タブモジュール」となっていますが、タブモジュールやタブUIと記載すると煩雑になるため、「タブ」と略します。
タブのみを指す場合は、「タブ コントロール」としています。

はじめに

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

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

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

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

タブはいつ使用するのか

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

関連している情報

タブのパネル内の情報が論理的な相互関係を作り、お互いに接点を持っている必要があります。ブログを例にすると、最近の投稿、人気のある投稿をグルーピングします。

タブのキャプチャ

Webdesigner Depot

このデザインパターンは、サイドバーに配置されています。

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

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

タブのキャプチャ

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]キーを押した時、パネルをアクティブにします。

代替コンテンツの提供

FlashやJavaScriptなど特別なテクノロジーを使用しなくてもパネルの情報にアクセスが可能なようにします。
これらの選択肢に、テキストベースのHTMLページのようなコンテンツを提供してください。

5. Module Tab Enhancements

タブの拡張

タブのユーザビリティとアクセシビリティと基本的な機能をカバーしたので、さらに有用性を改善する若干の方法を紹介します。

タブコントロールにアイコンを

タブコントロールにコンテンツを表現した適切なアイコンを使用して、コントロールのコンテクストを拡張します。

タブのキャプチャ

DrawIt

アイコンがパネルに含まれているであろうものに対して、多くのコンテクストを加えています。

アイコンを使用するときは、それが適切であることを確認してください。単にビジュアル的には使用しないでください。
また、タブコントロールのテキストを代用するためにもアイコンは使用しないでください。これはシンボルが人によっては意味が異なるためです。

パネルの切り替えにエフェクトを

パネルの切り替えにアニメーションなどのエフェクト使用するのは、アクティブなパネルが変化したというビジュアルフィードバックを提供する素晴らしい方法です。

タブのキャプチャ

Coda

タブコントロールをクリックすると、スムーズにスライドしてアクティブなパネルが表示されます。

アクティブではないタブにホバー時のアクションを

アクティブではないタブコントロールは、ユーザーにクリックできることが分かるようにマウスカーソルを変化させます。カーソルはデフォルトの設定でポインタに変化します。

ホバー時のアクションで加えるものとして、アクティブではないタブコントロールの色を変更させることです。これはタブの操作に慣れていないユーザーにも有用なものでしょう。

タブのキャプチャ

Vyniknite.sk

アクティブではないタブコントロールにマウスをフォーカスすると、そのタブをハイライトします。

6. Examples of Module Tabs in Web Design

タブの実装集

タブについて詳細に探求した今、今度は実際の例を見る時間です。
ここではタブの分析とインスピレーションのために若干の例を提示します。

タブのキャプチャ

Haveamint.com

タブのキャプチャ

Yahoo!

タブのキャプチャ

WebNotes

タブのキャプチャ

Martha Stewart

タブのキャプチャ

Komodomedia

7. Tutorials on Creating Module Tabs

タブを実装するためのチュートリアル集

タブをサイト内にインターフェイスのモジュールとして構築する上で、参考になるチュートリアルがあります。

タブのキャプチャ

Ajax Workshop 2: Building Tabbed Content

タブのキャプチャ

Create A Tabbed Interface Using jQuery

タブのキャプチャ

Accessible Image-Tab Rollovers

タブのキャプチャ

Create a Slick Tabbed Content Area using CSS & jQuery

8. Scripts for Module Tabs

タブを実装するスクリプト集

タブを手軽に使用したいという人は、既製のスクリプトも参考になるでしょう。

タブのキャプチャ

DOMTab

タブのキャプチャ

JavaScript tabifier

タブのキャプチャ

TabView

タブのキャプチャ

Coda-Slider

タブのキャプチャ

idTabs

sponsors

top of page

©2018 coliss