Keyboard shortcuts – design for power users and productivity

When thinking about how users interact with a website on a desktop it’s easy to get lost in thinking about where they ‘click’. The keyboard is often forgotten as a method of interaction, relegated to typing in the URL and filling some forms out. However, it can actually be a powerful tool in speeding up your users workflow if you design with keyboard shortcuts in mind.

The power of the keyboard

terminal_systemI recently did a project that involved redoing the in-branch systems for a large insurance broker here in the UK. The systems were terminal based – i.e. text on a screen with pure keyboard input. Nothing to click on – horrible user experience right?

Whilst some of the journeys through the system certainly left something to be desired, one trend which I wasn’t expecting emerged very strongly. The users who were familiar with the system and its idiosyncrasies were VERY fast at getting through tasks on the system.

The key to this was the in-built keyboard shortcuts. Whilst to a new user that was certainly a steep learning curve, once they had become familiarised (about 2 weeks in seemed to be the peak of the curve) they had no issue jumping around within the system.

Sometimes a user interface can slow users down

This raised a very interesting design point for the new web based system as in many cases transitioning to a predominantly mouse based interaction method (as the web tends to be) could actually slow down many tasks for experienced users.

That’s not to say transitioning to the web would offer a worse experience. Of course there are many benefits that having a GUI brings which a purely text based system cannot offer. But one area that these keyboard-based systems can excel is speed.

Watch any experienced designer using Photoshop and you will see the amount of keyboard shortcuts they use

Plan for power users

Once users become familiar with a system they will become better and faster at doing what they need to on it. They become power users. As UX designers we must not only make our systems easy to learn for new users, but fast and efficient for experienced users.

Tab order

How often have you tabbed through an address form without really paying attention to the field names, simply because you have done it so many times before?

One of the most basic enhancements we can make is to make sure users can tab between form fields in the right order and complete a form using only their keyboard if they choose. Fortunately this is extremely easy in HTML and should be no problem for your Front End Developer to implement.

Access keys

The next thing to implement is to make sure your main navigation and key links have access keys associated. Not only are these important for accessibility reasons but they allow fast access by your power users to the main areas of your website or app. Again, these should be no problem for a Front End Dev to code in when building the website.

Consider visually identifying the shortcuts by underlining the relevant letter on the link or button to make it easy for your users to learn.

HTML5 input types

HTML5 has bought with it a host of enhancements, not least of which is the ability to define what type of data a form field is expecting. This is extremely important for mobile web apps as it can help to select which type of keyboard the user is presented with.

For instance, in a phone number field you can limit the input to numeric characters which reduces the chance of the user accidentally entering a letter and causing unnecessary error validation to have to take place and thus a reduction in speed.

You can view the full list of input types here.


The QWERTY keyboard has been with us since 1873. Whilst mice and touch have become more prominent ways of interaction in modern times it should not be forgotten when designing our user experiences – particularly for systems where users are performing the same tasks often. Make sure to include keyboard shortcuts as part of your design and watch your power users become even more powerful.

Images courtesy uıɐɾ ʞ ʇɐɯɐsDaniil Vasiliev