How To Design A Great Search Box

When starting the design of any website you need to have a list of the component parts of your new site. Of these, one of the most important is the site search box and the purpose of this article is to highlight the must have points and show examples of what is unhelpful or even detrimental to your new site, what to use and what not to use. In a short sentence: how to design a great search box.

Once you have decided on the basic layout, color and typeface, your next area to focus on is search. Remember that as you designed the page, you know where everything is, but your users don’t.

There is no doubt that a simple to use search box is a must for any site. If you make it usable, people will use it, make it easy and people will stay on your site to find what they want. Simplicity is the key to all this.

Once you have the basic design sorted out it, is time to give some attention to the all important search box. Search is the beat way for your viewers to find what they want easily and it makes the user comfortable with the site if it fits their perception of easy.

It will make the perception of your website complicated if this function is not what your viewer is expecting, causing them to click away. It will make your website less intimidating if it is easily navigated and this is achieved by simplifying search procedures.

The necessity of a search box

With the search facility you are allowing the user to be independent of your website and this builds the trust factor, which is one of the most important functions of your site.

You are allowing users to look at what they choose rather than what you want them to see. It is only a perception because as you published the site you are, or should be in control, but with an easily searched site the viewer feels in control.

No matter how big the site content is, search efficiency is a sine qua non feature. It is a very real requisite and part of a good page design so pay some attention to it.

How to design it

It is only a search form, how much designing can it take? Lots. Let me repeat: search box design is very important, it is probably one of the main areas where designers slip up. They wrongly assume it is jut a search box, anything will do. It won’t.

Firstly it should be in keeping with the overall design. If your site is minimalist and subtle you don’t want a big, bold search box, it must conform but needs to be visible.

At its basic design level it is an input field with a submit button or with the distinctive search icon. That is what people expect, so don’t disappoint them.

A highly visible entry field, perhaps with the magnifying glass icon, and a search button, labeled search, search now, submit or whatever text you want to use but make it obvious. Let the user be in no doubt when he hits the button that the term he has typed in the field will be searched for. Remember, if it is simple and usable people will use it.

Make it big enough to insert the request, make it readable, not too small in size and decide if you just need a simple search function not an advanced search.

This is a point to consider as it has been proven that a large percentage of users don’t understand advanced search and may be put off. If it is simple, they will surely use it.

Make it look like a classic search box

Customers know what a search box looks like, it is immediately identifiable, they know what it does and know how to use it, so remember it is called a search box, so give them a rectangular box.

Visitors do not read your lovingly composed content, they just scan it. If they want to investigate further they will search. The only reason they won’t continue to search is if they can’t find the box, and they will be looking for a familiar design in a central or right hand side at the top of the page. If it is not there they will click away rather than search for it.

Once they have found it and have typed in their query make it easy to submit by making the button obvious.

There you are, the secrets of a search engine box are in your possession. Put it where they expect, make it easy to enter search terms and make it easy to submit.

What to do and what to avoid

Search boxes live at the right hand side of the top of the page. They do not belong anywhere else, people will not search for them. Hide them elsewhere and they will be ignored as your hard won traffic moves on to a site which has a search box where they expect it.


They will move to another site that they understand. The wheel is round because it works, search boxes are where they are because they work. You alter that at your cost.

Make it obvious and label it ‘search’. Have text inside it saying enter your search term. The possibilities are endless. The position is set so as soon as they have found it and know where they have to enter their query, make it obvious how they have to submit it.

Use a big submit button, an icon or a symbol. Make it obvious; do not expect the visitor to think about how. Make it obvious and thought free and it will be used.

If you use text within the search box make sure your script deletes any sign of this when the customers query is entered. A small point but very off putting if you are typing a search term and all you can see is enter your search term here.


It is important that this advice is followed, it is literally life or death of your site so we make no excuse for reiterating it. Search boxes are at the top of the page generally center or right. Not on the bottom, not half way down the sidebar.

If you have to rethink this because of advertising restrictions move the ad. If visitors cant find the box they will bounce away. Not maybe, not possibly they will move. This, with size and readability is really important.


It is not the most artistically rewarding part of web design but after layout is the most important. Search boxes are your visitors’ friend. The search box gives your visitor the impression, quite rightly, that they are in control.



Related Articles:

This entry was posted in CSS, Resources and tagged . Bookmark the permalink.

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>