Search Box Design, Things To Keep In Mind

Posted on by

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: 

 

 The Amazon.com design has several things to point out:

1. The search box is in a prominent position. This is important in huge sites like Amazon where the people use the search as navigation option.

2. By default the search works website-wide.

3. Users can search in specific categories.

4. "GO" as search button. I would say that something different from "Go" or "Search" would not work properly.

 

The Amazon search in detail:

 

Safari Books Online has a, maybe, too complicated search box. It’s nice that they placed a link to the advanced search page but, then, why giving so many options to the basic search box design?

Safari Search Box A

Giving so many options in the "simple" search could confuse users… if they are not able to find products they would not be able to buy them…

Safari Search Box B

 

Google is the queen of the search boxes. Simplicity at its best. Remember that Google was the first making the search user friendly? (and accurate).

Google Search Box

 

Use the button to help users

The Facebook friend search box has a dangerous design, it’s not standard as it lacks of a seach button. I would not recommend to think that all users would understand things in such an intuitive way as designers or programmers could do.  

Facebook Search Box Design

 

Ebay labels the search button "Search". No chance to confuse users.

Ebay Search Box Design

 

Notice the button names at Yahoo, they clearly tell users where they are searching; the web or images.

Yahoo Web Search Box Design

Yahoo Image Search Box Design

 

If you place a button try to make it look like a button. Etsy.com has a flat button that does not really look like a button. If possible, make buttons 3D and more users will be able to understand your interface.

Etsy Search Box Button Design 

 

Predict entries

Part of usability is the behavior of a feature. The Google Docs search box helps users as they get suggested results while typing.

Google Docs Search Box Design

 

Search Box Position

I don’t know the reason why but placing the search box on the upper right corner seems to be the standard. Users look for it there. 

Netflix Search Box Position

 

Clean Air Gardening places a small search box on the left corner. Placing the search box under the the logo could make it more visible but it is dangerous to make it so small and to place it on a non standard position.

 Clean Air Gardening Search Box Position

 

Proper wording

Best Buy use some extra wording to help customers. Sometimes using "Search for" instead of just "Search" could make the search box even more meaningful. Notice how the "in" (all categories) could add even more benefit to users.

Best Buy Wording on Search Box

 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.  

  • http://yGESS.com Steve

    I think the Safari books example also suffers from having the boxes for the search term and where to search in the wrong order. I have used the site for more than a year and still try to enter my search temr in the wrong box.

  • Pingback: Arama Kutusu Tasar?mlar?: Akl?n?zda Bulunmas? Gereken Bilgiler | Cnkt

  • tim

    it’s interesting that you write this blog when the search box on here is small and the GO button is wrapped down to the second line. and it’s thrown in the midst of a bunch of other text around it.

  • http://www.designvsart.com/ Alexis Brion

    Thanks, Tim, for your comment. I might do some changes although you were able to:

    - find the search box
    - notice that it was a search box
    - see the GO button
    - and notice what that button was for.

    I do really appreciate your comment.

  • Basil

    Greetings. ANother issue with your current search box: The user has to scroll down to find it!

    I think the search input field should always be at the top of the page, where the user will surely find it. Maybe put it just above the feeds section?

    Very nice guide btw, in addition to this:
    http://www.smashingmagazine.com/2008/12/04/designing-the-holy-search-box-examples-and-best-practices/

    and Nielsen’s guide, we probably have all the information we’ll ever need on the matter ;)

  • http://www.examplemag.com/ ExampleMag

    I agree that somehow on FB they didn’t place the search button next to the input field, and FB is pretty good at UI design. So curious why they did that…