Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. 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. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Search Results Design: Best Practices and Design Patterns

If you’ve been assigned to design or provide the architecture for a large e-commerce project or other information-heavy website whose success depends on content findability, it is vital that the design and layout of the search functionality for that website is considered carefully.

The search results page is the prime focus of the search experience, and can make or break a site’s conversion rates. Therefore, bridging the gap between a user and the content or products they seek is a crucial factor in the success of any large website. The responsibility to design an effective search results page is best considered after a thorough examination of some of the features and functions found on search results pages from a number of popular niches.

Be sure to check out our previous articles:

In this article, we’ll look at a number of trends and practices incorporated on a variety of websites. From this examination, we’ll conclude with a summary of the best practices learned from the examples those sites have set.

Google’s search result page4 sets the pattern for all the search result pages we’ll be considering. We’ll list the primary features of Google’s page, and then we’ll point out some additional unique features found on other search results pages, including those found on the other popular search engines.

Google Link


Below are the primary features of Google’s search results page:

  • Search box, with searched words, remains prominent at top
  • Option to view an “advanced” search page
  • Total number of results shown at top
  • Ajax-driven auto-complete for typed follow-up searches
  • Sponsored links at top and right
  • Paginated results
  • Results titles are large, bold, and hyperlinked
  • Searched words are shown in bold in a page snippet, in context
  • URLs shown in a different color under each result
  • Each result allows options to view “similar” and “cached”
  • Visited links are in a different color
  • Related search phrases listed at bottom
  • Search box with search terms repeated at the bottom
  • “Show options” link opens a sidebar for further filtering of the results

In the search engine niche, the other websites we’re considering follow very similar patterns as those set above by Google, with a few variations. Here are some unique features of those search results pages that are not found on Google’s.

Bing Link


Microsoft’s new search engine Bing7 lists the user’s “search history” in the sidebar (outlined in red above), allowing the history to be cleared or turned off. The search history remains intact even when the browser is closed and the page is revisited.

Another helpful feature on Bing is shown below:

Bing Pagination8

The pagination unit at the bottom of the results page is more user-friendly than Google’s version. While Google’s version consists of “blocked” table cells, which somewhat help the clickability of these units, Bing’s is much cleaner and a clearer distinction is made between paginated units. Also improving the usability, Bing’s pagination units have a hover effect, which Google’s doesn’t, making Google’s confusing as to which unit is being clicked.

Yahoo’s search results page includes a couple of JavaScript-driven enhancements that improve on features of Google’s and Bing’s pages:

Yahoo Link


The search results page on Yahoo10 displays an Ajax-driven slide-down unit that appears below the search box when a search query is being typed. This is similar to the Ajax drop-down featured on Google and Bing, but with a few extra enhancements.

Also, Yahoo offers two features still in Beta: “Search Pad”, which allows the user to record notes on searches; and “SearchScan” to help protect from harmful websites:

Yahoo's Search Pad and Search Scan11

Google, Microsoft, and Yahoo have the experience and industry expertise to enable them to design an effective search results page. The patterns and trends they have set are worthy of consideration when designing your own search results page. Even if many of their features are out of your project’s budget and scope, the principles behind those features can be considered and incorporated in practical ways.

2. Search Results In Video Sharing Sites Link

Search results pages on video-sharing websites have set important patterns worth noting. The search results page on top video-sharing sites contain many of the features that we’ve already mentioned under the “Search Engines” section, plus some additional features shown below.

YouTube Link

YouTube Filtering Options12

YouTube13 has easily-accessible filtering options near the top of the search results page, shown above. Additionally, each item on a YouTube search result page lists detailed information, including a thumbnail preview, running time of the clip, user rating, and age of the item:

YouTube Details14

Also, if a particular item is part of a series, this is indicated:

YouTube Series15

Metacafe Link

Metacafe Extra Features16

Metacafe17 (above) includes many of the features that YouTube offers, plus an XML feed for a particular set of results, an option to enable or disable a “family filter”, and a “more” link that takes the user to a search for related content.

Veoh Link

Veoh Grid18

Veoh’s search result page19 (above) displays the items in grid format, which differs from the one-item-per-row or “list” format of the search results pages we’ve considered so far. Veoh also includes a button to “add to interests”, as well as a “Related Searches” box at the top of the results (although those related items were never very practical in the searches I conducted):

Veoh Extras20

Break Link

Break Top 1021’s search results page22 (above) includes a “Top 10 Searches” box on the right side of the page, allowing the user to view what others have been searching for.

