Scott Hanselman

The Web is the new Terminal: Are you using the Web's Keyboard Shortcuts and Hotkeys?

February 02, 2012 Comment on this post [45] Posted in HTML5
Sponsored By

My gmail looks like a terminal if you squint

A V100 Terminal - Creative Commons via blakespot on FlickrNUI is OUI, Dear Reader. About eight years ago I blogged about "text mode" and said (if I may be silly and quote myself):

"I’m just saying that my Tab,Tab,Tab,Enter will beat your Click,Tab,Alt-F,O,Click,Double-Click, more often than not." - Me

I like to look at the computer systems of the businesses that I visit on a regular but spaced apart basis over the course of years. You know these businesses - your dentist, your eye doctor, the car shop that changes your oil, perhaps your bank or finance person. You see them every 3 to 6 months, or perhaps over a many years.

At my automotive shop, I watch them move from:

  • Keyboard heavy, very fast
    • VT100 Dumb Terminal
    • Windows running a VT100 Dumb Terminal Emulator
    • Netscape with Java running a VT100 Dumb Terminal plugin
  • Mouse heavy, very slow
    • Ugly gray HTML application in Netscape
    • Pretty AJAXy HTML application in Firefox
  • Keyboard heavy, very fast
    • Very terminal-like AJAXY HTML application in Firefox
    • ???

Tab, Tab, Enter is just the start. I propose that the interaction model for this "timeline" looks like somewhat like this.

Bell curve showing Mouse and Keyboard on Y Axis and Time on X axis. Curve shows most sites use mice. We need more using keyboards.

If you are an airline counter customer service person, you're going to want to touch the mouse as little as possible. Every keystroke counts, in fact, and this is one of the reason that every airline counter system I've ever seen is either a terminal itself or a browser window into a terminal. The interaction model for an airline workers apps needs to be terse and crisp and keyboard based because they are using it all day.

When Web Sites start to become Web Applications that are used every day they have to have keyboard shortcuts. More and more if you app doesn't have them you're going to limit your audience.

All my favorite web applications use keyboard shortcuts, and you'll notice that they are coalescing around a few common patterns:

  • J, K to move up and down
  • Enter to select or expand
  • G + some letter to Navigate (Goto)
  • / for Search
  • ? for keyboard help

There are two kinds of hotkeys on the web, though. There are "accesskeys" which have been in HTML since forever, then there's "hotkeys" that are application specific and often done with JavaScript bindings or jQuery plugins like jquery.hotkeys. Implementing these takes virutally no effort and can pay off hugely with your most discerning customers. Logical hotkeys can also turn beginners into enthusiasts.

<gratuitous bold="true">There is literally no reason to not implement keyboard hot-keys in your web application other than you've likely forgotten it's important.</gratuitous>

Access Keys

Implementing accesskey requires only the will and some thought.

<label for="homePhone">Home phone:</label>
<input name="HomePhone" type="text" maxlength="20" id="homePhone" accesskey="H" title="Home phone" class="text-box" />

Here we've made "ALT-H" go to the Home text box. Do you want awesome and automatic "KeyTips" to appear when the user presses ALT? Use the lovely KeyTips jQuery plugin (on NuGet also).

KeyTips for accesskeys as a jQuery plugin

Access Keys are very easy to setup and now give your 8-hours-a-day data entry user a huge gift and keeps their hands off the mouse. Make sure you do some user experience testing - even if only with yourself - and do some standard tasks with your web application and count both keystrokes and mouse touches.

Hot Keys

Slightly more complicated is adding Hot Keys via JavaScript but only slightly. John Resig's jQuery.Hotkeys is a simple plugin that lets you add and remove keyboard handlers for events in any browser supported combination.

// e.g. replace '$' sign with 'EUR'
$('input.foo').bind('keyup', '$', function(){
this.value = this.value.replace('$', 'EUR');
});

