UI Design Improvements

[dynestudio]

Hi Gonzalo!

First of all, thanks for making mrv2, it is being a pretty good player alternative compared to other options to check exr files with OCIO options, and the usd features looks from the future!

I'm still doing my first steps in some sections of the mrv2 but something that jump into my mind is that would be nice if the UI can be improved later at some point, I guess that right now you are working in more important features, also I guess that work on the UI design is a heavy task too.

It would be cool if the UI can have a modern feeling with not too many bevel and embossed, maybe a more flat design can be good enough, here I can share some examples from other players and tools (of course probably you already know some of them like DjView):

Chaos Player: https://www.chaos.com/player
VLC 4.0: https://www.theverge.com/2021/2/12/22279750/vlc-4-0-new-user-interface-videolan-media-player-video-music-movie-database-web-player?fbclid=IwAR0590ADzlCNNicf1weEa6FS1c9KuHrC761lWgycW81MVU-YJoyp59uizdM
AaLab Found: https://www.aalab.com
Cinesync: https://www.backlight.co/product/cinesync
Djview: https://darbyjohnston.github.io/DJV
Keyframe Pro: https://zurbrigg.com/keyframe-pro
Maxon C4D UI: https://www.maxon.net/en/cinema-4d/features/user-interface-enhancements
Plasticity: https://www.plasticity.xyz

As an additional thing, the icons looks pixelated on a 4K screen, specially the icons from the load/save dialog. Maybe it would be better if it uses the system dialog instead? I'm using win10 here.

Thanks again for the mrv2 development, I can't wait to continuing playing with it!

Cheers!

[ggarra13]

I'm still doing my first steps in some sections of the mrv2 but something that jump into my mind is that would be nice if the UI can be improved later at some point, I guess that right now you are working in more important features, also I guess that work on the UI design is a heavy task too.

It is tricky. But you can collaborate. Pick up any of the Panels like the Color Panel and do a mock-up in Gimp, Krita, etc. of how you envision it looking. That would help much more than sending me several web pages that all have different looks.

As an additional thing, the icons looks pixelated on a 4K screen, specially the icons from the load/save dialog. Maybe it would be better if it uses the system dialog instead? I'm using win10 here.

I've updated the drawing icons in the next version of mrv2 so that they scale properly with any DPI. The load/save dialog still has to wait. I've been wanting to do a heavy re-write of it as it is one of the most horrible parts of mrv2's code.
BTW. You can use the system dialog if you want. Go to Preferences->User Interface->File Requester and select "Use Native File Chooser". Note that you won't get previews of .usd or .otio files, thou.

[dynestudio]

It is tricky. But you can collaborate. Pick up any of the Panels like the Color Panel and do a mock-up in Gimp, Krita, etc. of how you envision it looking. That would help much more than sending me several web pages that all have different looks.

I love the idea, I preferred to send you the references because I didn't know if you would like the idea or not, I'll try to come back with a mockup maybe in 1-2 weeks.

I've updated the drawing icons in the next version of mrv2 so that they scale properly with any DPI. The load/save dialog still has to wait. I've been wanting to do a heavy re-write of it as it is one of the most horrible parts of mrv2's code.

The icons are looking good now in mrv2 1.1.3, thanks! :)

BTW. You can use the system dialog if you want. Go to Preferences->User Interface->File Requester and select "Use Native File Chooser". Note that you won't get previews of .usd or .otio files, thou.

Great, thanks for the tip! I'll miss the .usd thumbnails, that's powerful but for now I prefer to still using the native system dialog, also because I use Listary to navigate faster between windows.

[danbradham]

It would also be nice for the application to have a real icon! Since windows uses the associated application icon for files, it would be more helpful to have an icon that suggests playable / reviewable media.

[ggarra13]

Don't you get the "Eye watching" icon by any chance? There's a bug in Windows 11 at least where the icons might loose their icon associations. You have to fix it manually, but hopefully only once. Go to Help->Documentation, click on FAQ and see the Windows section. If that's not it, then please give further details.

[Thane5]

Maybe Blender could be a useful point of reference too, in terms of UI design.

Actually, there is one thing that i realized when comparing the two. Blender's timeline buttons looks more organized because it groups the elements together. At the left side you have some playback settings, in the center the playback buttons, and on the right you can configure the range and FPS.

Meanwhile on mrv2 these things are simply arranged on a continuous row, with buttons scaling their width dynamically, which means they can look overstretched on large displays.

I think this area would be a good start for a UI improvement project. Basically, i would add some dynamically scaling spacers (if that exists) and give these buttons and text fields a maximum size (again i dont know if that is possible, just guessing here)

The next step could be to incorporate a consistent accent color, maybe this blue that blender uses, or the peach colors that i used in the icon.

[ggarra13]

@Thane5 Thanks for your input. I like Blender's design, but there are some problems trying to incorporate that into mrv2. Feel free to comment on these:

1. The UI in mrv2 adjusts to the image size, instead of just covering the full screen like Blender which makes laying out widgets easier. So any widget layout has to contemplate both the minimum (around 640x480) and maximum (say 4K). That's the main reason why at high resolutions we stretch the widgets.
2. Unlike Blender, mrv2 can work with frames, seconds and, much more difficult, timecode, so the input widgets have to be big enough to support timecode (00:00:00:01.2ms).
3. v1.2.3 no longer stretches the buttons, only the sliders and input widgets. I am still not very happy with this, so feel free to comment if it is indeed an improvement or a step backwards.
4. The current frame that is displayed in the timeline cannot be edited (to jump to a frame), so we need to have a current frame input widget.

[Thane5]

Yeah, these fixed width buttons do not exactly look better.