Designing The Holy Search Box: Examples And Best Practices

Advertisement

By Smashing Magazine Editorial and György Fekete

On content-heavy websites, the search box is often the most frequently used design element. From a usability point of view, irritated users use the search function as a last option when looking for specific information on a website. If a website’s content is not organized properly, an efficient search engine is not only helpful but crucial, even for basic website navigation. In fact, search is the user’s lifeline to mastering complex websites1. The best designs offer a simple search box on the home page and play down advanced search and scoping.

In practice, websites tend to grow over time, adding new content and, more importantly for us, adding new navigation options, such as additional content sections. However, these new content islands do not necessarily fit the whole information architecture that was well-designed and thoroughly structured when the website was initially designed. The consequence is a poor navigation scheme that is more irritating than helpful, because the content appears to be scattered all over the place instead of contained in separate, very distinct folders (in fact, this is a problem we encountered here at Smashing Magazine a couple of weeks ago).

When content organization appears to be a mess and it seems nearly impossible to find information, users are very unlikely to decide to browse the available sections of the website. They are more likely to either leave the website (hitting the “Back” button and returning to Google’s search results), or turn to the only escape hatch they (hopefully) have: the holy search box.

Although the back-end process of searching a website is very important, we shouldn’t neglect the front end, the design, either. Below you will find a few, but important, guidelines to keep in mind when creating search box designs. All of the examples shown below are linked to the pages from where they were taken.

When to Use Search?

Not every website needs internal search functionality; however, you often have to meet users’ needs for quick access to information, particularly when the website is growing. If the website’s navigation is simple and intuitive and there are very few articles “lying around” and not really fitting your navigation scheme, search, and hence a search box, won’t be necessary.

An efficient search engine puts users in control of their search for information. When users encounter a relatively complex navigation system, they will immediately look for a search box to get to their final destination quickly and painlessly. Essentially, it’s a defence reflex: search lets users assert independence from the website, which can (unintentionally) irritate users and dictate how they should use the Web.

Consequently, if your website is pretty large and likely to grow in the future, it is a good idea to consider adding search functionality up front. Your users will be grateful to you for that.

Search Box = Input Field + Submit Button

And this is where the design of the search box becomes important. The box must be clearly visible, quickly recognizable and easy to use. One may think that the search box doesn’t need a design; after all, it’s just two simple elements: an input field and submit button. How much harm could a poor design do? Well, there are a number of things that can go wrong; for instance, the text displayed in the input field may be hard to read, or the input field may be too short or too long (you’ll find more examples below). Some designers even prefer a minimalist solution and don’t provide a submit button at all: the “Return” key has to be used instead. Well, in our humble opinion, that’s not the most usable solution out there.

Screenshot2

Screenshot3

Indeed, the design of the search box is a big deal. Ideally, the search box would fit the website’s overall design perfectly yet manage to stand out slightly when users need it. Adding advanced search options may have benefits if users are looking for very specific information, but simple search usually works best and should be presented as an input field with a submit button. Remember, the submit button is a button, which means it should be designed like one. In particular, the submit button should look different than the input field. We are not sure if styling the submit button using the border properties in CSS is a good idea because that would make the button look like any other design element. Instead, giving the button a “button look” (i.e. another color, a different shape, a search icon, etc.) will always work.

TechCrunch4 (example above) uses the same color for the input field and submit button. The color scheme perfectly matches the website’s overall color scheme. However, it leads to a problem: at first glance, it’s really hard to see where the search box is. Users have to search for it because it doesn’t stand out and is not easy to spot. Although the placement of the search box is fine, it is easy to overlook, which is not a good thing.

A search box should be a box. Reason? Your visitors don’t read the page; they scan it. The most common design for the search function is a box, with the input field being a relatively wide box. Users tend to scan for this pattern on a Web page, so as good practice, try to avoid any other kind of design, such as linked text or a button without a text field.

Screenshot5

A search box should be simple. According to usability studies, it is more user-friendly to have no advanced search options displayed by default. Advanced search, as the name suggests, is advanced, and users get confused trying to use it. One study shows that most users don’t know how to use advanced search or Boolean search query syntax.

Bottom line: if you design a search box, make sure it looks like one and is as simple to use as possible.

Frequent Mistakes in Search Box Designs

