22

I have a discussion with a colleague about what the "web standard" is for canceling in an form. In our discussion we have a "change password" page as example. We have a designed "send" button and "cancel" button. Both the same design.

He claims that in web standard a cancel button is no longer a button but a link transferring the user to another page. In my opinion, for those pages including a cancel button it actually is a cancel button which either resets the form and/or send the user to the prevision page.

Who is correct? Link or button... or both? And why? Any links to where this kind of standard is decided?

Br,
Paul Peelen

EDIT I guess the answer with most votes will be the "correct answer"?

Paul Peelen
  • 10,073
  • 15
  • 85
  • 168

8 Answers8

30

Here is some actual primary research into just this question, I won't add any subjective opinion on top...

Primary & Secondary Actions in Web Forms - probably the best research I've come across into exactly this question

Reset and Cancel Buttons - an article from 2000, pointing out that reset functionality is harmful and cancel functions are often unnecessary

OK–Cancel or Cancel–OK? - sticking to a standard order helps usability

The best answer I could give - test both, see which one works best.

On a side note, I wouldn't call this 'web standard', that has meaning towards front-end web technologies (HTML, CSS etc.), I would say 'UI best practice' fits better.

roryf
  • 29,592
  • 16
  • 81
  • 103
4

Why make it easy for users to undo all they've typed in by mistake? Why not prevent accidental form canceling?

Why isn't the cockpit light switch next to the eject button?

By making the cancel button different from the submit one, you easily convey the idea that they do different things. So long as it does not look like the submit button, you're safe.

Make it a link.

Horia Dragomir
  • 2,858
  • 24
  • 21
  • Yes, I agree with that. But the question is not regarding the positioning or design of the button. It is about whether to have a link or a button. Can also be a normal button or a designed button. Either way. – Paul Peelen Jan 19 '11 at 09:57
  • 1
    Edited the answer to show my suggestion of making it a link that takes the user to the previous page. :-) – Horia Dragomir Jan 19 '11 at 10:03
  • 2
    "Why isn't the cockpit light switch next to the eject button" - that comment made me laugh. I had visions of a pilot sitting in some dark cockpit, feeling around for the light switch and then flying through the roof. – Matt Asbury Jan 19 '11 at 10:06
  • Matt, that's precisely why we make the cancel trigger look way different from the ok trigger :-) – Horia Dragomir Jan 19 '11 at 22:46
3

Buttons in a form setting indicate you're about to do something involving the form; submitting, clearing, add a file etc. Making the cancel button a link, indicates you can leave any time you want, without any consequences.

joelcox
  • 562
  • 9
  • 19
  • A link also has the added benefit of leaving the page without submitting the form's data. You can add JavaScript to a cancel button to redirect the user without submitting the form but it always felt like a kluge to rely on JS to make one basic HTML "thing" (a button) act like another (a link) when you could just use a link in the first place. – spaaarky21 Nov 10 '11 at 08:07
2

There is no such standard, just considerations of common sense. Check this link: http://www.useit.com/alertbox/20000416.html

Maxim Gueivandov
  • 2,370
  • 1
  • 20
  • 33
1

I would say a link and button are exactly the same thing. A button can be a link and text can be a link.

Where the difference lies is between the focus of the default action and it's counterpart.

The default option should always be in focus and the counter option should always be relatively close by.

By in focus I mean the "Send" button could be bigger or brighter as long as its more noticeable then the "cancel" button.

Your friend probably thinks you should use a text link for this reason as it does follow this method. But a CSS button can be colorized to be less prominent in the same way.

Thomas Davis
  • 1,886
  • 15
  • 14
1

Don't put it on there at all. Users are used to the convention that if they are somewhere where they don't want to be, they will use the back button. Your job designing the UI is to guide a user through a process and allow them to make logical choices. You have already commented yourself by saying a cancel button could have one of two outcomes but how does a user know which one it is? Some users may expect it to reset a form and it takes them away from the page and vice versa.

In my opinion, your form does not need a cancel button and it would aid the user if it was just omitted completely.

Matt Asbury
  • 5,644
  • 2
  • 21
  • 29
  • Thats really not the case, in this scenario the product owner put the requirement of a cancel button. Regardless of the reason behind POs decision this is what is required. A good example is GMail, they have buttons like "Export - Cancel" they look exactly the same and are in that order... weird? – Paul Peelen Jan 19 '11 at 10:06
  • That's a fair comment. Although I once had a client who wanted his website which had a dark grey background to have slightly lighter (but still dark grey) text as the white "was too bright". Just because it what someone wants, it doesn't make it the best decision. It is your job to not only give the client what they want, but to advise them on what will be the best thing in any given situation. At the end of the day, this work will also reflect on you. Saying that, if there definitely should be one or the other, I would go with a button a significant distance from the submit button. – Matt Asbury Jan 19 '11 at 10:15
  • Yes, I am aware of that. However you are adressing it from a freelance perspective. Yes, I am a freelancer... in my own time. But in this case it is a large company with cross-departments requirements. The CQR department has certain requirements which they discuss with the PM/PO. The PM/PO put it as a requirement on the team, the Team askes me to help them out with the layout accordingly the requirements. In that way, it wont reflect on me the same way you are describing. My decision in the end was to have a red cancel button and grayish Send button. – Paul Peelen Jan 19 '11 at 13:02
1

The important thing is that the user doesn't press the cancel-button by mistake. As Horia says, make it a link or a button, but make it different, for example with a different color. Instead of calling it "Cancel", make it clear what will happen when you press it, for example: "Go back to previous page."

By the way, I hate it when there's a button for clearing the form. Completely unnecessary. It's good that it is not so common anymore.

Jon

prograde
  • 2,620
  • 2
  • 23
  • 32
  • I totally agree, the reset form is completely unnecessary. In this example the user would be redirected to the previous page or be logged out (if the change password was a forced action) – Paul Peelen Jan 19 '11 at 10:10
1

I'm really late to this discussion, but there are instances, particularly in web-based applications where a "Cancel" function is required. In my opinion a text link is preferred because it provides ample contrast from the "Submit" function so that users do not mistakenly click the wrong thing.

Joe B
  • 11
  • 1