I have to create a schedule control for displaying items with duration as little as 1 seconds and potentially as large as couple of hours.

First thing which seems clear is that I will need some kind of zoom capability, for drilling into the items with very short durations and zooming out to view the items with very large durations.

I have a UI style in mind where by when the control is zoomed to view the large items, any small duration items which generally occur between the large duration items are some how collected in to a 'bucket' which has a height >= a minimum display height. So that I can perhaps hover a mouse over this bucket and get a tool tip which renders the contained items into a time ordered list view.

I am at a loss as to where to begin. I feel that I could perhaps achieve something in the layout pass of the UI. But I think this could adversely affect render performance. If I were to do it this way, I guess I would need to inject a 'bucket' view into the UI when ever I came to items which were to short to display at the current time-scale?

My second though is that I create a custom collection which is Time-Scale aware which then organises the collection into 'buckets' of a duration tall enough to be displayable.

Does anyone have any thoughts on how I should best approach this problem?

2 Answers 2


You can start by taking a look at a few examples of how this was already tackled in Calendar tools.

Load can be handled by having Zoom presets, similar to how the calendar allows you to display events by daily, weekly or monthly view.

When zoomed out, you can also place an icon or something to indicate how many are in the shorter Time Scale the user can zoom into. Kind of like how Google displays multiple results in the same location by a clickable number.

Hope this helps.

  • Thanks, I am still at the conceptual stage of creating this UI component, All input is helpful. Thank you.
    – John
    Commented Mar 11, 2014 at 16:41

I think it really depends on what the application it is for, but a good idea might be to give up using exact scale all together, since that causes the display problem you mentioned. (and I think it's uncomfortable for users to zoom in & out all the time. e.g. Apple's motion sickness problem) Instead of representing the duration with area, you could use plain number with different font size. (and even using different colour, as psychologically, colour could be linked with size) In this way, users won't assume the font size is an accurate representation of the duration from the first place, and you can use a font size scale that's easier to display without losing accuracy.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.