0

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.

2 Answers 2

0

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 :-)

0

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: enter image description here

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

    enter image description here

3
  • I'm asking about not having buttons. I can't put tooltips on buttons if there are no buttons. Feb 23, 2015 at 18:39
  • @DouglasGoddard: Are you asking whether you can create an interface without any buttons and just use shortcuts?
    – dnbrv
    Feb 23, 2015 at 18:40
  • @DouglasGoddard: I edited the answer to reflect that.
    – dnbrv
    Feb 23, 2015 at 18:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.