Custom icon and modal request for keyboard shortcuts

[Fazle-Jahangir]

Background: We want to provide users access to viewing a list of keyboard shortcuts relevant to them in Flex. This is not something users would check often but useful to have.

Question: I have identified an icon (first screenshot - keyboard icon in the popover) which I'd like to propose to represent "keyboard shortcuts" from streamline which I believe the Paste team also uses? If there are alternatives I am not aware please let me know. Clicking on the icon opens up a modal (below).

Second question: I have explored using a modal (second screenshot) to display the list of shortcuts. The height would have to be increased to fit all the shortcuts and I was wondering if this is ok? Another option is to decrease the height to be smaller but implement a scroll function in the modal to view all the shortcuts.

I appreciate your feedback.

[gloriliale]

Hi @Fazle-Jahangir!

Thanks for your questions. For the second one about Modal: our Modal has a min-height but will grow up to a max-height of 90% and then automatically become scrollable after that has been reached, so you shouldn't have to worry about the length of the list or changing the height!

The team is still discussing adding the icon, but a few observations:

• Our general advice is to avoid having solely an icon as a button, unless the single action it performs is clearly conveyed. One way to make this much clear is to write it out and have it be a link-style button. Here's a quickly drawn up example:

• You mentioned that this "is not something users would check often but useful to have," and I was curious about if this was something user testing or research had shown, or if it was coming from an observed pattern of some sort. That might help determine if this placement, in the account popover, is the best for what you intend.

Here are some other resources that would inform this flow and its particularities (like OS specifics, conflicts, etc):

• https://w3c.github.io/aria-practices/#kbd_shortcuts_design_where
• https://www.nngroup.com/articles/ui-copy/

Let us know if this is helpful!

[Fazle-Jahangir]

I appreciate the suggestions and will take them on board. No research has been for this, my comment was based an observation made by the engineer that shortcuts aren't remapped often. I will check those links you shared however.

Can I ask about how long it would take for you to review the icon? Just so that I can update the team set expectations.

[gloriliale]

Hi @Fazle-Jahangir! It looks like the keyboard icon is something we'd like to add to Paste! Please follow the guidance here on adding it to Figma and we'll get it published. Thank you!