Comparing Google, Bing and Yahoo! With Pictures.

What do Google, Bing and Yahoo! share in common from a user interface perspective? They all use Arial as their primary font.

We thought it would be fun to do a quick comparison of the top 3 search engines from a user interface perspective.

Google

First let’s take a look at Google, since they are the popular ones. See the notes below.

Google screenshot

  • Google has always been known for their clean design. They utilize the left sidebar to filter results by type while Bing and Yahoo! use topbar navigation and tabbed navigation instead.
  • Google uses #12C (hex color) for their link color. They tested over 40 shades of blue to find the one that converts the best.
  • Google does not use shading or box shadows to create depth, they focus users on the search results.
  • Google uses orange for their primary color (#DD4B39) to signify active states and major headings
  • Google likes to use subtle colors. They incororate over 20 shades of gray in their stylesheet (see screenshot below).

Google screenshot

Opinion: Google lost the battle on clean design. They should follow an even whiter color scheme to focus users on the results.

Bing

Bing is rising in popularity and continues to gain market share. Their latest design is more Google clean than ever.

Google screenshot

  • Bing now incorporates social search results and adds a subtle ‘thumbs up’ icon on the left of listings.
  • Bing leaves out the left sidebar and puts the filtering options at the top of the page freeing up more white space in the listings area.
  • Bing uses a snippet of a background image for their topbar that matches the branding for their landing page.
  • Bing uses white (#fff) for it’s primary color and feels lighter than Google and Yahoo!

Example of Bing’s landing page (www.bing.com)

bing branding

Opinion: I like the direction Bing is headed. The user interface is cleaner than ever even with the fixed social sidebar.

Yahoo!

Yahoo’s design is quite different from Bing and Google with a stronger emphasis on depth.

yahoo screenshot

  • Yahoo! uses tabs instead of a topbar nav and also provides a sidebar filter for results over time.
  • Yahoo! uses depth to create a 3 dimensional look on the tabs, something that Bing and Google do not incorporate.
  • Yahoo! uses a slightly smaller search box than Google and Bing and centers the listings while Google and Bing pull theirs to the left.
  • Yahoo! leaves out the personalized results.
  • Yahoo! uses ‘Search’ in their search button while Google and Bing simply have a search icon.

Opinion: Yahoo! needs to ditch the depth and work on cleaning up their interface. The tabs and overall feel of the site come across as ’5 years ago.’ A clean approach to their search engine interface could draw more users that are used to Google.

Colors

All 3 search engines use shades of blue for their link colors and shades of green for their citation colors. The shades are so close in color it is hard to see the difference.

search engine colors

The Comparison Continues

This is just a quick look at a few of the differences between the major search engines from a user interface perspective.

Let us know what search engine interface you prefer to use and why in the comments section.