Showing details of an event in a timeline

Question

I have a timeline of events that are related to each other, and I need to be able to show a description of each event. the description would be 25-50 words.

Goals

The goal of this panel is to show the user series of events. The screen will have additional panels that will allow the user to better understand the connection between these events.

Additional requirments:

• Allow the user to see additional data that is presented in other panels on the screen, while checking the details of one of the events.
• Allow the user to quickly see details of different events.

My ideas are (screenshots at the bottom)

1. master-detail view, the timeline will be shown in the left, the "Details" panel will be shown in the right and will change according to the selected event Advantages: Minimum animation allows me to check the data fast. Disadvantage: Not intuitive

2. Expand event on click - the icon and header of the event will shrink, and additional data will be listed in the node that represents this event Advantages: More intuitive (I think) Disadvantages: animation will slow the user down. Each node will need to be big enough to contain the whole description

3. Popups - when cllicking an event a popup with its description will be shown. Advantages: A standard solution Disadvantages: slow animations, the popup might hide some of the screen

My question is Is there a more standard way to do this? and if not, which of these solutions fit best in your opinion and why?

Screenshots:

1. master-detail
2. Expand event on click

Edit

A few more details:

• There are regular users, who will be satisfied most of the time without seeing more details, and power-users who will want to see more details on some of the events.
• Comparing details between differnt events is not relevant in my case.
• A scrollbar might be problematic, as it will significantly slow down the usage.
• By slow animations, I meant that the duration of the animation itself will slow down the user, so each time he would like to look at the details of an event it will take him extra 0.1 sec, and it might become annoying if would like to see the details of 10 events really fast.
• Touch screens are not relevant.
• I don't think Details by default is good for my goal, because some users wouldn't like to see the "gory" details, and the icons and short description will provide a good quick-glance.
• Mouse-over might be also a bit problematic, because the user might want to see the details of a specific event while looking at details from other panels that will be visible on the screen, and if he will move the the mouse towards another element, the details will be gone. Do you agree?
• The page will be used on desktops only, and not on mobile.

Answer 1

Here are a few more alternatives:

• Mouse-over. The description appears when the mouse pointer hovers over the node.
• Global toggle details. A menu item or other toggling control swaps the details with the large icon for all events at once. Or, in the same theme, the toggling control expands all nodes to show both the large icon and the details.
• Details by default. Is there really useful information in the icon that requires it to be so large? For example is it a thumbnail the user uses to identify the event or compare events? If not, then make your last screenshot your display, at least by default. Eliminate the need to interact to see the details.

I have different ideas of the advantages and disadvantages of your alternatives.

• All seem about equally intuitive (although your users may vary). All provide details with a click. If users are inclined to click, they’ll find the descriptions. Each can be designed to encourage clicking, and to help the user anticipate what will happen with a click.
• I don’t know what platform you’re using, but I’m surprised if animation speeds are a concern. Even a web app can get real time animations like these with AJAX these days.
• As for reasonably-sized nodes fitting the whole description, use a medium-sized fixed-height text box and scroll bar to accommodate your longest descriptions.

To me, the advantages and disadvantages come down to how, and how much, the user uses the detail information.

• Master-detail is best when the details are fairly extensive and users are less likely to need to scan or compare across events for a certain description. It may be overkill for just 25-50 words. On the other hand, maybe you want to include additional details along with the description. You could have the large icon and the long description in the details panel, and make all your nodes smaller, for example.

• Expand-on-click would work well with your short descriptions. Assuming users can expand multiple nodes at a time, it’s not bad for comparing event descriptions, but only a little better than master-detail for scanning for a description. Because the description doesn't disappear by itself like master-detail does (when you click a different node), this is better when users want to view the description of an event for an indefinite period, and maybe return to it from time to time, not just take a quick look and move on. The latter implies a lot of tedious clicking to toggle back to the large icon. You may want to have a quick way (menu item?) to shrink all nodes to save the user from having to tediously click each a second time to shrink them.

• Popups, meaning a dialog box, has the same advantages and disadvantages of master detail. It has the additional advantage of taking no space on your main page when not in use (although for master-detail you can make your detail panel hideable under an expander). It has the additional disadvantage of requiring more clicking (one to open the dialog box, one to close it), like click-to-expand does, so it’s slower and less convenient. And yes, a dialog box hides part of the screen. It’s best for information the user rarely needs, or, when they do need it, they need to interact fairly extensively with only a little reference to the parent window (e.g., edit it with formatting). Probably not suitable in your case.

• Mouse-over is good for short bits of detail, like you have. Like a dialog, they don’t take any space when not in use, but, unlike a dialog, require no clicking, and can easily be cleared so the user can see what’s underneath. It’s only a little better than a master-detail for scanning or comparing. In addition, it may be difficult to find a way for users to edit the descriptions, and it’s not too good for tablet/touch UIs. Overall, though, this may be the most attractive option for you. You may want to even consider Details by Default and blow up the icon to a large size on mouseover.

• Global toggle details is best if the user needs to scan or compare the descriptions of multiple nodes. One click and users can look back and forth among all the nodes as much as they want. You functionally achieve this with expand-on-click by including menu items to Expand All and Shrink All, and thus have the advantages of both expand-on-click and global toggle.

• Details by default is best when the descriptions are more important, or used more, than the icon.