In our research, we identified a couple of problems with many search box designs. One wouldn’t expect these problems to occur often, but apparently, designers can be quite creative:

  • Placing the search box at the bottom of the page, or hiding it in the navigation menu.
  • Making the input field too short; users are forced to use short, imprecise queries, because longer queries would be hard and inconvenient to read.
  • Making the submit button too small, so that users have to point the mouse very precisely.
  • Making the search box hard to find.Screenshot6

    Where is the search box here? On Bridge55.com7, looking for it is like a “Where’s Waldo” search. In our opinion, the choice of colors here doesn’t really help users. Even when the box is found, it’s hard to understand where the search query should be typed. There should be a better way to do this.

    Screenshot8

  • Putting the search box together with other forms, such as a newsletter box, which is irritating.
  • Over-designing the search box, making it really hard to spot.
  • Overloading the user with advanced search functionality, making it hard to perform a simple search.
  • Naming the submit button something very unintuitive.
  • Making non-search design elements look like a search box.
  • Providing multiple submit buttons.

Screenshot9

The search box design on Wikipedia10 is not really intuitive. Should users click “Go” or “Search”? Hints appear when the mouse hovers over the buttons: “Go” takes users to the page with the title that exactly matches their search query, if one exists, and “Search” is traditional full-text search. Maybe two radio-input elements and a submit button would be a more user-friendly design solution?

Search Box Design Considerations

Let’s take a look at some frequently recurring problems and questions designers are likely to face when designing a search box.

Where to place the search box?
There are many possibilities, but only a couple of right ones. The most convenient spot for users would be the top left or top right of every page on your website, where users could easily find it using the common F-shaped scanning pattern11. However, some blogs tend to place the search box in the bottom of the (left or right) sidebar. That’s probably not a good idea but is likely done because of advertising considerations.

What to name the submit button?
It is good practice to give the search button a meaningful name, such as “Search” or “Find,” instead of “Go.” Make the search button stand out from the whole search box design, showing users where to click.

Screenshot2412

The search button in the image below is very confusing for users. They wouldn’t be able to figure out if it is a search box or something else, although the description in the text field suggests it is.

Screenshot13

Where to place the title of the search box?
Users need to know that that boxy-looking thing is a search box. And the easiest way to do that is to tell your users that it is; for example, by giving it a section title. According to eye-tracking tests published by UXMatters14, the optimal position for section titles is the upper-left area above the search box. That seems like a plausible design decision to us.

How to make it clear what users can search for?
It is a good idea to include a sample search query in the input field to suggest to users what the function can be used for. But make sure this text is deleted when the user focuses the mouse on the input field; this can be achieved with the help of a little JavaScript code.

Screenshot15

Many websites implement Google’s SiteSearch API16, which gets its search results from Google’s index. If you use this feature, make sure to state as much next to the search box. Users don’t like unexpected results, and the search algorithm of Google may be different than your website’s, thus breaking the consistency rule.

Screenshot17

Search Box Showcase

Notice that not only is it important how the search box is designed, but it is much more important that search works properly. As Jakob Nielsen states, the first results page is golden18: “Users almost never look beyond the second page of search results. It is thus essential that your search prioritizes results in a useful way and that all the most important hits appear on the first page.”

1. Classics

When it comes to search boxes, the simplest design is usually the best. The look of the traditional input field and submit button is easy to understand for both experienced and inexperienced users; therefore, designers often stick to the default and don’t mess around with the holy grail.

Here are two classics from Jakob Nielsen19 and Fontshop20, designs that haven’t changed since the early days of the Web.

Search box21

Screenshot22

2. Making the submit button stand out

We found that many designers choose to clearly highlight the submit button to make the search box stand out. Very often, input fields are designed with a background color that fits the surrounding design elements. Consequently, to make the box more visible, visual pointers are needed. In these situations, the submit button is often given a more vivid color or unusual shape.

Screenshot23

Screenshot2412

Screenshot25

Search box26

Screenshot27

Screenshot28

Screenshot29

Screenshot30

Search box31

Screenshot32

Search box33

Search box34

Search box35

Beyond Current Horizons36 uses a clever idea to make the search box stand out. The website’s whole layout is mostly white; only the upper-right part is quite colorful. The search box is placed at the bottom of this area.

