Button Groups

Problem

You need to show small number of related commands.

Solution

Display related commands using buttons that are grouped together and similarly aligned and styled.

Context

• The number of commands should be small, usually no more than three or four.
• The commands should be related and possibly act on the same or similar objects.
• Your view needs to have space to show buttons and not be too crowded.

Rationale

• Putting related buttons in a visual grouping uses the innate human mechanisms of association by proximity.
• Ensuring they’re related and possibly act on the same or similar objects helps to reduce any possible confusion.
• Because buttons tend to be strong visual elements, a group of them is stronger and is likely to stand out more than individually placed buttons, which helps users to find them.
• If you have more than a few buttons, the value of the grouping is reduced as the display will get cluttered and be harder for users to figure out what they want to do.

Implementation

If you have more than a few related commands, you should consider other possibilities such as the Ribbon, Drop Down Button, or a toolbar. You might be able to get away with breaking them into more than one group, but be careful to not clutter the display such that the value of the grouping is lost.

It’s ideal to make all of the buttons look and feel the same—same size, same styling, use of icons, etc. One exception would be if you have a Primary Action you want to emphasize; in that case, you could make that one stand out and keep the others the same. Put them all together either horizontally or vertically, depending on what works best for your view, but try to keep them in one column or row.

If the commands all act on a specific object in the view, locate them close to that object if possible to indicate their relation to it. For objects (such as tables/grids/lists) that have variable length, put the button group to the right or above.

Lastly, if it is a common button group for which there is a convention, follow the convention to help users find them. For example, it is very common to put buttons that act on an entire form at the bottom right in a group. And on Windows, buttons that act on the window are located in the top right.

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

Button Groups pattern is implemented in the following ASP.NET control: WebToolbar. Check out the samples browser to see it in action.

You can implement this pattern for other scenarios using WebImageButton controls to create button groups.

Windows Forms

You can use the NetAdvantage for Windows Forms controls: WinToolbarsManager or WinButton to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called Ribbon With FormattedTextEditorto see it in action.

WPF

You can implement this pattern using the NetAdvantage for WPF XamRibbon Control. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamFeatureBrowser called Menu Tools to see it in action.

JavaServer Faces

Creating button groups in JSF is simple. The core component h:commandButton creates the button, and groups can be created by wrapping the buttons in an h:panelGrid. Remember that the commanButton will be a submit button by default. Use it’s TYPE attribute to change that. See an example of button groups in JSF here.

Sources

Jennifer Tidwell, Designing Interfaces

Tags

Commands, Form.