web-dev-qa-db-ja.com

単純なグリッドリスト(テーブルビュー)に分類階層を表示するための最良のUI / UXソリューションは何ですか?

概要

このリリースのeコマースソフトウェア(eショップ)にあるのは、製品の分類を管理するための管理パネルでのフィルター可能な検索とページネーションを備えたシンプルなテーブルビューです。分類法には、最大4レベルの深さ、最大で1000アイテムの階層があります。技術的な理由により、ツリービューを使用できません。

要件

管理者ユーザーは、このグリッドを介して分類を検索して次のことを望んでいます。

  • ノードを編集
  • ノードを削除

(ノードの作成は、ユーザーが新しい分類法を定義しながら親ノードを指定できるフォームを介して実行できるため、私たちのスコープにはありません。)

研究

私の調査で、私の特定の問題には対応していませんが、関連性のある質問が見つかりました。 分類階層管理UIパターン

ソリューションA

列内の階層をナビゲーションブレッドクラムとして表示: showing hierarchy in a column as navigation breadcrumb

ソリューションB

タイトル列の階層をインデントとして表示: showing hierarchy in title column as indent

質問

単純なグリッドリスト(テーブルビュー)に分類階層を表示するための最良のUI/UXソリューションは何ですか?

7
Mahdi Rabie

ユーザーが並べ替え機能を使い始めると、2番目のオプションが混乱し、要素間の視覚的な階層が失われると思います。

私は最初のオプションに行きます。

4
Julien N.

ソリューションAに固執することをお勧めします。

consistentに見えるだけでなく、インデントとの混乱も少なくなります。

ユーザーにインデントのさまざまなレベルを読むことを強調したくないでしょう。覚えておいてください、それらはインデントを区別するプログラマではありません。また、ソリューションBは一貫性に欠けており、階層は意味をなさず、ユーザーに再生させる前に説明が必要になります。

2
Swapnil Borkar

Solution Bの方が賛成して投票します。レイアウトがよりコンパクトであるため、分類法のコミュニケーションを強化するためにスペースと色を操作する余地があります。

しかし、あなたのケースには4レベルの何千ものアイテムが含まれるため、Zoomable Partition Layoutのようなインタラクティブなものも検討することをお勧めします。 enter image description here

2
freshnode

2番目(グループ)をお勧めします。ユーザーが並べ替えをクリックすると、グループヘッダー(デジタル、タブレット)に基づいて行を並べ替えます。オプションで、グループヘッダーレベルで定義された並べ替え順序に基づいて、ヘッダー内の行を並べ替えることもできます。

1
sudarsanyes