Redesign the User Interface

1. offizieller Beitrag

    Hello,

    Without knowing what the solution is and even if there is one, it has been in my head since release 2...

    The new release offers many possibilities due to repeated requests from some users. But I wonder if there is not a distortion inherent to forums, about the real level of potential users of Voukoder. Being active on a forum dedicated to video I realize that the average user's skill on video encoding is rather basic. The first version of Voukoder meets this need. From my point of view the new interface offers too many parameters that can repel many users.

    I do not know what is the right solution. Maybe just keep release 1 by renaming it to a "Voukoder Basic" (it should also be translated), then the release 2 becomes a kind of "Voukoder Pro".

    Or maybe an UI that can switch between a simplified UI to a complete.

    Sincerely,

    • Offizieller Beitrag

    I am in contact with a big company right now to include voukoder also in their product(s). I really want to keep the configuration independent from the host application. So going back to the version 1 style is not an option.

    But I am also thinking about this for many months. I'd like the user can chose between a very simple interface and an advanced interface. I am open for suggestions and concepts that satisfy the needs of users with less encoding knowledge and pro users that want to optimize each single option.

    Still ...

    • The whole UI has to match the technical requirements
    • It has to be compatible with wxWidgets 3.
    Zitat von Vouk

    I am open for suggestions and concepts that satisfy the needs of users with less encoding knowledge and pro users that want to optimize each single option.

    You should simplify current UI.

    First of all make a choice on using sidebar with icons or tabs in main window. Using both is a mistake. Choose the one and solid concept. I prefer sidebar with icons. It still allow to use tabs for chosen section in sidebar.

    Examples:

    Wrong: Icon General, tabs General and About.

    Correct: Icon General and icon About.

    Wrong: Icon Settings, tabs Settings and Logfile.

    Correct: Icon Settings and icon Logfile.

    Secondly, split General -> General to 3 icons - video, audio, muxer/format (or misc or other or etc.).

    Third, on Video icon make 2 or more tabs. But at least two: Encoding options and Side data (3D).

    Fourth, choose a concept for basic and advanced user. Variants:

    - wizard;

    - simple/advanced UI;

    - provide profiles based on original video bitrate, like output with high/medium/low bitrate;

    - leave it as is, but provide hints and descriptions which will help user to study and choose the right options.

    For any variant you will be responsible and still it will require a lot of support. Encoding options vary on many things and it can be changed in new version of Voukoder, but it will break backward compatibly. This will lead to a lot of questions like "why it works here, but in new version does not".

    Additionally:

    - remember the size of resizable window (at least in session)

    - split long video grid with options to multiple tabs (lke general (preset, profile, level, ...), rate control, analysis, etc.)

    - more fundamental change: remove grid at all. Nobody likes to scroll.

    Einmal editiert, zuletzt von Digeridoo (20. Juli 2019 um 23:54)

    A long time ago I developed an app called ASXGui which was an x264 gui that could be as simple or as complex as the user needed it to be. You could simply drag, drop, and encode if you knew nothing about encoders. If you knew a little, there were some basic filters and codec options, and if you were a power user, there was the ability to tweak every little setting you might want to do. Maybe that app could give you some basic ideas you could build on. This was the last version I released, 10 years ago:

    https://sourceforge.net/projects/asxgui/files/asxgui/2.5/

    You might need to run as administrator for it to work.

    • Offizieller Beitrag

    morphinapg There were some issues with the required .NET framework. I was not able to install it under win 10.

    I did some scribbles recently and i think it is a good idea to separate this in two parts (at least):

    1. How to navigate within Voukoder?

    • Sidebar vs. tabs?
    • How display 3 layers of navigation (i.e. Video > Encoder > Options)?

    2. How to configure options like encoders, filters, side data?

    • Property grid vs. standard controls vs. custom controls (what should each cutsom control look like?)
    • How to display layers of options (i.e. one option will only appear if a different options has a specific value selected)
    • How to display a simple view with limited option set and an advanced view with all options

    Basically I agree to everything Digeridoo mentioned above.

    (tbc)

    The actually used UI is still good but not perfect. The codec configuration could be better. I make my set of options and save this as named preset like "VK2 nV HEVC@M10-HL5.1 2160p25 15-30MBit VBR+AC3 2.0 192kBit". You can drag&drop this in AME over the project files or choose this from the project line. After that you can modify special parameters like the bitrate.

    I think there is something out there what could be treated as good: The codec configuration of "MeGUI". For x264 there are 5 Tabs. Only in case of a checked "advanced settings" the 4 last tabs will appear.

    Something like that?

    Zitat von Vouk

    Property grid vs. standard controls vs. custom controls (what should each cutsom control look like?)

    As for me, property grid is fine, but until it does not have scroll. Grid is quite simple for development and for user too.

    Zitat von Vouk

    How to display a simple view with limited option set and an advanced view with all options

    A lot of ideas already exists in other software. The first thing that came to mind is VLC. Switch of the mode at bottom left.

    Here are some screenshots from a slightly more modern rewrite I was working on before I abandoned the project. This is the window that would open only if the user wanted to modify settings. The "other" tab at this point only included subtitles. The source tab was for adjusting preprocessing and adding audio tracks. The advanced tab would include every possible x264 setting. In the older version I actually hid the advanced settings behind another window. There were also built in presets for different devices and quality settings if people didn't want to mess with any of these settings at all.

    I think there were probably still some things I could have done to improve this design, but the basic idea was that things could be as simple or as advanced as the user needed, and this worked pretty well from the feedback I got at the time.

    Einmal editiert, zuletzt von morphinapg (24. Juli 2019 um 05:02)

    Hi,

    The question is not whether the user interface suits me or not, whether it suits you or not, but whether it is suitable for both basic users and specialists. The first reason for Voukoder's success is to be able to encode with Nvenc while being accessible to all levels of users.

    The current user interface is a result of particular queries, but not of general interest including this majority of basic users. The question is about a general interest and not a particular one.

    • Offizieller Beitrag

    As a first step i followed Digeridoo s suggestion and removed all tabs and integrated them in the sidebar.:

    Whats still missing is to separate the "General" tab into "Video", "Audio" and "Muxer/Format" sidebar items.

    Thats where it gets complicated:

    When I click on i.e. "Video" in the sidebar I need to have a way to display the ...

    • Encoder options (per encoder) - each group in a different tab/panel
    • Side data
    • Filter List
    • Presets

    This would require at least some kind of second level navigation for the options.

    Any ideas / suggestions?

    Maybe it would be useful to create an extra icon below "General" for "Filters" because its huge amount of items and its fact that it is not a general setting. Furthermore many users don't need filters I think and they have a better overview in the general tab.

    I would group encoder options and presets together on the same page. Make sure the most basic settings are displayed first, such as bitrate/crf, and then the further down they go, the more advanced it gets. You could separate out the most advanced stuff into an additional tab if you want, but that may or may not be necessary as long as the more basic stuff is seen first. Perhaps hide the more advanced stuff away in a collapsable panel that is collapsed by default, and only opens if the user is interested in making those tweaks. Something like this

    I would also probably have Voukoder remember whether they opened the advanced panel or left it closed.

    Einmal editiert, zuletzt von morphinapg (26. Juli 2019 um 01:21)

    Yes, something like this would taste good...

    Especially the filters are a good idea: FFMPEG can do a lot of filtering, especially the resize is important. AME can resize the Picture (ex.: from 2160p to 720p) but the result is always looking quite soft because of the (bicubic?) resize algorithm. If there would be an option to let FFMPEG do the resize, ther would be more Option (bicubic, blackman, ...).

    But the filter-tab should be presented as the 2nd from top: General (codecs, multiplexer, external files to multiplex), filters, video, audio.

    • Offizieller Beitrag

    Don't forget there are both audio and video filters!

    And if there is alread an audio and video sidebar item... shouldn't everything video and audio related be included there? It would be also confusing to add a filter item and then have a video and audio tab in there.

    Just to think about.

    I will release a beta1 of the new version this afternoon, so you get an impression of the current situation.


    Still, I prefer us to think about the general structure and not about a single component (like the filters). How can we put all components in there in a nice way and how to navigate between them?

    You could probably include the filters within the video and audio tabs. I would probably recommend having them appear before the advanced codec settings if so. Are there a lot of filters that can be chained together, or just a few basic things? If it's fairly basic like resize/crop, I'd just put them in a panel on the same page with checkboxes to activate them, but if there's a lot of complexity with them, maybe linking to a separate window with a button might be a better option. If they're multi-path node like filters, then something like virtualdub used to do would be a good design, but if they're just layered on top of each other, then something like Avidemux does would be good.