タブ付きナビゲーション: いつ使用するか、どのように最適化するか

公開: 2023-03-06

私のお気に入りの UX の引用の 1 つは、Google のスタジオおよびデザインシステムの責任者である Chikezie Ejiasi からのものです。

彼は次のように書いています。 Webデザインも同じはずです。 Web 上では、おそらく一度も会ったことのない人と話しているので、明確かつ正確であることが重要です。このように、よく構造化されたナビゲーションとコンテンツ構成は、良い会話をすることと密接に関係しています。」

タブ付きナビゲーションは明確で正確ですか? もちろん、これは有効な形式のナビゲーションとコンテンツ編成になります。

UX に関連するほとんどの事柄と同様に、重要なのは、それをどのように実装し、どのように最適化するかです。

タブナビゲーションとは？
タブナビゲーションを使用するのはどのような場合に適していますか?
- 論争
タブナビゲーションの実装方法
正しく行われたタブナビゲーションの例
- 1.アルバムアートコレクション
- 2. 請求書発行機
- 3. バッファー
覚えておくべき 3 つのベストプラクティス
- 1.アクセシビリティの問題
- 2.チャンキングの問題
- 3. スピードが重要
結論

タブナビゲーションとは？

タブ付きナビゲーションは、コンテンツをさまざまなセクションに分割するタブで情報を整理するナビゲーションおよび UI スタイルです。

通常、タブ付きナビゲーションを見ると、いくつかの共通の特徴に気付くでしょう。

タブの角は丸みを帯びています。
スペースでも 1 行でも、タブの区切り。
タブのホバー効果;
タブに深さと次元を追加するグラデーション。

タブナビゲーションは、オフィスで働いている人やテレビを見ている人なら誰でも知っているフォルダメタファに基づいています。 UsabilityGeek の Mifsud が説明しているように…

Justin Mifsud、UsabilityGeek :

「UI 用語では、メタファーは、ユーザーとアプリケーションの間の親しみやすさを促進するために使用されるアイデアまたはオブジェクトです。

UI でのタブの使用は、ファイル内の実際のタブディバイダーやファイルドロワー内のフォルダーのタブのように見えるため、優れたメタファーです。

したがって、これらのタブがコンテンツをセクションに分割していることをユーザーがより直感的に認識し、実際の生活と同じように、タブ (タブをクリックして Web 上でエミュレート) に手を伸ばすと、それぞれのコンテンツが表示されます。」 (UsabilityGeek 経由)

比喩は非常に一般的であるため、実装に注意することが重要です。タブ付きナビゲーションには強力なプロトタイプがあるため、期待どおりに表示され、正確に機能する必要があります。

優れたナビゲーションシステムと同様に、タブを使用すると次のことができます。

コンテンツを意味のあるセクションに分けます。
利用可能なコンテンツと、そのコンテンツにアクセスする方法を人々に示します。
ユーザーがサイト内のどこにいるかを視覚的に示します。

タブナビゲーションを使用するのはどのような場合に適していますか?

一般的に、次の場合はタブナビゲーションを使用することをお勧めします。

2 つから 9 つの異なるコンテンツカテゴリがあります。
カテゴリ名は比較的短く、位置とコピーの両方の点で予測可能です (つまり、プロトタイプと一致します)。
カテゴリの数は定期的に変更されることはほとんどありません。
カテゴリは本質的に似ています。それらが一緒にタブ化されていることは論理的に理にかなっています。
カテゴリは 1 行に収まります。

Nielsen Norman Group の Jakob Nielsen が説明しているように、タブナビゲーションが非常に複雑になり、複数の行が必要になると、問題が発生し始めます…

ヤコブ・ニールセン、ニールセン・ノーマン・グループ:

「複数の行があるとジャンプする UI 要素が作成され、空間メモリが破壊されるため、ユーザーはどのタブにアクセスしたかを思い出すことができなくなります。

また、複数の行は、過度の複雑さの明らかな兆候です。1 行に収まらないほど多くのタブが必要な場合は、デザインを簡素化する必要があります。」 (NN/g 経由)

複数の行は、視覚的な階層の問題も引き起こします。 2 番目の行がある場合、2 番目の行のタブがサブカテゴリであるか、少なくとも 1 番目の行のタブよりも重要性が低いことをユーザーに知らせることができます。

一般に、次の場合にタブナビゲーションを使用することはお勧めできません。

