タブのデザインパターン、「N」タブを解く

Question

「タブ」を活用することにより、さまざまなコンテンツプレゼンテーションの問題を解決するのに役立つ多くのデザインパターンを見てきました。

グループ化されたコンテンツ（複雑なコンテンツまたはシンプルなコンテンツ）をページに表示し、マルチデバイスエクスペリエンスをサポートしたいとします。

私がそのようなグループを「N」個持っていると仮定します。

また、IAの改定を行ってもグループの数を大幅に減らすことはできないと仮定しましょう

以下にリストしたパターンに関する長所と短所は何ですか？
以下にリストしたものと比較して、より優れたUXを提供できる他のデザインパターンはありますか？

私は自分の意見とそれぞれの長所と短所のリストを持っていますが、知識を広げるためにここに尋ねたかったのです。

Jan · Accepted Answer

いい質問です-私も私以外の答えを探しています！

@バージョン1：

Androidはこれを、モバイルアプリ（「タブ」を模倣する画面をスワイプする）のより「標準的な」要素として導入しました。したがって、Androidは、ユーザビリティの複雑さを受け入れながら、より複雑なアーキテクチャを望んでいました。

長所：最も使用されているモバイルOSでの動作を学習しました。非常に複雑な構造を含めることができます。モバイルフレンドリー。

短所：デスクトップの場合、これは非常に一般的な動作ではありません（右から左にスクロールすることは、上下にスクロールするよりも困難です）。ユーザーはタブリストの最後にあるものを見ることができません。おそらく直感的ではない

@バージョン2：

私は正直にこれを使ったことはありません。一目で、

長所：可能なすべてのオプションの可視性（N個のタブについて話している場合、これは当てはまらない場合があります）

短所：タブのコンテンツの位置はほとんど予測できません。 2行のタブが作成されるとすぐに、コンテンツとタブの接続が困難になります。レスポンシブサイトの概要が失われる可能性-ボックスの幅が同じでない場合、ユーザーはすべての情報を把握できますか？;おそらく最初から複雑

@バージョン3：

プロ：簡単に読めるヨーロッパの読者向け。水平トップナビゲーションに取り付けることができます。デスクトップでの使用に適しています（たとえば、上部のナビゲーションから展開するメガメニューがある場合）;マウスホイールで可能な素敵な制御

短所：電話ではほとんど使用できません（水平方向のスペースが多すぎるため、無限に長くなる可能性があります）。すべてのオプションが一目でわかるわけではありません。すべてのデバイスを登録します。垂直方向のスペースは水平方向のスペースよりも制限されているため、表示されるアイテムの量は水平方向に並べられたものよりも少ない可能性があります

@バージョン4：

プロ：最小のスペース使用量。

欠点：タブのようにコンテンツを含めることはできません（コンテンツをプッシュするために別のボックスを使用していない場合）。リストが長くなるほど、モバイルの使用法は悪化します。

したがって、可能であれば、水平方向のタブを使用します（これもコンテキストによって異なります）。垂直方向の制限が小さく、学習されているためですAndroid動作。私が制御できない場合、すべてのタブに「概要がない」という欠陥がタブの目的を破壊するので、タブ項目を使用することを再考します（Androidアプローチの主な欠陥だと思います）。

Nathanael · Answer

オプション1

長所：

メニュークリックの背後に隠れていないスクロールナビゲーションメニューが表示される
コンテンツは発見可能です
モバイルでうまく機能します

短所：

いくつかのアイテム以上のものはすぐにはわかりません
これは多くのデスクトップユーザーにとってなじみのないパターンですが、これはユーザーの人口統計に大きく依存しています。

ワイドスクリーンまたは大きな画面のデバイス（デスクトップなど）で表示している場合、またはNが小さすぎてタブが多すぎて1行で快適に表示できない場合は、これを使用します。または、画面が十分に狭いため、ユーザーがスクロールできることを示すために、部分的なタブが確実に表示されることがわかります。

オプション2

この概念は、多くのWebサイトで使用されているサイトマップフッター、または fat menus pattern とあまり似ていません。

長所

すべてが非常に目立ちます。非表示になっているオプションはありません

短所

これは、モバイルユーザーにとって悪夢になります
これは簡単に多くの画面領域を占有する可能性があります
「N」が大きいほど、見つけやすくするのが難しくなります

私は、期待がデスクトップのマウス駆動デバイスである場合にのみこれを使用します。

オプション3

長所

ユーザーは通常、これがどのように動作するかに慣れています。左側で選択を行うと、右側に表示されるものが変更され、その選択が反映されます。ほとんどの基本的なコンピューターユーザーは、他のアプリケーションからのその動作に慣れています
「N」は無限にスケーラブルになります
2パネルのデザインは、ユーザーがメニューを選択した後に独自のリストを表示し、独自のコンテンツを表示できるようにすることで、小さな画面フォーマットに比較的簡単に適応できます。（別名a 1つのウィンドウのドリルダウン）
ナビゲーションのランドマークを移動するために画面を必要とせずに、ユーザーがどこにいるのか、どこに送信されているのかを確認できるため、ナビゲーション中のユーザーの認知的負荷が軽減されます。

