Posted in Featured
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?
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.
text-indent:-999px; /* To remove any default text on the button*/
line-height:16px; /* required for safari */
background:url(search-sprite.gif) no-repeat 0 0; /* This will display the search icon by default */
cursor:pointer; /* Hand cursor for the normal state */
background-position: 0 -16px; /* This will display the dark search icon on hover */
background-position: 0 -32px; /* And finally, this is the one that shows the loader */
cursor:wait; /* Shows the wait cursor on click */
If you really want to disable the button, check out this JQuery solution. And, don’t forget to put in your thoughts and ideas.
- IE not interpreting text-indent on submit buttons ?
- 10 CSS properties that ‘were’ impossible to implement in IE6
- IE CSS hack without using any hacks!