The other day Colin made a valid point about input button cursors. As most of us know, by default they are arrow cursors - but he said they should be pointing fingers, like hyperlinks are. I told him that changing them goes against web conventions (even Google uses arrows I said) and “Krug says” to stick to conventions as we all know. Stu then lifted up the cover of Don’t Make Me Think with a big finger hovering over a submit button. “pwn3d” comes to mind.

So I gave in to the pressure and decided to implement the usability issue that I agree, should be addressed. The fix is simple - or could be. If CSS had advanced to version 2 in all modern browsers (in other words, if IE supported CSS2), you could simply apply the following CSS rule:

input[type="submit"] { cursor:pointer;}

Alas, you have to end up doing this (in HTML):

<input type="submit" class="submitbutton" value="Whatever" />

and this (in CSS):

.submitbutton{ cursor:pointer;}

You could also do a nifty JavaScript to do it for you. Something like this would work:

function cursorMySubmits()
{
	var submitButtons = document.getElementsByTagName("input");
	for (var i=0; i<submitbuttons .length; i++)
	{
		if(submitButtons[i].type == "submit")
		{
			submitButtons[i].style.cursor = "pointer";
		}
	}
}
window.onload = cursorMySubmits;

It should be noted that using JavaScript is considered bad for accessibility reasons - so only use the above method if it’s too late to use CSS.

This is the above “Submit button finger-pointer cursor” script in action.

I should write a technical book on addressing these kind of usability issues - there are many more, just ask Colin - our in-house usability Guru.