athela blog

A pretty simple philosophy: If you make the primary action on a form or web page stand out, users will be more likely to click it. By emphasising these buttons or actions you are attempting to draw the user’s focus toward it.  And by primary action, I mean the submit, send, save etc buttons; actions where the user is making progress. Secondary actions could be buttons like back, undo or cancel

There are a number of ways to emphasise the primary action. One of the easiest and yet still effective methods is to colour the button brightly to draw attention. Similarly you could reduce the saturation of the cancel button. The human eye is drawn to areas of colour which stand out from the page. Also culturally the colour green is associated with a positive action and so if the user is in a hurry or just speedily going through the form, when they see the green button they will know it’s the button that submits the information. Chances are that they won’t actually read the text of the button!

Notice how the send button is all bright and cheery in the facebook-blue colour whereas the cancel button is grey and boring.  Other methods are also just as effective such as using a text link for the cancel action instead of a button.  This is the one I much prefer as it informs the user that by pressing the link, it’s not going to post anything they’ve typed in on the form.  Perhaps less tech-savvy users might think the cancel button would perform some function if they typed in their order details and requested to ‘Cancel’ the order.  A link would completely resolve any issues as a normal web user knows that a link just redirects to a different page (in most cases).

Below we see a text link being used to give the user the opportunity to cancel the submission and return to where they came from.

Also it might be worth noting that rarely is the ‘reset’ button used on forms now.  I don’t know why it ever caught on in the first place anyway… Who wants to fill out an entire form and then scroll to the bottom and press reset?  It provides functionality that I’m sure was never used and when it was used it was never intended(!)

Related posts at athe.la:

1. How to Vertically Align Text Within an Element Just thought I’d let you all know of a quick...
2. Implementing Permission via Windows Authentication in ASP MVC Using Action Filters At work a lot of our forms use Windows Authentication...