Why every website should have Keyboard Navigation

July 20th, 2011


After reviewing nearly 2000 portfolios this year, I came to the conclusion that there was one thing missing on most of them——keyboard navigation. After spending over a year working on a project and forging an experience that fully utilizes the keyboard, I started to seriously question why it hasn’t been used more. It truly should be used on nearly every site because it is a necessary feature for every interactive web experience. So why aren’t the majority of interactive designers and builders using it? Are they intimidated when dealing with the keyboard, perhaps are they unaware of its potential or maybe even so concerned about budget constraints that it gets left off? It could really be any of those things and I’m open to hear your thoughts.

To show where I’m coming from and the magnitude of websites lacking the use go to any website right now. Tap the keyboard or hit your arrow keys. Was the result just crickets or do you need further proof? Try searching “design portfolio” in Google. Not one of the sites on the first two pages of results use keyboard navigation in any form.

So why aren’t more people utilizing it?

Accounting for the why is tricky. Though if I were to guess based on experience in questioning developers and usability testing it would be because of a lack of time, effort and the concern that the keyboard would need to be used at some point. The truth behind the last part is that yes a user may need to use the keyboard, but only a very small percentage of the time. Two examples of those type of actions would be typing in a form or using shortcuts. The solution is to simply disable the keyboard nav while in form fields and not override necessary shortcuts (e.g.. cmd + c, cmd + z, etc).

When should it be used and why?

The answer I want to say is always. However, there are some circumstances where it might not be necessary—very slim. When you have sites that require you to click and drag to scroll or have pages and pages of content, why not give the user the ability to skip to each pane or project. If instead you require the user to perform a second action of clicking then you may be making things more difficult. Sure you want the drag to be part of the experience, but keep in mind that the more unnecessary friction you add to each interaction the higher their disinterest meter will go.

Designspiration is the perfect example of taking a “dead” keyboard and pumping it full of life. Short cuts on the site include a fully functional a-z and 0-9 live search function that can be activated by simply typing at any time. Equally as important is the ability to use the arrow keys in the way that they should be: smart pagination between result sets, smart paging within result sets and smart scroll viewing.

Other solid examples of the keyboard in use are The Bullitt Agency, Hugo & Marie and Thinking For a Living.

As we move forward with progressing our interactive experiences, we should be sitting down to really think about the feature sets needed to attain complete site usability. Also working out solutions for how the user uses keyboard events could mean a world of difference to their resulting experience. Your users are friends, be nice and easy on them.

Posted by on 07/20/11 in Creativity & Thinking, Design, Web Design

