私は現在、さまざまなビュー/コンテンツがたくさんあるエンタープライズWebサイトで作業しています。
ナビゲーションとしてtabsを選択し、各タブには新しいビューがあります。さらに、これらすべてのタブをmodulesおよびナビゲーションのためにmodule tabsを選択しました。
参照用に最初の画像を確認してください
私がここで直面している問題は、上部の矢印がセカンダリタブでは機能しているように見えますが、プライマリでは、矢印が使用されている場合、トップレベルのタブが移動するため、ユーザーはコンテキストを見逃します。
そして私が試した別のオプションは、トップレベルのタブの最後にもっと多くを置くことでした。
参照用に最初の画像を確認してください
しかし、この相互作用がどのように見えるかはわかりません
例-ユーザーがドロップダウンからタブ9を選択した場合、ユーザーはタブ1に戻る方法
したがって、ここでも矢印が必要であり、オプション1とオプション2が混在するため、間違いと思われます。
これに他の解決策があるかどうか教えてください。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
同じ問題がすでに以前に提起されていました。プライマリモジュールを水平タブとして、セカンダリモジュールを垂直タブとして扱うことについてはどうですか?
アイデアを伝えるためだけに、非常に大まかなモックアップを追加しました。設計から、ユーザーは残りのプライマリモジュールを表示するために詳細ボタンをクリックする必要があります。したがって、ユーザーがプライマリモジュール間を頻繁に移動する必要がない場合は、ユーザーがプライマリモジュールの初期コンテキストを設定し、ユーザーがセカンダリモジュール間を移動できるようにするオプションを提供できます。
注意:モックアップでプライマリモジュールを選択する方法は、正しいオプションではない場合があります。アイデアを伝えるためだけに上げました。
なぜあなたがタブにそれほど固執しているのかはわかりません。複数のレイヤーのナビゲーションタブがあると、混乱し、イライラし、ナビゲートが困難になります。
私は最近、メガサイトのナビゲーションを調査しており、トップナビゲーションバーのこの気の利いた例が私の研究で浮かび上がりました。 https://www.fold3.com/image/10985207
ユーザーが選択したページを閲覧しているときに画面スペースをあまりとらず、ユーザーがナビゲートしたいときにきちんと折りたたまれます。
多分これはあなたの問題に対する直接の答えではないかもしれませんが、私はそれがより良い解決策を刺激することを望みます。
...私も複雑なダッシュボードで作業していて、同じ問題に何度も遭遇したため、タブ要素を垂直方向に折りたたまれたネストされたドロップダウン要素に変えました。
編集:利用可能なすべてのピクセルを使用する必要があるという懸念について-ユーザーがナビゲートする必要がある場合、ユーザーは現在の画面に何が表示されているかを気にしません。彼らは簡単にそこに行きたいだけです。誰もあなたのメニューを操作するつもりはありません(多くの人がそうしたいと思っていますが!)。それらが既に使用されているもの(および上記で提案したもの)よりも簡単なものはありません。ネストされたドロップダウン。
edit2:私は反対票を投じるに値しますが、あなたがもう一度尋ねる前に、あなたが求めたものが得られませんでした。
これをチェックしてください。トップメニューの「タブ」スタイルを削除すると、スクロールアウトしても「コンテキスト外」にならず、「タブスタイル」が表示されなくなることになります。
選択したtadから最も遠いタブを最小化できます。
初期
|*tab 1*|tab 2|tab 3|tab 4|tab 5|tab 6|t.|t.|t.|
タブ5が選択されました
|t.|t.|tab 3|tab 4|*tab 5*|tab 6|tab 9|tab 8|t.|