3. Search Results in Social News & Mini-Blogging Link

Many sites that offer user-driven news, mini-blogging, and bookmarking offer search results pages with unique features. Here are a few examples:

Twitter Link


Twitter24 (above) offers a very clean, intuitive JavaScript-driven interface that includes “Realtime” results. Their page also offers a list of “Trending topics” and a “Search tip” box:

Twitter Extras25

Additionally, Twitter gives the user the option to refresh the page after it detects additional results in real time, shown in the yellow box below:

Twitter More Results26

Digg Link

Digg Comments27

Each result on the Digg search results page28 (above) includes the number of comments that have been posted for that particular story, in addition to other features that are unique to Digg, including “share” and “bury”.

Delicious Link

Delicious Tags29

Delicious30 lists search results in a very simple, list format that includes tags associated with each result, plus the number of times the result has been bookmarked.

4. Search in Merchandise & E-Commerce Link

An effective and user-friendly search results page is crucial to the success of an e-commerce website, since that is the means by which most users will attempt to find content. Let’s look at some unique features on search results pages from popular e-commerce sites.

Amazon Link

Amazon Sort Option31

Amazon’s search results page32 (above) allows for the results to be sorted based on a variety of methods, including “Bestselling” and “Avg. Customer Review”. This is done by means of a <select> box that adds or removes sorting options based on the department the user is currently viewing.

When displaying results for books, Amazon’s results page indicates if a book has the “Look Inside” feature. There is also a brief excerpt from each book, plus links to view other editions of the same item:

Amazon Extras33

eBay Link

eBay Tabs34

eBay’s search results page35 (above) allows for easy filtering via tabs at the top. eBay also provides a unique feature at the bottom of the page: the option to view the thumbnail preview images in a different size:

eBay Picture Size Option36

Other features unique to eBay’s search results page are the options to change the amount of items displayed per page and the ability to go directly to a specific page by entering a number into a text box:

eBay Paged Options37

Walmart Link

Walmart In-Store & Online38

Walmart’s search results page39 clearly distinguishes between products available in-store and those only available online, allowing the user to filter items through a tabbed interface.

There is also an option to toggle the search results view between “grid” and “list”:

Walmart View Toggler40

The bottom of Walmart’s search results page includes links to items that were purchased after other shoppers conducted the same search. There is also a feedback option offered, indicating that Walmart is conducting ongoing analyses of user interaction with their search features:

Walmart Search Results Options41

In addition to the features on the e-commerce search pages discussed in the previous section, below are some examples of practical features found on a few less-popular e-commerce sites.

Coast Link

Coast New Product42

Coast’s search results page43 (above) includes a “new” indicator to inform the user which items have been added recently.

Shoon Link

Shoon Views and Colors44

Shoon45 lists products on their search results page in grid format, and allows the option to view the same results in list format or “window” format. “Window” format puts all items into a JavaScript-driven scrolling window-like element. Shoon also lists alternative color options for the individual products. Clicking a new color option changes the product photo dynamically via JavaScript.

Eddie Bauer Link

Eddie Bauer Light Box46

Eddie Bauer47 opens details for an item inside of a JavaScript light box. Inside the light box window the user is able to take advantage of a number of practical functions including product zooming, size selection, related product display, and shopping cart options.

5. Search Results on Photo Sharing Sites Link

Photo sharing sites offer a few helpful features on their search results pages. Below are some examples.

Flickr Link

Flickr Views Options48

Flickr49 (above) displays results by default in a simple grid-based format, and they include some of the filtering options we’ve already discussed. Flickr also allows the images to be displayed either in a detail-heavy list-style view or inside of a Flash-based slideshow gallery.

PhotoBucket Link

Photobucket Filters and Follow50

Photobucket51 (above) allows filtering of search results by “Most viewed” and “Most commented”. It also includes a link strangely titled “Follow”, which allows the user to enter their email address to receive notifications when the results for a particular search term are updated. A more appropriate title for this feature would be “Subscribe”, or similar.

Naturally, technology and web-related sites should have strong usability and functionality on their search results pages. These types of sites can incorporate more complex functionality due to their tech-savvy readership, however, care should be taken to make sure any complex features are practical and do not hinder the user experience.

Adobe Link

Adobe Search Results52

Adobe’s search page53 (above) includes the size in kilobytes of the individual pages that appear in the results, as well as the running time of a video that appears on the results page.

