Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

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.

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 Link

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 Link

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.Screenshot

    Where is the search box here? On Bridge55.com, 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.

    Screenshot

  • 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.

Screenshot6

The search box design on Wikipedia7 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 Link

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 pattern8. 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.

Screenshot209

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.

Screenshot10

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 UXMatters11, 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.

Screenshot

Many websites implement Google’s SiteSearch API12, 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.

Screenshot13

Search Box Showcase Link

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 golden14: “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 Link

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 Nielsen15 and Fontshop16, designs that haven’t changed since the early days of the Web.

Search box17

Screenshot18

2. Making the submit button stand out Link

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.

Screenshot19

Screenshot209

Screenshot21

Search box22

Screenshot23

Screenshot24

Screenshot25

Screenshot26

Search box27

Screenshot28

Search box29

Search box30

Search box31

Beyond Current Horizons32 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 box33

3. Using a magnifying glass Link

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.

Screenshot34

Screenshot35

Screenshot36

Screenshot37

Screenshot

Screenshot38

Screenshot39

Screenshot40

Screenshot41

Search box42

Search box43

Search box 44

Search box45

Search box

Search box 46

Screenshot47

Screenshot

Search box48

Decodeunicode.org49 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 box50

Nicely integrated submit button as a magnifying glass:

4. Using illustrations Link

Search box51

Screenshot52

Search box53

Search box54

Screenshot55

Screenshot56

Screenshot57

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).

Screenshot58

Screenshot59

Screenshot60

Search box61

Search box62

6. Using arrows Link

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 box63

The down-pointing arrow is used very rarely:

Search box64

On Erweiterungen.de65, 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

tastebook

Screenshot

7. Using handcraft Link

Handcraft strikes back in this search box design:

Search box66

And in this one:

Search box67

This search box looks nice but is hard to recognize.

Search box68

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

Search box69

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

Screenshot70

Search box71

8. Boxy designs Link

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

72

Screenshot73

Screenshot

Screenshot74

Screenshot75

Screenshot76

Screenshot77

Screenshot78

Screenshot79

Screenshot80

Screenshot81

Screenshot82

Button with an icon; a rather unusual design:

Search box 83

9. Experimental solutions Link

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 box84

Search box85

Search box 86

Search box87

Search box

Search box88

Search box89

Search box90

Search box91

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

Search box93

A cryptic search box, designed by Stefan Bucher94.

Search box95

(al)

Footnotes Link

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

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ 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.

