Redesign - Refactored Timeline
Open, Needs TriagePublic

Description

Proposal for new timeline design.

afarid created this task.EditedMon, Nov 19, 1:29 AM

Here is the initial proposal.

  • The idea is that every clip type should have a defined color.
  • Added a proxy and effect togge to the clips.
  • Added effect toggle to the track headers as well.

Will post more as I develop the idea.

afarid added a comment.EditedThu, Nov 29, 9:32 PM

Proposal for locked tracks. Two versions:

ndavis added a subscriber: ndavis.EditedThu, Nov 29, 10:58 PM

I think the locked track stuff should be orange. Red should generally be reserved for things that can be destructive, errors or things meaning off/disabled.

I don't think the entire background of a locked track should have its color changed. Instead, there should be a vertical highlight bar with the lock color at the right edge of the track header.

Is there going to be enough space for the track labels on each header? What if I want to name a track something longer than 2 characters?

I noticed you used green as the color for "Target". What is a "Target"? Is that the current selection? If so, the color should be Plasma Blue (#3daee9). Green should generally be used for positive things or successful operations while Plasma Blue is used for selections.

I think the locked track stuff should be orange. Red should generally be reserved for things that can be destructive, errors or things meaning off/disabled.

When you lock it it will disable that track, you wont be able to move clips in the track anymore.

I don't think the entire background of a locked track should have its color changed. Instead, there should be a vertical highlight bar with the lock color at the right edge of the track header.

I think the red overlay is a good visual support in a big project with many tracks. I was thinking of the "led" light to activate the track to turn red as well.

Is there going to be enough space for the track labels on each header? What if I want to name a track something longer than 2 characters?

those two characters "v1" or "a1" are more of the track id, used to help you target a track. there is a place for naming a track which i will make a proposal soon.

I noticed you used green as the color for "Target". What is a "Target"? Is that the current selection? If so, the color should be Plasma Blue (#3daee9). Green should generally be used for positive things or successful operations while Plasma Blue is used for selections.

The target track is the chosen track to move the clips from the project bin to the timeline.

emohr added a subscriber: emohr.Fri, Nov 30, 8:18 PM

I like the idea. I think we should have a default settings like:

  • Video-track=blue (clip=blue) and the 4 other types different but on the same color-type (color clip/ slideshow clip 25% darker/ title clip 25% brighter/ library clip 50% darker).
  • Audio-track=green (audio associated with video), ungrouped audio (25% darker), audio only (25% brighter), effect audio (50% darker).
  • Individual colors for each clip should be possible (for a 2nd timeline with "pre-selected" clips).
  • Other basis color for video and audio should possible as well (for a 2nd or 3th timeline).

But we can switch off colors as well.

When you lock it it will disable that track, you wont be able to move clips in the track anymore.

By disable, do you mean actually make it so that video/audio on that track won't be visible/audible? It's not really off/disabled if it still plays video or audio.

I think the red overlay is a good visual support in a big project with many tracks. I was thinking of the "led" light to activate the track to turn red as well.

My concern with changing the entire background color is that it will limit the number of colors that look good on locked tracks. If any transparency is used on colored clips, then those colors can look especially bad against a red background. Don't the track headers stay visible no matter where you scroll to in the project? What if instead of doing the whole background, you just changed the color of the border around the track?

When you lock it it will disable that track, you wont be able to move clips in the track anymore.

By disable, do you mean actually make it so that video/audio on that track won't be visible/audible? It's not really off/disabled if it still plays video or audio.

You wont be able to add clips to that track nor move any item in it. But you can see and hear the content already there though.

I think the red overlay is a good visual support in a big project with many tracks. I was thinking of the "led" light to activate the track to turn red as well.

My concern with changing the entire background color is that it will limit the number of colors that look good on locked tracks. If any transparency is used on colored clips, then those colors can look especially bad against a red background. Don't the track headers stay visible no matter where you scroll to in the project? What if instead of doing the whole background, you just changed the color of the border around the track?

Hmmm, I had done a proposal where I changed the background of the track header only but it didn't look good. Will think more about it.

Thanks

afarid added a comment.Sun, Dec 2, 1:35 PM

More ideas for locked tracks. I cannot see orange working though in this case. What do you think @ndavis?

afarid added a comment.Sun, Dec 2, 3:20 PM

Proposal for track names. Should we have a max character limit?

afarid renamed this task from Refactored Timeline to Redesign - Refactored Timeline.Mon, Dec 3, 11:21 PM
ndavis added a comment.EditedTue, Dec 4, 12:08 AM

More ideas for locked tracks. I cannot see orange working though in this case. What do you think @ndavis?

Would you mind sending me the mockup so I could play with it? Writing text isn't the most efficient way to make visual suggestions.

Proposal for track names. Should we have a max character limit?

I think it would be a good idea to shorten long names with an ellipsis and use a tooltip to show the full name when the track is rolled up (like track A2 in the original mockup). When the track is not rolled up (like track A3), wrap the name to fit the rest of it onto new lines until it runs out of space and needs an elipsis w/ tooltip again.

Some questions:

  1. Are there only 2 types of tracks (Audio, Video)?
  2. Can each track only hold one type of content?
  3. Can a track only hold one clip at a time? For example, a video track with 2 different imported files on it.
afarid added a comment.EditedTue, Dec 4, 11:35 AM

More ideas for locked tracks. I cannot see orange working though in this case. What do you think @ndavis?

Would you mind sending me the mockup so I could play with it? Writing text isn't the most efficient way to make visual suggestions.

It is attached ! :)

Proposal for track names. Should we have a max character limit?

I think it would be a good idea to shorten long names with an ellipsis and use a tooltip to show the full name when the track is rolled up (like track A2 in the original mockup). When the track is not rolled up (like track A3), wrap the name to fit the rest of it onto new lines until it runs out of space and needs an elipsis w/ tooltip again.

Good idea.

Some questions:

  1. Are there only 2 types of tracks (Audio, Video)?

Yes.

  1. Can each track only hold one type of content?

The video track can contain videos, title clips and images (bitmap or vector). That is why in the general proposal each clip has a different color to differentiate.

  1. Can a track only hold one clip at a time? For example, a video track with 2 different imported files on it.

A track can handle a sequence of clips. Didn't understand the example though.

ndavis added a comment.EditedTue, Dec 4, 3:56 PM

Here's what I've got right now. I thought the A# and V# labels were redundant, so I removed them. I decided to keep the lock white since I thought it looked better for a monochrome style icon. I also added an orange outline to the locked track area.

afarid added a comment.Tue, Dec 4, 4:54 PM

Here's what I've got right now. I thought the A# and V# labels were redundant, so I removed them. I decided to keep the lock white since I thought it looked better for a monochrome style icon. I also added an orange outline to the locked track area.

The A# and V# leds are very important. They are used to target which tracks you will move the selected clips to from the Project Bin. Here you can find examples of how other programs work: https://www.reddit.com/r/editlines/

Of course our method is simpler...

I like the orange outline, elegant. Will think of some suggestions as well. One thing now we have to think are the icons. Should they be monochromatic or colored? Should there be two icons, one for each state? Or should they be highlighted if active?

Cheers :D

ndavis added a comment.Tue, Dec 4, 5:06 PM

The A# and V# leds are very important. They are used to target which tracks you will move the selected clips to from the Project Bin. Here you can find examples of how other programs work: https://www.reddit.com/r/editlines/

Of course our method is simpler...

I see. This must be a fairly common thing in video editors. If this is what people are used to, then it should stay. I have experience with DAWs, but not much with video editors.

I like the orange outline, elegant. Will think of some suggestions as well. One thing now we have to think are the icons. Should they be monochromatic or colored? Should there be two icons, one for each state? Or should they be highlighted if active?

In general, monochrome style icons should not be colored (compare action icons to emblem icons). What do you mean by 2 icons for each state and highlighted if active?

afarid added a comment.Tue, Dec 4, 5:37 PM

In general, monochrome style icons should not be colored (compare action icons to emblem icons). What do you mean by 2 icons for each state and highlighted if active?

In the previous case only the lock icon changes (Opened/Closed). Should the others change as well? See example:

With the recent mute icons changes how can we proceed?

Maintain as the proposal above or we should add color?

I see a problem reappearing with the unlock/lock icons which I fought I had squashed before. The open lock is barely distinguishable on higher resolution screens from the locked one, as there's not enough visual difference. On purpose back then I reworked Kdenlive icons to use the slash when unlocked, as this gives much more visual difference than just a small break in the lock's shackle. So, please keep in mind higher res displays, and make things clearly visually different!

The track locking frame indication gives both clear visual guidance but can also distract enormously, more so when multiple tracks are locked, which I sometimes need to do. Any of my projects has at least a topmost locked company logo track ... which currently won't distract, but with the new suggestion it would stick out prominently. Of course, people are different, so some prefer prominent indications depending on their workflow, while others might get diatracted by too much bling.

(I'm an old git, obviously ;)

ndavis added a comment.EditedWed, Dec 5, 1:38 AM

In general, monochrome style icons should not be colored (compare action icons to emblem icons). What do you mean by 2 icons for each state and highlighted if active?

In the previous case only the lock icon changes (Opened/Closed). Should the others change as well? See example:

With the recent mute icons changes how can we proceed?

Maintain as the proposal above or we should add color?

Use the new audio-off or audio-volume-muted icons. It's difficult to say exactly which one is right, but I'm leaning towards audio-off since there is no associated volume control. I can make a equivalent "effect off" icon. The Existing lock and unlock icons can work, but it does seem a bit inconsistent with the other 2. I'd say stick with them. I think it would be a good idea for me or another Breeze dev to make lock and unlock icons consistent with how they are in Kdenlive (unfilled unlock, filled lock)

ndavis added a comment.Wed, Dec 5, 2:31 AM

I see a problem reappearing with the unlock/lock icons which I fought I had squashed before. The open lock is barely distinguishable on higher resolution screens from the locked one, as there's not enough visual difference. On purpose back then I reworked Kdenlive icons to use the slash when unlocked, as this gives much more visual difference than just a small break in the lock's shackle. So, please keep in mind higher res displays, and make things clearly visually different!

Which resolutions are the lock/unlock icons too small for? Is this also with scaling enabled? Can you send a full screen screenshot of an instance where it isn't easy to tell the difference between lock/unlock icons?

pettke added a subscriber: pettke.Fri, Dec 7, 7:28 PM

Maybe some kind of greying out or adding transparency would be an idea for locked tracks, might as well work for muting audio or hiding video. Greyed out elements are common in GUIs to indicate something is disabled or can not be changed.

Regarding using outlines for locking: imagine having three tracks below each other, where the top and bottom ones are locked. It should be clearly visible that the track in the middle is not locked, without having to look closely at the left and right edges.

When thinking about colors in general it might be worth to keep in mind color schemes with highlight colors different from blue, as well as specific negative neutral and positive colors. Using the theme colors can result in better visual coherence with the rest of the UI, on the other hand there may be color schemes which make some things hard to distinguish.