web-dev-qa-db-fra.com

Comment devez-vous concevoir l'exploration et la progression dans la visualisation des données

J'ai un graphique qui montre des informations provenant d'un arbre de données. La racine est un grand cercle où l'utilisateur peut voir les enfants comme de petits cercles à l'intérieur. en fonction de l'espace disponible, l'utilisateur peut voir plus d'un niveau à la fois. L'utilisateur doit avoir une manière intuitive de plonger dans et hors. Les contraintes sont

  1. préfère ne pas avoir de boutons de texte.
  2. Cela ne devrait fonctionner qu'avec des robinets. pas moins gestes de pitch in-out contrôlables
  3. préfèrent ne pas avoir de menu ou de bouton global.
  4. chaque cercle a également un titre, qui affiche les détails sur un volet séparé lorsque vous cliquez dessus. Je devrais éviter d'avoir une plongée accidentelle lorsque l'utilisateur veut juste voir les détails.

le zoom n'est pas difficile à résoudre. lorsque je suis tapé à l'intérieur d'un cercle, mais en dehors de la zone de texte, je plonge.

Comment mettre en œuvre un zoom arrière? voici juste un exemple de ce que je veux dire par cercles display tree-shaped data structure using circles

1
n00b

J'utiliserais l'extérieur du cercle actuellement focalisé.

Par exemple, si l'utilisateur appuie sur la zone verte de cette image, il effectue un zoom arrière d'un niveau.

enter image description here

2
user83776

En règle générale, et je sais que vous avez dit que vous n'aimiez pas les boutons de texte, le zoom arrière dans les treemaps (dont le vôtre est une version circulaire) se fait via un fil d'Ariane, comme cet exemple -> https: // bost .ocks.org/mike/treemap /

Cependant, les treemaps circulaires sont différents des treemaps rectangulaires dans la mesure où les enfants n'utilisent pas tout l'espace disponible du parent (vous ne pouvez pas tesseller les cercles), donc les nœuds ont beaucoup d'espace à l'intérieur qui n'est pas utilisé par leurs descendants. Ceci est utilisé dans cet exemple où le zoom arrière est effectué en resélectionnant le nœud que vous avez initialement sélectionné pour zoomer (ou son parent s'il est visible sur le bord). https://bl.ocks.org/mbostock/7607535

Vous pouvez bien sûr utiliser les deux techniques

2
mgraham

Recherchez dans Google Maps ce qu'ils font. Peut également dépendre si vous êtes sur le bureau d'un mobile.

Sur le bureau, vous souhaiterez peut-être avoir un +/- pour effectuer un zoom avant ou arrière, ainsi qu'un simple clic pour effectuer un zoom avant. La molette de défilement d'une souris effectue également un zoom avant ou arrière.

Mobile, appuyez une fois pour zoomer, appuyez deux fois pour faire un zoom arrière.

2
Aaron Merritt

Ceci est une interface intéressante. J'ai aimé l'innovation, mais elle doit être testée par les utilisateurs.

Je suis très préoccupé par le quatrième point. Deux comportements de cliquer sur le texte vs cliquer à l'intérieur du cercle et non dans le texte vont créer beaucoup de ravages. Robinets accidentels, confusion et autres.

Maintenant sur votre exigence de zoom arrière. Que diriez-vous de laisser une pièce en dehors du cercle le plus à l'extérieur. Si l'utilisateur clique en dehors du cercle, vous effectuerez un zoom arrière. Si vous souhaitez le rendre plus évident, vous pouvez avoir un petit cercle concentrique à zone cliquable chevauchant le cercle de données le plus à l'extérieur. Quelque chose comme suivre,

enter image description here

Dans les deux cas, une animation appropriée pour les zooms avant et arrière est nécessaire pour renforcer l'apprentissage une fois que l'utilisateur le fait pour la première fois. Dans le cercle de données le plus à l'extérieur, vous n'afficherez pas le cercle englobant semi-transparent. La première animation lorsque vous effectuez un zoom avant créera le cercle de délimitation informant l'utilisateur comme un retour direct de son action. Ensuite, l'utilisateur peut cliquer sur cette partie semi-transparente pour effectuer un zoom arrière.

Le zoom arrière se fera un niveau à la fois. Je ne recommande pas une pile/couche de cercles semi-transparents de délimitation. Pour effectuer un zoom arrière complet sur le cercle de données le plus à l'extérieur, vous avez besoin d'une action ailleurs.

1
Sol