短所

すべてが見えるわけではない
それは多くのスペースを必要とし、異なる相互作用パターンを使用する小さな画面のバックアップ設計が必要になります

このシナリオで別のデザインの説得力のあるケースがない限り、私はこれをデフォルトにします。それは多くのオプションを可能にします。画面外により多くのオプションを表示する垂直スクロールバーのアフォーダンスは簡単に認識され（水平スクロールバーよりも期待されます）、ほとんどのウィンドウ、Mac、およびLinuxユーザーにはすでにおなじみです。これをモバイルビューで使用することを再考し、レスポンシブデザインの一部として1つのウィンドウのドリルダウンオプションを提供します。

オプション4

長所

他のデザインオプションが対応していると思われるユースケースを考えると、これをナビゲーション方法として使用することのプロとしてはあまり見当たらないため、このようにナビゲーションを使用する非常に説得力のある理由を考えることはできません。

短所

あまりモバイルフレンドリーではない
TBH、特にデスクトップでも使用できません（ナビゲーション用）
すべてが非表示になっているため、オプションを表示するにはドロップダウンを開く必要があります。
ユーザーは、他の何に関連しているかについて、実際のコンテキストを持ちません。

ナビゲーションには使用しません。

Crissov · Answer

他の回答は、私が考えることができるほぼすべての長所と短所をカバーしていたので、私は質問のパート2-選択肢にのみ答えます。

一般に、どのグループにも7つを超えるエントリを含めないでください。そうでない場合は、別の階層レベルを追加することを検討してください。約5アイテムで最適なデザインを目指しますが、例外的なダースまで十分に機能し、それ以上で完全に失敗することはありません。

メディアクエリ（Web上）および同様のプラットフォーム依存のテクノロジにより、異なるユーザーI/O機能を備えたデバイスのレイアウトをターゲットにすることができます。

タッチスクリーンを備えた携帯電話の場合、オプション1のバリアントを使用します（上部のタブ、水平スクロール）：現在のタブのタイトルが表示され、ほとんどのスペースを占めます。その隣には隣接するタイトルがありますが、省略されています（多分アイコン）、またはぼかし、または両方に山形矢印を重ねます。スワイプは期待どおりに機能し、タイトルを長押しすると、すべてのタブタイトルが表示され、スクロール可能なドロップダウンのような垂直選択がオーバーレイされます。

ポインティングデバイス（通常はマウス）を備えたデスクトップの場合は、オプション3（横にタブ、垂直スクロール）のバリアントを使用します。最も関連性の高いすべてのタブラベル（次/前、前に表示した、検索結果など）ですが、最低でもアクティブなものが表示され、他のすべては垂直方向に圧縮されて単なる水平線になります。カーソルでホバーした場合にのみ、拡大されて読みやすくなり、十分なクリックターゲットが提供されます。（垂直スクロールも機能します。） TabExposéのようなものをコンテンツとプラットフォームに応じて検討することができます。

Gabriel Fonseca · Answer

私はuxから始めていますが、適切に質問に答えるために最善を尽くします。

1。長所と短所：

a）「ブラウザタブ」

長所：

ブラウザでのユーザビリティとよく似ており、タッチスクリーンがサポートされている場合は、スワップメカニズムに関連する場合もあります。
これは、デスクトップとモバイルの両方で日常のアクティビティに非常によく見られるパターンです。
必要に応じて、「サブメニュー」ナビゲーションを簡単にサポートできます。

短所：

すべてのオプションが画面に表示されない場合があり、知識があまりないユーザーを混乱させる可能性があります。
アクセシビリティガイドライン：使いやすさ！画面ヘッダーを持つユーザーは、Tabキーまたは「すべてのリンクを表示」ショートカットを使用しても、リストされたリンクを表示できない場合があります（クリックではなくデフォルトでスクロールできる場合は改善される可能性があります）。
何らかの理由でいずれかのページで2つの「タブレイヤー」を使用する必要がある場合は、少し奇妙になることがあります。
1つのタブのテキストが大きすぎると、パターンが壊れる可能性があります。

b）「古いアマゾン」

長所：

ブラウザでのユーザビリティとよく似ており、タッチスクリーンがサポートされている場合は、スワップメカニズムに関連する場合もあります。
これは、デスクトップとモバイルの両方で日常のアクティビティに非常によく見られるパターンです。
すべてのオプションが画面に表示され、ユーザーの決定が容易になります。
アクセシビリティガイドライン：使いやすさ！画面ヘッダーを持つユーザーは、Tabキーまたは「すべてのリンクを表示」ショートカットを使用して、リストされたリンクを表示します。
「N」があまり大きくならない場合は、うまく機能します。

