Where to put those buttons?
Ciaron posted in Web Design on 25 June 2009
After a long afternoon designing web forms with fellow studio geek Terence, we struck up a healthy debate on the position of form buttons.
One form in particular required a cancel and a continue button. We both agreed that the cancel button was a negative action, and the continue button was a positive action. To illustrate further, I have put together a quick list of negative and positive actions.
Negative actions
- Cancel
- Don’t Save
- No
- Previous
Positive actions
Where we failed to see eye to eye was the position of these buttons. My preference was to place the positive button on the right, and the negative button on the left. This is based upon my instinctive expectation of expecting the Continue or Save button on the right.
Another view, strongly supported by Terence, was that the negative action should be placed on the right, with the positive on the left.
After debating the issue for all of 10 minutes, we decided to look at why Terence’s expectations differed so much from mine. After a bit of head scratching and a strong cup of tea, it dawned on us, an epiphany if you like - I had used a Mac for for last 20 years, whilst Terence has used Windows.
We took a look at dialogue panes generated by the 2 operating systems, and lo and behold, Windows displays the positive action on the left, whilst the OSX displays the positive action on the right.
So, we got to the bottom of our difference of opinion and conflicting expectations - but where does this leave us in terms of best practice?
I still stand firm in my belief that the positive action should always be placed on the right. But what it is also important to remember that we should always consider user expectations when developing any kind of user interface elements. This underpins our approach to all of our design projects - whilst we always try to push the envelope (did I just say push the envelope?) in terms of design, we always take in to account user expectations, and best practice procedures.
Let us know what you think. Are you a Mac or a PC user? Would you expect to see the positive action on the left or right?
Comments on this article
Terence at 25/06/2009 11:44
It does seem that time spent using a certain OS is the most logical explanation for where you're used to expecting to find the buttons on a webpage. I have a feeling the different locations of the buttons on different OSes might actually be a software patent issue, though I can't find any source on that.
And then there's the 'other option':- Anyone using Linux most of the time got any views on whether they'd expect to find the positive action on a webpage on the left or right?
I wonder if there's any patterns on people using non left-to-right fonts too...
Matthew at 25/06/2009 11:46
I don't think this is anything to do with mac vs PC. Basically, you read from left to right and forms usually move in numbered sections moving from left the right at the top of your screen. So, if you wish to "move forward" with your form (continue, next etc) I would instinctively look to the right - a virtual turning of the page if you wish. Everything to the left would move backwards.
Terence at 25/06/2009 11:54
It is an interesting point I was mentioning to Ciaron actually. When you've got two buttons, one going << Back and one going Forward >> I am in full agreement that I'd expect to find the positive action on the right. But if there wasn't specific forward/back direction involved like that, I'd always instinctively aim for the first button on the left. Weird stuff!
Helen Baker, Concise Content at 10/08/2009 10:46
This is a good point; I think it underlines the importance of consistency in general across certain types of web site because web users (especially experienced ones) have to come to expect certain functions in certain areas. There's a good article by David Hamill over at UXBooth that touches upon positioning, as well as other considerations regarding call-to-action buttons: http://www.uxbooth.com/blog/good-call-to-action-buttons/. Might be of interest!
Add a comment