Button Placement Update

November 1, 2011 | By Heidi Adkisson

A post from the Design Library’s earlier days - “Button, Button, Where Goes the Button” - looked at form button placement across the web, Mac OS, and Windows.

While the Mac and Windows have established button-placement standards, the web does not. However, an updated, unscientific survey of popular sites indicates sites lean towards the Windows convention of placing the primary action on the left and the secondary action on the right. Some examples below:

Yahoo Mail - Primary action on the left, with right-justified button placement on the form
Yahoo Mail

Gmail - Primary action on the left, with buttons left justified
Gmail

Amazon - Primary action on the left - buttons left justified
Amazon

Flickr - Primary action on the left - buttons left justified
Flickr

Tumblr - Primary action on the left - secondary action on the right - far right placement of Cancel
Tumblr

Pandora - Primary action on the left - using “Go Back” rather than “Cancel”
Pandora