CODEWITHSUNDEEP
htmlcssbuttonweb-standards
Paul Peelen
Paul Peelen

Reputation: 10329

UI best practice question: Cancel button or Cancel link

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"?

Upvotes: 22

Views: 13141

Answers (8)

Joe B
Joe B

Reputation: 11

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.

Upvotes: 1

roryf
roryf

Reputation: 30170

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.

Upvotes: 30

Maxim Gueivandov
Maxim Gueivandov

Reputation: 2385

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

Upvotes: 2

joelcox
joelcox

Reputation: 582

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.

Upvotes: 3

prograde
prograde

Reputation: 2740

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

Upvotes: 1

Horia Dragomir
Horia Dragomir

Reputation: 2888

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.

Upvotes: 4

Matt Asbury
Matt Asbury

Reputation: 5672

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.

Upvotes: 1

Thomas Davis
Thomas Davis

Reputation: 1896

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.

Upvotes: 1

Related Questions