On web apps and their keyboard shortcuts

Yesterday, I released dabblet. One of its aspects that I took extra care of, is it’s keyboard navigation. I used many of the commonly established application shortcuts to navigate and perform actions in it. Some of these naturally collided with the native browser shortcuts and I got a few bug reports about that.
Actually, overriding the browser shortcuts was by design, and I’ll explain my point of view below.

Native apps use these shortcuts all the time. For example, I press Cmd+1,2,3 etc in Espresso to navigate through files in my project. People press F1 for help. And so on. These shortcuts are so ingrained in our (power users) minds and so useful that we thoroughly miss them when they’re not there. Every time I press Cmd+1 in an OSX app and I don’t go to the first tab, I’m distraught. However, in web apps, these shortcuts are taken by the browser. We either have to use different shortcuts or accept overriding the browser’s defaults.

Using different shortcuts seems to be considered best practice, but how useful are these shortcuts anyway? They have to be individually learned for every web app, and that’s hardly about memorizing the “keyboard shortcuts” list. Our muscles learn much more slowly than our minds. To be able to use these shortcuts as mindlessly as we use the regular application shortcuts, we need to spend a long time using the web app and those shortcuts. If we ever do get used to them that much, we’ll have trouble with the other shortcuts that most apps use, as our muscles will try to use the new ones.

Using the de facto standard keyboard shortcuts carries no such issues. They take advantage of muscle memory from day one. If we advocate that web is the new native, it means our web apps should be entitled to everything native apps are. If native editors can use Cmd+1 to go to the first tab and F1 for help, so should a web editor. When you’re running a web app, the browser environment is merely a host, like your OS. The focus is the web app. When you’re working in a web app and you press a keyboard shortcut, chances are you’re looking to interact with that app, not with the browser Chrome.

For example, I’m currently writing in WordPress’ editor. When I press Cmd+S, I expect my draft to be saved, not the browser to attempt to save the current HTML page. Would it make sense if they wanted to be polite and chose a different shortcut, like Alt+S? I would have to learn the Save shortcut all over again and I’d forever confuse the two.

Of course, it depends on how you define a web app. If we’re talking about a magazine website for example, you’re using the browser as a kind of reader. The app you’re using is still the browser, and overriding its keyboard shortcuts is bad. It’s a sometimes fine distinction, and many disagreements about this issue are basically disagreements about what constitutes a web app and how much of an application web apps are.

So, what are your thoughts? Play it safe and be polite to the host or take advantage of muscle memory?

Edit: Johnathan Snook posted these thoughts in the comments, and I thought his suggested approach is pure genius and every web UX person should read it:

On Yahoo! Mail, we have this same problem. It’s an application with many of the same affordances of a desktop application. As a result, we want to have the same usability of a desktop application—including with keyboard shortcuts. In some cases, like Cmd-P for printing, we’ll override the browser default because the browser will not have the correct output.

For something like tab selection/editing, we don’t override the defaults and instead, create alternate shortcuts for doing so.

