[Settings UX] - Improved design for the ImageResizer sizes table.

[htcfreek]

We should restructure the table to make it easier to visually capture the table.

Original

Proposal

[niels9001]

There is some work needed, yes.

Maybe we should move towards a more extended dialog when adding/editing an item (like keyboard manager). This way we can visually improve the listview and optimize it for reading it while providing a better editor (with e.g. proper labels etc.)

[htcfreek]

Maybe we should move towards a more extended dialog when adding/editing an item (like keyboard manager). This way we can visually improve the listview and optimize it for reading it while providing a better editor (with e.g. proper labels etc.)

I am not shure if we realy need extendet dialogs. 🤔 More dialog means mor clicks for the user. I prefere easy and fast managable dialogs.
For example in KBM I have two dialogs and three edit/save buttons to click for adding one shortcut via keyboard.

[niels9001]

A listview is meant to display items. If you make them editable a datagrid would be more appropiate.

With dialog I meant a single click to open the listview item and to be able to edit its properties. Here we can use proper labels to indicate all items can do, making it scalable in the long term if we want to add more properties.

Keyboard manager is a bad example since it goes against common UX patterns, but this is due some technical restrictions that we can hopefully tackle in the future.

[mdtauk]

When DataGrid is added to WinUI proper, then it would be appropriate in this use case

[niels9001]

W10 Settings app does not work with inline datagrids, like we're doing: ListView items can be configured, but always requires you to select the object first. You can see this under e.g. Bluetooth or the Languages page:

For ImageResizer it could look something like this (super quick mock-up):

This would require the user to click on the list item to open up the dialog that would allow you to enter or update the settings. The user can delete an item by right-clicking?

Advantages:

• Feels more native
• In the dialog, we have more space to add proper descriptive text on what these options do (e.g. Fill vs. Stretch vs. Fit - this was raised in an issue somewhere).
• More scalable if we want to add more settings: Image Resizer Encoding Quality per Size #3835
• A datagrid is used to bulk edit items, that's not really the case in this context?
• The dialog can be re-used when selecting 'Custom' in the ImageResizer app.

My 2cts :). Related to: #1053

cc @laviusmotileng-ms

[htcfreek]

@niels9001
Like it.

But two things:

• The Fit, ... drop-down is missing in the mockup.
• Maybe we should have unit selection first because of only showing one input for percentage.

[niels9001]

@niels9001
Like it.

But two things:

• The Fit, ... drop-down is missing in the mockup.
• Maybe we should have unit selection first because of only showing one input for percentage.

Oh yes, there's plenty of stuff missing from the dialog I think - if we'd agree and start any work related to this we definitely need to rethink that.

[niels9001]

The current implementation of the Image Sizes listview is having usability issues: the trash can icon gets cut off while the design is not following OS design guidelines for lists. It allows for in-line editing, which makes sense in a datagrid that holds a lot of information that you want to 'quick edit'.

The issues:

• The ListView is too wide, the delete button gets cut off on smaller resolutions (and the default window width)
• Users reported that they would like to have a better description of the stretch modes, there's no space to integrate that.
• Inline editing is common for DataGrids, not for ListViews.

Current state:

Proposal (non-functional XAML mock-up):

Would be great to get feedback on this - any features we'd be missing, any UX concerns?

[htcfreek]

@niels9001
In the edit dialogue you use the word stretch and stretching option. Maybe sizing behaviour is here better. Because stretch stands explicit for "making bigger".

[Jay-o-Way]

Looking good, @niels9001. But I don't understand the possibility to set different units for width and height. That just doesn't make sense to me and I think it will mostly be either confusing or conflicting with each other.
#tracker label would be appropriate :)

[niels9001]

@Jay-o-Way Ah yes, you're right. The unit box should be a single box applying to both width and height. Too much copy-and-paste :)

[Jay-o-Way]

@niels9001 The double controls (width & height unit) are also visible in the UX of #1053

---

Personal opinion: I like the possibility to edit the presets "inline", that would remove the need for the extra Edit window. But a pop-up window feels better.
Suggestion: possibility to drag items to manually re-order the list.
Also seen in an other issue: the possibility to define encoder per preset.

[Jay-o-Way]

Maybe I'm late, but recently I had a lightbulb turning on. There are two (general) design ways for these kind of settings.

1. is to use the controls in the Settings and the Image Resizer windows to both display and edit (=save) the settings.
2. is to make the list (in Settings and Image Resizer gui) compact and read-only, and use a stand-alone or dialog gui for editing (and it writes the settings). Basically what is visible in Niels's comment/mock-up of 29 aug.

The advantage of 2 is that you have more space to show extra information. Also, you can use this single gui for two occasions: coming from the settings window, and coming from the Image Resizer. I am in favor of number 2 now. What do you think?

[crutkas]

@enricogior fyi, i'm adding this to https://github.com/microsoft/PowerToys/wiki/Roadmap as it has been brought up multiple times

[enricogior]

Adding a reference to #4490 since it seems a nice option to add to the improved UI.

[niels9001]

@enricogior Is that work already planned for (e.g. 0.35 or beyond)?

[enricogior]

@niels9001
not yet, but I wanted to add the reference for future consideration.

[dedavis6797]

Resolved. Thanks @niels9001!