Keyboard Shortcuts roadmap: workshop outcomes for next versions

[GabrielaVives]

Problem

This issue reports the outcomes of a workshop that took place on March 16th, 2023.

The keyboard shortcuts are currently displayed in a modal that pops up when the user presses Ctrl Shift h. We will call this version the V1.

#14053 illustrates the current work that is being done on the V1.

This version has one main user experience issue: the list of shortcuts changes depending on the user's context and this list can be very long, making it difficult for users to quickly find the shortcut(s) they are looking for.

As the technical and design solutions to this problem are multiple and require in-depth conversations, we organised a small workshop to help the community take informed decisions about the best solutions for future versions.

Proposed Solution

The goals of the workshop were to:

• brainstorm technical ideas about "how could we group the items in the list?"
• agree on a vision for the next features about the keyboard shortcuts
• list users needs that are not met in V1
• list the minimal changes for Jlab 4.0

The agenda

• Introduction 5 min
• Individual brainstorming 15 min

• Presentation of the individual brainstorms to the group 25 min
• 
Affinity Clustering 15 min

• Naming each group 5 min

• Select the minimal changes for Jlab 4.0 20 min

• Action items and wrap up 5 min

Participants

@tonyfast
@HaudinFlorence
@andrii-i
@jasongrout
@JasonWeill
@RRosio

Results
All the results listed below can be viewed in the original FigJam whiteboard here.

The brainstorming and affinity clustering outcomes are organised in 3 groups:

• Technical solutions for grouping shortcuts

• Design ideas

• Features

The minimal changes selected for JLab 4.0 are listed below:

Additional context

Here is the FigJam whiteboard that we worked on.
You can view every step of the workshop and the outcomes.

[andrii-i]

@GabrielaVives @HaudinFlorence Thank you very much for organizing the workshop, I think it was useful and productive, doing workshops like this for complex UIUX issues should be considered a best practice. Please let me know if you need any support on implementing minimal changes for 4.0.0, would be happy to contribute if needed.

[GabrielaVives]

@andrii-i I'm glad to hear that is was helpful. For sure, we should do this again. I don't always catch the important UX issues that are discussed so don't hesitate to tag me if ever there is a subject for which you think a workshop would be useful. These methodologies can adapt to different complexities and expected outcomes, so we can use them for pretty much anything where a thread of discussion isn't efficient.

[HaudinFlorence]

@GabrielaVives Thanks a lot for this issue gathering the important points raised during the workshop. @andrii-i Thanks for offering some help. I may need some in tuning some of css details (for instance I did not manage to properly tune the padding in the table to ensure more spacing between lines).

[andrii-i]

@HaudinFlorence I would be happy to help, let's coordinate on gitter if that works, I just messaged you there (same username, andrii-i)

[HaudinFlorence]

Hello. I am making here a short summary concerning the actions items and what is ok in the current version (10 days after the workshop) and what still needs to be done:

• 2 columns: Label and keyboard shortcut : this is ok

• If label empty: use command ID : this is ok (I implemented a function that creates a label from the command id when there is no pre existing label)

• Verify if matchDistance function that finds the distance from the target node to the first matching node works : I think this is ok but I would be happy to check this with someone in a code review/ testing session.

About these other minimal features for Jupyter Lab 4.0:

• Have the keyboard shortcut right next to the action name: this is ok.

• Add separator between specificity groupings : this is ok.

• Decision on which columns we shot: name + shortcut or name + category + shortcut: for the moment we are keeping label and shortcut for V1.

• Help text or description somewhere saying that the shortcuts apply wherever you are, and grouped by how contextual they are: this is not done (under what form should this description be included ? A column of the table, a tool tip ?).

• Shortcut text should be displayed according to platform convention (windows/macos/linux), and consistent with other places in application: this is not done (I need to figure out how to do this).

• Make sure user-readable names are used wherever possible for name, category (See https://github.com/jupyterlab/jupyterlab/pull/11960/files#r1139155273 and see https://github.com/jupyterlab/lumino/blob/main/packages/commands/src/index.ts for a list of things you can get for a command.): I have checked for category (did not find it), but still need to check the other ones.

[HaudinFlorence]

Proposed rendering for V1:

[andrii-i]

@HaudinFlorence @GabrielaVives not sure how critical this is for V1 but I wanted to surface that currently in #14053 if shortcut name is long, the table extends horizontally until it starts pushing out keyboard shortcuts into wrapping. Adjusting flex can make so that shortcut combination would not wrap before the shortcut name (they should probably have the same flex-grow and flex-shrink values)

[GabrielaVives]

Maybe we should define a maximum length beyond which the label is truncated ? It could be shown in full length on hover for example.