Emphasising Primary Actions on User Input Forms

 HTML, usability  No Responses »
Feb 042010
 

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!

Continue reading »

 Posted by Dan Cooper at 10:43 pm  Tagged with: ,

How to Vertically Align Text Within an Element

 HTML  No Responses »
Jan 162010
 

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 <p>. Here’s the HTML and css:

<p class="actionbutton"><a href="/BuyingAndSelling/BuyHoliday">Buy Holiday</a></p>


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



 Posted by Dan Cooper at 12:33 pm  Tagged with: , , ,
© 2011 athe.la blog Suffusion theme by Sayontan Sinha