Comment concevoir un raccourci clavier pour passer la souris sur?
Notre barre d'outils comporte une icône de clavier à droite qui, une fois survolée, affiche une grande info-bulle de référence de clavier. Cliquez sur l'icône pour ouvrir la boîte de dialogue des paramètres dans l'onglet des liaisons clavier.
Mon sentiment est que l'icône n'indique pas intuitivement les fonctionnalités. Comment pouvons-nous régler ceci?
Votre interface utilisateur ne devrait probablement pas avoir d'interaction de survol ou d'infobulle pour un affichage de cette taille. Il serait avantageux d'utiliser une interaction par clic et un modal avec défilement et recherche. Cela vous permettrait de proposer tous vos raccourcis de manière non écrasante. J'ai mis en place une démo Web d'une implémentation possible de ce concept, mais il utilise du code moderne et peut ne pas fonctionner dans tous les navigateurs (j'ai testé sur les dernières chrome et versions Edge).
Les points importants à noter de la démo sont l'espacement: qui permet de numériser facilement le texte, l'effet de survol: qui maintient le focus sur la ligne à l'endroit attendu, et la différenciation entre les polices monospace et non monospace: qui permet également lecture plus facile.
De nombreux endroits le font, mais le meilleur exemple auquel je peux penser est l'éditeur de code Atom. Ils offrent une recherche complète des raccourcis clavier et leur interface utilisateur permet une numérisation facile. Cela en fait une expérience agréable pour l'utilisateur.
http://codepen.io/CKH4/pen/PpNKoB/
Veuillez me faire savoir si vous avez besoin d'un gif de la fonctionnalité au cas où vous ne pourriez pas accéder à la page Web.