web-dev-qa-db-ja.com

タブが多すぎます-代わりにボタンを使用しますか?

私たちのアプリケーションにはtoomanytab-itusがある管理ページがあります(2番目のタブのセットが積み重なっているのを見てください):

enter image description here

私はこの問題の解決を任されてきました。タブの数を減らすためにコンテンツを再編成/グループ化することが私の最初の選択でしたが、これは実装するには高すぎるように見えます。だから私の安くて陽気な解決策は単にタブをボタンに置​​き換えることです:

enter image description here

上司は、これがユーザーにとってなじみのないメカニズムになるのではないかと懸念しています。この種のアプローチが以前に使用された例はありますか?または、タブが多すぎる問題に対する他の解決策はありますか?

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

すべてのフィードバックと回答をありがとうございます。私は、すべての有用なフィードバックに基づいて別の解決策を考え出しました。これは、領域をよりユーザーフレンドリーなタブにグループ化し、サブオプションはリンクバーで処理されます。

enter image description here

16
benb

私はそれがどのように機能するかを理解していると思います:システムのさまざまなページの表示属性を制御します(例:「詳細検索ページでこれらの属性を表示したい」など)。ページを表示するための1つのタブ、結果ページのための1つのページなど.

ここにあるように、表示要素を制御する多くの機会の可能性を導入する場合、多くのページが異なる表示規則に従う可能性を導入することにもなるので、これは危険です...

4
colmcq

問題の直接的な解決策の1つは、タブをsideに置くことです。タブラベルが垂直に積み重ねられているので、ユーザーがスクロールせずに20以上を表示できます。ユーザーがターゲットアイテム全体をスキャンするよりも、リストをスキャンする方が簡単なので、アイテムが多い場合は、この方法をお勧めします。

Stack of tabs on left side

Tabs-nested-in-tabsは混乱を招く可能性のある問題ですが、一方を水平に設定し、もう一方を垂直に設定することでこれを改善できると思います。実際、おそらくトップセットをリンクに変更します(色付きの下線付きテキスト、タブ画像なし)。それらはすべて、ページ全体を占める特定のコンテンツをロードしているようです。その場合、タブ画像が大きなメリットをもたらすとは思えません。タブは、コンテンツの複数の領域を表示する必要がある場合に最も役立ちますwithin他のコンテンツまたはアクションコントロールを含むページまたはウィンドウ。

11

SEOMozが使用しています。 彼らがそれを使用している場合は、もちろん市場によっては、完全に人を疎外しないという十分な前例があると思います。

個人的には、このような状況ではあまりにも多くの情報を表示しようとしていると思いますが、ページにjqueryのようなものを使用して、ポップアップに配置するか、非表示にした方がよいでしょう。

顧客に何をしてほしいかを大きく考え直さない場合の最良のシナリオは、タブを垂直方向に移動することです。それはより多くの垂直方向のスペースを提供し(これはラップトップの時代に重要です)、醜いオーバーフローの問題が発生することなく、そこに好きなだけタブを積み重ねることができます。また、垂直方向のスペースにタブを「ネスト」して、視覚的なナビゲーションツリーを簡単に作成することもできます。

6
Ken

私はボタンの解決に行きません。ボタンは、UIスイッチの代わりにアクションを提案します。

多くのタブがあることとは別に、別の問題があると思います。タブ内のタブです。それは私を怖がらせるものです。 Webベースのアプリケーションについては、多かれ少なかれ許容できると思います。しかし、理想的ではありません。両方の問題を一度に解決するには2つの解決策があると思います。

  1. 上記で提案されているソリューション、つまりマスターが階層であるマスター/詳細ソリューションを使用します。したがって、両方のタブレイヤーが1つの新しいマスター/詳細モデルに結合されます。
  2. または(私はこのアプローチを好みます)、よりWebデザイン指向のナビゲーションモデルを使用します。最初のレベルのタブはタブ(またはリンクの水平リスト)のままで、2番目のレベルのタブは垂直リンクリストに置き換えられます。

上部のタブレイヤーをある種のドロップダウンメニューに変えようとしないでください。

5
Bart Gijssens

幅より深さ。トップレベルのオプションが多すぎる場合は、ドリルダウンする能力が高い少数の高レベルのグループに再編成する必要があります。情報アーキテクチャは、あまり評価されていないアート形式です。

ひと目見ただけで、「ブラウズ」はおそらくそれ自体のボタンであり、「パネル、リスト」はその下のオプションになるはずです。検索もおそらく同じように行うことができます。高レベルのオプションが少ないほど、ユーザーが探しているものを見つけやすくなります。もちろん、「論理的」な方法で情報を配置できます。

3
lupos