3次元リストを含むWebデザインに関するアドバイスを探しています

Question

ここがWebデザインのアドバイスにふさわしい場所であることを願っています。 StackOverflowも検討していますが、純粋な設計の質問が歓迎されるかどうかはわかりませんか？

3次元のリストに含まれる情報を表示するWebページをデザインしようとしています。データモデルは、人のリストを持ち、各人がアイテムのリストのリストを持っているようなものです。 UIで人を選択すると、その人のリストが表示され、その人のリストの1つを選択すると、そのリストのコンテンツが別のペインに表示されます。また、選択したユーザーのリスト（追加/削除）とリストアイテムを管理できるようにしたいと考えています。私は Twitter Bootstrap をWebクライアントフレームワークとして使用しています。これにより、水平および垂直タブナビゲーションコンポーネントを簡単に作成できます。

人の左端の列に垂直タブを使用し、メインウィンドウにアイテムリスト（その下のアイテムを含む）に水平タブバーを使用することを検討しましたが、動的タブを設計するのは難しいと思いますバー（特にタブの数が膨大になる場合）。より簡単な解決策として、選択したユーザーのリストの垂直タブの2列目を検討しています。最後に、垂直方向のユーザータブを折りたたみ可能（アコーディオン）にすることを考えたので、ユーザーを展開すると、同じナビゲーションコンポーネント内にユーザーのリストが表示されます。

私はこれまでに3つのデザインモックアップを考え出しました。誰かが実用的なデザインのアドバイスを提供していただければ幸いです。 HTML5 + JavaScriptで実装可能であり、BootstrapでNiceを実行する必要があることに注意してください。また、リストやアイテムの管理（追加/削除）が可能であることも忘れないでください。私のモックアップとは異なるデザインを自由に提案してください。

P.S。

Twitterの使用についてあまり気にしないでくださいBootstrapフレームワーク。これに慣れていない場合は、CSS定義を介して機能し、カスタマイズできるので、HTML（5 ）思いついた設計は、あまり面倒なくそれと統合できるはずです。

Alternative 1

Alternative 2

Alternative 3

Adnan Khan · Accepted Answer

すべてのユーザーに3レベルのナビゲーションがあり、リストがどのくらい長くなるかわからない場合は、リストのナビゲーションを視覚的に区別するのが最善です。 37 Signalの再設計された製品Basecamp Nextでのマルチレベルナビゲーションの実装を見てください。

enter image description here

リストは単に親リストの上にポップオープンで開き、ユーザーから完全なフォーカスを得ます。混乱はまったくありません。

テクノロジーに関しては、これらのリストでユーザーに何を表示するかによって完全に異なります。リストは動的に生成されますか？もしそうなら、UIを設計すると同時にバックエンドの実装を考え出す必要があるかもしれません。

ここで重要なのは、UIがユーザーがタスクに集中できるようにして、それから邪魔にならないようにすることです。

Migo · Answer

これは、ほとんどのユーザーの一般的な使用法によって異なります。たとえば、特定の人を調べているユーザーが、他の人が同じリストを使用しているかどうかを確認するのが一般的である場合などです。これを理解したら、少なくとも1つのディメンションをメニュー項目に分離して、ユーザーがダイジェストしやすくなるようにします。

Salman Ehsan · Answer

注意事項

上と左のタブを一緒に使用しないでください（最初のモックアップで提案されています）。経験と、このモデルのユーザーテストの結果を通じて、このモデルが完全に機能しなくなったことを明らかにしました。

3レベルのタブの実装に向かっているため、3レベルのナビゲーションを処理することは常に困難です。最初に3つのタブを処理する必要がある場合は、2つのレベルに下げるように最善を尽くしますが、不可避な場合は、3番目のタブの外観を何らかの方法で変更して、ユーザーが2つのレベルのタブと1つのレベルを理解できるようにします。「異なるタブ」の。

Commonwealth BankのWebサイトを見てみてください。同じ方法を使用していますが、少し方法が異なります。 2番目のビッグドロップダウンも、以前はドロップダウンに変更されないタブでしたが、これは役立ちます。

また、3番目のタブを2番目のタブから数百ピクセル離れた場所に配置できれば、使いやすくなります。以下に示す同じスクリーンショットは、そのアプローチの良い例です。 3 Tabs used by commonwealth bank

K.. · Answer

ユーザーがリスト間を「移動」できるようにする速度に依存します。また、ユーザーまたはアイテムの数についても説明します。

多くのユーザーがいて、ユーザーがそれほど多くのリストを持っていない場合は、ユーザーを残し、リストを上に置きます。

リストの数が多く、ユーザーの数が少ない場合は、ユーザーを上に、リストを横に並べます。

各リストの大きさがわからない場合は、ツリービューをお勧めします。これは、まさに必要なものである、リストのリスト（リストのリストなど）だからです。

バックグラウンドに実際のツリー構造がない場合、これはかなり混乱する可能性があります。リストが別のユーザーによって所有されることができるかのように。

しかし、インターフェースが探査目的のみの場合、これはかなりうまく機能します。

sysscore · Answer

3番目のアプローチが最適です。ユーザーとリストは動的なアイテムであり、ユーザーがこれらのアイテムをいくつでも追加できるため、タブとして表現することはできません。