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

Screenshot

Screenshot

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.

TechCrunch (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.

Screenshot

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

Screenshot

The search box design on Wikipedia 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 pattern. 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.

Screenshot

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.

Screenshot

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

Screenshot

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 golden: “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 Nielsen and Fontshop, designs that haven’t changed since the early days of the Web.

Search box

Screenshot

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.

Screenshot

Screenshot

Screenshot

Search box

Screenshot

Screenshot

Screenshot

Screenshot

Search box

Screenshot

Search box

Search box

Search box

Beyond Current Horizons 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 box

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.

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Search box

Search box

Search box

Search box

Search box

Search box

Screenshot

Screenshot

Search box

Decodeunicode.org 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 box

Nicely integrated submit button as a magnifying glass:

4. Using illustrations

Search box

Screenshot

Search box

Search box

Screenshot

Screenshot

Screenshot

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

Screenshot

Screenshot

Screenshot

Search box

Search box

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 box

The down-pointing arrow is used very rarely:

Search box

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

Handcraft strikes back in this search box design:

Search box

And in this one:

Search box

This search box looks nice but is hard to recognize.

Search box

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

Search box

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

Screenshot

Search box

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.

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Screenshot

Button with an icon; a rather unusual design:

Search box

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 box

Search box

Search box

Search box

Search box

Search box

Search box

Search box

Search box

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

Search box

A cryptic search box, designed by Stefan Bucher.

Search box

(al)

↑ Back to top

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

    1
  2. 2

    Quite inspiring. Thanks!

    1
  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

    Look at Brazen Careerist by Penelope Trunk.

    It has a “Subscribe to new posts” Input Field + Button where the Search functionality should be!

    2
  8. 8

    Amazing collection!!

    0
  9. 9

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

    0
  10. 10

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

    Cheers!

    0
  11. 11

    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?

    1
  12. 12

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

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

    0
  14. 14

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

    0
  15. 15

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

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

    0
  17. 17

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

    0
  18. 18

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

    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.

    1
  20. 20

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

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

    Thanks for the great list :)

    0
  23. 23

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

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

    0
  25. 25

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

    http://www.fruitydirectory.com

    December 5, 2008 4:01 am

    I have a nice one on fruitydirectory.com :)

    0
  27. 27

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

    0
  28. 28

    you actually used the same words written here

    0
  29. 29

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

    0
  30. 30

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

    0
  31. 31

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

    I like the list. Good work!

    0
  33. 33

    Nice Collection. I like the list.

    0
  34. 34

    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.

    0
  35. 35

    Nice article, thanks!

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

    -1
  36. 36

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

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

    Kick ass post!

    0
  39. 39

    inspiring n cool!

    0
  40. 40

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

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

    0
  42. 42

    check out my searchbox I made once: klik
    don’t mind the design it’s what the customer wanted.

    0
  43. 43

    nice and interesting review…. helps the designers to design more user friendly search boxes and thus sites.

    Thanks to u guys!

    0
  44. 44

    Do you really mean, that it is just as user friendly to use the magnifying glass or an arrow next to a search field as it is to use a button?
    My recommendation would always be to have a button saying ‘Search’ or ‘Find’ …

    0
  45. 45

    Always surprising us.

    1
  46. 46

    Thanks for the useful post once again.
    Nice examples for both creative and user friendly search boxes!
    I usually use “go” instead of “search” or “find” but after seeing all these examples I think “search” or a magnifying glass works better.

    0
  47. 47

    I thought the searchbox I did for the integrated design of Negative99.com was pretty cool.

    0
  48. 48

    I’d love to see a tutorial on constructing and implementing some of these boxes. I just got done working on one and had huge headaches getting it all down. Surely this has already been solved and a compilation of resources would be kicking.

    ~Anjolie

    0
  49. 49

    we just finished a site that uses a pretty neat search box on the right. have a look!
    _will

    0
  50. 50

    Robert Greenawalt

    December 11, 2008 2:19 pm

    Excellent post as always. Another attribute which I’d like to add to this however especially sites with large inventories is the sitemap!
    People tend to tuck it away down on the bottom in the footer and as mentioned above the search box may indeed be a persons last resort before X so it should definately be done correctly. Thank you for the tips I’d better get mine redone now :)

    0
  51. 51

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

    0
  53. 53

    Long post, so many search boxes…

    0
  54. 54

    Joris Hoogendoorn

    December 24, 2008 2:01 am

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

    0
  55. 55

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

    0
  56. 56

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

    1
  57. 57

    great article – very useful

    0
  58. 58

    One superb article!

    R!

    0
  59. 59

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

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

    0
  61. 61

    good i inspired on my blog

    0
  62. 62

    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?

    0
  63. 63

    thanks to all of these this is verry useful

    0
  64. 64

    Nice information….Thank you so much……

    0
  65. 65

    Nice information

    Thanks you so much…..

    0
  66. 66

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

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

    0
  68. 68

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

    Very good! Thanks for good inspiration…

    0
  70. 70

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

    0
  71. 71

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

    0
  72. 72

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

    -1
  73. 73

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

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

    0
  75. 75

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

    These are some great examples. Any thoughts on mine?

    http://www.wpexplorer.com/

    thanks!

    0
  77. 77

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

    They are very very nice.

    0
  79. 79

    Cool Search Box Designs. Good very good. thanks

    0
  80. 80

    very inspiring, thanks ;)

    0
  81. 81

    Great list of best practices!

    1
  82. 82

    Smashing!

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

    MJ

    -1
  83. 83

    Ultimate collection …Thanks for sharing…

    1
  84. 84

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

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

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

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

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

      0
  86. 89

    nice textbox images

    0
  87. 90

    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
  88. 91

    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.

    0
  89. 92

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

    0
  90. 93

    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
  91. 94

    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
  92. 95

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

    0
  93. 96

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

    0
  94. 97

    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
  95. 98

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

    0
  96. 99

    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/

    0
  97. 100

    Purcul Mitrut

    May 5, 2013 6:54 pm

    When it comes to search bar, minimalistic is always better

    0

↑ Back to top