Search box37

3. Using a magnifying glass

Over the last decade, the magnifying glass has become a conventional icon for search and is still used very often when designers want to communicate the function of the search element. The magnifying glass can be found to the left or right, in the input field or near the submit button, near the search box or far from it. We couldn’t identify a particular trend, so in most cases designers are left to find the location that works best for them.

Screenshot38

Screenshot39

Screenshot40

Screenshot41

Screenshot42

Screenshot43

Screenshot44

Screenshot45

Screenshot46

Search box47

Search box48

Search box 49

Search box50

Search box51

Search box 52

Screenshot53

Screenshot54

Search box55

Decodeunicode.org56 has a very creative — and strange — design. Clicking on the magnifying glass with the letter “A” above it opens a modal pop-up window with advanced search options. Don’t try this at home or at work.

Search box57

Nicely integrated submit button as a magnifying glass:

58

4. Using illustrations

Search box59

Screenshot60

Search box61

Search box62

Screenshot63

Screenshot64

Screenshot65

5. Rounding the search box

For some reason, designers still use rounded corners for input fields and submit buttons. Both elements are usually designed very carefully, with attention to small details that result in attractive and appealing search boxes. We don’t know if this approach is more effective, but it definitely looks more user-friendly (compared to the default design of search boxes).

Screenshot66

Screenshot67

Screenshot68

Search box69

Search box70

6. Using arrows

Sometimes the submit button is labeled not with text but with a symbol or character; for example, an arrow. Arrows are usually pointed to the right; in some cases they are pointed down (which is strange and quite unusual).

The submit button in the form of an arrow:

Search box71

The down-pointing arrow is used very rarely:

Search box72

On Erweiterungen.de73, the magnifying-glass image is carefully integrated in the input field. This is a nice solution that doesn’t irritate the user, because the designer has taken care to pad the space between the image and inputted text.

Search box

tastebook74

Screenshot75

7. Using handcraft

Handcraft strikes back in this search box design:

Search box76

And in this one:

Search box77

This search box looks nice but is hard to recognize.

Search box78

A tiny, harmless, humble hand-written search box.

Search box79

The “Return” key is used here for a submit button:

Screenshot80

Search box81

8. Boxy designs

Because they’re called search boxes, many design them accordingly. Unfortunately, such designs are often quite boring and not really nice to look at.

82

Screenshot83

Screenshot84

Screenshot85

Screenshot86

Screenshot87

Screenshot88

Screenshot89

Screenshot90

Screenshot91

Screenshot92

Screenshot93

Button with an icon; a rather unusual design:

Search box 94

9. Experimental solutions

Web designers are creative folk. Hence, it’s no wonder we have found dozens of really unusual, strange, creative and absolutely inappropriate designs. It’s up to you to build new ideas upon the ideas of the designers presented above. But please keep in mind: usability should have the highest priority. The form follows the function, not the other way around.

Search box95

Search box96

Search box 97

Search box98

Search box

Search box99

Search box100

Search box101

Search box102

On Uxmag.com103, the search box opens after clicking on the “Search” link.

Search box104

A cryptic search box, designed by Stefan Bucher105.

Search box106

(al)

