Evidence of Button-action and Link-action in the same scope?

Question

When I started to know GUI in the early 1990s there were always the same type of control to perform an action of the same type, even though the action was different as in [OK] [Cancel] and [Yes] [No]. I’ve seen another pattern evolve here which at first doesn’t make any sense at all – but the more you think about it – the more sense it makes.

Here on UX.SE there are the possibility to edit posts, and when you do edit and are done, or decide not to continue the edit you have two options. The first, most visually prominent action you can take is the “Save Edits”-button. The second action are the “cancel”-link with lower case initial letter and much less prominent than the button.

The reasoning behind this could be that the most likely action to take would be to save the edit – thus that action is much more prominent than the cancel action. And to guard further from letting the user unintentionally cancel an edit – there is a follow up Confirm Box asking the user again to abandon/cancel the edit.

But this is speculation, and I have no hard evidence that this is the case. It looks very promising and I’d like to use it in designs to come – but I want to have some proof of the reasoning behind this new pattern. If there are articles, test results or even research available – I’d like to know.

Answer 1

This is an attempt to distinguish between primary and secondary actions, the aim being to to make the most utilised and most important actions easy to find and activate and make the less utilised (and perhaps more dangerous) actions less distracting and harder to activate by mistake.

Luke Wroblewski did some research into different patterns for distinguishing primary and secondary actions. Also take a look at The Visual Weight of Primary and Secondary Action Buttons.

Answer 2

While I agree with @MattObee's answer about distinguishing desired primary and less emphazised secondary action, I think one important point to notice with this pattern here is the use of different interface elements.

While the article linked in the answer shows visual (highlighting the primary action) and interactive (only fade in secondary action after an initial action) differentiation between the two actions, the inherent meaning conveyed with using a button for primary and a link for secondary action is much stronger.

Considering that save is the action of posting or submitting information to be stored, and the cancel action is a mere redirect back to some other page and does not send any information, it makes perfect sense to use a button for the first, and a link for the second. The answers in this question about "button vs link" meaning supports this line of argumentation, or to quote the highest rated answer:

Rule of thumb: a link takes you to other place, a button makes something.