Design proposal for the Keyboard shortcuts page
My name is Maria and I am a UX architect at System76. I would like to propose design mockups for the Keyboard shortcuts page. I have done some research online and talked to people who used the page that. It became apparent that the page is somewhat difficult to navigate. There were also users who expressed interest in being able to set multiple key combinations for the same action. For example, gamers use WASD keys in place of Arrow keys. Using those keys in shortcuts with Arrow keys would be much more natural for them.
Difficulties with the current page:
- Too many shortcuts in one long list on the page make user experience somewhat painful (see issue: #416 (closed)).
- Users might not realize they can add custom shortcut. The button for that is at the very bottom of the shortcut list and needs lots of scrolling.
- The current layout of the page doesn't allow users to have more than one key binding for the same action.
- Setting the shortcut was a confusing experience for new users. The image with keys and the absence of the Cancel or Close button upfront caused them to pause. Users kept looking for the button before reading the instructions about pressing Esc or Backspace.
Proposed changes
- Combine the shortcuts in smaller and easier to scan groups and make them expandable. That way a user can see the "Add custom shortcut" button right away.
- Make search field more prominent and thus more discoverable.
- Enable users to have multiple key bindings for the same action.
- Include Application field in the dialog "Add custom shortcut". This would allow users to choose the application they would like a shortcut for. Selecting the application will populate "Name" and "Command" input fields. That will be helpful for those who do not know the command or have difficulty guessing it. Particularly, with new Flatpak naming conventions which makes it difficult to guess what the command is for the application. The application field would be optional. The name and command can be edited in case someone needs to modify the command. For example, one of the users pointed out during testing that someone might want to have a shortcut for launching a browser in safe mode. Then this user would be able to go and edit the pre-populated command.
Mockups
Default page view:
View with search results
Works the same way as currently, just a slight adjustment to the proposed design
Expanded shortcut category.
Here, as an example, a user chose to have Arrow keys used in Vim in addition to the usual Arrow keys to navigate between workspaces.
Shortcut menus with different sets of actions depending on the context.
- when system shortcut was disabled and has a reset value
- when there is only one key binding
- when there are multiple key bindings
Dialog for setting the shortcut:
Dialog for adding a custom shortcut step by step:
Testing and implementation
I have done the first round of usability testing for this design. Users liked a list of categories instead of a long list of shortcuts and found the experience to be easy. It was interesting that new users with no previous experience of the page found it easier than those who were used to the current layout. I can share a more detailed account of the usability testing results if someone would like to see them.
Our engineering team is ready to implement the design and we would like to offer this change for the upstream.