One thing I suggest you could try is to behave somewhat like overflow areas in a web page. When you scroll with a scroll mouse or trackpad in the area, the browser will scroll that area until it reaches it’s scroll limit and then will switch to scrolling the entire page. It would be interesting to experiment with this same approach with other in-page mechanisms. For example, with tabs, I often use Cmd-Shift-[ and Cmd-Shift-] to change tabs (versus Cmd-1/2/3, etc). You could have it do so within the page until it hits its limit (first tab/last tab) and then after that, let the event fall back to the browser. For Cmd-1, have it select the first tab. If the user is already on the first tab, have it fall back to the browser.

  • http://sunnyis.me/ Sunny Singh

    Ctrl+S makes sense, but I’d hate to see a web app take something like Ctrl+1 from me. If I want to interact with the web app, I think Ctrl+Alt+1 would make more sense. So I guess the solution is to use common sense.

    • http://leaverou.me Lea Verou

      Common sense is not as common. 
      Ctrl+Alt+1 doesn’t carry the muscle memory that Ctrl/Cmd+1 does. Of course, I’m not saying web apps should override it thoughtlessly, but when the web app itself has tabs, I think it makes as much sense as overriding Ctrl/Cmd+S does.

  • malsup

    In general, I agree with you, but I’d be supremely pissed if your app used cmd+T for it’s own purposes.

  • Anonymous

    On Yahoo! Mail, we have this same problem. It’s an application with many of the same affordances of a desktop application. As a result, we want to have the same usability of a desktop application—including with keyboard shortcuts. In some cases, like Cmd-P for printing, we’ll override the browser default because the browser will not have the correct output. 

    For something like tab selection/editing, we don’t override the defaults and instead, create alternate shortcuts for doing so.

    One thing I suggest you could try is to behave somewhat like overflow areas in a web page. When you scroll with a scroll mouse or trackpad in the area, the browser will scroll that area until it reaches it’s scroll limit and then will switch to scrolling the entire page. It would be interesting to experiment with this same approach with other in-page mechanisms. For example, with tabs, I often use Cmd-Shift-[ and Cmd-Shift-] to change tabs (versus Cmd-1/2/3, etc). You could have it do so within the page until it hits its limit (first tab/last tab) and then after that, let the event fall back to the browser. For Cmd-1, have it select the first tab. If the user is already on the first tab, have it fall back to the browser. 

    • http://leaverou.me Lea Verou

      Wow. 

      Just wow.
      This is genius Jonathan! I’ll edit the first post to include what you just said and incorporate the idea into dabblet!

    • Daniel Johansson

      good point! It surely depends on whether it’s an “app” or if you still consider yourself using the browser.

      Yahoo Mail is certainly an app but I just wanted to share my annoyance over one particular shortcut it overrides.

      Pressing Ctrl + Shift + E in Yahoo Mail brings up a dialog box for creating a new folder. What is unfortunate is that this is the default shortcut for panorama in Firefox.

      I’ve never wanted to create a new folder with that shortcut in Yahoo Mail and I strongly think Firefox shold get it back since panorama is a frequently used feature (at least of mine). It’s not the same as the defalut shortcut (in Windows, don’t know about others) for creating a new folder either so no muscle memory win.

      • Anonymous

        Thanks for the heads up. I’m passing the info onto the rest of the team and we’ll see about that shortcut. 

    • http://about.me/romainguerin Romain Guerin

      I think this is a nice alternative but I don’t think it’s very practical to use… One shortcut can do 2 different things depending on the current state of the application, I think this may cause a lot of confusion (at least it would does for me).

  • Blackjk

    Totally makes sense to me. I got giddy the first time I hit cmd+s and it wanted to save a gist. Awsome!

  • http://twitter.com/IllusionMH 109th

    Thanks for post!
    Several days I’m working on a similar problem: add text processor’s shortcuts to reply field in forum.

    This case is simple, so I decided to capture shortcuts(and prevent browser action) only in specific elements (textareas, inputs etc.). User can use Ctrl + S to add specific bbcode if reply field is active, or just save HTML page if field is not active.

  • http://twitter.com/JasonNeel Jason Neel

    Could you offer an option to opt-in/out of using app-level keyboard shortcuts? Depending on the app or situation, you could have the app-level shortcuts be on by default, but allow your user to turn that off if they so wished, and then save that preference for future visits. Just a thought.

  • http://www.facebook.com/bradley.staples Bradley Staples

    I have one issue with overriding the browsers’ shortcuts in your second scenario. If I *want* to use the browser shortcut, and you’ve overwritten it, I’m left unable to do anything about it. If, however, you have separate shortcuts, I do experience all of the shortcomings you’ve mentioned, but at least I haven’t lost functionality.

    Ideally, I’d almost like to prompt the first time a user uses a shortcut that you would like to overwride and allow them to decide which (browser or app) they want to use. If they choose to use the browser, remove the event binding in JavaScript that you have associated with t hat keyboard shortcut. If they choose to use the app, save that choice to a cookie. This would mean that all shortcuts have the added overheard of checking against that cookie (or an encapsulated JavaScript object value or equivalent), but the user isn’t jarred by not having their functionality at the expense of a single prompt.

    • http://twitter.com/IllusionMH 109th

      User may not understand or just automatically close strange pop-up (or other variant of prompt), so this variant isn’t so good.
      Checkbox in options page/menu may be more useful (of course, if save its state to cookies)

      • http://twitter.com/aldo_mx Aldo Fregoso

        A user pressing a hotkey is well aware about what the hotkey does, so the “user may not understand” simply doesn’t apply, if you press CTRL+F you are expecting to find text, if you press CTRL+P you are expecting to print, if you press CTRL+S you are expecting to save, you don’t go to a random page and press CTRL+ALT+SHIFT+SUPER+M expecting something magic to happen. If a user presses a shortcut and something unexpected happens you get her whole attention.

        So a prompting the first time: “Hi, would you like to test an enhanced search/print/save function? (You can disable it later)” [OK] [Cancel] is a really great way to let your users choose what they want, plus, you are being polite with them.

  • Brian Blakely

    OS-level apps respect OS keyboard shortcuts, including browsers.

    Web apps need to respect browser shortcuts and OS shortcuts. Violating this should require user permission.

    • http://leaverou.me Lea Verou

      So you think web apps are doomed to be one step lower than native apps forever?

      • Anonymous

        I’m wondering if there could be a case where a website overriding every possible keyboard combination (as such a thing right now is not possible) could cause harm.  In general, I would say not really, it might just be annoying. So maybe websites should be allowed to take over any shortcut they want, and if it is too annoying the user can either turn it off or stop using the site.

        • http://twitter.com/RonnyOrbach Ronny Orbach

          This is far from being impossible. Actually, I just did a quick demo: 
          http://jsfiddle.net/Ronny/S3jv5/
          Click the button and try navigating with arrows, hit ctrl+f or ctrl+p, F5, whatever. Click it again to redeem your keyboard ;-)This example is intended, but could happen on accident, say when implementing keyboard shortcuts but putting the return or preventDefault statements before checking for the keycode.

  • http://about.me/romainguerin Romain Guerin

    Something I love in web apps (and desktop apps too) is shortcuts customization. Sometimes the default shortcuts provided by an application doesn’t match your needs or your habits. There are so many users with different preferences, so I think one application couldn’t satisfy all of their users regarding keyboard shortcuts.

  • http://twitter.com/RonnyOrbach Ronny Orbach

    Great article Lea, this subject is important.
    I used to always hit ctrl+s on jsfiddle and get annoyed by the native save dialog until they finally overrode it with their save action.

    Like Jonathan wrote, sometimes it just makes sense. Saving a draft in editing environments, printing when for example you have an optimized print preview step and so on.

    My two cents:
    - Take care to bind overriding events only for the relevant element, when it isn’t the whole document.
    - Always toggle your keyboard shortcuts cheatsheet on pressing Shift+?, like github and gmail does. Didn’t find any writings, but this could lead to a de-facto standard.

    What do you think?

  • Pingback: שבוע ללא עכבר | ליקוטי שיבולים

  • http://taecilla.github.com/ Tae

    I have been thought about this long enough, and I have concluded that the best solution is to imitate Steves Jobs when he decided to not contaminate the Control key function: http://taecilla.github.com/why-the-command-key-rules/