In user-interface design, we often focus on first-time users. In the typical usability-testing scenario, we recruit participants who have never seen the tested interface before and ask them to use it to complete certain tasks. But, in many cases, the system will be used again and again. Will repeat users be able to improve and become efficient at their tasks? Once they’ve figured out the basics, will they be able to speed up or will they be annoyed at having to repeat the same tedious steps?

Designing for expert users means we must balance learnability with productivity and efficiency. It is vital that new users are able to easily figure out how to use the interface — otherwise they may never return — but expert users expect to be able to complete their tasks with increasing efficiency and reach the point where they feel they have mastered the interface. Any system that will be repeatedly used should cater to both new users and expert users by including accelerators to allow people to complete certain routine tasks quickly and easily.

These types of systems include software-as-a-service (SAAS) products, applications (both mobile and desktop), social-media platforms, and really, any system that is likely to be used frequently, particularly to complete a small set of routine actions.

What’s an Accelerator?

Definition: An accelerator is a UI feature that speeds up an interaction or process.

Also referred to as shortcuts, accelerators enhance user interfaces by providing an alternate method (usually faster, but possibly more demanding because of a higher memory load or a more complex gesture) for accomplishing a specific action and thus allowing expert users to complete a common task more quickly and efficiently. It is worth repeating that accelerators should be additional, alternate ways to accomplish a task — something that expert users can take advantage of, but that others can ignore completely.

Common accelerators include:

  • Keyboard shortcuts
  • Macros (allowing users to link together certain actions, to be triggered via a single control)
  • Touch gestures (e.g., long press, double tap, swipe)

Accelerators make the system more flexible and efficient — one of Jakob Nielsen’s ten usability heuristics. A highly flexible system satisfies both experienced and inexperienced users by allowing each to complete an action by whatever method works best for them.

Typically, all users hit an efficiency plateau once they have fully learned an interface, where further repetitions of a task do not reduce the task time. Using an accelerator helps expert users push past that plateau: they can become even more efficient by adopting the faster method of completing that same task (once they have learned it, of course).

When to Provide an Accelerator

Not all actions within a system need an accelerator. Focus on those features that many people tend to use repeatedly. Ask yourself: What are the core actions within the system?

Increasing efficiency and productivity really matters only for repeat tasks; thus, these routine actions are good candidates for adding an accelerator. Remember that learning requires repetition, so people will learn a shortcut better if it is an action they repeat often.

You can also consider what actions you want to encourage users to do more often by making them easier and faster to do. For example, in Instagram’s mobile app, double-tapping on an image is an accelerator for “liking” it (an alternative to tapping directly on the heart icon). Similarly, in the Pinterest mobile app, users can press-and-hold an image to reveal a shortcut marking menu with actions such as Save, Send, and Shop (instead of navigating to the image’s detail page to access those same actions). These actions are why those apps exist — encouraging users to save, like, and share content — so it is wise to make them as easy as possible for expert, repeat users.

Screenshots from Instagram and Pinterest mobile apps, showing touch gesture accelerators.
Left: In the Instagram mobile app, users can like an image either by tapping on the heart icon or by double-tapping the image. Right: In the Pinterest mobile app, users can reach a marking menu for common actions by pressing-and-holding an image, rather than tapping the image to navigate to a detail page for those same actions.

Keep in mind that an accelerator is not a new feature — it is merely an additional way of completing an existing action. Those users who never discover the accelerator should be able to complete the same task in another way.

Exposing Accelerators

Because accelerators are enhancements to the interface, discovering them should not be critical to learning and using the interface. In fact, you shouldn’t aim to expose new users to every accelerator, as that would be overwhelming and simply not helpful. New users just want to get started and complete their task — not read user manuals — and they should be allowed to do so in order to get them hooked on the core functionality and overall usefulness of the system. Only those users who have learned the basics and continue using the system should be exposed to the related shortcuts.

That said, we can’t know precisely when a user is “ready” to learn an accelerator. Some users may never look for these shortcuts, while others may do so right away. For that reason, accelerators should be readily available, yet easy to ignore.

Keyboard shortcuts are commonly displayed beside the corresponding menu label, so savvy users will expect to find them there. Be sure to visually style the key combination appropriately, so as to not compete with the label itself. The shortcut can be displayed right-aligned within a dropdown menu (when the menu labels are left-aligned) or shown within parentheses or in a different color than the main label. If the command does not have a text label but only an icon (a practice that we strongly discourage), the shortcut can be displayed inside the tooltip along with the item label. (Remember, though, that hover won’t be available to those using a touch interface.)

Screenshots showing examples of where to display keyboard shortcuts within a UI.
Left: Mac applications, such as the Chrome browser, display keyboard shortcuts right-aligned within the dropdown menu. Right: Gmail displays the keyboard shortcuts for email-editor tools within a tooltip exposed on hover.

If, for whatever reason (e.g., the accelerator is a touch gesture), you cannot display the shortcut alongside the action’s label or icon, a tip may be the only way to expose the accelerator to users. In these cases, it is best to wait until the user has completed the action in the standard way and then display the hint. This contextual, just-in-time help ensures that users will be interested in the instruction, as it directly applies to their current task. Keep the hint short and scannable and avoid lengthy tutorials or multiple instructions in a row — focus on the single action and its shortcut.

Screenshots of hint overlay screen on the Google Docs mobile app.
Google Docs app for iPhone: After the user tries to undo an action by shaking the device (left), the app displays a contextual tip for an accelerator gesture (right).

Complex accelerators such as macros or other customization and automation tools should be shown on the related setup screens or navigation menus. For instance, the Trello web app includes a link to its Butler automation tool from within the main menu. (Note that this link is in addition to the separate Butler button in the top toolbar. Including the link in the menu adds to its discoverability, particularly for users who wouldn’t know what the vague name Butler referred to — the micro-copy within the menu adds much-needed information scent.)

Screenshot of automation tool info within the web-based service Trello.
Trello includes a link to its automation tool, Butler, within the main menu for a board.

The last (or additional) resort is to create a list of all shortcuts available in the system, accessible within the Help or Support documentation. This option is the least discoverable, as most users would never think to seek this type of information out. But, for the subset of users who do care about optimizing their workflow or for those who may have forgotten the exact shortcut, a cheat sheet ensures that the information is easily findable.

Examples of displaying all available accelerators on a single page.
The Slack app for Mac (left) and Todoist web app (right) both provide a complete list of all keyboard shortcuts available in the system, accessible from the Help or Settings menu.

Conclusion

Repeat users who are already familiar with an interface want to be as efficient as possible, whereas novice users need the interface to be as explicit as possible so they can find their way around. Accelerators help balance the needs of both types of users and enhance an interface by giving them control over completing an action. This is what makes a system highly flexible — and ultimately widely usable.