Kdenlive UI: Track (Un)Locked -- Odds and Ends

It's good to see Kdenlive development proceeding, even on small details, as improved icons for the user interface of Kdenlive. This is only possible because  the Kdenlive developers kindly and quickly integrate user contributions with some level of consensus. A good example of such seemingly small UI improvements are the track lock icons in the timeline. «...so what could be wrong with a lock icon?» you may ask.

Past UI

Old (un)lock icons.

In the past, Kdenlive used Breeze stock icons for the unlocked/locked states. However,as you can see on the right, there is not much visual difference between a locked and an unlocked state. Can you spot the locked track? Can you spot the other locked track?

Sorry, but there isn't another locked track. But how long did it take to find this out? The reason is that the visual difference between a locked track and an unlocked track is so small: the lock arc has a small gap when the track is unlocked.

Interestingly, other users also found this design to be unclear and difficult to spot the exact state.

While the Breeze icon theme puts much effort into a visually clear language, I can only guess at why the lock/unlock icons are looking like peas from the same pot. Maybe that's because in most situations there is only need for signalling the locked state, but not the unlocked state (such as with locked files).

This is different with Kdenlive's track headers: here, we need to clearly show not only the locked state but also the unlocked state so users know where to click and what this state actually is.

Even older unlock icon style
(license: CC-BY-SA/GFDL;
source: Kdenlive user documentation)

Interestingly, the old Kdenlive 0.9.x series had a more pronounced unlocked state icon. However, I must confess that at first I thought the unlock icon would indicate a movie clapper...

Improved UI

New unlock icons.

After a productive discussion on Kdenlive bug #358439 another old-time Kdenlive user (thanks, Sam Muirhead!) and I finally came up with a simple, yet clear solution. And it still keeps the visual language of the breeze icon theme.

Basically, I remembered how my own basement storage compartment lock looks like when opened: in order to remove it you'll need to turn the arc outside as otherwise there is not enough room between the arc and the lock body to remove the lock.

And this now gives a great clear visual clue: the arc is turned outside when the lock is open. This new lock icon design is shown on the right. Now you grasp the state even at a quick glance.

This new design solves the problem with the old broken arc design and is visibly much different from the locked state. At first I had designed the unlock state to use the stroke-out metaphor, but as Sam pointed out, this wasn't doing much good. We also experimented with a filled lock body, but that was highly ambiguous. In the end, our third iteration did the job.