JW’s blog

“Everything in the UI should be accessible with the keyboard.” A simple rule, and yet do so many applications break it. Keybindings may be hard to learn, but once you know them they increase your productivity enormously. So why don’t more applications include an easy way to navigate through UI using the keyboard?

“Caps Lock”, by DeclanTM

A bit of discussion was sparked recently on programming.reddit.com when Vincent wrote a post (the discussion on reddit) on how keyboard-navigated interfaces are way faster than mouse-navigated interfaces. He wrote how, after a short time, users will quickly learn the tab order and specific keybindings of the application, and be able to execute common tasks in just a few seconds.

However, as people trying to learn how to work with Emacs or Vim may have already seen, learning these keystrokes can be quite a hell. Recently, I started playing with Lisp and Emacs, and I still have a hard time remembering how to do simple tasks (like closing Emacs or opening a file). Since I’m using the graphical version of GNU Emacs, I can luckily still quickly look up the key strokes to open a file in the File menu. This principle is what other applications should depend on: when making everything accessible via the keyboard, this shouldn’t mean they have to abandon the GUI and turn to an interface similar to Emacs’ or Vim’s, or to a command line. They can easily unify the keyboard navigation with the graphical interface. Today’s technologies, such as Qt Designer or Cocoa, make it very straightforward to add keyboard shortcuts to the application. And, using something as simple as an underline will make it clear to the user what key they have to use to get to a specific menu or item.

Even on the web, adding accesskeys is a breeze. HTML has the attributes accesskey and tabindex to enable the use the keyboard. Using a <span class="accesskey"> around the letter used as accesskey combined with the CSS .accesskey { text-decoration: underline; }, you can make it immediately clear to users what key they need to press to get to a link or input field. Konqueror goes even further: when you press the Control key, a small tooltip appears next to each link or input field with an accesskey in it. This accesskey is the one defined in the HTML code, or if none is defined one not used anywhere else is chosen. The Hit-a-Hint extension provides a similar function for Firefox.

And this is not even far-going: applications like Remember The Milk have an even larger support for keyboard shortcuts. In Remember The Milk, if I want to create a new task, I just press t, enter the name of my task, press d to enter the due date (which can be “tod” for today or “sun” for next Sunday), and press 1 to 3 to assign the task a priority. In a few seconds, I have created a new task, which means I’ll use Remember The Milk more, enter all my tasks in it, even the small ones, which increases my productivity even more (since Remember The Milk is an online todo list manager). Remember The Milk is easily navigable via the keyboard, while less experienced users can still use the mouse. It can be used by both newbies and experts, unlike for example Emacs, which is hard to use for newbies.

Who knows Alt+Left Arrow moves you to the previous page in IE?
Who knows Ctrl+A moves you to the beginning of a line in Emacs?

So, in conclusion, using the mouse takes a lot of time, but it is easier to use when faced with an application you don’t know. Using the keyboard is faster, but it’s harder to learn. You want maximum usability for your users? Make the complete interface accessible via both the mouse and the keyboard. Newbies will find the mouse easier to use, but experienced users won’t be hindered by this. If you, additionally, display the keyboard shortcuts on the screen, using a simple underline for keybindings with Alt and the shortcut written out next to menu entries, it will also be easier for new users to learn using the keyboard. The keyboard shortcuts shouldn’t be hidden in some hard to find help file, like they are in both Internet Explorer (who knows Alt+Left Arrow moves you back to the previous page?) and Emacs (who knows Ctrl+A moves you to the beginning of a line without being told first?), the keyboard shortcuts should be right there, displayed on the screen, so the user can quickly glance at them and know what key they have to press if they forgot.