Apple Link

Apple Featured Items54

The Apple search results page55 (above) includes promotional boxes displaying featured items related to the search terms entered by the user. Then, under the promotional boxes, list-style results are displayed under different headings (“Products”, “Downloads”, etc) so that results are associated with relevant sections of the website:

Apple Search Sections56


CNET Comparison57

CNET58 (above) allows users by means of checkboxes to select multiple items on a search results page for a side-by-side comparison.

SitePoint Link

SitePoint Tip59

SitePoint’s search page60 includes a simple, but practical tip to help refine results. Also, the tip itself links to a popup window that lists further search tips.

7. Search Results in News Websites Link

Mainstream news websites rely heavily on search, and so they incorporate many of the practical functions we’ve already discussed. Below are a few more features from well-known sites worth noting.

FOX News Link

FOXNews Video Results61

FOXNews62 (above) includes video results in their search results page, with an indicator showing at what time in the video the entered search terms appear. The results also offer a brief quote from the video, with search terms underlined in context.

The Guardian Link Sidebar (above) displays to the right of search results a sidebar that allows items to be refined by “Date”, “Section”, “Publication”, and more. The sidebar also indicates by means of numbers in parentheses how many pages appear under each refined heading. Also, as shown above, the search results are displayed under section headings, and the search term (in this case “Google”) is highlighted in context in the text snippet that appears for each result.

New York Times Link Author and Section63

NYTimes.com64 (above), in addition to some common filtering options, includes the author name and/or section in which each search result appears.

The Wall Street Journal Link

Wall Street Journal Save This65

The Wall Street Journal’s search results page66 (above) includes a “save this” link next to each search result. This option allows users to organize, personalize, and share saved content.

Summary of Best Practices Link

For easy reference, here is a list of some of the best practices that have been gleaned from the different search results pages considered in this article:

  • User should have easy access to the search box for follow-up searches
  • Where possible, search terms should be clearly indicated at the top, and in context in the results
  • Related sponsored links can be included below the search box, near the bottom, or on the right
  • Titles should be clickable and clearly differentiated from details
  • Visited links should be indicated
  • Pagination units should be visibly block-shaped and have a hover effect, to easily differentiate from one another
  • Related products, tags, or keywords should be displayed in a non-obtrusive section
  • E-Commerce sites should allow the “view” to be toggled between “list” and “grid”
  • Advanced search options should be easily accessible
  • Should allow re-sorting or filtering of results
  • Where possible, results pages should have RSS feeds or “subscribe” options
  • For complex interfaces, clear, easy-to-access search tips or instructions should be provided
  • Sorting and Filters should be JavaScript or Ajax-driven, where possible
  • Popularity or star-ratings should be shown for individual results
  • Include an option to increase the number of results per page
  • To monitor future improvements, request feedback from users after searches are conducted
  • If results span different sections of the website, indicate this by sub-headings or other dividers

Conclusion Link

This article has looked at a wide variety of features, options, and functions found on search results pages in a number of industries and niches. It is not possible, and neither is it practical, to include all these functions in your own search pages.

After considering target audience, budget, and technical limitations, some of these features and their underlying principles can thus be incorporated with a view towards improving the user experience in the area of search.

Further Reading Link

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

↑ Back to top Tweet itShare on Facebook