人々に同時にコンテンツを比較してもらいたい。これにより、記憶に負担がかかり、認知負荷が大幅に増加します。
「もっと…」スタイルのリンクを追加することを検討していることに気づきました。

もちろん、これらは基本的なガイドラインにすぎません。すべての「使用する必要がある」ルールに一致する可能性があり、それが視聴者にとって機能しないことがわかります。最終的には、テストする必要があるものです。

デジタル分析を使用して、タブ付きナビゲーションが訪問者に問題を引き起こしているかどうかを把握できることを忘れないでください. そこから、変更を加えて問題を修正するか、新しいタイプのナビゲーションを試すことができます。

論争

現代のデザイン慣行には、このようなサイトがたくさんありますが…

…タブナビゲーションをメインナビゲーションとして使用する人もいます。

Google の Luke Wroblewski が何年も前に記録したように、Amazon はこのトレンドの先駆者でした…

Luke Wroblewski、Google :

「1998 年、このサイトには書籍と音楽という 2 つの最上位カテゴリがありました。

追加のカテゴリ (ビデオやギフトなど) が追加されると、水平タブシステムは非常にうまくスケーリングされ、色によって製品カテゴリを区別する良い機会を生み出しました。」 (ルーク経由)

これは、Amazon が初期のタブナビゲーションをどのように使用していたかを示しています…

サイトの人気が高まるにつれて、Amazon が必要とするタブの数も増えました…

1999 年、Jakob はこれを「悪いデザインとタブメタファーの乱用」と呼びました。

タブは、関連のない場所に移動するよりも、別の (ただし関連する) ビューを切り替えるために使用する方が適切であると私は考えています。
別の領域に移動するためではなく、同じコンテキスト内でビューを切り替えるためにタブを使用する必要があります。これが最も重要なポイントです。なぜなら、ビューを交互に切り替えながら所定の位置にとどまることが、そもそもタブを使用する理由だからです。
ヤコブ・ニールセン

それでも、多くのサイトが Amazon の先例に従い、タブナビゲーションの定義は Nielsen の「代替ビューの切り替え」から移行し始めました。

メインのナビゲーションシステムとしてタブナビゲーションを使用することは少し時代遅れになっていますが、機能する可能性があります。ほとんどの場合と同様に、主な関心事は、Nielsen がタブナビゲーションについて何を言うかではなく、視聴者が何を言うかです。

使いにくいと思いますか？彼らはあなたのサイトを適切にナビゲートしていますか? 彼らはあなたのサイトの最も重要な要素を見つけることができますか? ユーザビリティテストを実施して確認してください。

タブナビゲーションの実装方法

エア・カナダは、ほとんどの主要航空会社と同様に、タブナビゲーションをうまく使用しています…

自分で (任意のレベルで) タブナビゲーションを実装する場合は、次の点に注意してください。

まず、サイトの情報アーキテクチャ (IA) を設計して、タブ関連の意思決定をよりスマートに行えるようにします。
カテゴリ名 (テキスト) だけでなく、タブ全体をクリックできるようにする必要があります。
サイト全体でタブナビゲーションを使用している場合でも、「ホーム」タブは使用しないでください。代わりに、ロゴで訪問者をホームページに誘導してください。
タブの範囲が明確になるように、タブはそれが制御するコンテンツ領域に接続する必要があります。
カテゴリ名は 1 ～ 2 語の長さで、平易な英語で書かれている必要があります。タブが読みにくくなるため、すべて大文字の使用は避けてください。
複数行のタブを積み重ねないでください。必要に応じて、代わりにサブカテゴリ (つまり、タブの下にある 2 つ目の水平バー) を使用してください。サブカテゴリを使用する場合は、選択したタブとその下のサブカテゴリのバーの間に視覚的なつながりがあることを確認してください。使用するサブカテゴリの数が多すぎないようにしてください。凝縮して単純化します。
選択したタブは、現在の場所を示すために目立つようにマークする必要があります。ただし、選択されていないタブは、忘れられたり見落とされたりするほどミュートされるべきではありません。
ユーザーがタブが互いにどのように関連しているかを完全に理解できるように、ページ間で一貫したタブ順序を維持する必要があります。

Jakob は、この種の一貫性が重要である理由を説明しています…

