« Size controls: relative and absolute | Main | Dynamic Side-Tabs »

Buttons that support primary and secondary actions

Where there is a clear primary action (and related secondary actions) using a segmented button lets you present the actions together in a compact manner.

The primary action in the example below (from Microsoft Excel 2007) is Paste:

Excelpaste1

Clicking the upper segment of the button initiates the primary command.

Clicking the lower segment of the button displays related secondary commands, with the primary command repeated at the top of the list. The primary command is visually emphasized with an icon:

Excelpaste2

Yahoo Mail uses the same approach with a horizontally-oriented New button.  The primary action is creating a  new email message.

Yahoo_button1

Secondary actions are creating a new chat and creating a new text message.  These are displayed by clicking the right end of the button. The primary action (email message) is emphasized at the top of the list with bold text.

Yahoo_button2

My Photo

About

  • Blink Interactive is a Seattle-based user experience consulting firm. Our design library is an informal collection of design examples with commentary.

Search

Widget

  • Get this widget from Widgetbox