23 COMMENTS   »  Leave your Comment

  1. Great thoughts Shelby! I have some feedback on Designspiration: I really love the functionality of being able to browse pages with the back and forward arrow keys, but I think it’s a shame you can’t scroll down the page using the space bar and shift + space to scroll up. Or maybe it’s just me?

  2. zx says:

    It’s not this. The simple thing is that every website would use it’s own implementation. It’s own way of dealing keyboard navigation and its own keyboard shortcuts. And there is no obvious way to get the user to know them just when he enter the site, so it would be aimed mostly for the power-users on the single webpage.

    Next thing – you have no idea what kind of keyboard shortcuts I have defined on my browser. You might overwrite one. Designispiration overwrites the inline-search in Opera for example.

  3. Tom says:

    Maybe we can add consoles to our websites to make it command-based:
    “view page contact”
    “follow rss”
    “go to top”
    Just joking. But I think we’re living in a click and (more and more) touch-based world nowadays. The keyboard is just for typing.
    If I want to change the temperature in my car I don’t want to look up what ‘key’ is linked to ‘cooler’ and then press that key on a different location. No, I just want to press a ‘cooler’-button.

  4. Tom says:

    @zx+Tom:
    I think, it depends on what you want to use keyboard control for. Scrolling down via arrows (up+down) is already possible on every website. Flipping with left+right is gradually getting standard in galleries – so since more and more blogs use sidebar arrows to jump to the next arcticle (when ur in article view) why not use the keyboard arrows for this?

    The guys from Sonic Iceland are using a really nice approach, I think. Keyboard arrows for gallery and up+down, mouse for article jumping and menu. Suits quite nice for their purpose, doesn’t it?

  5. Simon Starr says:

    I’m in favour of simple and intuitive keyboard navigation, such as using left and right in a gallery, but not when it stops things working as I expect. For example, I often use Command + Left Arrow in my browser to go back and this doesn’t work on Designspiration because it captures the left arrow.

    The search function is very cool though :)

  6. This has been on mind recently, I totally agree, and am planning keyboard navigation in my new site for sure.

    I think what is making keyboard navigation stronger is the realization that the up-down + left-right arrow keys mimic those of the “swipe” motions in touch devices.

    Oh and if you haven’t seen it yet, http://www.thinkingforaliving.org/ is a fantastic example of keyboard navigation.

  7. jijijoo says:

    Who uses their keyboard to navigate a webpage? Next to nobody, that’s who. I personally wouldn’t waste my time implementing keyboard navigation. My time could be better spend elsewhere.

  8. thehalvo says:

    Great points Shelby. And you’re definitely right, intuitive keyboard navigation should become a standard addition to any website.

  9. Todd says:

    I support your thesis, but I would be more in favor of a keyboard navigation that only required some decent tab navigation. For me, it’s easier to just tab through options, rather than figure out how someone set of the arrow directions.

    Another must have for me is the escape key noting more convenient to me than being able cancel or back out of whatever I’m doing by pressing one button.

  10. Shelby White says:

    Just to add a note to this page. The keyboard navigation for Wanken.com just has not been pushed live yet but it is ready to go.

  11. Excellent points, Shelby. I agree with you – more sites should utilize keyboard navigation. The difficult part about it though, is that as a user, you don’t really know what’s going to happen when you hit the arrow keys. It’s a bit of a guessing game, unless the experience is designed with keyboard navigation specifically in mind.

    Some other sites with keyboard navigation that are worth mentioned are Antonio Carusone’s http://www.aisleone.net/ and a couple of Emil Olsson latest builds http://www.thisiscollate.com/ http://markboyce.com/ and http://this-studio.co.uk/ .

  12. Dean says:

    While I personally love navigating quickly by keyboard, I don’t agree that there’s a need for websites to adopt keyboard navigation. With a lack of a standard interaction model, sites like Designspiration and Sonic Iceland need to explain the rules of the game to user — pretty clumsy, unfortunately. Moving through space with the arrow keys at least has some precedent and a level of intuitiveness to it, although I question its value when so many other functions on the page aren’t accessible by keyboard. For instance, if you want to look at anything besides thumbnails on Designspiration, you need a mouse to select pieces. If you’re going to need the mouse anyway, how much value does the keyboard really provide?

    Keyboard nav will be useful in some cases, but without some standard interaction models or highly specialized applications, I don’t see wide adoption. Especially with a growth of touch-based interfaces (e.g., the release of OS X Lion today), I’d expect the general trend to move away from keyboards, not toward them.

    Shelby — I look forward to seeing how you implement keyboard nav on this site. Should be interesting.

  13. Shelby White says:

    @Kenny Great list! Of course Antonio’s site should be listed and the majority of Emil Olsson’s work. Now for the rest of the world to get on the wagon.

    @Dean I’m not sure this is about moving towards keyboards, its moving in the direction of only using one singular device to navigate and/or making it easier altogether. The problem though as you mentioned lies within bringing it to just one: keyboard or mouse, not both. I think we’ll get there eventually and I’ll keep pondering your thoughts on how to improve the ideas for the second installment of this post.

  14. Luke Rolka says:

    Singular navigation is very useful with intensive app-like experiences (one could point out PC games like Starcraft II as an example) but I disagree it always should be a requirement for a good interactive experience with websites in general. On devices that natively allow you to split up navigation and input between multiple peripherals I generally prefer to maintain best use of those devices. I personally will not use keyboard navigation on sites even when they’re available UNLESS there is a lot of keyboard input to be done as well. Even in that case unless there is a universal standard for how keyboard navigation will behave, that is a significant barrier to entry.

    That said, back to what I first mentioned, if someone is going to be spending literally hours on a single interactive experience then device shortcuts make a lot of sense.

    Interesting thoughts to consider either way, though.

  15. Jon says:

    Yes, totally agree with this. This is especially important for SaaS websites like Salesforce.com.

  16. PPC Bolton says:

    This is very useful and this is very interesting and more informative.. I support to this article…
    have fun,,, thanks….
    —————–
    Stevehalen

  17. Liam Richardson says:

    Simple- the way keyboards are interacted with varies widely from browser to browser, and from OS to OS, and from user to user. We don’t need websites adding another layer in there. For example when I’m browsing the web I would be furious if a website stole keyboard control from Firefox- I use quick search frequently enough that I have it set to just start searching when I hit any letter key. Arrow keys are reserved for scrolling, and so on. That leaves maybe 2 keys on my keyboard that I wouldn’t mind a website taking over, and that’s only because I’ll never touch those keys anyways.

    In an environment like a game, which is very controlled, I expect full use of the keyboard to be taken advantage of. In an environment as open as the web, keyboard interaction should be done very minimally, aside from text entry, if at all.

  18. Nice idea Shelby. I stumbled across this agency site that uses keyboard really well… have a play as this site is a perfect example of excellent keybord utilisation http://onedesigncompany.com/

    Cheers

    Matt from Melbourn, Aus.

  19. Ryan says:

    This should make the job easier for folk: http://robertwhurst.github.com/KeyboardJS/

  20. Dean says:

    @Shelby: Following up on this old thread after seeing an interesting example of keyboard navigation in a photo site today. See here:
    http://editsquarterly.com/

    A few key aspects of this keyboard-navigable site that make it work:

    1. The “rules of the game” are spelled out on the first page. The keyboard options are presented up front, and they’re easy to experiment with.

    2. The keystrokes are closely aligned with other SW behaviors that people are already familiar with. Arrows can be expected to move you through space (especially up/down in a browser window), and the escape key often leaves a current mode (usually hiding information, but in this case displaying new information).

    3. The information and basic interaction mode provided by the keyboard is identical or similar to that provided by the mouse. The keyboard and mouse interactions are so closely aligned that switching between the two (intentionally using them in concert, even) is completely natural. Because the keyboard command provides additional value to the user, the interaction becomes worth adopting.

    Items 1 & 3 above seem like good goals for other implementations of keyboard navigation, but I’m not sure what range of behaviors are in line with #2. It’s hard for me to come up with other good examples. One that’s definitely implemented with great success is the use of standard formatting shortcuts in web applications such as email or CMS; command-B (on a Mac) or command-I will produce the same bolding and italicizing behaviors that one gets in native applications.

    Also: I like Matthew’s link above as well, which uses arrows for navigation. Interestingly, it seems like the site was designed so specifically for keyboard navigation that it feels clunky when navigating by mouse. I.e., if you wanted to make a site that worked well for mouse navigation, you wouldn’t make it like that. They’ve definitely made some tradeoffs.

  21. Dark Penguin says:

    I’m glad that someone is addressing this subject. My pay TV provider’s online schedule grid has no keyboard functionality that I can see, whatsoever, and navigating the channel/timeline grid is awkward at best. Normally, when you look at a TV schedule online, you would like to line up the next half-hourly increment near the left margin of the display. If it’s 7:28pm you want 8pm to be at the left hand edge. This is the best way to easily see what programs are about to start, as well as plan your viewing later in the evening. But with this company’s schedule grid, you can’t do that. You can only line up times of the day that are divisible by 3 hours, like midnight, 3pm, or 9pm. It really sucks, and I hate it. It’s ironic, because this company is considered a technical leader–and they are. The content delivery technology is excellent, but the website’s UI still sucks.

  22. Gabriel Fiorini says:

    The thing that drives me crazy more than anything else is when keyboard scrolling is disabled or broken. On a laptop, the easiest way to scroll a document short distances (as when reading a blog entry, for instance) is with the up and down arrow keys. However, many websites disable scrolling with the arrow keys, forcing the user to use the trackpad to operate the scrollbar — a fundamentally more cumbersome and flow-breaking mode of interaction. Page Up and Page Down are more likely to work in my experience, but scrolling a page at a time is not the way that I normally want to read content. Maybe I am unusual there, but I doubt it.

    On that note, in my copy of Chrome, Version 25.0.1364.97 m, the up arrow does not work for this page. The down arrow scrolls the page downward as expected, but the up arrow is dead. I find it pretty ironic that keyboard scrolling is broken in an article about how keyboard navigation is an essential component of good web design.

  23. This is the perfect blog for everyone who wants to
    find out about this topic. You know a whole lot its almost hard to argue with
    you (not that I actually would want to…HaHa). You definitely put a new spin on a topic which has been written about for ages.
    Excellent stuff, just excellent!


Leave a Response