A simple CSS based usability tip for search buttons

css-based-usability-tip-for-search-button

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.


input.submit{
width:16px;
height:16x;
display:block;
overflow:hidden;
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 */
border:none;
padding:0;
}

input.submit:hover{
background-position: 0 -16px; /* This will display the dark search icon on hover */
}

input.submit:active{
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.

About Gopal Raju

Gopal Raju is a passionate designer, developer and blogger from India. He’s the founder of Convax Solutions, a web design and development agency in India. Catch up with him on dribbble, Twitter and Facebook.

32 Responses to A simple CSS based usability tip for search buttons

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  1. Hi. Nice job. Look, to use that search button in Blogger, where to put the codes CSS and HTML: Before ]]> is the usual using CSS styles codes. Below if we are using HTML codes (or sometimes with gadgets HTML/Javascripts).

    Thank you very much.

    Best regards.

  2. How to differentiate CSS for particular browsers.

  3. do not work in any internet explorer version

  4. This was really helpful! Thanks for sharing.

  5. Well-designed!

  6. the button looks out of touch as it should be centered in respect to the textfield

  7. willie mae jones October 21, 2010 9:26 am

    I really would like help styling a navagation bar

  8. A nice way to jazz up the site a little…. Thanks

  9. would really love to give that a shot on my new blog

  10. Great idea, I have used this with flash and the use of .css is brilliant.
    Thanks for the tip :)

  11. ram singh mehra August 10, 2010 1:38 am

    Thanks 4 share :)

  12. I think this is a great way of keeping the user out of confusion. If they see loading button they wont click again

  13. The top of the second stage of the sprite is visible in FF3.6

    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…

  14. Thank you, useful tip!

  15. thanks for the tip, i didn’t know that a loader image is possible with css..

  16. Thanks for the tip, this is something I think normally gets lost in the details, but once you know how to do it, its great.

    ps nice comment box, idk if there is a reason for the live text preview but it’s very cool

  17. Thanks for the tip. How to put some default text in the text input field (like e.g. search here).

  18. It looks like the share links on the right have a lower z-index than the header and are hidden at the top of the screen. A quick fix is just changing the header’s z-index down to 1 and that doesn’t create any problems that I see.

    • Thanks for your tip, but that was intentional. I wanted to show the share links only to those users who scroll down to read the content.

  19. Nice trick using sprites. BTW, your comment form is doing great. Keep going. Looking forward for more.

  20. IMO the cursor:wait is not really needed.

    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!

    • Thanks for your comment. If cursor:wait isn’t used, it would still show a pointer(hand) which might give the user a tendency to click it again.

  21. Pingback: A simple CSS based usability tip for search buttons | Where Creativity & Design Thrives

  22. A bit confused in the css. When will wait cursor get back to the original state.

  23. I noticed that in your example if I tab over from the input field to the button then it will show the loading spinner as long as the spinner has focus. This is not a good usability tip. The average user is not a keyboard navigator but there are a lot of people who do navigate with the keyboard and this would be slightly confusing. I would say this _might_ be a decent fallback if javascript is turned off but disabling with javascript would be my first recommendation.

    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.

    • Thanks for your comment Trevor,

      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.

    • Hey Trevor, Upon further investigation I noticed that the issue happens only on chrome. I’ve replaced :focus with :active and now it works perfectly even when you tab over. Let me know if you find any other issues.