Remove timeline clutter (lines, curves, shading, glow, colors)

[qubodup]

A - Gap between tracks wastes space.
B - Round track and clip corners make less clear where clips begin/start, where to click them, indicate roundness (fades) where there is none.
C - Playhead marker is decorative rather than functional (shaded, not immediately visible on a glance).
D - Track border color grabs attention even though they are the least interactive thing in the timeline.
E - glow (gradient?) behind track name makes it unreadable. Gradient behind tracks makes it less clear where they start/end on first glance.

I suggest to update the timeline with a flat, non-rounded look with solid dark grey background, grey 1px track borders, a solid light blue playhead marker and line.

Samples of less cluttered timelines in video editors:

[philiplb]

I like this a lot.

[peanutbutterandcrackers]

@ferdnyc @DylanC - While I agree with this ticket, I wonder if the rounded-ness is there to be/appear to be more user friendly. I wonder if it is possible to have another theme for OpenShot that will transform it to look a lot more like these uncluttered examples. Or maybe a view mode - 'Professional' or sth.

[philiplb]

I see one drawback of the rounded-ness: It renders some UI-Space useless.

[ferdnyc]

I think we should start by getting our terminology straight. Nobody could ever accuse the OpenShot timeline of being "cluttered", there's barely anything ON it. Especially compared to that first screenshot, which is a heavily cluttered mess of controls. What the OpenShot timeline could be accused of being is "noisy". That's not unfair.

At the same time, the "here's what other programs do" list is a bit of a cherry-pick.

Here's PowerDirector, complete with rounded timeline elements (nobody thinks they're fades), and a playhead with gradient shading on it (that also obscures the timecodes when it passes them, something I also noticed in the second screenshot above; I just find that choice bizarre):

Or take Final Cut Pro X, which at least in some versions looks like this:

Gradients everywhere, including the playhead (which once again passes in front of the timecode, but it's translucent so hey... #StillBizarre), rounded corners, and it pretty quickly becomes apparent where @jonoomph took a lot of design inspiration from.

Then again, Final Cut Pro X can also look like this (I fail to see how it's possible that these are the same application, but Apple's help site swears this is a Final Cut Pro X screenshot...):

The difference would likely be down to the first screenshot coming from 2012, and the second from 2018. So I guess "Final Cut Pro X" has gone through a lot of iterations over the past 5 years, including a full visual redesign, which makes me wonder what the hell the "X" is for if it's not a version identifier.

Regardless, we've still got rounded tracks (and still nobody thinks they're fades), even more vertical separation than before between the tracks (actually Apple calls them "lanes" now), and I don't see the playhead at all so who knows what that looks like (knowing Apple it's probably an emoji that makes faces at you as it scrubs over the video, or something stupid like that).

Anyway, here's my take, since we are discussing aesthetics rather than function here so in the end it all comes down to a duel of opinions...

1. The roundedness complaint, I just can't get behind. It's simply a design aesthetic, nobody thinks they're fades (If fades were actually represented that way in the interface, as well, then that would be a concern — but they're not), and snaplines are displayed when moving clips specifically to indicate where the exact borders are in relation to other elements.

2. Ditto the "wasted" vertical space separating the tracks. I mean, extra vertical space wouldn't be used to display any additional information in the default view, and we control the arbitrary height of both the tracks and the spaces between them, so space can't really be "wasted". . We could remove the spacing, make the tracks/clips slightly taller instead, and they'd take up the same amount of vertical space, there would be no additional detail visible, and in short it wouldn't matter at all. Or, we could leave the spacing as-is, reduce the vertical height of the tracks, and now they occupy less space. It's all arbitrary.

   Whereas the gutter between the tracks makes it easier to clearly see where each track is located. It also, perhaps even more usefully, provides a potential area for user interaction. (For example, say one day OpenShot added the ability to reorder tracks by dragging, or to insert new tracks by dropping a clip between two existing tracks. That gutter becomes the drop zone for inserting elements between the tracks.)

3. As far as the blue border around the tracks goes... I completely agree. I never really thought about it before, but the OP makes an excellent point and I am 100% on board, the outline needs to go.

4. The track title glow... I don't know, I don't really have any difficulty reading the title because of it, but my vision has excellent color differentiation so maybe that's just me. The interface could definitely stand to cut down on the gradients a bit, though they were still really big in 2014 so... *shrug*.

5. The playhead, we're back to "I can't agree". Yes, it's decorative, and large, which actually makes it easier to see so I don't see how "not immediately visible on a glance" would be improved by making it tiny and solid-colored. The only real issue that I can see is the way it gets cut off at the edge of the Timeline, but that's theoretically fixable (and probably should be fixed) regardless whether the appearance is changed or left the same.

