Using only keyboard shortcuts (without button/menu counterparts)

Question

I'm working on a webapp right now and the way I am designing the actions mainly utilizes keyboard and mouse combinations.

Example, join two elements by [shift + click]ing them in order. Is this an acceptable practice as long as I provide a quick tutorial in the beginning and make a cheat sheet available on the page? This would also keep the page less cluttered, which I like.

The other idea is that there would be buttons for everything, and then have the keyboard shortcuts for power users.

I fear my fondness of shortcuts (in IDEs, browsers, etc.) may be clouding my judgement of what an average user would be most comfortable with.

Answer 1

The "best practice" today is to provide keyboard shortcuts, but really design the UX so it is fully operable without shortcuts. Reasons:

• Cross platform - Most people want web apps to work on tablets and phones, where mouse-keyboard combinations don't exist. Even if you have a dedicated apps for tablets and phones, you still have a problem because users have to learn two different interfaces which can be very confusing.

• Explicit is better than implicit - Power users like keyboard shortcuts, but a visual interface is much better for teaching users how to utilize the app. So unless the app is very technical and geared at expert users, designers usually favor discoverability/intuitiveness over expert productivity.

Personally I'm a huge fan of keyboard shortcuts and tend to set them up wherever they're available (e.g. I prefer the old Microsoft menu system to their ribbon bars because keyboard shortcuts are easier). But the apps I design are all visual and explicit for the reasons above, with keyboard shortcuts available secondarily for power users.

In your case I would suggest using dockable/removable toolbars which are shown by default, but can be minimized/hidden for expert users once they learn the shortcuts.

There are valid reasons to break best practices (e.g. for expert apps) but it's best to make that decision with a full awareness of why the best practices are there, which is hopefully what this answer helps provide :-)

Answer 2

Foregoing any visual controls in your interface has numerous issues. Such an approach breaks 3 of Nielsen's 10 heuristics most obviously.

First, this breaks the concept of Graphical User Interface and user expectations of interaction. People are used to manipulating objects on the screen directly, meaning most people will expect to be able to use their mouse when dealing with a web-app.

Secondly, this creates the expectation of people to memorize all commands at the first use. This will force them to recall the available functions instead of recognizing them from the list on the screen. Chances are that most testers will give up after getting frustrated for forgetting something. This was one of the reasons why GUI took over CLI in mainstream computing.

Thirdly, this takes away the ability to choose input tools. Keyboard shortcuts are an alternative to direct manipulation that was created to minimize the time loss on input context changes (keyboard-to-mouse-to-keyboard). Forcing people to use only the keyboard to interact with your application without a justification isn't a good practice.

In terms of designing the shortcuts, you can create any keyboard shortcuts you like. There's only 1 rule for implementing them: don't break any native functions in the browser. This means that you need to account for differences in commands across browsers and platforms (e.g., CMD key on Macs and different shortcuts to launch private/incognito modes).

In terms of guiding users to discover, there are several good patterns.

1. Just have the option mentioned in help documentation. GMail is very good at it. But also keep a shortcut for quick help available. The convention nowadays seems to be SHIFT+/ (or ?).

2. Mention the shortcuts in tooltips (like software used to do back in the day) and somewhere on the screen. Asana does this fantastically. The main section has quick help footer with some of the shortcuts listed:

   And if you hover over task action buttons, the tooltips show the shortcuts: