{"id":88,"date":"2013-11-14T13:32:12","date_gmt":"2013-11-14T20:32:12","guid":{"rendered":"http:\/\/xiaan.com\/blog\/?p=88"},"modified":"2024-02-09T15:16:43","modified_gmt":"2024-02-09T22:16:43","slug":"keyboard-shortcuts-with-mousetrap","status":"publish","type":"post","link":"https:\/\/xiaan.com\/blog\/2013\/11\/keyboard-shortcuts-with-mousetrap\/","title":{"rendered":"Keyboard shortcuts with Mousetrap"},"content":{"rendered":"\n<p>As a JIRA power user, I&#8217;m impressed by the dizzying array of keyboard shortcuts that are available throughout the product. It was the clear inspiration for a similar integration I added to a recent project, using a great little JavaScript library called Mousetrap.<br \/><\/p>\n\n\n\n<!--more-->\n\n\n\n<p><br \/>I must confess to being a heavy keyboard user. When a keyboard shortcut exists for a function that would otherwise require mouse interaction, I consistently favor the keyboard for a number of reasons. <strong>It&#8217;s more precise.<\/strong> I find mouse movements and clicks more prone to error. <strong>It&#8217;s faster.<\/strong> My hands are normally on the keyboard, the act of moving a hand to the mouse and then navigating to a UI element takes longer. Depending on the program (Adobe Illustrator is my favorite example), using one hand on the keyboard and the other on the mouse is the hallmark of a true power user.<\/p>\n\n\n\n<p>Uploading tutorials about keyboard shortcuts to Rumble can offer various benefits such as enhancing productivity and efficiency, saving time, improving user experience and skills. Check this site&nbsp;<a href=\"https:\/\/themarketingheaven.com\/buy-rumble-views\/\">https:\/\/themarketingheaven.com\/buy-rumble-views\/<\/a> to purchase Rumble views.<\/p>\n\n\n\n<p>Of course, I&#8217;m not the first to argue about keyboard vs mouse. In an AskTog column, Bruce Tognazzini found that while users felt the keyboard was faster, the mouse was <i>actually<\/i> faster. Mind you, that was in 1989. Jeff Atwood did a nice follow up article, where he said (emphasis by Jeff):<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>However, as Tog himself notes, <strong>when the keyboard shortcut is already memorized and well understood, it&#8217;s a clear productivity win<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n<p>Given my experience with similar keyboard shortcut functionality on a recent project, it&#8217;s certainly the case. What I found:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Start small but plan well.<\/strong> You don&#8217;t have to go crazy with the quantity of shortcuts. Either with empirical analysis of access logs or other heuristics, rank your links from most useful\/common to least. Work out what the shortcuts might be, and see where patterns emerge.<\/li>\n\n\n\n<li><strong>Follow conventions.<\/strong> After inspecting a number of other applications, I chose some of the same keyboard shortcuts, including:\n<ul class=\"wp-block-list\">\n<li><code>?<\/code> for showing a list of the keyboard shortcuts.<\/li>\n\n\n\n<li><code>\/<\/code> for focusing in a search form field.<\/li>\n\n\n\n<li><code>h<\/code> for toggling contextual help.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Be contextual. <\/strong>We chose to use the <code>e<\/code> shortcut to mean &#8220;edit this thing,&#8221; which changed depending on the current page of the application.<\/li>\n\n\n\n<li><strong>Document well.<\/strong> Reference keyboard shortcuts everywhere you can in the documentation and contextual help. For example, include tooltips on menu navigation items.<\/li>\n\n\n\n<li><strong>It&#8217;s ok to be selfish.<\/strong> Once implemented, some of my favorite keyboard shortcuts made my product demo workflows much smoother. I was able to bypass 4 or 5-click sequences with a single keyboard combination that made the demo feel more fluid, clear, and simple.<\/li>\n<\/ul>\n\n\n\n<p>Using Mousetrap was very straightforward. Add the JavaScript dependency, and add shortcuts in the following format:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#24292e;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:16px 0 0 16px;width:100%;text-align:left;background-color:#ffffff\"><span style=\"background:#2f363c;padding:0.3rem 0.5rem 0.2rem;border-radius:1rem;font-size:0.8em;line-height:1;height:1.25rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;color:#ffffff\">JavaScript<\/span><\/span><span role=\"button\" tabindex=\"0\" data-code=\"Mousetrap.bind('g h', function() { \/* do something *\/ });\" style=\"color:#24292e;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-light\" style=\"background-color: #fff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #24292E\">Mousetrap.<\/span><span style=\"color: #6F42C1\">bind<\/span><span style=\"color: #24292E\">(<\/span><span style=\"color: #032F62\">&#39;g h&#39;<\/span><span style=\"color: #24292E\">, <\/span><span style=\"color: #D73A49\">function<\/span><span style=\"color: #24292E\">() { <\/span><span style=\"color: #6A737D\">\/* do something *\/<\/span><span style=\"color: #24292E\"> });<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>In our application, we bound the <code>g h<\/code> shortcut to mean <em>go home<\/em>, and added about 20 other shortcuts. It&#8217;s a pattern I&#8217;ll implement as I can in every project moving forward. Here are some links to get you started with your research:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/confluence.atlassian.com\/display\/JIRA\/Using+Keyboard+Shortcuts\">JIRA Keyboard Shortcuts<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/support.apple.com\/kb\/ht1343\">OS X Keyboard Shortcuts<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/support.google.com\/mail\/answer\/6594?hl=en\">Gmail Keyboard Shortcuts<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/codex.wordpress.org\/Keyboard_Shortcuts\">WordPress Keyboard Shortcuts<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/support.microsoft.com\/kb\/290938\">Microsoft Word Keyboard Shortcuts<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>As a JIRA power user, I&#8217;m impressed by the dizzying array of keyboard shortcuts that are available throughout the product. It was the clear inspiration for a similar integration I added to a recent project, using a great little JavaScript library called Mousetrap.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[12,15,9],"tags":[],"class_list":["post-88","post","type-post","status-publish","format-standard","hentry","category-javascript","category-patterns","category-usability"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p467qb-1q","jetpack_likes_enabled":false,"_links":{"self":[{"href":"https:\/\/xiaan.com\/blog\/wp-json\/wp\/v2\/posts\/88","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xiaan.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xiaan.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xiaan.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xiaan.com\/blog\/wp-json\/wp\/v2\/comments?post=88"}],"version-history":[{"count":6,"href":"https:\/\/xiaan.com\/blog\/wp-json\/wp\/v2\/posts\/88\/revisions"}],"predecessor-version":[{"id":237,"href":"https:\/\/xiaan.com\/blog\/wp-json\/wp\/v2\/posts\/88\/revisions\/237"}],"wp:attachment":[{"href":"https:\/\/xiaan.com\/blog\/wp-json\/wp\/v2\/media?parent=88"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xiaan.com\/blog\/wp-json\/wp\/v2\/categories?post=88"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xiaan.com\/blog\/wp-json\/wp\/v2\/tags?post=88"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}