Our toolbar has a keyboard icon on the right, which, when hovered over, displays a large keyboard reference tooltip. Clicking the icon opens the settings' dialog on the tab for keyboard bindings.

My feeling is that the icon does not intuitively indicate the functionalities. How can we fix this?

Screen shot

  • Wouldn't it be better to put the whole thing in a settings palette along with other global settings? – Andrew Martin Feb 21 '17 at 10:19
  • @AndrewMartin What is a settings palette? – Adám Feb 21 '17 at 10:22
  • The window where the user manages all the settings for the product/system you are designing - often has things like Username and password management, language settings, appearance settings, keyboard shortcut management, etc – Andrew Martin Feb 21 '17 at 10:38
  • @AndrewMartin Oh, that is in fact already the case. See updated OP. The question here is regarding the hint, not the settings interface. – Adám Feb 21 '17 at 10:39
  • 2
    You're still going to be covering a large area of the screen with a hover interaction - If you want to make it visible over the main screen I would suggest you make it a pull out palette that the user can open and close with a positive click rather than a hover – Andrew Martin Feb 21 '17 at 10:52

Your UI likely should not have a hover interaction or a tooltip for a display this large. It would be benefited by using a click interaction and a modal with scrolling and search. This would allow you to offer all your shortcuts in a non-overwhelming way. I have set up a web demo of a possible implementation of that concept but it uses some modern code and may not run in all browsers (I have tested on latest chrome and edge versions).

The important things to note from the demo are the spacing: which allows easy scanning of the text, the hover effect: which keeps focus to the line at the expected place, and the differentiation between monospace and non-monospace font: which also allows for easier reading.

Many places do this but the best example I can think of is the Atom code editor. They offer a complete search of the keyboard shortcuts and their UI allows for easy scanning. This makes for a pleasant experience for the user.

Please let me know if you need a gif of the functionality in case you aren't able to access the webpage.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.