Footnotes

  1. 1 http://www.useit.com/alertbox/20010513.html
  2. 2 http://www.techcrunch.com/
  3. 3 http://www.techcrunch.com/
  4. 4 http://www.techcrunch.com/
  5. 5 http://www.donttrustthisguy.com
  6. 6 http://www.bridge55.com/
  7. 7 http://www.bridge55.com/
  8. 8 http://www.bridge55.com/
  9. 9 http://en.wikipedia.org/wiki/Main_Page
  10. 10 http://en.wikipedia.org/wiki/Main_Page
  11. 11 http://www.useit.com/alertbox/reading_pattern.html
  12. 12 http://www.housingworks.org
  13. 13 http://www.carhartt-streetwear.com
  14. 14 http://uxmatters.com/MT/archives/000068.php
  15. 15 http://nyc.everyblock.com
  16. 16 http://www.google.com/sitesearch/
  17. 17 http://www.cnn.com
  18. 18 http://www.useit.com/alertbox/20010513.html
  19. 19 http://www.useit.com/
  20. 20 http://www.fontshop.com
  21. 21 http://www.useit.com/
  22. 22 http://www.fontshop.com
  23. 23 http://www.moodboard.com
  24. 24 http://www.housingworks.org
  25. 25 http://www.corkd.com
  26. 26 http://activereload.net
  27. 27 http://www.subdued.net
  28. 28 http://www.tnvacation.com
  29. 29 http://www.vouchercodes.co.uk
  30. 30 http://www.webdesignerwall.com
  31. 31 http://www.signalfeuer.info/
  32. 32 http://www.concentric-studio.com/news
  33. 33 http://www.digital-web.com/
  34. 34 http://www.thesuperest.com/
  35. 35 http://www.disassociated.com
  36. 36 http://www.beyondcurrenthorizons.org.uk/
  37. 37 http://www.beyondcurrenthorizons.org.uk/
  38. 38 http://listen.grooveshark.com/
  39. 39 http://www.cssbeauty.com
  40. 40 http://www.eeleen.com
  41. 41 http://www.last.fm
  42. 42 http://www.miaandmaggie.com
  43. 43 http://www.fortysevenmedia.com
  44. 44 http://www.wishlistr.com
  45. 45 http://www.thejazzmann.com
  46. 46 http://www.yourchurch.com
  47. 47 http://www.salameander.com
  48. 48 http://www.aict.wa.edu.au
  49. 49 http://www.webresourcesdepot.com/
  50. 50 http://www.befunky.com
  51. 51 http://www.livsey.org
  52. 52 http://www.avantagepartners.com/
  53. 53 http://www.mybanktracker.com
  54. 54 http://www.nyokiglitter.com
  55. 55 http://nettuts.com/
  56. 56 http://www.decodeunicode.org
  57. 57 http://www.decodeunicode.org
  58. 58 http://silvestre.com.ar
  59. 59 http://www.ilovecode.com
  60. 60 http://www.matblogg.se/
  61. 61 http://spring.tnvacation.com/
  62. 62 http://deborahcavenaugh.com/
  63. 63 http://www.designdisease.com
  64. 64 http://blog.torondel.net
  65. 65 http://www.carbonica.org
  66. 66 http://www.baneydesign.com
  67. 67 http://www.teddyhwang.com
  68. 68 http://www.alltop.com
  69. 69 http://www.worship.net/
  70. 70 http://digitaldeceptions.ca/
  71. 71 http://www.baekdal.com
  72. 72 http://www.tinderhouse.com
  73. 73 http://firefox.erweiterungen.de
  74. 74 http://www.tastebook.com
  75. 75 http://www.tastebook.com
  76. 76 http://www.elmoreclub.com/
  77. 77 http://www.whatalovelyname.com/
  78. 78 http://andresgallego.es/
  79. 79 http://oink.elrellano.com/index.php
  80. 80 http://www.ispoil.net/
  81. 81 http://www.catalyststudios.co.uk/
  82. 82 http://www.piktogramme-und-icons.de
  83. 83 http://www.cssaddict.com
  84. 84 http://www.fall.tnvacation.com
  85. 85 http://www.konigi.com
  86. 86 http://www.orangecoat.com
  87. 87 http://www.photoshoplady.com
  88. 88 http://www.austintownhall.com
  89. 89 http://matiasdutto.com/
  90. 90 http://www.good.is
  91. 91 http://www.jaredigital.com
  92. 92 http://www.grainedit.com
  93. 93 http://www.issuu.com
  94. 94 http://www.3things.be/
  95. 95 http://backstage.sofasurfer.eu
  96. 96 http://retinart.net/graphic-design/50remakes-ag
  97. 97 http://www.basmatitree.net/
  98. 98 http://www.pixsy.com
  99. 99 http://www.webappers.com
  100. 100 http://www.findinternettv.com
  101. 101 http://www.css.de
  102. 102 http://www.jdidit.com
  103. 103 http://www.uxmag.com/
  104. 104 http://www.uxmag.com/
  105. 105 http://www.stefanbucher.net/index.php
  106. 106 http://www.stefanbucher.net/index.php

↑ Back to top Tweet itShare on Facebook

György Fekete is a Web developer with 5 years of experience in Web design and development. He is the founder of Primal Skill Ltd., an established Romanian Web design and development studio.

