web-dev-qa-db-fra.com

Visualisez la relation un à plusieurs (Recettes aux ingrédients)

Selon vous, quel est un bon moyen de visualiser cela de manière conviviale?

Les données sont basées sur:

  • 35 recettes (nom, type, date du repas)
  • 100 ingrédients. (Nom, type, date)

Objectif:

  • Les utilisateurs doivent voir la relation entre les recettes et les ingrédients sur un diagramme d'une page/infographie (le défilement est OK).

  • De plus, les utilisateurs peuvent vouloir voir quels ingrédients se trouvent dans une recette ou quelles recettes existent pour un ingrédient.

Cela peut être utile:

  • La plupart des recettes ont quelques ingrédients, beaucoup n'en ont qu'un, et quelques recettes ont environ 10 ingrédients.

Toute idée serait appréciée!

1
Alex L

Il s'agit d'une disposition de base dans laquelle vous pouvez avoir une exploration bidirectionnelle d'une relation un-à-plusieurs. Lorsque vous sélectionnez un élément dans l'une des listes, la liste supérieure de l'autre côté affiche les éléments pertinents.

Cela pourrait être résolu avec seulement les deux listes si vous avez mis en surbrillance les éléments pertinents sur l'autre liste, au lieu de les regrouper, mais avec une centaine d'ingrédients, certains d'entre eux sont forcément hors de vue et vous ne voulez pas que l'utilisateur fasse défiler et les chercher.

Vous pouvez soit fixer les listes inférieures en place, recourir au défilement dans les listes supérieures lorsqu'elles sont trop longues pour l'espace alloué - ou vous pouvez ajuster la position des listes inférieures dynamiquement, en affichant toujours la liste supérieure à sa pleine hauteur, mais alors les listes inférieures sauteront toujours de haut en bas pendant que vous travaillez.

Une autre solution consiste à n'afficher qu'une des meilleures listes à la fois et à demander à l'utilisateur de choisir s'il souhaite explorer les ingrédients par recettes ou les recettes par ingrédients. Mais c'est un peu plus difficile à comprendre et plus lourd à utiliser.

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

2