Button vs Link Usage

[kurzn]

This issue is to determine a set of guidelines around when to use buttons vs links vs links with arrows. These guidelines would apply regardless of where the link/button was displayed (i.e., in a hero, in a sidebar, etc.)

As a jumping off point, the following was discussed:

1. Buttons should be used to allow the user to complete an action. "Submit a complaint," "Get started with X tool" or "Contact us" would be examples.
2. Links should be used to connect users to another page, as a navigational item. They can also be used if a secondary action is combined in close proximity to a primary action (that is displayed as a button) to help visually distinguish primary from secondary actions.
3. Links with arrows should never be used (there was some discussion about the exception to this being in a hero CTA)

[mebates]

There are some guidelines already in the Design Manual.

At the top of the Links page: "Links lead users to a different page or further information. In contrast, buttons are used to signal actions. Users should be able to identify links without relying on color or styling alone."

At the top of the Buttons page: "Buttons signal actions. They should be used sparingly; each additional button on a page reduces the visual prominence of a call to action. In contrast, links should lead users to another page or further information."

[keelerr]

I was doing a little digging about the button vs link issue last week. I found this (http://ux.stackexchange.com/questions/5493/what-are-the-differences-between-buttons-and-links) which I thought was helpful. I've excerpted a few parts below:

Use links for: • Navigating between pages • Loading a page of content • Loading dynamically generated content. • Loading content to part of a page if no other option is tenable (e.g., a tab).

Use command buttons for: Actions that change or apply the underlying content or data objects. Actions that affect the view of the content if no other option is tenable. Execution of a dialog’s commands, including the Finish action of a wizard. Canceling of a dialog, assuming canceling resets the dialogs parameters to the default or previous values.

Navigating is significantly distinct than commands because: • Users don’t have to save after navigating. Saving is frequently necessary after a command.

• Users easily revert navigation by clicking Back or closing the window. It’s always a “safe” action. Commands frequently cannot be reverted in a web app. If commands can be reverted, it’s through an Undo feature, which involves a different user response than Back or Close.

• Commands provide different feedback that is often more subtle than navigation. It’s generally apparent when the user is presented with new content. Commands may show the change in the content, but often no change is apparent (e.g., for Copy or Save). Web apps often resort to confirmation pages (which doesn’t count as navigation in my book).

TLDR: An easy rule-of-thumb is if the most terse caption for the control is a noun (e.g., Home, Products, Site Map), then use a link. If the caption is a verb (e.g., Update, Submit, Delete, Purchase), then use a button

[caheberer]

There could be additional clarity to usage content of the links / buttons pages, but considering this doesn't seem to be a huge issue, low priority.