Search boxes are very important elements in the web: if customers can not find what they are looking for they will not be able to buy it. Reality is as simple as that.  

Designing a good search box is not that easy, things to keep in mind:

1. Position of the search box

2. Wording

3. Behavior

4. How the search button should look like

Here I put together some examples of search box designs: 

 This examples are taken from the web, I’m not trying to attack anybody. Keep in mind that a bad design could be the result of the lack of money or time.  

A frequently asked questions section (FAQ) is where the users go when they have a specific problem and want to solve it by themselves. This means that a good FAQ section will not only improve usability but it will also save money as less customer support will be needed.

"Amazon placed a search box specially for the help section…"

Making a FAQ section is not difficult but it takes some time. The most important task is to identify the questions the users do more frequently. You can do that checking records with employees that are in direct contact with customers. Talk to designers and programmers, to see if they also know about common questions. At last but not least, checking your competitors website could also give you some ideas (actually, that’s always a possible resource for some ideas!).

I have 3 examples. In the first one, Linkedin present the top 10 questions as a welcome page and on the left it shows a list of question groups. I like this approach but it does not have a search feature, not even one to search the question titles.

Digg has a very good frequently asked questions page that displays all the question groups on the same page, so you don´t have to click among categories. Other popular information, like how to report a bug, is on the right side of the page. Unfortunately this page also lacks of a search, but the approach is a little bit better than the Linkedin one as the user can search with the web browser search feature among all the question titles.

Amazon has the super-FAQ (it’s actually called "Help"). Questions (or answers) are organized in categories on the left side of the page, on the right side there is a perfect self-service tool box. Amazon placed a search box specially for the help section. FAQs like this one really help users and save a lot of money in customer support. 

Providing different URLs for every web search result page will give users the possibility to copy and paste the link. That means that they can make a search and easily send the results to another person.

Taking care of usability issues improves the user experience and could increase your sales. This is a good example. Imagine customers sending search results to their friends or partner to discuss about the next thing to buy. Make users’ life easier and you will win too.

Amazon is again an example of good web design. The URL has an estrange code for internal use but it was a smart decision to add the search terms to it (e.g. art + deco), so users can remember what was that link about.

Giving users a way to organize the results improves the user experience, it will be easier for customers to find the products they are looking for. Specially if your website is providing a long list of results, you have to give the possibility of sorting and filter them.

Download.com has a very good search results filter design. Results can be filtered by operation system, type of license, categories and more. Even better, from the usability point of view, is the fact that results can be sorted as the user clicks on name, date added and other columns.

Giving users the chance to narrow the search from the beginning might increase the possibility that they find the information or product they are looking for at your website. One usability approach is to provide a search box with a list of subsections. Here an example of Cafepress.com, a design-it-yourself shop.

Give users a list of selectors, specially if you are offering a wide range of products. But take care, many users might not understand how the selector works, so make the “search all departments” the default option.

Etsy.com, the handmade product website, got a not so perfect solution, subsections are not very clear. They split the subsections into farther subsections using “items:” and “sellers:”, plus they assume that all users understand the meaning and use of tags.

Being consistent with the search box position is going to help your users when looking for the products you sell online. Many could say that the right position for the search box is the upper right corner. Maybe Yes.

But setting your own search box position is a practical web design option. Keep in mind that you should place the search box in the same place across your whole website.

Check, for example, Foodnetwork.com, a website about cooking. It doesn’t matter where your are, there is only one search box, always in the same place.

On the other side, an example of poor usability, could be found at Colorware.com. At the beginning the search box is in the right position, after the user makes a search another search box appears in the middle of the screen. This is confusing for some users, many click once again the search button but this time in the new search box.

Search boxes are becoming more and more important as the number of people that prefer to search instead of browsing grows. Search could seem to be easy to implement but it’s not, apparently, as I have found many examples of bad design.

Yahoo! search box is a master piece of design. Everything is clear and they don´t use fancy wording. As expected, when the user clicks on Images, the button changes to “Images Search”. The same happen with Video, Local and Shopping.

Digg is another good example. The search box is placed on the top right corner, exactly where most users would look for it.

Barnes & Noble search got a good piece of the home page but it does not allow to search all the categories (only books, only DVDs, etc.). Usability failure for Barnes & Noble.

The worst design example I found was at PayPerPost, the company that pays bloggers sums for writing articles (soon to be called “izea”). This site it’s giving too many options to search forum posts without a simple search-go search box. Search keywords, author, category, sorting, etc. I would leave this for an advanced search function and not for normal users. I wonder if PayPerPost has ever tried this search with users. The PayPerPost site won a place in the site’s inferno.

.

Disclaimer: with this kind of article I want to point out usability and interface problems some sites could have. Please do not take this as an attack, take it as a free advice. I would like to make clear that this design problems could happen for many reasons, including lack of time or money.