You can bind with selectors so that keys are captured on specific inputs, like the replace/expand example above, or you can bind (and unbind to the document with optional modifiers:

$(document).bind('keydown', 'ctrl+g', myfunc);

Sushant Bhatia has a great blog post (coincidentally written within minutes of mine, great minds think alike!) that talks about the importance of keyboard UX and how hotkeys are always preferable over tab, tab, tab.

Example Web Applications with Awesome Keyboard support

Here's some of the best examples I (and you, thanks Dear Reader for helping!) could find of great Keyboard support in Web Applications.

Twitter

I use these Twitter keyboard shortcuts all the time. You don't need to learn them all. Just use . for refresh, / for search and G-R for replies and you're already ahead of the pack.

Gmail

Gmail really gets credit for proving, in my opinion, that hotkeys on the web can be done elegantly and "just work." It may take a day or two but once you learn how to triage your email with just your keyboard you'll be surprised how fast you can get in and out and back to work.

I use J and K to navigate, X to select then # to delete or E to archive. Bam, bam, bam.

Gmail Hotkeys

Hotmail

Hotmail? Yes, while Hotmail drops the box by not including a help popup for the ? button, Hotmail not only supports their own keyboard shortcuts, but also familiar shortcuts from Gmail and Yahoo.

Windows Live Hotmail Hotkeys and Keyboard shortcuts

GitHub

Another example of a site you may be on for hours if it's part of your work. Github also supports ? for help and gives lots of shortcuts. Theirs are also J and K (which have meant up and down for folks familiar with vi and *nix editors) for moving up and down as well as X for toggling selection like Gmail, C for great, and / for search. You see how a pattern is developing on its own?

Some GitHub keyboard shortcuts

There doesn't appear to be a Help page with the list of Github keyboard shortcuts so for now, go over there, login and press ? to explore the complete list.

Jira Bug Tracker

Jira from Atlassian is a popular bug tracker with this same keyboard model. Every web application needs to include a web popup like this when ? is pressed.

Some Jira shortcuts

Remember The Milk

Remember The Milk is a web-based todo application with lots of mobile versions as well. However, they are best known by their web application which was very innovative when it first came out.

In fact, they were the first web application I ever used that actively marketed their application as being keyboard friendly. I love that we're at a time in the web where that is possible.

Remember The Milk has an extensive list of keyboad shortcuts

Asana

Asana is a team-focused shared todo list for projects and project management. They are super-focused on keyboard support and use it in all their promotional video AND think it is so important that they keep on the screen all the time! Classy.

Asana's Keyboard shortcuts are front and center

And they have LOTS, very logical and organized.

image

Trello

Trello's up and coming project management board software also leans heavily on hotkeys.

image

YouTrack

YouTrack from JetBrains says this about itself: "YouTrack is a keyboard-centric application and provides enough keyboard support to let you forget about using the mouse in most cases." Sassy!

Personally, I'm moving away from the Ctrl-Alt-This and That and prefer simpler hotkeys like these for YouTrack.

A subset of YouTrack Hotkeys

And as this isn't an exhaustive list but rather a long list to make a point, how about DuckDuckGo.

DuckDuckGo

The little search engine that could, DuckDuckGo includes keyboard shortcuts not just to move around search results but also another unusual keyboard-centric feature they called !Bang.

I keep DuckDuckGo.com as my home page. If I want to search them, I search. If I want to search Bing I type "hanselman b!" or Google with "hanselman g!" or hundreds of other sites like "hanselman image!" or even super specific site searches like "hanselman csharp!"

Now THAT'S keyboard friendly.

image

Conclusion

Like it or not, there's a standard brewing on the web. Not only should you have accesskey support (should have done this years ago) but also extensive keyboard shortcuts if you expect your users to spend serious time with your application.

At the very least, I think it's fair to say that these are de facto standard shortcuts now on the web and you should think about what that means for your application:

  • J, K to move up and down
  • Enter to select or expand
  • G + some letter to Navigate (Goto)
  • / for Search
  • ? for keyboard help

Good shortcuts mean happy and engaged users.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Hosting By
Hosted in an Azure App Service
February 02, 2012 5:40
I thought this looked like a very promising keyboard shortcut JS library, with a better API and feature set (like scoping) than the Hotkeys jQuery plugin: Keymaster
February 02, 2012 6:31
It's not just websites that need to provide (consistent) support for hotkeys.

I'm a keyboard person myself, and use the keyboard to navigate menus in Windows, as it's a lot faster than reaching for the mouse.
I am still very annoyed at Microsoft for all the changes they made moving from Office 2003 to Office 2007 - a lot of the keyboard shortcuts no longer work, and it had a big impact on my productivity when I upgraded to Office 2007!
February 02, 2012 7:29
Hanselman quality insight.
February 02, 2012 8:21
Thank you Scott. I love to see keyboard promotion. I cannot live on the web without the FireFox extension Vimperator. It's well worth the effort to learn. I haven't found a comparable experience elsewhere.

@Martin I found myself in the same boat when we upgraded to Windows 7 last year. I still cannot believe there isn't a hotkey for the copy/replace dialog! My home machine is Ubuntu. I was excited to learn they are moving in a direction I prefer with HUD.
February 02, 2012 11:31
I'm really starting to appreciate keyboard shortcuts in web applications, but unfortunately not all shortcuts work on azerty keyboards.

To delete a message in GMail you can use the #-key. To type that character on a (Belgian) azerty keyboard, you need to type AltGr+3. That doesn't get recognized. The same for characters like [, ], ´, and `.
February 02, 2012 11:46
I quit using Opera a couple of years ago, but I still miss the built-in keyboard support. Especially the Shift+arrow-key ones.
February 02, 2012 11:49
As a keyboardist in most desktop applications, I've found web keyboard short-cuts intrinsically broken because ctrl-S always does the wrong thing -- I want to save what I'm writing several orders of magnitude more often than I want to save a web-app page -- which throws me back into mouse mode.
February 02, 2012 12:12
Amen! I think having ? map to a keyboard shortcut guide is a really nice touch of polish for a site.
February 02, 2012 12:35
Isn't the problem that the ones using these small nifty keyboard shortcuts are us the "developers"? I've been trying to teach my parents and grand parents to use browser tabs now (they range in the span from 45-70) for about a year instead of opening up a new browser window, it seems like it's getting through finally but I don't want to think about how long time it's going to take me to start teaching them about ctrl + t! and while we still got extremely user unfriendly UIs isn't this the place where we should put our effort in? I generally would rather see that my web app was usable by anyone from the age of 5-85 instead of 15~45.

maybe I've misunderstood the whole post, but in general I do believe a really good UI > nice keyboard shortcuts for the average user.

The best example of this is every time facebook change their UI at least my feed gets flooded with "OMG facebook I can't find anything!1!!?" messages. Adding new shortcuts and stuff would probably just create more confusion to that angry "mob" and what about the mac users they have no ALT!

Not saying that shortcuts are bad I love them myself personally (can't imagine VS without my shortcuts <3) but is the world ready for these yet?
February 02, 2012 12:37
lol as I read this part:


J, K to move up and down
Enter to select or expand
G + some letter to Navigate (Goto)
/ for Search
? for keyboard help

I tried them all and none of them worked (which I kind of expected.. but thought at least the search would work) and it was a little sad..

then I read this part

<gratuitous bold="true">There is literally no reason to not implement keyboard hot-keys in your web application other than you've likely forgotten it's important.</gratuitous>

and thought it was pretty ironic :P
February 02, 2012 13:08
Who came up with the crazy idea of using J/K for Down/Up ? It doesn't make any sense, these keys are not even above each other but they're side by side... It's probably the least intuitive keyboard shortcut I ever saw, but it's the most widely spread. I guess it must be a VI thing...
February 02, 2012 13:36
@Thomas It's about efficiency, not intuitivity. As touch typists will confirm, once you've got the hang of it, it's much more comfortable than the "intuitive" two-finger keyboard pecking input method.

And that's why hjkl, Vim's most important movement commands, are all in the "home row".
February 02, 2012 14:54
And if someone don't why they don't simply use the arrow keys for next or previous:

http://www.labnol.org/internet/j-k-keyboard-shortcuts/20779/

:p
February 02, 2012 15:02
I seem to remember an age ago one of the core Microsoft Certification exams emphasised the importance of keyboard short-cuts and correct keyboard navigation. Since then, the web, and I'm looked at as odd because I 'lose it' when the 'tab order' hasn't been specified properly.
February 02, 2012 15:24
Excellent read, I just passed this onto a colleague who was doing a little research on this topic.
February 02, 2012 15:55
I dunno.

After a mis-spent youth playing far too much Quake 3 and Unreal Tournament, I can click move the mouse quicker and click than remember what key does what.

For simple things like tabs on form it is quicker.
February 02, 2012 16:08
And now if only someone would tell google that hijacking all the keys on their search page is so damn annoying... I try using my browser's keyboard shortcuts, but Google's search box is more important. Argh.
February 02, 2012 17:27
I dislike relying on each website to implement a decent set of keyboard shortcuts, and instead use a generic set provided by the Chrome plugin Vimium. http://vimium.github.com/ I don't have to memorize special keys for each site, and I can count on the provided ones to be present on all pages. Very useful.
February 02, 2012 18:07
Its interesting that you mention this. I love keyboard shortcuts for web apps.

In my first real job out of college, I worked on a project that converted a "green screen" terminal app into a web app. A lot of it was data entry oriented. I went absolutely nuts when you couldn't tab to different entry fields in forms in the proper order. My bosses thought I was wasting time and condemned me for it. I always held a grudge about that, thanks for validating my point of view after 10 years!
February 02, 2012 18:14
This reminds me, it's good to point out: use the right keys! My example is a desktop app but the same logic applies to any hotkey app.

I have BeyondCompare 3 installed and by default these are the key bindings:

Ctrl-R - Move change to right file
Ctrl-L - Move change to left file
Ctrl-N - Move to next change

Sounds great! Except it sucks in terms of speed. I change it to the more useful and incredibly efficient:

Ctrl-Right-Arrow
Ctrl-Left-Arrow
Ctrl-Down-Arrow

Now I can merge like an Olympic runner without moving my fingers more than a couple centimeters.
February 02, 2012 20:09
@FranciscoNoriega Blog != web app.
February 03, 2012 1:23
@brainmkoser Well its technicality... and since he is the kind of person that likes to tinker and code, I assume he would have done that for his blog, specially with the parts I mentioned.

I think its a thin line that divides it.. for all purposes 9 Gag is a blog (photo blog) but it has keyboard shortcuts

http://9gag.com/#keyboard

and as for the use in this blog, well it could be Next/Previous post, search, up/down comments, Ctrl+R or so to get the cursor all the way down to the Comment/Reply box, etc.

Not really necessary by any mean, but it'd would have been fun if they had worked.

An extension I really like is called gleeBox which adds keyboard shurtcuts to any webpage, webapp or not. ("gleeBox is an experimental project that takes a keyboard-centric approach to navigating the web" -http://thegleebox.com/)
February 03, 2012 2:16
@Haacked, did you add the shortcuts on Github? Are you setting things in order over there? ;)
February 03, 2012 4:28
This blog needs to support replies to comments
February 03, 2012 15:37
I never use shortcuts in web sites/apps, and most of my non-tech friends don't even know that shortcuts exist (apart from the ones for copy/cut/paste).

Also, I find quite strange some "standard" shortcuts:
- Enter, is standard for "submit form", not for select/expand
- Up/Down should already be achieved with up/down arrows or page up/down
February 03, 2012 19:48
I agree with everything in this post and you are right that it doesn't take much effort to add keyboard shortcuts to your web app and create an experience that satisfies all users. I will follow this advice as I progress, but I have a different point of view: I am both a Windows and Mac user and I find that I act completely different between machines. In "Windows mode," I'm with you 100%, but in "Mac mode," I interact differently. When I'm on my Mac, all of the usual shortcuts work everywhere and these shortcuts use command (which is in a much better place than control). I find that my left hand is ALWAYS on the keyboard as most shortcuts are there (cmd-w, cmd-tab, cmd-`, cmd-q, etc..) while my right hand stays on the trackpad. The fact that my shortcuts are on one side of the keyboard along with gestures with the trackpad means that I don't feel that I gain much between keyboard and mouse.

It's also worth noting that my dev tools on my Mac are different from those on my Windows machines. Even when I'm in my developer mindset (rather than my browsing mindset), I use the same shortcuts and gestures. I don't use ctrl-shift-b, ctrl-space, ctrl-., or the function keys.

Again, I agree and appreciate what you are saying; I just wanted to offer my perspective as a Mac user. Keyboard support is not something that I would have considered so thank you! :D
February 04, 2012 4:22
@Daniel Its not just developers who use shortcuts, Its people with little or no sight or people who find it difficult to use a mouse.

Keyboard usage is the only way some people with disabilities can use a computer.
February 04, 2012 10:42
Dear Sir, In the excel sheet, if there is 2 in Column B3,8 in Column C3, 10 in Column D3, 15 in Column in E3, 25 in Column F3 and likewise (All are Horizontally). So I want the Same in Vertically) I mean to say that whatever no.s horizontally I want the same no. vertically and whatever no.s vertically I want the same no. horizontally. Sir Please send me this to my email ID i.e. bhaiswarpravin@gmail.com
February 04, 2012 19:18
When I was doing a lot of LOB applications at my old job, they keyboard entry was critical, as well has having proper tab order, another thing easily accomplished through HTML.

Using Feedly's keyboard shortcuts is what has really gotten me back into keyboard work with the web browser, it's nice to see some standards being developed, I just have to remember to check for them 8^D
February 05, 2012 6:47
Great article. For those of you who feel that only us nerds are the ones who use the keyboard shortcuts, I've got a company full of CompuTards(aka "lay" persons) who frequently ask for new keyboard shortcuts in our internal web applications.

Thanks for putting this together Scott.
February 06, 2012 18:47
Thanks for the jquery links, will save me huge amts of time.
Nitpick: A little ironic for superbowl weekend: one drops balls, not boxes.
February 09, 2012 2:57
You missed the most important requirement for a good contact page - emit HTML so google autofill works. No need to hot key around for contact info when Google autofill can complete it in one mouse click.
February 09, 2012 14:26
Scott,

The reason that YouTrack doesn't use one character letters for many of the shortcuts is because most of the functionality in YouTrack is via the Command window which is invoked as you start typing on the keyboard. So for instance if you want to close an issue, you can just start typing "fi.." and it will identify it as fixed, etc. The whole concept of Commands is extremely powerful and doesn't even require that you remember shortcuts. It's actually very cool if I may add :)
February 09, 2012 16:21

Agree! I wish there's a common set of keyboard shortcuts for all sites. Much like the common touch gestures we do on touch devices nowadays.

February 09, 2012 22:33
Hi, Vimperator & Vimium is cool!
February 10, 2012 4:03
Hey Scott great article. You make an excellent point in the cases where people do lots of data entry and even browsing like with twitter and gmail. Most people in these situations will be using laptops and desktops.
Do you think as the percentage of time that people use mobile devices for computing climbs that there may arise a need for "Hot Gestures" on different sites?

I spend lots of time browsing some of these sites on my Windows Phone, and a majority of that time is pinching and zooming looking for the button I need to hit to login or navigate to a particular page. I suppose it could also be a problem of sites not being optimized for mobile with big shiny buttons that say "login" when browsing via my phone.
February 19, 2012 23:03
mouse? what's a mouse?

when MS Windows first came out, few knew about this critter thing that had evolved over a Xerox PARC ... debates about the correct plural "mouses" versus "mice" were somewhat common.

when IBM first showed members of CIPS (Canadian Information Processing Society) it's new PC (the AT?), I felt sorry for IBM because another company presenting that evening was Apple introducing Lisa.

in the last days of Win 3.x, i worked on contract at MS PSS (Product Support Services) ... after about six months, one of the smartest techs at MS Canada at that time, in a casual conversation, stated that the keyboard is faster than the mouse. since that time, i seldom leave the keyboard if i can help it.

not only browser based applications benefit from keyboard shortcuts ... a vs2010 favourite of mine is Shift+Alt+Up Arrow or Down Arrow to quickly modify a column of code; Ctrl+k,c to comment out a line, et cetera.

In Outlook and Outlook Express, Ctrl+Shift+i quickly gets me back to the inbox.

While not every task can be easily done without a mouse (for example drawing with the brick), it irks whenever I encounter any application where the developer(s) have chosen to ignore the existence of the keyboard.

Sometimes those who should imho know better fail to stick will standard intuitive choices ... for example, Ctrl+f for "find", F3 for "repeat find".

One thing i'd like to see everywhere is the ability for the end user to map her/his own shortcuts ... for example, Ctrl+r for "find/replace" instead of "Ctrl+h".
Thank you Scott ... this will be another of your articles that I will be frequently quoting.
February 24, 2012 19:39
Great post. Nothing more painful than watching a fellow developer reach for the mouse when a simple keyboard shortcut will do. Incredibly inefficient, demonstrably so. Also true for the apps we build. Keyboard operation is often the furthest thing from some folks minds when designing UI. Even many apps doc only talk about "clicking" on this or that, when keyboard alternatives are available.
February 25, 2012 9:51
At the risk of unmasking my barely concealed arrogance on the subject about 3 years ago I personally recommended to The Remember the Milk team that they change their shortcut keys to follow the J,K navigation trend I was already using in Gmail. To their credit this was changed in short order. I can rest easy now. My work here is done. :-)
March 17, 2012 21:27
This is a great resource. Yeah there are a lot of helpful tricks out there, you just need to decide what method will be the most efficient. I stick close to my keyword and only reach for the mouse when I absolutely have to.
April 03, 2012 15:43
Matt Brailsford's Hot keys plugin for Knockout.JS
http://blog.mattbrailsford.com/2012/02/10/introducing-knockout-hotkeys/ also looks very promising.

It feels like a better approach too. you can add the hotkeys to the design of your web-app and views(which is where I think they should be done) rather than having a javascript function somewhere with a bunch of selectors to bind the keys to the correct input elements.

just my two cents worth :-)
Doga
April 20, 2012 14:34
Nice blog post thanks for sharing it with us.
April 20, 2012 23:42
Awesome overview article! Those are exactly the reasons why we started with KeyRocket, to take the effort out of learning keyboard shortcuts. So we all can just pick up the ones that would save us time.
September 13, 2012 19:29
Hello. This is a good trend, but I find it chaotic at this early stage without widely-adopted standards. Personally, I have my own custom keybindings set up in Firefox and I it drives me crazy when they get overridden by individual sites'. GitHub's shortcuts in particular annoy me very much. Are you aware of any way to disable or (better yet) customize them? Thanks.
November 29, 2012 21:35
I have been pounding the table for this @ my work for two years and this article finally gave the arguement the clarity I could not. Thankyou. I really like the small list of standards you gave here. Are there standards for keyboard shortcuts? Perhaps you could pad that list out..
thanks again.
MDE

Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.