As an advisor on the terminal emulator I look at the computer systems of the businesses that I visit on a regular basis, but spaced apart over the course of many years. You know these businesses yourselves – the dentist, the optician, the car shop that changes your oil, perhaps the bank or your financial advisor. You might see them every 3 to 6 months, or a few times over a many years.
In my work I’ve watched them all 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
* What’s next?
Tab, Tab, Enter is just the beginning. Currently, most sites are using mice. We need more to be using keyboards.
If you work on the counter for airline customer service, you’re not going to want to have to touch the mouse often. Every keystroke matters. The interaction model for airline workers apps needs to be short, crisp and keyboard based because they’re using it all day. This is one of the reasons that every airline counter system I’ve ever seen is either a terminal itself or a browser window into a terminal.
When web sites start becoming web applications that are used daily they need to have keyboard shortcuts. More and more if you app doesn’t have them you’re limiting your audience.
All of my favourite web applications use shortcuts, and you’ll notice that they mostly follow a few common patterns:
J, K to move up and down
Enter to select or expand
G + some letter to Navigate
/ for Search
? for keyboard help
There are also two kinds of hotkeys on the web. There are “access keys” which have been in HTML forever and then there are “hotkeys” that are specific to the application and often done with JavaScript bindings or jQuery plugins like jquery.hotkeys. Applying those takes next to no effort and can pay off massively with your most astute customers. Logical hotkeys can also turn beginners into enthusiasts.
There’s literally no reason to not apply keyboard hot-keys in your web application other than the fact that you’ve probably forgotten it’s important.
Here are some great examples of web applications with good keyboard support.
I use Twitter keyboard shortcuts all the time. You needn’t learn them all. Just use . for refresh, / for search and G-R for replies and you’ll already be ahead of the game.
Gmail
Gmail really gets my vote for proving that hotkeys on the web can be done elegantly and work perfectly. It might take you a day or two but once you learn how to operate your email with only your keyboard you’ll be amazed how fast you can get in, out and back to work.
I use J and K to navigate, X to select then # to delete or E to archive. Bish, bash, bosh.
Hotmail
While Hotmail drops the box by not including a help popup for the ? button, they still support their own keyboard shortcuts, and familiar shortcuts from Gmail and Yahoo.
GitHub
Another example of a site you might use for hours if it’s part of your job. Github does support ? for help and gives loads of other shortcuts. Theirs are also J and K for moving up and down as well as X for toggling selection just like Gmail, C for great, and / for search. See how a pattern is developing?
Remember The Milk
Remember The Milk is a web-based ‘to do’ application that has lots of mobile versions. However, they are most well known for their web application which was ground-breaking 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.
Asana
Asana is a team based, shared ‘to do’ list for projects and project management. They are majorly focused on keyboard support and use it in all their promotional videos.
Trello
Trello’s up and coming project management board software also relies heavily on hotkeys.
YouTrack
YouTrack from JetBrains says, “YouTrack is a keyboard-centric application and provides enough keyboard support to let you forget about using the mouse in most cases.” Sassy!
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 call !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 “young b!” or Google with “young g!” or hundreds of other sites using a similar shortcut.
Now THAT’S keyboard friendly!
In conclusion, whether you like it or not, there is a standard brewing on the web. Not only should you have access key support (you should have done this years ago!) but also an extensive keyboard shortcut list if you want your users to spend serious time using your application. Good shortcuts lead to happy, engaged users.
