web-dev-qa-db-ja.com

マスター/詳細ビューのデザインを改善する

Draft

ユーザーが会社の1つ以上の部門の受信者に発行されるドキュメントのリストを表示できるようにするビジネスアプリケーションのUIのデザインドラフトをまとめようとしています。

ドキュメントのリストは左側にあります。ドキュメントの名前、ドキュメントの公開先の会社、ドキュメントが公開されるその会社の部門の数、日付など、関連するメタデータをドキュメント行に含めようとしていますドキュメントが作成されたこと。

ユーザーがドキュメントを選択すると、選択した行が強調表示され、右側にそのドキュメントの詳細が表示されます。したがって、これは基本的にマスター/詳細ビューです。

右側では、ドキュメントに固有のメタデータを上部のセクションに表示し、中央のセクションでは、ドキュメントが発行される部門のリストを表示します。ユーザーがリストで部門を選択すると、「x受信者」と「xビュー」というラベルが付いたリストの下の2つのボタンは、選択した部門の受信者数と、個人がドキュメントを表示した回数に基づいて変化しますアプリケーション内。

ユーザーが[X受信者]ボタンをクリックすると、受信者のリストが下に表示されます。受信者を選択すると、インラインアクションが表示されます。ユーザーが[Xビュー]ボタンをクリックすると、ユーザーのリストと、ユーザーがドキュメントを表示した日付/時刻が表示されます。

マスター詳細リストのUXガイドラインの調査にかなりの時間を費やしてきましたが、このビューはかなりのメタデータを表示する必要があるため、レンガの壁にぶつかったような気がしますが、それでもレイアウトや見た目は、ユーザーにとって明確で簡潔な方法で目立つほど十分ではありません。

改善の可能性に関する入力/フィードバック/提案があれば、大歓迎です。

5
Chris

ネストされた主従詳細関係を作成しようとしていますが、これは一般的に達成するのが難しいことがよくあります。ただし、ここでの主な問題は視覚的です。3つのレベルすべてが同じBGカラーを共有しているため、関係は適切に視覚化されておらず、すべて「トップレベル」のように見えます。 「詳細」ペインに選択表示と同じBGカラーを指定すると、すぐにはっきりします。また、受信者/ビュー領域は基本的にタブ付きコントロールであるため、それを1つのように表示することをお勧めします。

enter image description here

8