1.認識可能性。何かが常に同じに見える場合、何を探すべきか、見つけたときにそれが何であるかがわかります。
2. 予測可能性。何かが常に同じように機能する場合、それに基づいて行動するとどうなるかがわかります。
3.エンパワーメント。利用可能なすべての機能に関する過去の知識に頼ることができれば、目標を達成するための一連のアクションを簡単に作成できます。
4.効率。新しいことを学ぶのに時間を費やしたり、一貫性のない機能の影響を心配したりする必要はありません。
ヤコブ・ニールセン

正しく行われたタブナビゲーションの例

タブナビゲーションはさまざまな方法で使用できるため、タブナビゲーションを理解する最善の方法は、いくつかの例を見ることです。

1.アルバムアートコレクション

Album Art Collection は、タブ付きナビゲーションのかなり一般的な例です…

ここで興味深いことが 2 つあります。

ナビゲーションは横ではなく縦です。
ナビゲーションにはアイコンが含まれます。

通常、タブ付きのナビゲーションは水平に表示されます。これは、一部には設計プロトタイプによるものです。よくあることなので、ロゴの下の横のスペースにナビゲーションを探す傾向があります。

もちろん、ナビゲーションのためにそのスペースを使用することに制限されているという意味ではありません。必ずユーザーテストを使用してください。スタイル上の理由でナビゲーションを移動して、サイトの使いやすさに影響を与えることは望ましくありません。

Album Art Collection はナビゲーションアイコンを使用していますが、テキストベースの説明を放棄していないことに注意してください。アイコンのユーザビリティテストは独自の記事ですが、多くの場合、テキストベースの説明はアイコンのみよりも使いやすくなっています。 Six Revisions の Jacob Gube は次のように説明しています…

ジェイコブ・グベ、6つの改訂：

「タブコントロールテキストの代わりにアイコンを使用することは避けてください。記号は人によって意味が異なる可能性があるためです。最も安全な方法は、プレーンテキストを使用してペイン情報を説明することです。」（スマッシングマガジンより）

2. 請求書発行機

Invoice Machine は、主要なナビゲーションの例として、基本的なタブ付きナビゲーションです…

ただし、冗長な「ホーム」タブが含まれています。選択したタブが前面に表示され、タブがコンテンツ領域に接続されていることに注意してください。

3. バッファー

Buffer は、タブナビゲーションの私のお気に入りの例の 1 つです。以前は、個人向けのサービスと企業向けのサービスがあったため、タブを使用してスクロールしなければ見えない位置でコンテンツを分けていました。

これが個人向けコンテンツの始まりでした…

そして、ここからは企業向けコンテンツの始まりでした…

これにより、完全に別のサイトやエクスペリエンスを作成することなく、2 人の異なる聴衆に話しかけることができました。

その後、Buffer の製品ページは大幅に変更され、Publish、Reply、Analyze などの機能が追加されました (すべて一目瞭然です)。彼らがページに使用したタブナビゲーションは次のとおりです。

さまざまな価格プランとは別に、これらの製品ベースのタブには、タブ上の製品に関連する別の証言が表示されました。

UX Booth の David Leggett が説明しているように、タブナビゲーションはナビゲーションの第 1 および第 2 レベルを超えて関連しています。 Buffer の場合のように、スクロールせずに見える範囲で使用することもできます…

David Leggett 氏、UX ブース:

「タブはナビゲーションの第 1 レベルと第 2 レベルに限定する必要はありません。ユーザーが同じコンテンツの領域を切り替えることができれば、非常に便利です。

ページをリロードせずにコンテンツを切り替えるテクノロジーと組み合わせることで、ページをナビゲートするエンドユーザーに具体的な感覚を与えることができます。」（UXブース経由）

覚えておくべき 3 つのベストプラクティス

タブナビゲーションを試したり、機能しないと判断したりする前に、次の 3 つの要因を考慮してください。アクセシビリティ、チャンキング、速度です。

1.アクセシビリティの問題

障害のある人や制限のある人がサイトにアクセスできるようにしたい。タブ付きナビゲーションでそれを行うには、次のことを行う必要があります…

ユーザーがキーボードの「Tab」キーを使用してタブをナビゲートできるようにします。
ユーザーがキーボードの「Enter」キーを使用してタブを選択できるようにします。
別の方法を使用して、どのタブが選択されているかを示します。たとえば、「アクティブ」という単語を含むタイトル属性を含めることができます。

