web-dev-qa-db-ja.com

タブは多すぎますか?

以下のモックアップには、先週偶然見つけたソフトウェアのスクリーンショットがあります。次のように情報を提供していることに私の注意を引いた。多くのInterfaceレベルのタブがあり、その中には多くのMajorがありました多くのMinorタブを含むレベルタブ。混乱してしまうので、やめたいと思います。ユーザーに表示されるタブの数を減らすことによって複雑さを軽減する方法について知りたいこと。システム自体は複雑ですが、情報を提示するより良い方法があるはずだと私はかなり確信しています。

上記の情報と以下のモックアップでは不十分なように見えるかもしれませんが、問題のアイデアがわかるかもしれません。

アプリケーションはウィンドウベースです(ブラウザなし)。

mockup

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

私が目にする1つの簡単な解決策は、インターフェイスレベルのタブを削除し、それらの特定のインターフェイス用に個別のウィンドウを作成することです。ただし、メジャーレベルとマイナーレベルのタブはそれほど多くありません。


タブの賢明な使用を示唆する使いやすさの基準はありますか?

9
edgarator

タブ内のタブの問題は、論理的ではなく、ほとんどが視覚的なものです。あなたが説明する状況には3つのナビゲーションレベルがあります。これはそれほど珍しいことではありません。異なるナビゲーションレベルを互いに異なって見えるようにすると、知覚される複雑さが軽減されます。

mockup

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

14

うわー、本当に複雑な状況です。

まず、各セットのタブの数が多すぎるのか、多すぎるのかを明確に示していません。前者の場合は、ユーザーが意味を理解していて、タブの完全な名前を簡単に確認できるので、問題ないはずです。後者の場合は...

私は通常、タブ内にタブを配置する必要がある状況を回避しようとします。タブ付き領域の終了位置と別のタブの開始位置が混乱し始めます。これは、各インターフェイスタブにもそれらの中の同じメジャーおよびマイナータブ。ユーザーはコンテンツの一部を見て、失われないように常に参照する必要があります。「OK、この情報は、インターフェース2のメジャータブ4に関連するマイナータブ3内にありました」

他に方法がない場合、デザインがタブグループを視覚的に分離し、シェーディングや階層を表示するのに十分な余白などを使用できる場合は、2つのレベルのタブグループを削除できます。 3番目のレベルをどうするかについては、表示する情報を選択するためのラジオボタンセットを用意することは可能でしょうか。

mockup

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

私はそれがまだ最もきれいな解決策ではないことを知っていますが、それは多くのレベルのタブを持つことよりも少なくとも少しは良いと思います、これが役立つことを願っています。

2
rsparis

シンプルな方が良い

理解しやすく正確 メンタルモデル はユーザーに最適です
一般的な経験則は次のとおりです:インターフェイスが複雑な場合、メンタルモデルも同様です

討論

この場合、タブは多くの混乱を招くようです。 UXデザイナーがこれを作成しなかったか、怠惰だったかのどちらかだと思います。このようなものはもっと抽象化する必要があるからです。ただし、このインターフェイスエクスペリエンスについては何も知らないこと、およびその用途/目的が意図されていることと、ほとんどの場合「依存する」ことと同様に、これが設計上の最善の妥協案であったことに留意してください。

1
JeroenEijkhof