openAV-Luppp icon indicating copy to clipboard operation
openAV-Luppp copied to clipboard

MIDI Controller Binding window UX improvement

Open Spengreb opened this issue 7 months ago • 4 comments

This PR attempts to improve the UX of creating midi bindings.

In the settings drop down it is no longer called "Options" it is now called "MIDI Options" some light refactoring was done to reflect this in the code also.

Key changes include rearranging UI elements, adding zebra striping for better readability, and a more friendly way for a new user to interact with it.

The author and link buttons have been merged into one that only appears if there is an author to credit and will only open the browser if a link is set.

A new button called "Export Bindings" has been added to ask the user both their Author name and their URL. Since there is no repository where users can get other bindings from each other I don't see the need to have these element front and center. What users want from this screen is to set up their midi bindings.

Moved the targeting buttons to the top and with a brief explanation of how the program expects you to work with it.

The index numbers that could get out of order quickly are no longer shown to the user and instead are replaced by a red X to remove a specific bind.

A lot of buttons in these screens have been renamed for better clarity of their function.

I can see many more improvements to this screen for example the "pretty names" that LUPPP presents are not that pretty and adding ways to debug your midi device to see what events are being sent (if any). I spent a lot more time on this than expected so I may go back and do these other improvements later.

Please let me know if some of the text here does not make sense or could be phrased better or any other improvements you have

Here are some screenshots showing before and after of each screen.

Before: image

After: image

Before: image

After: image

Before: image

After: image

Spengreb avatar Jul 09 '24 11:07 Spengreb