中国への帰国は、たまたま Baidu ユーザー エクスペリエンス部門が主催する UXday イベントと重なっていました。グループ ディスカッションのテーマは、タブを使用する際のタブーでした。
私たちが議論したトピックは、大量のタブをどのように処理するかという 1 つの点に焦点を当てていました。
まずはTabの歴史を振り返ってみましょう。ここでのタブとは、Web デザインにおけるナビゲーションやブラウザなどのデスクトップ ソフトウェアでの使用など、インタラクティブな要素の一種を表す一般的な用語です。タブと呼ばれる対話型要素には、一般に次の 2 つの特徴があります。
アクションとステータスの両方の意味があります。タブが人気の理由の1つは、操作が簡単であると同時に、ユーザーが現在どこにいるのか(タブ)を明確に把握できることです。
情報アーキテクチャの観点から見ると、通常、タブ間のコンテンツは重なりません。また、タブ間の関係は同等である必要があり、相互の所属があってはなりません。
したがって、広い意味では、ほとんどのナビゲーション メニューは実際にはタブに要約できます。
Web デザインにおけるタブの使用は、一般に Amazon が先駆者であると考えられています。 LukeW の古典的なレビュー記事、Amazon のタブ ナビゲーションの歴史 (中国語版については、ここをクリックしてください) を読んだことがある人も多いと思います。この記事から、Amazon のナビゲーションが、「ブック」と「ミュージック」という 2 つのタブだけから、2000 年のピーク時には 2 行のタブを備えたものへと進化したことがわかります。明らかに、タブの数が増えると、タブ操作方法はいくつかの困難に直面します。
もう 1 つの例は、Word 2003 の [設定] ダイアログ ボックスです。次の図に示すように、ラベルが多すぎて表示スペースが限られている場合、Microsoft はラベルを 2 行に配置する必要があります。この際の大きな問題は、ラベルの上段が選択されているとき、選択状態と現在のコンテンツページの関係をどのように表現するかということです。
Microsoft のアプローチは批判されています。上の図では、ユーザーがラベルの上段をクリックすると、ラベルとコンテンツ ページの間の密接な関係を維持するために、上段が下段と自動的に入れ替わります。しかし、このアプローチでは、レーベルの立場が非常に矛盾してしまい、多くの人が同じような混乱を経験していると思います。
Firefox 3 など他のソフトウェアでは(下図参照)、上段のラベルをクリックするとラベル表示が選択状態に遷移するだけですが、ラベルの位置の一貫性が保たれるという利点があります。一部の位置表示機能が失われます。
では、複数行のラベルが好ましくない場合、大量のラベルにどのように対処すればよいでしょうか?
明らかなアイデアは、ラベルの配置を通常の水平配置から垂直配置に変更することです。通常、この配置はビューの左側にあり、アイコンまたはテキストの形式になります。
ただし、このアプローチにはいくつかの問題があります。まず第一に、ラベル名が非常に長い場合、貴重な左側のスペースを多く占めることになります。このスペースはたまたま画面上でユーザーの注目を集めており、軍事戦略家にとっての戦場となります。一部の Web サイトでは、テキストを縦方向に配置します。このアプローチは、特に英語の Web サイトの場合、読みやすさに大きな影響を与えます。右側に配置するとスクロールバーと干渉し、ユーザーが気づきにくくなります。次に、タグの数が少ない場合 (タグの数が可変であることを考慮すると)、タグの下にどのようなコンテンツを置くかということも悩みの種になります。
1 つのアイデアは、タグ間に何らかの構造がある場合、タグをグループ化できるということです。次に、ナビゲーション レベルを追加します。 Microsoft の OneNote は、この点で最高点に達しています。ノートブック、セクション、ページの 3 つのレベルに分割されており、各レベルはタブ ナビゲーションによって表されます。その結果、ページの上部、左側、右側がラベルでいっぱいになります。 ... Microsoft は、ゲシュタルト (左側の分割)、カラー マーキング (セクションに色、ページに白) などのテクニックを使用して、3 層のラベル ナビゲーションを非常にうまく処理します。