Archives

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

2012-02-01 20:20
NUI is OUI, Dear Reader. About eight years ago I blogged about quot;text mode quot; and said (if I may be silly and quote myself): quot;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. quot; - 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 quot;timeline quot; looks like somewhat like this. 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 quot;accesskeys quot; which have been in HTML since forever, then there s quot;hotkeys quot; 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. lt;gratuitous bold= quot;true quot; gt;There is literally no reason to not implement keyboard hot-keys in your web application other than you ve likely forgotten it s important. lt;/gratuitous gt; Access Keys Implementing accesskey requires only the will and some thought. lt;label for= quot;homePhone quot; gt;Home phone: lt;/label gt; lt;input name= quot;HomePhone quot; type= quot;text quot; maxlength= quot;20 quot; id= quot;homePhone quot; accesskey= quot;H quot; title= quot;Home phone quot; class= quot;text-box quot; / gt; Here we ve made quot;ALT-H quot; go to the Home text box. Do you want awes...
Read More...