短所：

何らかの理由で2つの「タブレイヤー」を任意のページで使用する必要がある場合、非常に奇妙になることがあります。
1つのタブのテキストが大きすぎると、パターンが壊れる可能性があります。
「N」が大きくなると、デザイナーがタブを並べ替えたり、再設計するように設定されていなかったりすると、制御不能になります。（タブをあきらめなかった場合に、Amazonが今日どのように見えるかについての激烈な画像、dack.comの厚意による http://www.dack.com/web/Amazon.html ）
ユーザーは混乱したり、情報（オプション）が多すぎて選択を恐れたりすることがあります。
表示されるオプションが多すぎると、折りたたみ後のモバイル（またはデスクトップ）のコンテンツが多すぎる可能性があります。

Obs：これは、Amazonが何年も前（2000年頃）に使用したパターンと同じです。

c）垂直ナビゲーション

長所：

サイドメニューを開いたときのアプリの操作性によく似ています。
これは、モバイルでの日常活動で非常に一般的なパターンと密接に関連しています。
必要に応じて、「サブメニュー」ナビゲーションを簡単にサポートできます。
水平ナビゲーションのサブメニューとして使用できます。
タブがグループ化されている場合、折りたたみ可能/アコーディオンを使用できます。

短所：

すべてのオプションが画面に表示されない場合があり、知識があまりないユーザーを混乱させる可能性があります。
アクセシビリティガイドライン：使いやすさ！画面ヘッダーを持つユーザーは、Tabキーまたは「すべてのリンクを表示」ショートカットを使用しても、リストされたリンクを表示できない場合があります。（クリックではなくデフォルトでスクロール可能な場合は改善される可能性があります。）
何らかの理由で2つの「タブレイヤー」を任意のページで使用する必要がある場合、非常に奇妙になることがあります。
1つのタブのテキストが大きすぎると、パターンが壊れる可能性があります。
モバイル（オープンオンデマンドのサイドメニューとして）とデスクトップ（永続的なサイドメニューとして）の2つの実装が必要です。

d）選択

長所：

ユーザーが探しているものを知っている場合、オートコンプリートによって改善される可能性があります。（Country SelectsのSmashing Magazine： http://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/ ）
デフォルトでは、モバイルとデスクトップの両方で機能します。
スペースを使いすぎずに無限のアイテムをサポートします。
ユーザーが選択できるようにラベルを近くに配置するのは簡単です

短所：

すべてのオプションが画面に表示されない場合があり、知識があまりないユーザーを混乱させる可能性があります。
使いやすさ！ユーザーは探しているものを見つけるためにリスト全体を見なければならない場合があります。
オートコンプリート手法を使用する場合、ユーザーが特定のコンテンツにアクセスしようとする可能性のあるすべての代替方法で詳しく説明するには、長い時間がかかる場合があります。

2。その他のソリューション

オートコンプリートアプローチについて説明しましたが、検索アプローチも使用できます。タブのパタパタの近くにさえ合うかもしれない他のものを知りません。

評決：最大サイズが12の通常サイズの限られた数のアイテムが与えられた場合、私はソリューションを選択します。モバイルで非表示にしたり表示したりすることに注意して、垂直方向のソリューション。

例外：ユーザーがほとんどの時間（大学の部署や国など）にアクセスしようとしていることを知っている場合は、選択またはオートコンプリートのアプローチを使用します。

Igorek · Answer

オプション1

これはデスクトップ専用のパターンとして提案されました。私は1月に同意します。これは、モバイルエクスペリエンスではよりよく知られているパターンであり、より大きな画面ではよく知られているまたは理解されているパターンではありません。オプション1は異なる言語と「N」個のタブをサポートします

オプション2

時代遅れであり、利用可能なより良いオプションがあります

オプション3

これは、特に大画面のエクスペリエンスでは別の好ましいオプションですが、小画面のエクスペリエンスではうまく機能しません。

オプション4

モバイル向けに最適化されていますが、「N」タブの数が少ない場合に最適化されています

概要

一般的なアプローチは、私が育てた1つの例だけでなく、組み合わせを使用することです。 オプション1はモバイルエクスペリエンスに最も適しているようであり、オプション3はデスクトップに最適です。提案されるソリューションは、モバイルにはオプション1を、デスクトップにはオプション2を使用するレスポンシブなアプローチを提供することです。

オルタナティブ

各タブ領域に入るコンテンツに応じて、異なるパターン（カルーセル）を使用できる可能性があります。このパターンはモバイルとデスクトップの両方でうまく機能し、コンテンツをユーザーに公開します。これは、ユーザーがタブ間でテーピングするのではなく、コンテンツを並べて表示するのに役立つ場合に役立ちます。