Keyboard UX For The Web

The topic I broach today is both necessary and volatile. I deem it necessary because there are only a few ways we interact with web sites.

1. Mouse
2. Keyboard
3. Gestures (touch)

Smell doesn’t really figure in our daily interaction. An example of sound may be saying (‘Navigate to Google.com’) on your phone.

And while the evolution of touch interaction has significantly improved since its inception, the keyboard hasn’t progressed much since TAB and ENTER. For those of you who have used screen readers such as JAWS, you know just how unusable websites can be.Try going through the Wikipedia page for JAWS and navigate to a link halfway down the page.

Just how many tabs does it take?

Well, try to follow the numbers in the image below. To get to the target marked with the large red arrow, it takes 30 tabs not counting the 2 necessary if starting originally in the address bar.

So the big question is, how do we fix this?

Well, you might say “Keyboards have been used for a very long time and nobody seems to be complaining.”  And I would point out that the only people purely keyboarding on a Web Site are those who are blind or visually impaired. It is rare for users to use a keyboard on a website except to type into fields. So, going back to our question, what we should really ask is ‘Who Cares?’ Most companies use user statistics before building any feature into their product. Limited resources and a large feature set means you do what gives you the most bang for the buck.

[Ed. Note – Sorry Roel. I don’t mean to pick on you. I just want to point something out.]

The reason I put Roel’s comment here is to drive home a point about ‘Who Cares?’ Keyboard usage is subjective and different users will give you different opinions. You have to base it on who your audience is.  For example, Lifehacker provides ‘J’ ‘K’ navigation to browse through their articles. Their audience is generally going to be computer savvy power users who aim for streamlined efficiency.

Users who are familiar with keyboard shortcuts in their OS du jour will also be the ones who are more likely to use shortcuts in web sites.

For instance, check out the keyboard shortcuts to GMail as provided by Lifehacker. GMail is definitely not used by power users only. They do make up a small based of the overall user base but the fact that they went the extra mile to provide these shortcuts shows their level of commitment to excellence.Hotmail also has a big list of shortcuts and with their UI change, they have become a prominent player for your email data.

So why do some of the most visited websites fail to provide shortcuts?

If you go to web sites that provides pages of information such as 500px you can see their navigation pages at the bottom.

This is a great site. They have excellent user content. The design is simple yet elegant and does not steal away from the user content. They provide ‘J/K’ navigation but I could not get it to work. And that’s not the only thing that bugs me. If you zoom into their pages, you notice the arrow keys as if to taunt you into using them (they don’t work btw.) Why is there such a discrepancy? Why not inform you users directly so that they can see how to use navigation correctly?

Now try going to another site that offers the same type of paged content such as PeopleOfWalmart. You notice the paging right there at the top. But there is no way to navigate through the content easily on a keyboard. It took me almost 30 clicks to get to the 2nd page item for navigation.

As Smashing magazine says it, “Enable keyboard shortcuts in your Web applications.’ They even have a complied list of shortcuts for developers. And on their main page they have a paged list of articles on their main page.

But I can’t navigate through it!

So, I wish to implore you dear developer, consider your power users and add some keyboard shortcuts for navigation into your web site.

John Resig has even provided you with jquery.hotkeys so that you may easily add navigation support to your code. It supports all the major browsers (even IE 6).

Now you really have no excuse!

p.s. I looked for a way to enable keyboard navigation on the free version of WordPress and wasn’t able to find it. If anyone knows how to add this, please let me know. Thank you.