サイトをより多くの人にとって使いやすくすることで、コンバージョンが損なわれることはありません。

2.チャンキングの問題

タブナビゲーションでは、コンテンツをどのように整理して分割するかが非常に重要です。そのため、上記の実装に関する最初の推奨事項は、サイトの情報アーキテクチャに関連していました。

ジャスティンは、適切な組織化が不可欠である理由を説明しています…

Justin Mifsud、UsabilityGeek :

「タブはコンテンツを意味のあるセクションに分割し、占有する画面スペースが少なくて済みます。この点で、ユーザーは興味のあるコンテンツに簡単にアクセスできます (すべてのコンテンツを段落にまとめるのではなく)。」 (UsabilityGeek 経由)

サイトに必要なすべてのコンテンツを検討してください。次に、そのコンテンツを 4 ～ 5 個のバケットにグループ化します。おそらく、この演習を繰り返すと、最終的に 2 つまたは 3 つの異なるバケットが得られるでしょう。それは良い。ユーザーテストを実施して、どのユーザーがより良い反応を示し、ナビゲーションが優れているかを確認します。

何よりも、あなたは確実にしたいでしょう…

あなたのコンテンツは、訪問者にとって論理的で、期待され、明確な方法でチャンクされています.
タブの順序は意味があり、論理的です。
タブは既存のプロトタイプに従います。たとえば、SaaS サイトは特定の方法でチャンク化されることが多く、e コマースサイトは別の方法でチャンク化されることがよくあります。

3. スピードが重要

速度の重要性については、何度も何度も書いてきました。したがって、速度がタブナビゲーションの有効性にも影響することは驚くべきことではありません。

ジェイコブはそれを非常にうまく説明しています...

ジェイコブ・グベ、6つの改訂：

「モジュールタブを使用する目的は、コンテンツをすばやくインタラクティブに表示できるようにすることです。このためには、非アクティブなペインのコンテンツを HTML ドキュメントにインラインで記述してから、CSS と JavaScript を使用してペインのスタイルを設定し、視覚的に非表示にする必要があります。これは、ページのリロードを要求したり、リモートソースデータを要求したりするよりも高速です。

ペイン間のナビゲーションが大幅に遅れるため、ペイン間を切り替えるときにページを再ロードしないようにします。 Ajax を使用してリモートで読み込まれたコンテンツは、動的でリモートに配置されたペイン情報のオプションとなる可能性がありますが、ドキュメントのツリーに DOM によって非同期に挿入されたノードを認識していない可能性があるスクリーンリーダーユーザーにとっては課題となります。」（スマッシングマガジンより）

このアドバイスは、メインナビゲーションとしてタブナビゲーションを使用しているユーザーには当てはまりませんが、エアカナダや Buffer のようにタブナビゲーションを使用しているユーザーは注意する必要があります。

結論

タブナビゲーションは、訪問者との「良い会話」を確実にもたらします。適切に実装されていれば、訪問者に明確かつ正確に伝えることができます。訪問者がどこにいて、何が利用できるのか、利用可能なものにどのようにアクセスできるのかを正確に伝えることができます。

ユーザビリティテストと最適化の助けを借りて、会話はさらに改善されます。

ただし、あらゆる場合と同様に、必ず調査 (この場合は情報アーキテクチャの調査) を実施し、テスト、テスト、テストを行ってください。

要約すれば…

タブ付きナビゲーションは、メインのナビゲーションシステムとして使用できるだけでなく、プライマリまたはセカンダリナビゲーションレベルを超えて使用することもできます。
単一の行に収まる短い名前を持つ 2 ～ 9 個のしっかりした類似のカテゴリがある場合は、タブナビゲーションを試してください。
ユーザーにコンテンツを比較してもらいたい場合や、「もっと…」リンクを追加しようと考えている場合は、タブナビゲーションを使用しないでください。
実装のベストプラクティスに従うことはできますが…
重要なのはあなたのデータです。訪問者は、タブ付きナビゲーションでサイトをナビゲートするのが難しいと感じていますか? ユーザビリティテストを実施して確認します。
ポップアップする問題を修正します。または、費用のかかる問題が多い場合は、別のナビゲーションシステムを検討してください。
タブナビゲーションに関しては、アクセシビリティ、チャンキング、スピードがすべて重要なので、細心の注意を払ってください。

これに関連する何かに取り組んでいますか？ CXL コミュニティにコメントを投稿してください。