Action Links
Problem
You have several commands that you need to display together or want to indicate command precedence visually.
Solution
Use links instead of buttons to minimize visual noise, conserve screen real estate, or to contrast with buttons to indicate importance or precedence.
Context
If you have a side panel where the commands want to be grouped together, have a somewhat HTML look and feel, or have them located near navigational links, even in desktop applications, action links can be a good choice. Similarly, if you’re strapped for space, using links instead of buttons can help there.
If you have a lot of commands with logical groupings or hierarchy, you should consider the Ribbon pattern. Or if your commands will live in a toolbar, you should use Button Groups.
If you want to provide a command that is of lesser importance or would be used less often, using links for these commands is a good option.
Rationale
Links are more at home, visually, in some environments. If you’re in a Web page or have a Webby look, sometimes it can be good for visual consistency to use link commands. Maybe they’re grouped with navigational commands (regular links), so using buttons would break visual consistency.
Link commands can also conserve space, both horizontally and vertically, so if you’re strapped for space, they can save room. By the same coin, if you have a longer command name, it is less visually imposing to use a link than a button.
Caveat: One thing to be careful of is that many people perceive links as purely navigational or at least assume they’re mostly harmless. If you use them for commands, be sure that the commands are mostly harmless, are easily undoable, or if you do nothing else, at least prompt for confirmation on such commands.
When it comes to command precedence, using links is a great way to visually subdue certain commands so that standard button commands stand out more. Because links are text and tend to blend into their surroundings (more so for textual contexts, obviously), you can use them to mute certain commands while simultaneously emphasizing others, which is good for communicating the Primary Action.
Implementation
It’s pretty straightforward—you just use a link instead of a button. Some developer frameworks provide specific LinkButton or HyperlinkButton type controls that can help with this by providing familiar Click events and command arguments.
You may want to consider supplying an associated icon with the link to visually distinguish it from other links, but only if it is in a panel with other links (not if the purpose is to mute the command). Regardless, be sure that the text very clearly conveys that it is an action and what that action is so that it is not confused with a navigational link. Keep it concise but sufficient. Using a verb usually conveys an action. Also, it can help to use title capitalization to make it stand out from normal text.
For individual commands that are related to some portion of the UI, you should keep the command located somewhere visually near the affected visual element.
Help Me Get There
Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.
ASP.NET
Action Links pattern is implemented in the following ASP.NET controls: WebDataTree, WebDataMenu, WebListBar, WebDropDown, WebHtmlEditor. Check out the samples browser to see it in action.
Windows Forms
You can use the following controls to implement the Action Links pattern: WinFormattedTextEditor, WinFormattedLinkLabel, WinDesktopAlert, WinToolbarsManager, WinExplorerBar or WinListView to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called MyFinances to see it in action.
WPF
You can implement the Action Links Pattern in the following controls: XamRibbon and XamOutlookBar. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamFeatureBrowser called Creating xamOutlookBar to see it in action.
JavaServer Faces
The ig:link tag is all you need to create an action link in JSF. Check out a sample here.
Examples
The primary example for this pattern is from version 8 of TechSmith’s SnagIt program. Notice the top section contains navigation links, but the bottom section contains actions, except for the SnagIt Accessories, which should probably be in the Quick Launch area. The action links all start with a verb, while the navigational links usually just describe the target.
http://quince.infragistics.com/10wh
Windows XP Explorer introduced using links as commands as part of the task pane. Most of the commands are navigation commands, but ‘Make new folder’ is an action link. Creating a folder is an action that can be easily reversed, and as the action command was in a list with navigation commands, it made sense to not to add a button for it.
http://quince.infragistics.com/112y
Google calendar lets you add more reminders to the reminder list with an action link. In this case the buttons are used for more important tasks, and using a button for the ‘Add a reminder’ action would have been confusing. If it’s clicked by mistake, it can easily be undone.
http://quince.infragistics.com/116f
Gmail uses them profusely and only uses buttons for the most common, primary actions. You can bet there is a high bar for a command to become a button in this interface.
http://quince.infragistics.com/11a9
Yahoo uses an action link to change the CAPTCHA image; notice how it is located right next to the element that it acts upon. They distinguish the primary action of Create My Account from Cancel using color, but some sites choose to make Cancel an action link to make that distinction.
http://quince.infragistics.com/10zp
This sample from the Infragistics NetAdvantage for Windows Forms toolkit shows how you can use the WinExplorerBar control to make an pane with action links.
http://quince.infragistics.com/11d6
Sources
Jakob Nielsen, Command Links
Tags
