web-dev-qa-db-ja.com

動的タブのタブオーバーフローに対処する方法

タブの数がユーザー次第であるタブ付きインターフェイスは、デフォルトサイズのタブが画面に収まらないという点に対して、さまざまなソリューションを採用しています。

Google Chromeは、タブの幅を狭くし始め、これを巨大で使用できない数のタブまで減らし、タブ間のナビゲーションの特別な手段を提供しません。 enter image description here

Firefoxはどちらもタブの幅を縮小し、ナビゲーションドロップダウンを提供します(最初から-2つのタブがあるとすぐに)。また、特定の数を超えると、タブバーの右端と左端にスクロール矢印も表示されます。

enter image description here

IE9はタブの幅を減らし、ある時点でスクロール矢印も提供します。

enter image description here

Axure RPはタブの幅を小さくすることはなく(どの場合もそれほどではありません)、ドロップダウンと矢印を提供します。 enter image description here

どのアプローチが最善で、なぜですか?私の場合、ラベルが非常に長く(4〜5ワード)、切り捨てられたときに必ずしも説明的であるとは限らないことに注意することが重要です。

20

私が知っている壁から外れている...しかし、なぜこれが悪い解決策になるのでしょうか?:

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

タブ付きダイアログがおかしくなりすぎたとき、Oracleでも同様のものを使用しました。少なくともこの方法で、長い名前などに対処できます。

[〜#〜]更新[〜#〜]

一部の人はそれを主張します:

ブラウザーのようなアプリの場合、水平chrome=とすることは一般的に悪い考えです。水平よりも垂直よりもスペースを重視する傾向があるためです(さまざまな理由:スクロールの習慣、西洋テキストの水平度、モニターサイズなど)そのコンテキストでは、サイドバーは単に不要な水平方向のスペースを占めます。

ただし、ユーザーが多くのウィンドウ(それ自体は異常)を操作しようとしている状況のコンテキストについて話しています。このコンテキストでは、ウィンドウの並べ替えが主要なタスクの一部になるため、おそらくもっと目立つ必要があると私は主張します。

提案は、垂直ナビゲーションではありません。は常に存在しますが、ウィンドウの数が管理不能になったときのみです。この場合、適切な画面スペースをこのタスク専用にする必要があります。垂直方向の表示は、ウィンドウの無限のリストではるかにうまく適合します。

これらの膨大な数のウィンドウを実際に処理するのは誰かを論理的に考えてみませんか?おそらく非常に大きな画面またはおそらく2つの画面も持っているエキスパートユーザーでしょう。

おそらく、ウィンドウの上部に並べ替えツールやラベル付けツールを追加することもできます(2番目の画像を参照)。

おそらく、従来のソリューションにこだわるのではなく、使用のコンテキストをもう少し深く考える必要があります。異常な問題が発生すると、再考が必要になることがあります。

4
Lisa Tweedie

タブミックスプラスがこれを処理する方法が好きです(複数のタブ行 ...を使用して).

Tabs in Firefox using Tab Mix Plus

これは、Firefoxで私が気に入っている点の1つです。優れた拡張機能です。


また、リクエスト画面のスペースを減らすために、いくつかの基準(サイトなど)に従ってグループタブを試すこともできます。

タブをグループ化する場合、タブのプレビュードラッグしたときにプレビューされたタグをアクティブにするでグループ内の特定のタブをドラッグするオプションを有効にする必要があります。グループ化により、可能なユーザーアクションがブロックされます。

この例は、Win 7でのタスクバーのグループ化と、XPおよびVistaでのタスクバーのグループ化で、グループ化されたタブでのユーザーアクションを制限するものです。

4
Danny Varod

タブがWindowsタスクバーの固有の問題であると一般的に考えられている理由が本当にわかりません。Firefoxや他のブラウザーとほとんど同じように動作し、小さなスクロール矢印でオーバーフローアイテムを表示したときから、時間の経過とともに劇的に改善しました。現在Windows 7にあります。

一般的にIEは、最近この領域で最も革新的であるようです。 IE8+では、動的に色分けされたタブが表示されます どのグループタブが開かれたか互いに:

IE8's colour-coded tabs

これらの動的なタブグループ(または、同じホストを共有するタブのようなタブグループ)を、Windowsのタスクバーで、特にタブがオーバーフローする場合に扱う方法で扱うのが理にかなっているように思えます。 Windows 7では、同じアプリケーショングループの複数のウィンドウが一緒に表示されます。単一のグループをクリックすると、そのグループが表すウィンドウのリストがポップアップ表示されます。

Tab overflow behaviour in the Windows 7 taskbar

the Engineering Windows 7ブログから取得した画像

悲しいことにIE8でも、タブのグループ化にもかかわらず、タブはグループ化/折りたたみとは対照的に、上で説明したとおり正確にオーバーフローします。

Demonstrating IE8's tab overflow behaviour

Chaks 'Cornerから取得した画像

一般に、タブオーバーフローを処理する際に考慮する必要があると考えられる要素は次のとおりです。

  1. 読みやすさ
  2. 空間認識
  3. 美学
  4. 親しみやすさ

Chromeのソリューションはポイント1では問題がありますが、ポイント2では成功すると思います。Firefoxのソリューションは、これらの要件に基づいて最も優れたものだと思います。参考までに(含まれていないため)、Safariがこの問題をどのように処理するかを示します(ドロップダウンの暗いセクションにリストされているタブは、完全にオーバーフローしているタブです)。

How Safari copes with tab overflow

おそらく、この問題の最も新しい解決策はIE9の解決策でしょう。 IE9がこの問題をどのように処理するかについてお話を伺いましたが、 IE9は一般に5つほどのタブに対応するように設計されていることを指摘する価値があります とにかくこのトピックで)。

パワーユーザー(膨大な数のタブを使用することに慣れている)で発生した反発にもかかわらず、この設計により、ユーザーは複数のウィンドウにタブをすばやく広げることができます(非常に多数のタブを管理する必要が実質的になくなります)。単一のウィンドウ)。


編集:非常に多くのタブを処理するためのクリエイティブなソリューションを提供する、気の利いたFirefoxアドオンがたくさんあります 、ファビコンのみを表示してスペースをとらないように特定のタブを切り替えたり、OS X Dockのような「魚眼」タブに切り替えたり、マウスの下にあるタブやキーボードフォーカスのあるタブを全幅で表示する機能の提供を含むしかし、そうでない場合は比例して崩壊します。

OS X Dockでは、Dock全体がそれに比例して縮小され、個々のアイテムが最小になるまで、より多くのアイテムに対応します。説明したように、(オプションで)マウスに近いアイテムを拡大できます。

The OS X Dock, showing the effect of magnification

Control Your Macから取得した画像

4
Kit Grose

Chromeアプローチは間違っています。タブをナビゲートすることができないためです。IEアプローチは、タブを何かに減らすことができるので、私は好きではありません。その後、区別することはできません。

個人的には、タブをほぼ同じままにする(または、多くても空白を少し減らす)方法を好み、スクロールとドロップダウンの選択(FirefoxとAxureスタイル)を許可します。

私がこれまで多くのタブで作業しなければならなかった唯一の場所はExcelで、多数のシートが開いていて、そこでこのスタイルを使用しています。必要なシートをすばやく確認できるので、ナビゲートが簡単です。その場合(このように聞こえます)、タブの名前を確認することは重要ですが、開いているタブの数(Chrome/IEスタイル)を確認することはそれほど重要ではありません。

1