UI suggestions

[the-liquid-metal]

Reduce border to save space UI

Waifu2x-Extension-GUI uses many borders to categorize items. As a result, space becomes limited and everything is crowded. There are less significant borders that we can eliminate without losing their meaning:

In Home tab:

• File list border. Change the static text in the inner box with actual empty table. User will know that the table is file list just by looking at the column headers. The original static text can be placed in already exist popup text. The popup text informing drag and drop functionallity only appears when the table is empty.
• Costum resolution border. There is already width and height fields.
• middle border. Change this border to 2 simple lines on right and left side.
• Output folder border. Change enable field to enable output folder.
• line in between scale ratio and denoise ratio. There is no need for separator.

In Engine setting tab > Anime-4k tab:

• Pre-processing border. There is already enable pre-processing field.
• line under enable pre-processing field.
• Post-processing border. There is already enable Post-processing field.
• line under enable Post-processing field.

Place simple line in between Pre-processing border and Post-processing border in exchange for those borders.

In Engine settings tab > Real-ERSGAN tab:

• border encapsulates use imported models field. Change this border to 2 simple lines on top and buttom to make it consistent with others.

In Video settings tab:

• Audio denoise border. Place Audio denoise field before Denoise level field and change it's text to Audio denoise level.
• Encoding quality border. Place Encoding quality field before it's member field.
• Frame codec border. place Frame codec static text before it's member field.
• Process video by segment border. Place Process video by segment field before Segment duration field and change it's text to Process video by segment duration.
• Custom Video setting [Premium] border. Change onclick event on every fields member to show Get Premium tab (same event like Speed Boost 2.0 field).
• line on top of extra command field.

In Additional setting tab:

• Input file extentions border: Change Image field to Image extentions. Change Video field to Video extentions.
• Custom font settings border: There is already Custom font size and Custom font fields.
• Tools border.
• border encapsulate ```Reduce Video FPS`` field.
• border encapsulate buttons.

Place simple in between Input file extentions, Custom font settings, Tools and buttons border in exchange for those borders.

If you are interested in this suggestion, I will provide you with mockup layout.

[AaronFeng753]

Thank you, the UI is indeed kinda crowded now, I will add this to my to-do list

[AaronFeng753]

[AaronFeng753]

You can leave a comment here if you have more suggestions, you don't need to creat new issues

[AaronFeng753]

[the-liquid-metal]

Proper buttons for custom resolution

IMHO, there should be buttons: apply, apply to unset, apply to all, reset, and reset all.

• cancel is a bit confusing for newcomers.
• apply to all in the form of checkbox is not a good design, and I often forget it.

[the-liquid-metal]

Distinguishable area resizer

In Home tab, there is hidden area resizer between image/video list and so many fields bellow it. For many ordinary users, this feature are completely unknown.

There should be visually exist area resizer for people with unobservant eyes.

[the-liquid-metal]

Proper progress bar and current status

Common application has status bar to inform user any important status. Since Waifu2x-Extension-GUI does not have status bar, please consider to use status bar as progress bar and current status placeholder. Otherwise, the very bottom of the "home" tab should mimic the status bar.

IMHO, progress bar with hundreds pixel size is overwhelm for simple and few operation. A 100px progress bar which has embeded percentage is enough.

file count text is considered as current status, therefore, it should be placed together with time related status.

[the-liquid-metal]

Proper operation buttons

Common application has toolbar to as a placeholder for any operating buttons. Since Waifu2x-Extension-GUI does not have toolbar, please consider to use toolbar. Otherwise, the very top of the "home" tab should mimic the toolbar.

The buttons and select widgets located immediately after image/video list table are considered as operating buttons. Additionally, start button is also considered as operating buttons. therefore, start button should be placed together with it's kind.

IMHO, Waifu2x-Extension-GUI should conform to application standards, to make it easier for newcomers.

[the-liquid-metal]

Proper widget for information only things

All widget in compatibility test tab are checkboxes, even if they are just information. I think all newcomers think the same thing: those checkboxes are clickable. My suggestions are:

• Combined with static text bellow them, it would be better if super-resolution engines and Frame interpolation engine checkboxes converted to table with columns: status, name, speed, quality, and kind (both are in seperate tables).

  • status contains: "" (empty string), "OK", "loaded", or whatever suits the conditions.
  • name contains "waifu2x" and friends.
  • speed and quality contain rating star.
  • kind contains "2D Anime" and/or "3D Real-life".

• plugins checkboxes would be better if converted to table with columns: status, name.

[the-liquid-metal]

Proper visible information for fields/buttons

There are fields/buttons work properly for premium only version. Some of them are marked with "[Premium]" directly in it's text and the others are marked in the grouping borders, making the app design inconsistent.

Things become complex with additional color for some fields/buttons. There is already feature request for dark mode. Custom color does not always play nicely with dark mode.

My suggestions are:

• use "(*)" (asterisk char) for "[Premium]" replacement directly in it's text: button text, checkbox label, text input label, number spinner label, select label, or even option text.
• use "(#)" (number char) for any other information directly in it's text: idem. Below the fields/buttons there is information provided what the number char meaning. "(*)" and "(#)" can coexist in a single item, moreover, several "(#)" can coexist too. numbering is start at "(1)" for every fields.
• use only black color for any text, not even grey.

[the-liquid-metal]

Proper layout

It seems that Waifu2x-Extension-GUI was not designed with responsive layout. Please consider using a responsive layout considering that there is no widgets which consume wide area. Moreover, image/video list table are able adapt to narrow area. Responsive layout will open the door for new devices and may be other platforms.

Some tabs or grouping border distribute it's content vertically. Some grouping borders have multifields in a single line. It feels chaotic arrangement. Hard to calculate how much remaining free space is. There are bugs related to layout which I found and haven't reported yet. Hopefuly, with new layout design those bugs are gone. My Sugestions are:

• don't distribute the content vertically. content should be condensed at the top.
• split multifield line into several line. If there is truly exist soft grouping, use blank line as a separator from the rest of fields.
• if there is only a single softgroup and additional fields, and all fields are distinguishable than don't use separator at all.
• If there is hard grouping, use simple line as separator.
• If there are more than one hard grouping but all group consist only one member, regroup them into a single group (the "else" group).
• If there are more than one category, use different column.
• If possible, all field labels are positioned at the leftmost.
• If possible, all fields are aligned and have same width.

[the-liquid-metal]

Done! (hopefully)

[leo-smi]

Is there a way to put some space aligning in the text bellow:

First of all, I'm not sure if the GUI framework allows it to use python string alignment.

My suggestion is using the comands: https://www.tutorialspoint.com/how-to-align-text-strings-using-python

thank you!