A simple CSS based usability tip for search buttons
This is a small tip to improve the usability of search fields. I realized the need of this while working on a recent project and thought it was good enough to share with my readers 
Do you have the habit of hitting the search button multiple times even before it loads the search results? Well… I used to do that and so do many other users. Clicking the search button multiple times results in additional server requests and slows down the page’s loading time.
Why do users click again?
Because they are users! They aren’t developers who understand what happens in the back end.
Its our job as developers/designers to let the user know that the results are being loaded and to ask them to wait until it loads.
How do I do it with just CSS?
Its pretty simple. Click and hold the search button below and see.
I am sure, I don’t have to explain how it works for the experts, but if you are novice continue reading…
The trick is to use CSS sprites and show the animated loader image while the user clicks the button(on focus), indicating that the page is being loaded. You can download the sprite here.
Now, how do I avoid multiple clicks?
Its impossible to disable a button just with CSS, but we can ask the user to wait by replacing the hand/pointer with a “wait” cursor. So this is how the final CSS code looks like.
| CSS |
| 01 | |
| 02 | input.submit{
|
| 03 | width:16px; |
| 04 | height:16x; |
| 05 | display:block; |
| 06 | overflow:hidden; |
| 07 | text-indent:-999px; /* To remove any default text on the button*/ |
| 08 | line-height:16px; /* required for safari */ |
| 09 | background:url(search-sprite.gif) no-repeat 0 0; /* This will display the search icon by default */ |
| 10 | cursor:pointer; /* Hand cursor for the normal state */ |
| 11 | border:none; |
| 12 | padding:0; |
| 13 | } |
| 14 | |
| 15 | input.submit:hover{
|
| 16 | background-position: 0 -16px; /* This will display the dark search icon on hover */ |
| 17 | } |
| 18 | |
| 19 | input.submit:active{
|
| 20 | background-position: 0 -32px; /* And finally, this is the one that shows the loader */ |
| 21 | cursor:wait; /* Shows the wait cursor on click */ |
| 22 | } |
| 23 |
If you really want to disable the button, check out this JQuery solution. And, don't forget to put in your thoughts and ideas.
Thanks for the tip
You can fix this by adding the height property of the button:
height:16px;
Also, the second stage of the sprite is not visible after the mouse is released in FF3.6 ( it switches back ) — I assume this is so because the button is inside an iframe…
ps nice comment box, idk if there is a reason for the live text preview but it’s very cool
No need to show the user twice that something is happening. So only the CSS sprite would suffice IMO.
Anyway, thanks for the idea Gopal, well thought!
I noticed another thing about your comment form. Your comment form is great if you are hovering over it with the mouse, but if you tab from field to (like I did) you loose the context. The icons are decent and made sense to me, but I had to think. I tend to agree with Steve Krug on that point; Don’t Make Me Think. Great book.
I like your style and I, by no means, am meaning any harm by this post.
While writing this post I was sure that it’d pull in a little controversy. Thats a nice point about keyboard users, but can you please provide your browser details. That issue doesn’t seem to happen on Firefox/safari. I’m on a Mac (none of the buttons seem to get focused while tabbing) and it works perfectly.
Regarding the comment form, I agree with you and I’m already aware of that. I used a pure CSS based solution but I did post about a jquery based solution here which will be implemented when I get a chance.
Thanks again for your heads up.