Preview rearranged

[pgilfernandez]

This is a suggestion to change the arrangement of icon in the Preview toolbar. I feel like the UX could be improved here.

I started by checking how other common FOSS do (not including some if their UX was not inline with our set of icons, for instance Kdenlive):

Then I created a new set of icons and started playing with rearrangement and therefore fine tuning the icons (iterate).

I don't want to go further in case you don't like it or want me to move in another direction. Here is the state I am now:

actual

proposed

window screenshot

video
https://github.com/user-attachments/assets/929abc5e-37fd-4b5a-a60c-14a77dbb9e97

set of new icons (in case you want to play with them)
preview_icons.zip

In the way I fixed some little errors in the QSS and "deactivated" the actual keyframe spinbox hover state as you can't really use it to type anything...

Let me know what do you think about the subject

Cheers

[rodlie]

To be honest I don't understand the change, please explain. To me this looks like a downgrade.

[pgilfernandez]

To be honest I don't understand the change, please explain. To me this looks like a downgrade.

Well, first of all think I'm new with Friction, I love it but I'm not still so used to the GUI and UX. Taking that in mind I'm able to wonder why the GUI is like that and not the other way around and I straight forward try to compare it with other software in order to try to make things easier to "newcomers".

The actual Preview toolbar looks like the following:

• (RED) jumps to start/end and jump to prev/next keyframes: the four icons look pretty similar and there is not an easy way to find the "symmetry axis", that is, from where you go to Prev positions and where you go to next positions. You could get used to them, but I think they are not easy to follow
• (GREEN) start/actual/end frames: the good part about them is that they are placed in a very logical and natural position, left, center and right of the toolbar. But they are not comfortable to be checked or modified. Left/right ones are alone on the sides, they could not be understand as a group as they are placed alone. The center one feels like interfering or annoying the playback buttons as it is not an editable one (if it would be editable I would buy it).
• (BLUE) play from start, normal play/pause, stop and loop toggle: they are place in the normal order, they are fine but the normal play button lacks of importance as being the most used button in the whole toolbar. The loop toggle is pretty useful but added with the rest of the icons makes the whole group "more difficult to find the one you want".

The proposed one could be improved indeed but tries to solve previous issues:

• (RED): they all are grouped and placed to the left as they are closer to the timeline and because Blender does it this way. I would only add a "start" and "end" placeholders inside the spinbox to make them more obvious...
• (GREEN): moved to the left and right sides of the normal playback buttons. A very common approach for other video editing softwares (not for Natron that prefers to keep group of buttons together but not mixed... I mean, prev/next keyframe in a group and start/end positions on another separated group).
• (BLUE) The Play/pause button went bigger to the rest to mark the "symmetry axis" to easily know that side is left and right and because it is the most important one in the row (Blender and other ones do it that way too).

Parallel to that:

• I applied some spacing between start/prev buttons and the normal playback group. The same to next/end buttons and the playback group
• The loop playback button has its own spacing as it does something different to the other ones and can't be grouped with them
• I updated the icons, a little big bigger and rounded
• I changed the prev/next keyframe icons: now the diamonds are just outlined so that it helps not to get confused with other triangles you find along the row

The only thing I don't like about this new layout is that the central row doesn't stays in the toolbar center, but I guess it is something doable if this rearrangement goes forward.

I know this proposal changes visually a lot what you (and probably old Enve users) are used to, but I think it introduces a clearer and better UX experience... but it is just an idea. Don't hesitate on cancelling it if you are unsure or don't like it
😉