1対複数の関係を視覚化（レシピから成分へ）
これをユーザーフレンドリーな方法で視覚化する良い方法は何だと思いますか？
データは以下に基づいています：
- 35種類のレシピ（食事名、種類、日付）
- 100成分。 （名前、タイプ、日付）
ゴール：
ユーザーは、レシピと材料の関係を1ページの図/インフォグラフィックで確認する必要があります（スクロールは可能です）。
また、ユーザーは、レシピに含まれている材料や、材料のレシピを確認したい場合があります。
これは役立つかもしれません：
- ほとんどのレシピにはいくつかの成分があり、多くは1つだけで、いくつかのレシピは〜10成分です。
任意のアイデアをいただければ幸いです！
これは、1対多の関係を双方向で探索できる基本的なレイアウトです。リストの1つでアイテムを選択すると、反対側の一番上のリストに関連アイテムが表示されます。
これを解決するには、他のリストで関連するアイテムをハイライト表示し、グループ化するのではなく、2つのリストだけで解決できます。そしてそれらを探しています。
割り当てられたスペースに対して長すぎる場合は、下部リストを所定の位置に固定して上部リスト内をスクロールするか、下部リストの位置を動的に調整して、上部リストを常に完全な高さに表示するか、しかし、作業中、一番下のリストは常に上下にジャンプします。
別の解決策は、一度に上位のリストの1つだけを表示し、ユーザーにレシピごとに材料を探索するか、材料ごとのレシピを探索するかを選択させることです。しかし、それは理解するのが少し難しく、操作が面倒です。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
