Redd’s UX Design Patterns #3: Keyboard-Only Navigation

The third in our video series where we discuss UX design patterns, this one has to do with enabling easy keyboard-only navigation for pro users.

This is an extremely useful pattern to employ in high-data input applications where switching between a keyboard and a mouse would reduce the overall speed of operation. If you ever need to design such applications, this video may prove useful to you. So let’s get started.

To understand the use of this pattern, let me give you a little background. We worked with a client for whom we had designed a hotel room-booking application. These are the same systems used by travel-desk operators in large companies whose job it is to make bookings on behalf of their employees. They have a desktop computer in front of them and a phone in one hand on which they are talking to the employee who is requesting the hotel room. So it was important in this situation to design the system so it could be used with just one hand. They need to gather information regarding the dates of travel, the location, room preferences and payment methods in addition to several other parameters.

We designed the system to work with just the set of keys on the right side that you find in a full-sized desktop keyboard, using the Slash and a number to indicate a selection on a list and the Enter key to make a selection.

It works like this: You begin by entering a PNR number and let’s say there are two results that match against it. The list is shown with numbers assigned for each result on the left. Normally, you can use your mouse to select the second item or you can click the Down arrow twice and hit Enter. In our example here, you can make a selection of the second item by typing in Slash 2 into the search bar itself and then hitting Enter.

One could ask why do it this way when it’s simple enough to hit the Down arrow key twice? But this design pattern really shines when you have a list with multiple matches and you need to select maybe the fifth item on the list, like in the following step when you’re looking for a specific hotel. Typing in Slash 5 is much faster than any other way of making this selection. And this Slash mechanism handles date entries as well.

As any design pattern, this one has its pros and cons as well. This is a pattern that is really only handy for desktop applications. It’s also something that is useful in applications that are used frequently because this is a usage pattern that needs to be taught to users, just like any other keyboard shortcut. It is also not a pattern that we suggest where the selection lists contain less than three items.

This is an extremely useful pattern to employ in high-data input applications where switching between a keyboard and a mouse would reduce the overall speed of operation.

So that’s a quick look at the design pattern that we developed for this client. We have found this useful in a number of other scenarios, especially when designing systems for internal use. We hope it will serve you well, too. If you do use it somewhere, please drop us a line at social@redd.in and let us know, we’ll be thrilled to hear from you. If you have any other thoughts on this, do feel free to leave a comment below.

— Sharan Grandigae, Founder and CEO of Redd Experience Design