Emphasising Primary Actions on User Input Forms

Dan Cooper — Thu, 04 Feb 2010 22:43:22 +0000

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(!)

How to Vertically Align Text Within an Element

Dan Cooper — Sat, 16 Jan 2010 12:33:14 +0000

Just thought I’d let you all know of a quick trick to get your text to vertically align within an element without using nasty padding or margin hacks. If you know that your element is going to be a certain height, then you can use the css attribute ‘line-height’ and give it the same value as the height of the object. Please note that this will only work where there is only a single line of text.

The background colour I’m using is #EFF8F8

Here I have a pseudo-button and actually it’s just a text link within a

. Here’s the HTML and css:

Buy Holiday


p.actionbutton
{
margin:0 auto 1em auto; /*center the button on the page*/
text-align:center;
width:124px;
height:44px;
}

p.actionbutton a
{
line-height:44px; /* same height as actionbutton element */
font-size:1.2em;
display:block; /* makes the whole area clickable rather than just the text */
text-decoration:none;
color:Black;
background-image: url('smartbutton.gif');
}

/*rollover*/
p.actionbutton a:hover
{
color:DarkOrange;
background-image: url('smartbutton-down.gif');
}

Here are the source images for you to play around with

Normal button state

On mouse rollover

athe.la blog » HTML

Emphasising Primary Actions on User Input Forms

How to Vertically Align Text Within an Element