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)
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
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
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:
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.