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.