Affichage des détails d'un événement dans une chronologie

Question

J'ai une chronologie des événements qui sont liés les uns aux autres, et je dois être en mesure de montrer une description de chaque événement. la description serait de 25 à 50 mots.

Buts

L'objectif de ce panneau est de montrer la série d'événements utilisateur. L'écran aura des panneaux supplémentaires qui permettront à l'utilisateur de mieux comprendre la connexion entre ces événements.

Exigences supplémentaires:

Permettez à l'utilisateur de voir des données supplémentaires qui sont présentées dans d'autres panneaux à l'écran, tout en vérifiant les détails de l'un des événements.
Permet à l'utilisateur de voir rapidement les détails des différents événements.

Mes idées sont (captures d'écran en bas)

vue master-detail , la chronologie sera affichée à gauche, le panneau "Détails" sera affiché à droite et changera en fonction de la sélection event Avantages: Une animation minimale me permet de vérifier rapidement les données. Inconvénient: Pas intuitif
Développez l'événement au clic - l'icône et l'en-tête de l'événement se réduiront et des données supplémentaires seront répertoriées dans le nœud qui représente cet événement Avantages: Plus intuitif (je pense) Inconvénients: l'animation ralentira l'utilisateur. Chaque nœud devra être suffisamment grand pour contenir toute la description
Popups - lorsque vous cliquez sur un événement, une popup avec sa description sera affichée. Avantages: Une solution standard Inconvénients: animations lentes, le popup peut se cacher une partie de l'écran

Ma question est Existe-t-il une manière plus standard de procéder? sinon, laquelle de ces solutions vous convient le mieux et pourquoi?

Captures d'écran:

master-detail
Développez l'événement au clic

Éditer

Quelques détails supplémentaires:

Il y a des utilisateurs réguliers , qui seront satisfaits la plupart du temps sans voir plus de détails, et des utilisateurs avancés qui voudra voir plus de détails sur certains des événements.
La comparaison des détails entre différents événements n'est pas pertinente dans mon cas.
Une barre de défilement peut être problématique, car elle ralentira considérablement l'utilisation.
Par animations lentes, je voulais dire que la durée de l'animation elle-même ralentira l'utilisateur, donc chaque fois qu'il voudrait regarder les détails d'un événement, cela lui prendra 0,1 sec supplémentaire, et cela pourrait devenir ennuyeux si vous le souhaitez voir les détails de 10 événements très rapidement.
Les écrans tactiles ne sont pas pertinents.
Je ne pense pas que les détails par défaut soient bons pour mon objectif, car certains utilisateurs n'aimeraient pas voir les détails "sanglants" et les icônes et une brève description fournira un bon aperçu rapide.
Le survol de la souris peut également être un peu problématique, car l'utilisateur peut vouloir voir les détails d'un événement spécifique tout en regardant les détails d'autres panneaux qui être visible sur l'écran, et s'il déplace la souris vers un autre élément, les détails disparaîtront. Êtes-vous d'accord?
La page sera utilisée uniquement sur ordinateurs de bureau et non sur mobile.

Michael Zuschlag · Accepted Answer

Voici quelques autres alternatives:

Survolez la souris. La description apparaît lorsque le pointeur de la souris survole le nœud.
Détails de basculement global. Un élément de menu ou un autre contrôle de basculement échange les détails avec la grande icône pour tous les événements à la fois. Ou, dans le même thème, le contrôle à bascule développe tous les nœuds pour afficher à la fois la grande icône et les détails.
Détails par défaut. Y a-t-il vraiment des informations utiles dans l'icône qui nécessitent qu'elles soient si grandes? Par exemple, s'agit-il d'une vignette que l'utilisateur utilise pour identifier l'événement ou comparer des événements? Sinon, faites votre dernière capture d'écran votre affichage, au moins par défaut. Éliminez le besoin d'interagir pour voir les détails.

J'ai différentes idées sur les avantages et les inconvénients de vos alternatives.

Tous semblent à peu près également intuitifs (bien que vos utilisateurs puissent varier). Tous fournissent des détails en un clic. Si les utilisateurs sont enclins à cliquer, ils trouveront les descriptions. Chacun peut être conçu pour encourager les clics et pour aider l'utilisateur à anticiper ce qui se passera avec un clic.
Je ne sais pas quelle plateforme vous utilisez, mais je suis surpris si les vitesses d'animation sont un problème. Même une application Web peut obtenir des animations en temps réel comme celles-ci avec AJAX ces jours-ci.
En ce qui concerne les nœuds de taille raisonnable correspondant à toute la description, utilisez une zone de texte de taille fixe et une barre de défilement de taille moyenne pour accueillir vos descriptions les plus longues.

Pour moi, les avantages et les inconvénients se résument à la façon dont l'utilisateur utilise les informations détaillées.

Master-detail est préférable lorsque les détails sont assez détaillés et que les utilisateurs sont moins susceptibles d'avoir besoin de numériser ou de comparer les événements pour une certaine description. Il peut être exagéré pour seulement 25 à 50 mots. D'un autre côté, vous voudrez peut-être inclure des détails supplémentaires avec la description. Vous pouvez avoir la grande icône et la longue description dans le panneau de détails, et rendre tous vos nœuds plus petits, par exemple.
Expand-on-click fonctionnerait bien avec vos courtes descriptions. En supposant que les utilisateurs peuvent étendre plusieurs nœuds à la fois, ce n'est pas mal pour comparer les descriptions d'événements, mais seulement un peu mieux que le master-detail pour rechercher une description. Parce que la description ne disparaît pas d'elle-même comme le fait le maître-détail (lorsque vous cliquez sur un nœud différent), c'est mieux lorsque les utilisateurs veulent afficher la description d'un événement pour une période indéfinie, et peut-être y revenir de temps en temps , pas seulement jeter un coup d'œil rapide et passer à autre chose. Ce dernier implique beaucoup de clics fastidieux pour revenir à la grande icône. Vous voudrez peut-être avoir un moyen rapide (élément de menu?) De réduire tous les nœuds pour éviter à l'utilisateur d'avoir à cliquer deux fois fastidieusement pour les réduire.
Popups, ce qui signifie une boîte de dialogue, a les mêmes avantages et inconvénients que les détails principaux. Il a l'avantage supplémentaire de ne prendre aucun espace sur votre page principale lorsqu'il n'est pas utilisé (bien que pour le détail principal, vous pouvez rendre votre panneau de détails masquable sous un expandeur). Il présente l'inconvénient supplémentaire d'exiger davantage de clics (un pour ouvrir la boîte de dialogue, un pour la fermer), comme le fait le clic pour développer, ce qui le rend plus lent et moins pratique. Et oui, une boîte de dialogue cache une partie de l'écran. Il est préférable que les informations dont l'utilisateur a rarement besoin ou, lorsqu'il en ont besoin, elles doivent interagir de manière assez approfondie avec seulement une petite référence à la fenêtre parent (par exemple, la modifier avec la mise en forme). Probablement pas adapté à votre cas.
Passer la souris est bon pour les petits détails, comme vous l'avez fait. Comme une boîte de dialogue, ils ne prennent pas de place lorsqu'ils ne sont pas utilisés, mais, contrairement à une boîte de dialogue, ne nécessitent aucun clic et peuvent facilement être effacés afin que l'utilisateur puisse voir ce qui se trouve en dessous. C'est juste un peu mieux qu'un master-detail pour numériser ou comparer. En outre, il peut être difficile de trouver un moyen pour les utilisateurs de modifier les descriptions, et ce n'est pas trop bon pour les interfaces utilisateur de tablette/tactile. Dans l'ensemble, cependant, cela peut être l'option la plus attrayante pour vous. Vous pouvez même considérer les détails par défaut et faire exploser l'icône à une grande taille lors du survol de la souris.
Détails de basculement global est préférable si l'utilisateur doit analyser ou comparer les descriptions de plusieurs nœuds. Un seul clic et les utilisateurs peuvent parcourir tous les nœuds autant qu'ils le souhaitent. Vous pouvez y parvenir de manière fonctionnelle avec le développement sur clic en incluant des éléments de menu pour Développer tout et Réduire tout, et ainsi avoir les avantages à la fois de développer sur clic et de basculer global.
Détails par défaut est préférable lorsque les descriptions sont plus importantes ou utilisées plus que l'icône.