複雑な図の検索結果の表示
ビジネスダイアグラムの検索結果のモックアップを作成するように求められます。一般的なビジネスダイアグラムは次のようになります。
ダイアグラム全体はsvgであり、結果は個々のステップで強調表示する必要があります（私は個々の形状をなでることを考えています）。
ただし、ユーザーは、何らかの方法で表示する必要がある非表示のプロパティ（たとえば、高優先度、機能要件など）を検索することもできます（おそらくその横のチャートにありますか？それを行うための最良の方法がわかりませんまだです）
これがWebの他の場所で行われるのを見たことがありません。結果を表示するための最善の方法で誰かが良いアイデアを持っているかどうか、またはそのような例がある場所を私に教えてください。
これは、画面上のビジュアルオブジェクトが豊富なメタデータを持つ多くのオブジェクト指向または豊富なビジュアルデザインプログラムで発生するUXの状況です。例：
- 物理オブジェクトおよびシステムのコンピューター支援設計（CAD）
- インテリアデザイン（材料やコンポーネントに多くのメタデータがある場合）
- 電気回路設計
- グラフィカルプログラミング言語（LabView、4GLなど）
- プロジェクト管理ソフトウェア
- ビルディングインフォメーションマネジメント（BIM）
これらのアプリでは、オブジェクトのプロパティを検索するだけでなく、検索結果を画面に表示することもよくあります。
使用される一般的なパターンは次のとおりです。
検索結果のリストをどこかに提供するメタデータまたはオブジェクトが画面上に表示されていないときにリストを使用すると、結果を整理しやすくなります。リストには、可読性、スキャン可能性、UXのナビゲーション性など、検索結果の他にも多くの利点があります。
ユーザーが視覚的表現を使用して1つの結果またはすべての結果に移動できるようにします
これは、サイドバーを使用して検索を実行し、結果のリストを提供する例です。吹き出し（暗いオレンジ色の背景）を使用すると、特定の結果に関連するメタデータも表示できます。
この基本的なパターンには、次のようなさまざまなバリエーションがあります。
- 一度に1つずつ選択するのではなく、すべての結果を視覚的に表示します（つまり、すべての検索結果の概要をオレンジで表示し、ホバー時にさらに情報を表示します）
- 検索結果とメタデータ/プロパティの個別のパネル（コールアウトではなく）の表示
- ユーザーが検索結果のリストビューとスケマティックビューを切り替えられるようにする
- ..等。
このアプローチは、アプリケーションとユーザーの特定のニーズに合わせて調整する必要がありますが、このパターンから始めることができます。
さらに調査したい場合は、上記のCAD /設計プログラムの一部のトライアルコピーを入手し、検索の仕組みを確認することをお勧めします。
タグ付けの優れたアプリケーションのように聞こえます！
各ノードに適用できる固定されたタグのセットを用意し、次に、これらのタグのクリック可能なリストを片側または上部に配置して、フィルターとして機能させることができます。これにより、そのカテゴリのノードの強調表示を制御できます。
タグとして使用されているTrelloラベルの（検閲された）例を次に示します。
同様に、ノードにタグを付けると、何が何に関連付けられているかを非常に簡単に確認できます。タグを表示する方法はあなた次第です：色分けされたノードまたはアウトライン、バッジ、またはフィルターがアクティブになるまでまったく表示されません。
ダイアグラムを作成できるプログラムが個々の要素のプロパティをどのように処理するかを見ると、正しい方向に向くと思います。
たとえば、Microsoft Visio、Balsamiq、およびGliffyはすべて、ユーザーが図形を作成および表示するための詳細を抽象化または非表示にすることで図を作成できるプログラムですが、データを操作する方法も提供します。
現在、BalsamiqやGliffyなどのそれほど高度ではないプログラムが検索可能かどうかはわかりませんが、VisioやおそらくAxureを使用すると、図の要素自体を検索できるので、適切かどうかをある程度理解できるようになると思いますあなたがしたいことで。