Advertising
  1. 1

    While i do not agree with some of your examples i think its very cool that you cover that topic. My Searchbox would prolly be a bad example because the search button doesnt really stand out. But since my site is messed up as a whole nobody would notice it anyways lol

    -1
  2. 52

    one of the main problems with search boxes in the internet is the text inside the search box field. users go wrong again and again thinking they want to search the text written in the search box.

    dont tell me why but dozens of user tests made and everytime the users continue clicking on search button when they see something written inside the search box.

    so, my recomendation dont put anything inside a search box field. user expect to see the search box clear to type inside. they never click on the search box field is they see it written.

    -1
  3. 103

    Long post, so many search boxes…

    0
  4. 154

    Joris Hoogendoorn

    December 24, 2008 2:01 am

    Another nice searchpage: http://www.s-w-h.nl/

    0
  5. 205

    I think dA (deviantart.com) have pretty much mastered the art of search box. :-)

    1
  6. 256

    Awesome examples…. I’m trying to figure out a good design for two search boxes. Different search functionalities, person and site search…

    1
  7. 307

    great article – very useful

    0
  8. 358

    One superb article!

    R!

    0
  9. 409

    This is a very useful list… I am designing my own blog that will appear in June on my own site and was looking for this kind of inspiration! I prefer the boxes that have at least the word “search” in or around the box because that makes it a little more accessible I think!

    Gr, Edgar Leijs

    0
  10. 460

    nice search boxes,,,,,,,,,,

    0
  11. 511

    good i inspired on my blog

    1
  12. 562

    Nice article but why isn’t your theory put into practice on this site?

    The search on smashingmagazine looks like you signing up to mailchimp (advert banner) and is not clear?

    1
  13. 613

    thanks to all of these this is verry useful

    0
  14. 664

    Nice information….Thank you so much……

    0
  15. 715

    Nice information

    Thanks you so much…..

    0
  16. 766

    So glad I bookmarked this post some time ago… I’m thinking about my search and these tipps and inspirations really helped me. Thanks!

    0
  17. 817

    where can i learn how to design a search box with a magnifying glass ?

    -1
  18. 868

    I cannot see the search box on Smashing’s home page (the one that says “search the Magazine”), if I open it using Firefox. Can you guys? This is kind of ironic.. :)

    0
  19. 919

    Very good! Thanks for good inspiration…

    0
  20. 970

    You have posted very useful stuff here. Thanks for sharing it with us.

    0
  21. 1021

    very nice article but plz tell me about google search box how to use dis correctly

    0
  22. 1072

    http://www.bigsearchbar.com is a gallery of custom designed search bars.

    1
  23. 1123

    It is good to see someone say that a search box is not necessarily needed on every site. If the site is small and the navigation is simple, then a search box is not needed.

    Good work!

    0
  24. 1174

    An excellent article. My company is redesigning their web site and this has come at the prefect time. Thank you.

    0
  25. 1225

    The article says that some of the common problems with Search box design are

    1. Putting the search box together with other forms, such as a newsletter box, which is irritating.

    2. Naming the submit button something very unintuitive.

    IMO the Smashing Magazine Search Box violates both these rules. http://farm4.static.flickr.com/3358/4556627967_3eba3cbb70_o.gif

    1
  26. 1276

    These are some great examples. Any thoughts on mine?

    http://www.wpexplorer.com/

    thanks!

    -1
  27. 1327

    Jamaica Point to Point

    May 9, 2010 12:02 pm

    Kudos. Looking on implementing one on kids.jamaicapointtopoint.com in depth research was done

    0
  28. 1378

    They are very very nice.

    0
  29. 1429

    Cool Search Box Designs. Good very good. thanks

    0
  30. 1480

    very inspiring, thanks ;)

    1
  31. 1531

    Great list of best practices!

    1
  32. 1582

    Smashing!

    Love these posts. Can we get updates on a few of these?

    MJ

    -2
  33. 1633

    Ultimate collection …Thanks for sharing…

    1
  34. 1684

    Shai Ben-Yehuda

    April 2, 2011 6:33 am

    This great article is focused at the design of the search box.
    But what about the popup? E.g. facebook shows text and images, and group the results by category.
    In general you need a javascript developer to bring it all together.
    Some companies provide tooling. E.g. jBart from http://www.artwaresoft.com provides jquery based online studio to build search popup based on your data.

    0
  35. 1735

    Love the designs.. Thanks for posting this.. What about search box functionality?

    Check out this site for example: (http://www.quidco.com/) – notice how when you type it gives you suggestions based on your query.

    Example: Type in “Computers” and before you hit enter – you are faced with a list of retailers like, Comet, Dixons, PC World.. etc.

    Never seen this before, I love it.

    1
    • 1786

      Nathaniel Bailey

      June 28, 2011 3:23 am

      I do like that search function but I just dont like the layout of quidco.com so much :( I prefer sites like http://www.cashbackadder.com/ which have some products and product categories straight on the home page :)

      1
    • 1837

      thats actually pretty common but is really clever, their rivals (topcashback.co.uk) use it when you try to submit a missing cashback claim so you can’t accidentally type in Cirrys or some other spelling mistake.

      I think the reason its not used more often is on slower internet connections it can really hurt performance

      1
    • 1888

      Personally I prefer getting a list of all results- this allows me to see everything listed as apposed to sending the user down a pre-defined path. Choice is always a better user experience. :-)

      1
  36. 1939

    nice textbox images

    0
  37. 1990

    This search box collection and design principles is a great start. Go beyond the box to search results, mobile and tablet augmented reality with Designing Search: UX Strategies for eCommerce Success — my new book from Wiley.

    Get Ch1 FREE: http://www.designcaffeine.com/designingsearch/

    -Greg

    0
  38. 2041

    Does the word “Search” imply potential failure? It seems to suggest an element of luck may be required to get the results you want – or any results at all.

    “Find” seems a more positive and confident word to use. This implies that you will get a result to your query. Just a thought.

    -1
  39. 2092

    Excellent post! I will be also likely to create a blog article about this… thank you

    0
  40. 2143

    This is a great article! The way search is integrated into the design of your site is very important. I would take it a step further and make sure that the results page also maintains consistency with the design of your site.

    Also, the functionality of modern search engines provide users with a “discovery” experience. This enables site owners to promote certain content through “top searches”, “related searches”, and “recent searches”. This makes both website users AND operators happy.

    Such functionality is simple (and inexpensive) to implement with services like Website Search (getwebsitesearch.com).

    0
  41. 2194

    This is a great article! The way search is integrated into the design of your site is very important. I would take it a step further and make sure that the results page also maintains consistency with the design of your site.

    Also, the functionality of modern search engines provide users with a “discovery” experience. This enables site owners to promote certain content through “top searches”, “related searches”, and “recent searches”. This makes both website users AND operators happy.

    Such functionality is simple (and inexpensive) to implement with services like Website Search (getwebsitesearch.com).

    0
  42. 2245

    One thing you didn’t cover was search box for specific content like searching for domain.

    0
  43. 2296

    To add place holder text in the form field which is ideal for search form fields you can use this jQuery plugin:

    0
  44. 2347

    Thanks for a great and enlightening article.

    One thing I miss is if it’s not a normal website search field, but rather a search field in a RIA. I think that there are some differences that calls for slightly different considerations.

    I am working on a one page web application that always shows of a lot of results fetched in a DB – either all results, or some filtered results narrowed down by a search query.
    I have a search field marked by a magnifier, when no search phrase is entered. But as soon as a search phrase is entered and the results is filtered, I would like to change the magnifier to a cross (hopefully?) indicating that users can remove the search phrase by clicking the cross, and get back to seeing all unfiltered results.

    However if one phrase is typed in, and the user wants to type in another phrase – the cross is sort of in the way, and might be changed back to a magnifier. I’m not quite sure what will offer the user visual aid, and what will just bring confusion here.

    Does anyone have some views on this matter?

    1
  45. 2398

    Using a very minimal search box approach for winedinedaily.com , but do see that a search button would improve it. : )

    0
  46. 2449

    I love websites with awesome design. This is one for example has created some very nice looking CV examples:

    http://www.resumeok.com/dermatologist-resume-example/

    2
  47. 2500

    Purcul Mitrut

    May 5, 2013 6:54 pm

    When it comes to search bar, minimalistic is always better

    0

↑ Back to top