How to handle overlapping elements?

Question

I'm doing a very simple video editing solution. User has a timeline (horizontal 100px line) which represents start and end of the video. User can add overlay images and texts, and all of them appear on the timeline. The location and width represents the start time and duration of the overlay element that appears over the video.

Problem is to find the best way to make overlapping elements appear on the timeline. I have a video length of 10 minutes which represents 600 seconds. The length of the timeline is 1200px so 1 second = 2 pixels.

1. Text appears (start) at 00:10 (20 pixels offset) and duration is 20 seconds (40 pixels).

2. Image appears at 00:15 (30 pixels offset) and duration is 40 seconds (80 pixels).

So based on start and duration values of the elements they overlap. How to draw them on the timeline? I got few ideas from Good ways to handle precisely overlapping data points in a graph?

I decided to try few things

Puzzle style

Color mix

But I'm not really impressed with both solutions. The problem can be also if there are 3 or more overlapping elements on the timeline. I'm aware of the different existing video editing solution. Most of the solve this by multiple timelines (layers) or with zooming. My goal is to try to make it simple, but at the same time give a nice ability to show overlapping elements.

My question is: what do you recommend? How to solve this?

Answer 1

You can use a thick line for each element. Have a tooltip for each line, to show what each line represents.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

I really hope someone will come up with some creative solution; but I'm afraid my verdict is that it cannot be done, and whatever solution will be taken, it will not provide an optimal solution.

Having substantial with both video and audio editing software, this is a common problem - multiple regions on the same lane that overlap.

Although you didn't say it, I assume the users will interact with the regions (drag and drop) for instance, and you should consider a case where a region is completely eclipsed by another region.

You could, in theory, provide layers on each lane (one for text, one for image, etc.) and allow the users to reorder the layers so to make regions of interest front-most. Then for overlapping you could simply use different heights (so regions behind are taller than those in front). But such solution is neither as usable nor easier to implement compared to simply having a few lanes.

Answer 3

Of the two approaches you have mentioned, Color Mix looks cleaner. But, the real problem occurs when there are more than one overlapping image/text at any single/consecutive frames.

One other option will be to create separate lanes for each of the object and mark their position & duration in the timeline, and also assign different color for each of the object. You could couple it with your Color Mix timeline, where the Color Mix will be the base timeline and the user be given an option to expand and see the multi-lane timeline, if the Color Mix timeline looks confusing (as a result of multiple layers being overlapped).