I wonder if it is possible to have another theme for OpenShot that will transform it to look a lot more like these uncluttered examples. Or maybe a view mode - 'Professional' or sth.

Not in any sane way. There's a reason the Timeline doesn't change appearance even when you change the Qt interface theme: It's all being drawn by hand in Angular JS. In theory it could follow the theme by taking its colors from the Qt styles rather than having them hardcoded, but right now it doesn't even do that. Supporting multiple different appearance "modes" would involve writing wholly separate code to draw each of them. This is, again, an area where I stress the need to have one code path that works correctly, before we start talking about multiple alternate code paths.

I'll also reiterate, as I just demonstrated at some length, that OpenShot is not the complete outlier that the OP portrayed it as. This just isn't a case of "all professional things look this way, why doesn't OpenShot?". Yes, different applications have different aesthetics. Ain't America grand? 😉

[N3WWN]

2. Ditto the "wasted" vertical space separating the tracks. I mean, extra vertical space wouldn't be used to display any additional information in the default view, and we control the arbitrary height of both the tracks and the spaces between them, so space can't really be "wasted". . We could remove the spacing, make the tracks/clips slightly taller instead, and they'd take up the same amount of vertical space, there would be no additional detail visible, and in short it wouldn't matter at all. Or, we could leave the spacing as-is, reduce the vertical height of the tracks, and now they occupy less space. It's all arbitrary.
   .
   Whereas the gutter between the tracks makes it easier to clearly see where each track is located. It also, perhaps even more usefully, provides a potential area for user interaction. (For example, say one day OpenShot added the ability to reorder tracks by dragging, or to insert new tracks by dropping a clip between two existing tracks. That gutter becomes the drop zone for inserting elements between the tracks.)

I've got $0.02 of input here... I often work with 5 tracks (sometimes more) and I have to make a choice of seeing a large preview or seeing all of the tracks.

What could be done to make the timeline more compact is to keep the in-clip thumbnail the same size and superimpose the name of the clip over the thumbnail (perhaps with a gradient so that white text on a light colored thumbnail is still readable). This would let each track occupy about 1/3 less space than they do now. This would let someone like me display all 5 tracks in the space that 3 tracks currently occupy; win-win for maximum information (well, same as we have now) and maximum preview size.

The font size could even be decreased slightly (or "regular" vs what currently appears to be "bold", leaving bold available to be used to show selected tracks or some other property).

The gutter should definitely remain right where it is - I use it for creating selection boxes around closely grouped clips right now. Plus, for the reasons that you mentioned about possible future features which could use (would require?) the gutter.

[ferdnyc]

Gutters

The gutter should definitely remain right where it is - I use it for creating selection boxes around closely grouped clips right now.

Aha! So not even just potential future uses, but actual current uses. That's helpful. And you're right — it's not something I've encountered, but if you have a timeline that looks like the following screenshot, there's no way to box-select both of the small "Archer-P" clips on Track 2, and only those two clips, without the gutters. Box-selecting from the empty areas on Track 0 or Track 4 will also select the long clip on track "Archer" or "Avengers", as well.

In fact, in light of that I'm tempted to say that the gutters should be bigger, since right now they're a little tough to easily hit without accidentally clicking on a clip instead.

Timeline multi-select

(Also, I never noticed that Shift-clicking to add/remove clips from the current selection doesn't work, on the Timeline. Kind of feels like it should. I can't think of any reason why it couldn't, other than it just not being implemented. There's no existing functionality that relies on Shift-click, currently it just acts exactly the same as an unshifted click. Ctrl-clicking, OTOH, will add to the selection, but not subtract. That all feels very inconsistent with the norms of multi-selection.)

...Actually, you know what might be really cool? If Shift-click overrode the normal drag-and-drop functionality, and triggered box selection even if the pointer is over a clip. That would reduce the need to use the gutters for selection purposes. Can anyone think of a reason why that'd cause problems? If not, I might explore adding subtraction to Ctrl-click, and box-selection to Shift-click.

Track height

I've got $0.02 of input here... I often work with 5 tracks (sometimes more) and I have to make a choice of seeing a large preview or seeing all of the tracks.

I mean... at the risk of pointing out the obvious, at some point you're going to encounter that issue no matter how small the tracks are, because the height of the Timeline and the height of the preview are in competition with each other. Making tracks shorter would give you more wiggle room, and might allow you to see 6 tracks at once instead of 4, but that's kind of just kicking the can down the road.

What could be done to make the timeline more compact is to keep the in-clip thumbnail the same size and superimpose the name of the clip over the thumbnail (perhaps with a gradient so that white text on a light colored thumbnail is still readable). This would let each track occupy about 1/3 less space than they do now. This would let someone like me display all 5 tracks in the space that 3 tracks currently occupy; win-win for maximum information (well, same as we have now) and maximum preview size.

