The purpose of this post is to discuss possible layouts and designs for the new keyboard shortcut editor.
Special attention needs to be paid regarding the following points:
- How to know if a shortcut is enabled, or disabled
- Has the shortcut has been changed by the user, or is it the default value
- How the current shortcut should be displayed
- How to edit a shortcut
- When editing a shortcut, how to
i. Save or cancel the edited shortcut
ii. Restore the shortcut to its default
- How to import/export a current shortcut scheme
Below is my initial design for the Editor. I’ll discuss possible variations later in the post.
Keyboard shortcuts are shown in a table, along with a search box to filter shortcuts by their label.
1. How to know if a shortcut is enabled, or disabled
Disabled shortcuts don’t have their key combination in the relevant area, while enabled shortcuts do. In the above design, “Quit” command doesn’t have a shortcut in that field, therefore it’s disabled.
We can also add a label, such as “Disabled” or “None” in the shortcut field. But I think that would bring more clutter to the interface.
2. Has the shortcut has been changed by the user, or is it the default value
Default shortcuts have their commands in regular text, while user-changed ones are in italic formatted text.
An alternative would be to add a separate field to say if its the default value or from the user.
This layout is similar to VS Code. However, I think the original layout is better because it’s less clutter, simpler, and doesn’t waste a lot of space. The space is not worth the importance of the information shown there.
3. How the current shortcut should be displayed
Joplin is a cross-platform application built with Electron, and uses Accelerators to define the key combination of keyboard shortcuts. Due to the cross-platform nature, Joplin should use modifiers such as
Alt instead of
To improve the user experience, these modifiers will be converted to the current platform in the presentation layer. For example,
Cmdon macOS and
Ctrlon other systems
Windowsin, uh, Windows?
Optionin macOS (This one is really optional though)
When saving the shortcuts, the process should be reversed for the sole purpose of making importing and exporting possible across different platforms.
4. How to edit a shortcut
The user would double click on the shortcut field of relevant command. Refer “New to-do” for an example. This shows a field which captures the pressed key combination.
If the user just hit Enter without pressing any key combination first, the shortcut would be disabled. To enable it, the user can again double click on the shortcut field (which is now empty) and press a key combination, and hit Enter.
5. i. When editing a shortcut, how to Save/Cancel the edited shortcut
In the above designs, the user is editing the shortcut for the “New to-do” command. Pressing “Enter” will save the shortcut, and pressing “Esc” will cancel and the previous value will retain.
Another method is adding two buttons, one to Save and one to Cancel. Refer below design (Ignore the “source” section)
I prefer the former because it’s just convenient to press Enter/Esc rather than using the mouse or using touch-pad to click on a button.
5. ii. When editing a shortcut, how to restore it to its default
I think a simple button next to the shortcut field would suffice, as shown in the first and second designs.
Optionally, we can display this reset button on all user-updated shortcuts as well. But this comes at a cost of users pressing it accidentally. That’s why I suggest only include it when the user is editing the shortcut.
6. How to import/export a shortcut scheme
Import and export buttons are located in the top right corner. “Export” will be disabled if there are no changes by the user and currently using the default shortcuts for all commands.