Previous week, I completed a prototype of the user interface based on the initial mockups. This week also I focused on fine tuning the UI, the animations and adding more features to the UI. After the release of the initial prototype, more thoughts came in the more ideas were discussed. So based on the discussions, feedback and some personal experimenting, some new parts/features of the UI emerged:
- Live View: This will be the constantly updating view of the Timeline Canvas, in this view, the Play button will be checked (on/pressed) and the timeline will be constantly updated with time, showing any event activity instantaneously. Inspecting any event and finding out its full detail will be difficult in this mode, but this mode will show the pace of things occurring in the browser.
- Inspect View: Just uncheck the play button any time, or slide the time axis on the bottom to go to the desired time and the timeline canvas view will freeze to that time. Here you can inspect any event visible and know detailed information on that event.
- Ticker: It will host quick info/listing of all the events happening in the timeline. If the timeline is currently in live mode, then the ticker will get updated with event listing as soon as the event happens, just like the Facebook Ticker. If you are inspecting some time frame, then all the visible events on that time will me shown in the ticker.
- Overview: This will be a very compact view of the whole timeline shown above the Producers pane and the canvas. While Live view and Inspect View will show detailed view of the events for a certain time frame, the overview will show a compact zoomed out view of events, lesser in detail, but covering the whole recording time. A user can drag and select a certain time range from this overview to inspect in the canvas below.
While the Live view, Inspect view and Ticker are mostly complete, the Overview has just been started and I will try to complete it before my next meeting with my mentor.
In the mean time, here are a couple of screencasts of the prototype so far:
In the screncast above, you can see that initially the Timeline is in Live View, but as soon as I clicked on the resource name in the Producers Pane, the view was shifted to show the corresponding event, and this was the Inspect view. You can also see the Ticker in action on the right. Clicking the event listing in the ticker will also move you the Inspect view showing the corresponding event in the center of screen.
Share the videos and spread the word so that I can get more feedback.