New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hotkey widget UX improvements #16001

Open
dragunoff opened this Issue Jan 4, 2019 · 2 comments

Comments

Projects
None yet
3 participants
@dragunoff
Copy link
Contributor

dragunoff commented Jan 4, 2019

The hotkey remapping widget is not very user friendly. There are several issues with it:

  • There is no way for the user to cancel a remap in case of an input error
  • Hotkeys can not be cleared (set to an undefined state)
  • An individual hotkey can not be reset to its default value
  • There is no visual distinction between default and remapped keys
  • Duplicate hotkeys can be set

Related issues: #14670, #3986, #13200

I will propose here a couple of approaches for how this widget can be reworked.

Inline variant

  • Rebind: When clicking inside the input field the value starts blinking and a new hokey can be set
  • Accept: A valid hotkey is automatically accepted
  • Cancel: Esc key cancels the operation
  • Reset/Clear: Reset and clear buttons are inside (or next to) the input as small icon-buttons; Default value is a slightly transparent color (like a placeholder); custom value is fully opaque; To reduce clutter these buttons should only show up when a remap is in progress;
  • Duplicate: In case of a duplicate the input value changes to a red color and blinks until a proper key is set or the remap is cancelled
    default

Dialog variant

  • Rebind: When a hotkey input is clicked a dialog opens up; The dialog has buttons for all possible actions: Clear, Reset, Accept and Cancel
  • Accept:: Click OK or press Enter
  • Cancel:: Click Cancel or press Esc
  • Reset/Clear: Reset and clear buttons are inside (or next to) the input as small icon-buttons; Default value is a slightly transparent color (like a placeholder); custom value is fully opaque;
  • Duplicate: In case of a duplicate a warning message is displayed in the dialog and the OK button is disabled
    default
@pchote

This comment has been minimized.

Copy link
Member

pchote commented Jan 5, 2019

IMO the dialog variant is probably best, but I would replace the reset glyph with an explicit "Default" button to the left of OK / Cancel.

@abcdefg30 abcdefg30 added the UI label Jan 5, 2019

@dragunoff

This comment has been minimized.

Copy link
Contributor

dragunoff commented Jan 5, 2019

I also prefer the dialog variant because all actions are explicit. A minor downside is that it adds a step to the process which could make remapping multiple keys a little cumbersome.

I was actually thinking about moving both the Reset and Clear buttons out of the input and putting them next to OK and Cancel. Like so:
default

Also thought about labeling all of the buttons, but that takes a lot of space and feels a little overwhelming:
default

Or only the Reset (default) button and leaving the Clear button in the input:
default

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment