Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

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 Barcelona, dedicated to smart front-end techniques and design patterns.

Designing The Holy Search Box: Examples And Best Practices

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.



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.


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


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


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.


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.


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.


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.


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


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.




Search box22





Search box27


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.










Search box42

Search box43

Search box 44

Search box45

Search box

Search box 46



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


Search box

Search box53




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




Search box59

Search box60

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 box61

The down-pointing arrow is used very rarely:

Search box62

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



7. Using handcraft Link

Handcraft strikes back in this search box design:

Search box64

And in this one:

Search box65

This search box looks nice but is hard to recognize.

Search box66

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

Search box67

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


Search box69

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.













Button with an icon; a rather unusual design:

Search box

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 box80

Search box81

Search box 82

Search box83

Search box

Search box84

Search box85

Search box86

Search box87

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

Search box89

A cryptic search box, designed by Stefan Bucher90.

Search box91


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
SmashingConf Barcelona 2016

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 Barcelona, on October 25–26, 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.

  1. 1

    very neat and inspiring! thanks

  2. 2

    Quite inspiring. Thanks!

  3. 3

    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

  4. 4

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

  5. 5

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

  6. 6

    Nice -

    December 4, 2008 5:14 pm

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

  7. 7

    Amazing collection!!

  8. 8

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

  9. 9

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


  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?

  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.

  12. 12

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

  13. 13


    December 4, 2008 9:59 pm

    Wow, really nice collection! The Xairro ( search field grows dynamically – an intuitive way, I think.

  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.

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

  16. 16

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

  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.

  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.

  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.

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


↑ Back to top