OB电竞决赛直播官方

About The Author

Louis is a front-end developer, writer, and author based in Toronto, Canada. He curates the newsletters Web Tools Weekly and Tech Productivity and blogs about … More about Louis ↬

Email Newsletter

Weekly tips on front-end & UX .
Trusted by 200,000+ folks.

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.

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.

More after jump! Continue reading below ↓

Google’s search result page 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

Google

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

Bing

Microsoft’s new search engine Bing 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 Pagination

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

Yahoo

The search results page on Yahoo 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 Scan

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

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

YouTube Filtering Options

YouTube 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 Details

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

YouTube Series

Metacafe

Metacafe Extra Features

Metacafe (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

Veoh Grid

Veoh’s search result page (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 Extras

Break

Break Top 10

Break.com’s search results page (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

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

Twitter

Twitter

Twitter (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 Extras

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 Results

Digg

Digg Comments

Each result on the Digg search results page (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

Delicious Tags

Delicious 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

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

Amazon Sort Option

Amazon’s search results page (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