Caroline's Corner: Buttons on Forms - where to put them, and what to call them

Here’s a question that I get asked quite often: “Should we put ‘OK’ button to the left or the right of the ‘Cancel’ button?”

A common variant is to ask the same question with ‘Back’ or ‘Previous’ instead of ‘Cancel’, and to maybe include ‘Next’ in the mixture.

A SIMPLE QUESTION, A COMPLEX ANSWER
I’d love to tell you: put OK on the left. Or on the right. Or something else that’s easy to say and easy to remember. Like so much in forms, the simple answer isn’t really appropriate. And yet, who needs another ‘it depends’? We’ve got far too many of them in usability. The truth, of course, is that ‘it depends’ is the right answer yet again. But we’ll avert our eyes from that and I’ll try to give a few rules here.

RULE 1: LOOK AT OTHER FORMS
The first point is to find out what other forms your users are working with and see where those other programs put their buttons. For example, years ago Jakob Nielsen pointed out that most users spend most of their time on web sites other than yours. Or if you’re creating a program that will be used alongside Microsoft Office applications, then your users are likely to expect your program to follow their conventions. It does get a bit tricky if your users swap regularly between Mac and PC, because unfortunately the two operating systems have conflicting guidelines. Then you’ll have to think carefully about which one you’re going to follow – preferably, after doing some research on what your users do and which applications matter most to them.

RULE 2: PUT BUTTONS AT THE END OF THE CONVERSATION
The big deal with forms is that they ask users one or more questions, after which the user presses a button to say ‘I’m done with my turn in this conversation’. The conversational turn is handed over to the computer to do something. There needs to be a button. It’s usually called ‘OK’, ‘Send’, ‘Submit’ or ‘Next’. The crucial point is that it goes at the end. One common mistake I’ve seen: putting important instructions, or even whole questions, after that final button. A position that’s invisible to users. Don’t do it.

RULE 3: DECIDE WHETHER THE BUTTON IS NECESSARY
A while ago, I wrote a column: “The Piece of HTML created just for me: Reset”. My theme was that ‘Reset’ buttons are rather handy for the forms consultant who regularly hunts for forms on web sites, fills them in and then wants to discard her entries. Sadly, the majority of them are at best useless and at worst deeply annoying for other users. Do you really need other buttons? Do your users want to discard all their work? If you don’t really need a button, then get rid of it.

RULE 4: DECIDE WHETHER THE BUTTON NEEDS TO LOOK LIKE A BUTTON
Sometimes you definitely need two or more possible actions at the end of the form: perhaps, indeed, ‘Send’ and ‘Throw away my work’ or ‘OK and ‘Cancel’. Luke Wroblewski calls the most important action the ‘primary action’ and anything else ‘secondary’. He and Etre did some testing on where to put ‘Submit’ and ‘Cancel’ on web forms, and whether to make ‘Cancel’ into a link or a less prominent button.

Surprisingly, they found that any option that put the two buttons close together worked equally well. The only one that failed was placing ‘Cancel’ right under all the forms fields and ‘Submit’ way off to the right. (An aside: I’d have expected ‘Submit’ right under the forms fields and ‘Cancel’ way off to the right to work just as well as the options where the buttons were all close together, but for some reason that option didn’t get tested).

In terms of time to complete the form, an option with two visually similar buttons worked best. It took users a tiny bit longer to deal with the versions where Cancel was less visually prominent or made into a link. Crucially, though, users preferred those options: “People responded well [to options with a less prominent Cancel] even if these designs slowed them down a little. This suggests that they were more concerned about avoiding losing their data, than they were about submitting it quickly”. My take on this: accuracy and user comfort beats a tiny improvement in processing time in nearly all cases. So I’d reduce the visual impact of secondary actions – and probably make really disastrous actions, like ‘Throw away all my data’, into links on web forms.

There’s a supplement to this rule: make sure the button looks like a button. There’s an online banking application that I have to use regularly and it confuses me every time because the buttons are simple rectangles of orange with text on them – none of the little shading tweaks that make buttons stand out and look like buttons. If you’re feeling short of inspiration, try an image search for ‘web button’ and a vast selection of everything from cool to remarkably ugly will appear. Or, more realistically, just have a look at how your favourite web sites do them.

RULE 5: LABEL THE BUTTON WITH WHAT IT DOES
The last step is to decide what label to put on the button. I’ve so often seen buttons labelled ‘OK’ and ‘Cancel’ when it’s not at all clear what those words mean. Think about those sadly too frequent Cancel boxes: you’ve asked a program to cancel something, and it then gives you a dialogue box with buttons labelled: ‘OK’ and ‘Cancel’. Does ‘Cancel’ here mean, yes, go ahead and cancel or does it mean, no, I don’t want to cancel after all? Note that there’s no rule saying ‘buttons have to have single-word labels’ and definitely no rule saying ‘there has to be an OK button and an Cancel button’.


If you have any comments or suggestions about this article then please contact Caroline at:
Caroline.Jarrett@Effortmark.co.uk
Caroline Jarrett is a usability consultant specialising in forms and improving web content.
© 2008 Caroline Jarrett, all rights reserved.

Associated Link: Effortmark

Poor Shopping Basket Usability will hinder Christmas Rush
Source: UN, 20 November 2008
 
A new study from eDigitalResearch identifies customer service and online shopping basket usability as the two key areas where online retailers need to improve.

Future Phones to Read Your Voice, Gestures
Source: Wired, 19 November 2008
 
Five years from now, it is likely that the mobile phone you will be holding will be a smooth, sleek brick — a piece of metal and plastic with a few grooves in it and little more.

Why Digital Research is important in tough Financial Times
Source: Financial Times, 18 November 2008
 
With the banking sector moving towards consolidation, it is crucial that customers are understood, reacted to and rewarded for their loyalty.

Get Ready for 'Ergobamanomics'
Source: AssemblyBlog via ergonomics in the news , 17 November 2008
 
Is President Elect, Barack Obama, a secret ergonomics and usability enthusiast?

The Most Dreaded Keyword Phrase
Source: SearchEngineLand, 15 November 2008
 
In website usability, one of the hardest obstacles to overcome is the mentality of “This is what I would do.”

User Experience Standards Missing from Web 2.0 Designs
Source: UN, 14 November 2008
 
Usability professionals should be more involved with the development of Web 2.0 tools.

New technology showcased at World Usability Day
Source: User Vision, 13 November 2008
 
Today is World Usability Day!

Review: 16 User Interface Prototyping Tools
Source: Dexo Design, 12 November 2008
 
People constantly ask me what the best prototyping or mockup tool is, so I decided to do a review of all the tools I’m aware of.

Radio 4's PM show announces Winner of 'Show Us a Better Way'
Source: BBC, 11 November 2008
 
Ever been frustrated that you can't find out something that ought to be easy to find? Ever been baffled by league tables or 'performance indicators'?

Cisco Systems extends Product Usability Research
Source: Catalyst Resources, 10 November 2008
 
Cisco is conducting extensive usability research with Catalyst Resources, into complex new technologies.