更新:エクスペリエンスを簡素化するために、タブの二重セットを取り除くことになりました。結果はサイトで確認できます。
私はあなたが助けてくれると期待していたUXの問題があります。
SuperMoney のナビゲーションを再設計して、ナビゲーションのレイヤーを増やしていますが、あまりスペースを取らないようにしています。サイトは、レビュー、コンテンツ、ツールの3つの主要な領域に分割されます。
モックアップを参照してください:
コンテンツナビゲーションのために、2組のタブを使用する上記のナビゲーションを設計しました。 Topics
にカーソルを合わせると、最上位のカテゴリが表示されます。カテゴリにカーソルを合わせると、左側のサイドバー(および関連記事)にサブカテゴリが表示されます。これらのサブカテゴリのいずれかにカーソルを合わせると、表示される記事が再び更新されます。
ネストされたタブUXは混乱していると思いますか?
ダブルタブは強力なシステムです。垂直方向のスペースをほとんど使用せず、階層の概念を非常に効果的に伝えます。ただし、ネストされたタブは大きな欠点です。あなたのデザインはそれをうまく扱っていますが、それでも少し忙しいです。
私のお気に入りの解決策は、レベルの1つに小さな三角形のカットアウトを使用することです。例えば:
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
これには、タブパターンとほとんど同じ利点がありますが、見た目が異なり、もう少し微妙です。これは、階層の第2レベルに適しています。
最後に、これがあなたのインターフェースに当てはまるかどうかはわかりませんが、念のため:ホバーを使用してタブのサブメニューを公開しないでください。タブパターンは、比喩に忠実に執着している限り、すばらしいものです。タブがアクティブな場合、比喩的な紙のカードのすべてがそのタブに属している必要があります。いつでもタブAを他のタブの上に表示し、タブBのコンテンツを表示したままにすると、独自のインターフェースメタファーのルールに違反し、インターフェースが影響を受けます。タブ(あるように見えます)でドロップダウンを使用できますが、実際に変更された場合(コンテンツとすべて)にのみアクティブなタブを変更します。
2次レベルのタブCREDITは、同じ白色と境界線があるため、メインエリアとの関係が強く認識されています。
同時に、トップレベルとセカンダリレベルのタブの関係が目立ちません。ユーザーは、ラベルを読んで比較(つまり、テキストを分析)するのではなく、それらの間の関係を理解し、視覚的に(つまり、無意識に)理解することができます。そのため、ユーザーはもう少し精神的な負荷を受けます。
レベル間の視覚的な関係を改善するには、いくつかの手がかりを使用できます。たとえば、次を比較します。
対.
また、ラベルの名前が少しわかりにくいようです。タブと第3レベルのメニューの両方にDEBTラベルがあります。
視覚的な手がかりを作成するだけでなく、論理的で強い知覚関係を作成してください。
これでうまくいきました。私はそれが進んでいる方向が本当に好きであり、機能性はその場に見えます。しかし、情報が気になるまでの3つのステップ。確かに、関連するものを直感的に突き刺すのではなく、多くのアクションを介して簡単にできることがみんな好きですが、アーキテクチャの簡略化されたバージョンが迫っていると思います。 Mashable.comをご覧ください。これにより、Mashable.comの構造が改善される可能性のある例が紹介されています。
これが正しい場所にない場合、申し訳ありませんが、これは私の最初の投稿です。
ダブルタブナビゲーションはそれほど混乱しませんが、開発の観点からいくつかの要因に依存する可能性があると言います。そのような要因の1つは応答時間です。
特定のオプションにカーソルを合わせると、内容が少し遅れて表示される場合、その時点でユーザーが他のオプションにカーソルを合わせると混乱が生じることがあります。
ですから、最低限使うほうがいいと思います。
これがあなたの質問に答えてくれることを願っています。