Attention to detail is paramount in design. Sometimes it’s the little things which can make or break a design or engage a user just that little bit more. My favourite example of this at the moment is the footer in the new Tapbots site.
Notice the very subtle highlight of the grey and the text on the “read the blog” link when you mouseover? That’s attention to detail.
The thing with the label tag is perhaps not so creative, but more of a necessity. You should take the time to make labels for your inputs/textareas/selects etc because it adds to the usability of the page and validates.
Not only should you take the time to make your label tags, but you should take the time to style them.
That’s right, style them. The default styling, in the majority of browsers, on a label tag is simply the same as the text. This would be fine, except a label isn’t just text. It’s interactive. Have you ever noticed when clicking on the text next to a checkbox it checks or unchecks the box? Assuming all elements have labels assigned to them, you can click on any label in any form and have it move the focus to that element. This is exceptionally useful for things such as checkboxes and radio buttons which can be quite small. You’re increasing the clickable area around the element and therefore increasing usability.
I would wager a lot of people don’t know about this trick, I’d say some figure it out by chance like I did, and the reason? By default the cursor style does not change over a label.
I very quickly learnt to add the following to the CSS reset I use on all my sites:
label{
cursor:pointer;
}
You can find out more about CSS resets here.
Voila! Your cursor should turn into a hand when hovering over the label, and when clicked it will place the focus in the associated element.
I usually go a bit further and give the label some colour, or weight, make it fit with the rest of the design.
It’s a good idea to put the cursor:pointer style on the button tag too, just to provide the added visual reinforcement that it is a button and to keep behaviours on the web and computers consistent.
So, add that snippet to your CSS reset, and consider how you can creatively enhance your form with more styles now that you have the label tag to play with!
For anyone interested (and in the area) Friday is the beginning of mine and the Mister’s degree show at the University of Portsmouth. We will be exhibiting work we’ve done on our course and will be available to chat to. The rest of the school is exhibiting too and from what I’ve seen going up, there’s going to be some really interesting work to experience!
I read this one in full and it was pretty interesting stuff. Like ‘How to be a graphic designer without losing your soul’ it has lots of tips and things you can expect entering the design world. It has case studies and interviews and McCormack has some good life experience to share. Well worth picking up – I even considered buying it, but I’m terribly broke at the moment. 
