Command Buttons vs. Links

Traditionally, command buttons are used to initiate actions, whereas links are used to navigate to other places. Given the popularity of the Web, the use of links has expanded to include initiating commands and selecting options as well. For a given command, when should you use a command button? When should you use a link? The concept of affordance and the distinction between primary and secondary commands provide some guidance.

Affordance

Command buttons have the benefit of affordance—their visual properties (they look like they can be pushed) suggest how they are used. By contrast, links lack affordance and are understood only through experience. Links without the underline and system link colors appear as normal text. The only way to ascertain their behavior is from their presentation, their context, or by hovering the mouse over them.

While lack of affordance and discoverability may sound discouraging, note that drop-down menus and context menus—other mechanisms for initiating actions—suffer similar problems. For a given object, users may search through the menu bar to discover relevant commands or try to right click to find a context menu. Also, there is nothing about the visual appearance of a menu that suggests how it is used—that knowledge is also learned though experience. However, individual menus items don't require affordance to suggest their use because a menu as a whole suggests its usage. Consequently, users understand what to do with a menu of relevant commands once discovered.

In this example, links are used for a menu of commands. The context of a menu makes the affordance of a command button unnecessary.

Primary vs. secondary commands

A primary command is necessary for the primary purpose of a window. For example, Print is a primary command for a Print dialog box. Use command buttons to make primary commands obvious to the user. A secondary command is a peripheral action that, while helpful, isn't essential to the purpose of the window. For example, Find Printer or Install Printer are secondary commands for a Print dialog box. Consider using links to de-emphasize secondary commands.

Gathering input vs. displaying a related window

Use command buttons to display windows used to gather input or making choices for the task at hand. Such actions have command feel to them. By contrast, you can use links to display related, but independent windows. Such actions have a navigation feel.

Consequently, use command buttons, not links, for commands like Open, Save, and Browse, even if they are secondary commands. If unsure, use command buttons to display modal windows and links for independent windows.

Commitment and destruction vs. carefree navigation

Users associate links with Web navigation. This implies a level of safety—after all, in a browser users can always escape using the Back button. Furthermore, when browsing, most significant commitments are made with command buttons, not links.

To maintain these expectations, don't use links for commands with significant consequences, such as actions that are destructive or irreversible. Similarly, in a wizard or task flow, use command buttons for commitment, and reserve links for making choices and navigating to the next step.

Label length

Simply put, command button frames look awkward and heavy when they are too big. Thus, command buttons look best when their labels are short—typically four or fewer words. To avoid conflict between factors, strive to label primary commands concisely.

The guidelines

• Use command buttons for:
  • Primary commands.
  • Displaying windows used to gather input or making choices, even if they are secondary commands.
  • Destructive or irreversible actions, as well as commitment within wizards and page flows.
• Use links for navigation to another page, window, or Help topic; display definitions; and command menus.
• Consider using links to deemphasize secondary commands.
• Use short command button labels, consisting of four or fewer words. Links can have longer labels.