The font size could even be decreased slightly (or "regular" vs what currently appears to be "bold", leaving bold available to be used to show selected tracks or some other property).

The issue with that, I think, is that the preview is already so small. If you look at how tracks are displayed currently, the track name is fully 1/3 of the track height, which means that if it was rendered in front of the thumbnail it would obscure the entire top HALF, and probably make it impossible to make out either one. (Text against a non-uniform background, such as when it's superimposed over an image, generally has to be rendered at a larger size in order to have the same readability, compared to a flat background with sufficient contrast.)

TBH, like with the gutters I sort of feel like the track height is already sort of skirting the lower bounds of usability — having shorter tracks by default would likely make the Timeline harder to work with for most users, and if anything I think the tracks should really be a bit taller. If you compare OpenShot to all of the other screenshots in this discussion, we already have by far the smallest track height of any interface. (Final Cut X's is adjustable in the application settings, and probably at least some of the others are too, but they all default to a greater height than our tracks.)

I wonder if something like Audacity's collapsible track height mightn't be the simplest solution to the track-height problem? For example, this project has two collapsed tracks at the top, followed by two uncollapsed tracks where I can see the entire height of the waveform:

OpenShot could do something similar, just a Track-menu-level "Collapse" / "Expand" option that toggles hiding the track thumbnails entirely, displaying the track as just the title texts at 1/3 height. (e.g., very roughly...):

(Technical digression, ignore unless masochistic...)

It's possible that may not be too difficult to implement... it all comes down to how heavily coordinate logic is embedded into the Timeline's Angular source.

I know that there's math that depends on x-coordinate logic scattered all over the place, since computing horizontal lengths is a complex mix of project framerate, zoom level, and etc. that the code distills down to a pixels_per_second value for horizontal sizing of display elements. So there's ad hoc math done on x position/length everywhere, which is how bugs like #1454 crop up (and why I completely failed to find said bug, when I went looking for it).

But so far, y-coordinate positions and lengths have been effectively constant, so if the values are managed sensibly and without too many scattered assumptions then simply changing the height parameter of the track <div> (with a bit of overflow-y: hidden styling sprinkled in) might be enough to make track collapsing a reality. Then it's just a matter of tying it in to the interface.

Enough of that

Also, @N3WWN , at the risk of again pointing out the obvious: For those projects involving lots of tracks, have you considered placing the preview next to the Timeline? If you can spare the width, that would let them both benefit from the same vertical space, instead of having to compete for it the way they do in the default window layout.

[ferdnyc]

If you look at how tracks are displayed currently, the track name is fully 1/3 of the track height, which means that if it was rendered in front of the thumbnail it would obscure the entire top HALF, and probably make it impossible to make out either one.

Something else I just thought of, the Clip title line is also where OpenShot displays the Effect "sigils" (for lack of a better word) for any Effects attached to a clip. Another reason I feel that line is actually the critical part of the Clip, and why I'd even give it priority over the thumbnail as a consumer of track height.

[peanutbutterandcrackers]

Just had to say this: I absolutely dig the adjustable track height feature.Should be really neat!

[ferdnyc]

Timeline multi-select

(Also, I never noticed that Shift-clicking to add/remove clips from the current selection doesn't work, on the Timeline. Kind of feels like it should. I can't think of any reason why it couldn't, other than it just not being implemented. There's no existing functionality that relies on Shift-click, currently it just acts exactly the same as an unshifted click. Ctrl-clicking, OTOH, will add to the selection, but not subtract. That all feels very inconsistent with the norms of multi-selection.)

...Actually, you know what might be really cool? If Shift-click overrode the normal drag-and-drop functionality, and triggered box selection even if the pointer is over a clip. That would reduce the need to use the gutters for selection purposes. Can anyone think of a reason why that'd cause problems? If not, I might explore adding subtraction to Ctrl-click, and box-selection to Shift-click.

Just noting (for myself, if nothing else) that #1432 tracks the weird behavior of Ctrl-click on the Timeline, and the need for better / more standard selection logic in general.

[stale]

Thank you so much for submitting an issue to help improve OpenShot Video Editor. We are sorry about this, but this particular issue has gone unnoticed for quite some time. To help keep the OpenShot GitHub Issue Tracker organized and focused, we must ensure that every issue is correctly labelled and triaged, to get the proper attention.
This issue will be closed, as it meets the following criteria: - No activity in the past 180 days - No one is assigned to this issue
We'd like to ask you to help us out and determine whether this issue should be reopened. - If this issue is reporting a bug, please can you attempt to reproduce on the latest daily build to help us to understand whether the bug still needs our attention. - If this issue is proposing a new feature, please can you verify whether the feature proposal is still relevant.
Thanks again for your help!