Advertisement
  1. 1

    very neat and inspiring! thanks

    2
  2. 2

    Quite inspiring. Thanks!

    0
  3. 3

    www.galaxyspectrum.com

    December 4, 2008 3:47 pm

    We have been prioritizing this for YEARS now.

    Glad to see this important design consideration get it’s due.

    Very useful post :-D

    1
  4. 4

    Yeeeahhh!.. Smashing, as it was in good old days, is back!!!

    1
  5. 5

    wooow! this is cool. a lot of inspirational searchboxes there. never paid much attention to it. now, i think i should have

    3
  6. 6

    Nice - SE7ENize.com

    December 4, 2008 5:14 pm

    My blog has no search box…yet. This list is great example before I create one.

    2
  7. 7

    Amazing collection!!

    0
  8. 8

    excelent article! now i know not to hide the searchbox :D

    0
  9. 9

    Great Post!
    I was just thinking of this last week.
    “When will smashing publish the holy search box.”
    You read my mind. =)

    Cheers!

    0
  10. 10

    this reminds me, you know sometimes i come to smashing magazine and start to scroll and scan the sidebar looking for the search bar cause at first glance, having your search input field underneath that Mail Chimp logo, makes it looks like its for signing up to a newsletter.

    anyone else?

    0
  11. 11

    Wikipedia should have one submit button and NO additional selectors. If there’s an exact match, provide that page with a sidebar of other search hits. If there is no exact match, provide only a page of search hits. Problem solved! People get to the most likely data AND are able to see alternatives in one operation, without decision-making.

    0
  12. 12

    Very nice showcase…
    Reminds me that I should put a Search button. :)

    0
  13. 13

    chunkylover53

    December 4, 2008 9:59 pm

    Wow, really nice collection! The Xairro (http://www.xairro.com/) search field grows dynamically – an intuitive way, I think.

    0
  14. 14

    Awesome, one of the best post. BTW I dont see Apple’s seach concept here, is that missed out or its not worth in displaying it here.

    0
  15. 15

    bridge55.com was a weak example. I spotted the box right away. Other than that i like this article.

    0
  16. 16

    wow, the great excellent search box….ilike this article

    0
  17. 17

    Good article. However I must disagree with the hint that search box should not be placed together with navigation. I think it’s not a problem if it is somewhere near navigation. Because users first look at navigation and if they can’t find where they want to go they might use the search… as this is also mentioned in many usability posts all around the world.

    0
  18. 18

    Some pretty simple common-sense advice here, but it can be very easy to forget common sense when coming up wit ha flash looking design. Web pages, especially those for sites intended to make profit for their owners, should follow the principle of least surprise, users shouldn’t have to hunt for search or put any thought into using it once they’ve found it.

    One tip I think you overlooked though, is put search where it is most needed, the obvious candidate being the 404 page. When a user gets a 404 page it means they were looking for something in a particular place and it wasn’t where they expected. A user could very well just leave the site at this point, but if you provide them with a prominent search box you might just be able to keep the visitor around long enough to find what they were looking for, or at least something they can use in its place.

    2
  19. 19

    Nice article, I enjoyed reading it and will help me better plan my search box position and design for the future. As for the comment about scientology – WTF – this is a site for web design and development, these comments aren’t relevant.

    0
  20. 20

    Aaron Bassett

    December 5, 2008 1:35 am

    An article about search boxes and no mention of google? I know you wanted to concentrate on site-search but still that has to be the search box people have seen the most, it should have at least gotten a brief mention ;)

    -2
  21. 21

    Thanks for the great list :)

    0
  22. 22

    IMO, you should provide a little ‘how-to’ by the way. There’s not much philosophy behind it, but not all of your readers may know the cross-browser hack to make inputs look as fancy as you want.

    0
  23. 23

    The hint that search box should not be placed together with navigation, is a personal taste i think. It matters of the design!

    0
  24. 24

    Very cool. Could you look my Search Box “www.absmagazine.com.br” and giveme a feedback? I try it use it.

    All reviews about my design will be welcome

    tks a lot.
    Allan

    0
  25. 25

    http://www.fruitydirectory.com

    December 5, 2008 4:01 am

    I have a nice one on fruitydirectory.com :)

    0
  26. 26

    Sorry, its impossible to use SM as RSS. This so much long posts arent useful

    0
  27. 27

    you actually used the same words written here

    0
  28. 28

    Very interesting look at a design element that often gets no attention.

    0
  29. 29

    Nice designs! Maybe you should be interested my this one NEWSeR

    0
  30. 30

    Just an additionnal useful ressource, to design and code the searchform (css technique) :

    http://www.sohtanaka.com/web-design/styling-input-search-form-css/

    0
  31. 31

    I like the list. Good work!

    0
  32. 32

    Nice Collection. I like the list.

    0
  33. 33

    David Scrimshaw

    December 5, 2008 8:08 am

    I would suggest that “search” is a better word than “go” or others to put next to a search box.

    That is because “search” is the mostly likely thing that a reader will try to find on the page using their browser’s “find on this page” command.

    If for design reasons you don’t want to use “search” or you want to use a button, the word “search” can still be placed next to the window in invisible text.

    -1
  34. 34

    Nice article, thanks!

    One more creative search box example here:
    http://www.erazahan.com/

    -1
  35. 35

    Chris Robinson

    December 5, 2008 8:46 am

    nice collection and post! I tend to use the magnifying glass on all my sites without a search button, keeping it clean and simple.

    you guys left out search boxes with dropdowns or tabs like this one on techspot – http://www.techspot.com/

    0
  36. 36

    I was once told at a seminar by CXPartners (http://www.cxpartners.co.uk/) that the search box was the sticky plaster of web design. And that it encouraged bad practice. Similarly FAQs I was told are a dustbin for all the stuff that doesn’t fit elsewhere, and if you need FAQs and Search then your website is poorly designed when it comes to navigation and usability – use a site map in the footer instead. Evidence cited at the time was that GAP was the most successful ecommerce site but didn’t have a search box. Now I can’t actually find a site for GAP UK on the Internet and GAP US certainly does have a search box and an FAQ and is impossible to navigate into any International stores (interestingly http://www.gap.co.uk is unrelated but doesn’t have a search box or FAQ). Whether we agree or disagree with CX Partners (who don’t have a search box or FAQ, but do have a certain amount of random content), what is interesting about their ethos of person centred observation is that they believe if we stop people from jumping around websites then they will take their time and read, but or rather BUT make pictures bigger and reduce the amount of text, because your reader doesn’t actually read that much and easily tires if text is not broken up into smaller pieces. Personally, I couldn’t imagine the search box being totally eliminated from ecommerce sites or news archives, but it is always interesting to think do I need a search box, does it benefit my site, or am I including it because everyone else does and people expect a professional site to have one?

    1
  37. 37

    Kick ass post!

    0
  38. 38

    inspiring n cool!

    0
  39. 39

    Pete Nicholls

    December 5, 2008 6:55 pm

    The reason rounded input fields are used for some search boxes is because that’s the standard for Mac search fields and is defined in Apple’s Human Interface Guidelines, to distinguish itself from regular text fields.

    Open any Mac app with a search feature and you’ll find yourself presented with a rounded search box. Even the Finder and Spotlight use this convention.

    0
  40. 40

    This is really a very nice collection. I would also recommend you to take a look at Kobilerim

    0

↑ Back to top