Louis Lazaris is a freelance web developer and author based in Toronto, Canada. He blogs about front-end code on Impressive Webs and curates Web Tools Weekly, a weekly newsletter for front-end developers.

  1. 1

    There are some disputable issues in the article. But it also has useful thoughts and practices. Read and squeez! =)

  2. 2


    September 28, 2009 5:09 am

    Another interesting search-result-feature is the position and the possible behaviour of the sitelinks of Google Caffeine!

  3. 3

    Im sorry but Twitter search is the worst search ever… and still have no idea what people like in twitter…

  4. 4

    Im sorry but Twitter search is the worst search ever… and still have no idea what people like in twitter…

    I totaly agree with you ! What is so amazing in twitter ? oO

  5. 5

    Clifton Griffin

    September 28, 2009 5:20 am

    I actually dislike some of those techniques. Most notably I do not like either the Apple or Guardian search results. They are unintuitive and it’s difficult to determine a result’s relevance at first glance.

    For instance, the Apple search results all start with Apple -> making them blend into a stream of monotony. The Guardian results include such a large excerpt of the article in question your eye kind of bounces off it instinctively…it’s search results after all not a term paper.

  6. 6

    Thanks for the article–but did you have to use Fox News. 8 years of Bush was enough!

    • 7

      LOL – yes, shocking to see them here: those are op ads, not search results…

  7. 8

    Thanks, will help more than one!

  8. 9

    I like the way bing displays the search results. Looks like better version of google.

  9. 11

    I like Twitter but Twitter search engine (results) SERPs is a mystery.

  10. 12


    September 28, 2009 11:00 pm

    The CSS :visited pseudo-class is still underused in web design and can enhance the user experience greatly. A few of the above would benefit from this simple css property :) Nice article btw.

  11. 13

    Ajax is great to load new content but make sure the browser back button works as expected!

    Also, smashing magazine-it would be great if your search results had visited links in a different color!

  12. 14

    Thanks very much. It’s an amazing article.

  13. 15

    Hey Dear,
    I found a new behavior on the (The second examples).

    When you moused hover on the search result, there will be appear a vertial line with an oranger point on the right side. When you mouse hove the point, the expended information will be display on ur face.

    Actually, it’s a new for me. but i don’t think that’s a useful function since the information still not enough, you still need to visit the website.

    SO, what do u think?

  14. 16

    Good article, but I’m missing the very useful “Did you mean” feature. It’s very useful when you misspell keywords or do not get matching search results.

    I’m currently impementing such a feature on our company intranet for colleague search using SOUNDEX().

    Google has a rather advanced algorithm for this which not only use some sort of SOUNDEX() algorithm but also checks for common misspellings and suggest the correct spelling.

  15. 17

    Mithun P Sreedharan

    September 29, 2009 3:07 am


  16. 18

    hey guys some body help mee yar…

    i want an plugin with grid and list view in wordpress is it possible

    if u have any references please help meeee

  17. 19

    Good article, however lots of the features Yahoo etc. are adopting seem quite gimmicky to draw attention away from the fact they simply aren’t as good search engines as Google.

  18. 20

    Redstage Magento

    September 30, 2009 12:29 pm

    Thank you for this article. I was very informed.

  19. 21


    September 30, 2009 12:35 pm

    Wow, I hadn’t thought about it that way before. Good write up, very clearly written. Have you written previously about search engine optimization? I’d love to read more.

  20. 22

    FrontPage Blogsome

    October 1, 2009 4:02 am

    Twitter has the simply coloured yet artistic one.

  21. 23

    Jethro Larson

    October 2, 2009 1:14 pm

    Once again this publication mistakes observation for advice. You can look at what the search sites are doing but unless you have some way of quantitatively evaluating the success of the features you can’t make an offering of “Best Practices and Design Patterns”. This thing really reads as an college research paper with a bunch of pictures and nothing that’s really actionable. Go back 3 spaces.

  22. 25


  23. 26

    Vitezslav Valka

    October 25, 2009 9:47 am

    Bookmarking this! Sweet investigation… thank you!

  24. 27

    Totally disagree Jethro. Do you think that the big players haven’t done their own testing? Don’t you read any BLOGs that come out of Google? Doesn’t their persistant improvement and tweaking signify a move in the right direction. Do you think they perform usability testing?

    Come on Jethro, straight to gaol for you ;-)

    Brilliant article Smashing team – WELL DONE.

  25. 29

    I like the article, but it’s really not nice to use a picture of Grooveshark’s search box and then not make a review of their search results page.

  26. 30

    You only looked at certain big websites, which all have very solidi and “boring”
    almost identical design.. and IMHO, you could have included Wikipedia search page also.

  27. 31

    what’s up with all the ads on this site?
    don’t like that at all.

  28. 33

    Shai Ben-Yehuda

    April 5, 2011 8:15 am

    Well written post, need to be updated quarterly.

    Have a look at interactive Search Box for smashing magazine with pictures, title, and text, based on their rss feed. at

    Search for “css”, “html” or “search”
    You can also customize it.
    Written with jBart.


  29. 34

    What are the side effect of steriod Kenacort-Triamcinolone to a woman?

  30. 35

    Razibul Hassan

    January 31, 2012 4:18 am

    Great example of excellent search pages and obviously those websites are leading the web world.

  31. 36

    Very nice overview. Funny thing is, I’m working on a financial site’s search page and it seems to me that the Google pattern (if we can call it that) does not apply so much in our case. Maybe the first Best Practice is still something like “think” (Neville Brody, anyone?), or “make sure you serve the user first”. But thanx!


↑ Back to top