Yahoo! Buzz Index Charts

Yahoo! Buzz Index presents the day's top 20 searches overall, and in a number of categories, e.g. actors. A subject's buzz score is the percentage of Yahoo! users searching for that subject on a given day, multiplied by a constant to make the number easier to read. Weekly leaders are the subjects with the greatest average buzz score for a given week.

The chart shows current rank, icons for the change in rank over previous day, previous rank position, number of days on chart, score, and score change. A score is the percentage of users searching for that subject on a given day.

1. Chart of overall search leaders.
2. Detail.

CSS Ninjas Cost Estimate Slider

CSS Ninjas provide a service for converting designs into XHTML/CSS. Their site features a nice cost estimate tool that allows prospective clients to see how much it will cost by specifying the number of pages that need to be converted. A slider allows you to estimate the cost of 1 to 20 pages. Clicking the "proceed to checkout" link opens the request for quote, and you can enter a number above 20 if required.

1. The cost estimate slider.
2. Moving the slider right.
3. Viewing the request for quote and modifying the estimator form manually.

Yahoo! Breadcrumb Tab

Yahoo's hybrid tab/breadcrumb navigation is one of my favorite approaches to global and local navigation. This navigation interface answers a few nagging questions that an interface designer might ask. "How do I present the user with an interface that provides focus on the area they've navigated to, while providing a path back or to other main areas of interest?"

What's interesting here is that they provide a row of primary navigation tabs at the top level, and replace that with a hybrid tab/breadcrumb once the user makes the decision to drill down. The first problem you encounter with that behavior is that you lose the links back to primary sections of content. To deal with that problem, they provide a drop down menu for the first link in the breadcrumb to show siblings at the top level. Below, they show links for local navigation (children) for the current section in focus.

This seems like a unique approach, and I've already been influenced enough by this to design a breadcrumb UI that goes even further by providing sibling navigation at lower levels. On my first encounter with this UI earlier this year, however, I didn't know quite what to make of it because I came in at a lower level rather than at the top. It took me a few minutes to understand the navigation model because of that. I would be interested in hearing opinions of this. For my approach, based on this model, I'm using the breadcrumb in a less prominent location while continuing to use traditional navigation, to slowly introduce this model within a CMS skin.

1. The home page primary navigation tabs. Below are Newsvine style top topics.
2. Selecting "Everyday" tab changes the primary nav to a breadcrumb. Local nav shown below.
3. Cotinuing to drill down.
4. Lowest level with children displayed.
5. The drop down arrow next to "Food Home" provides links to top level, primary nav siblings.

Domainr is a simple single serving site that lets you find a domain using all the top level domain extensions to complete your name.

1. The search form.
2. Enter a word and view suggestions.
3. Green boxes indicate available domains. Click one to purchase.

In Quotes

The "In Quotes" project in Google Labs is an interesting attempt to leverage information from Google News to try to help people understand where public figures stand on topics and issues by extracting quotes. Google says "Much of the published reporting about people is based on the interpretation of a journalist. Direct quotes, on the other hand, are concrete units of information that describe how newsmakers represent themselves."

The interface is pretty simple to use. Enter keywords or click the provided words to compare quotes from the 2 public figures who have been vocal on the given topic area. Then you can click through what each person was reported to have said on the topic, or use the fun Spin button, which is a like a pulling a slot machine to change the quotes shown.

1. Default screen for the presidential candidates.
2. Enter or search for a topic. It will be added to the list of quote comparison rows.
3. Select the people to compare.
4. Read and change the quotes.

MSNBC Video Player

MSNBC's video player loads in a pop up window with the video player on the right, and a left sidebar showing navigation options to browse by playlist, category, or show. The video player itself provide a barebones set of controls for pause/play, previous/next, volume, mailto link, and embed code. A square ad unit hides the left sidebar pre-roll and is replaced by a small persistent ad unit sitting below the player. Post-roll the next 3 video thumbnails are shown and autoplays the next in line.

Nothing surprising in this interface, although the background graphics are nice. I presume that the pop up window ensured that the lighting effects can fill the screen cleanly, but I'd much rather see that interface in page rather than in a pop up window.

1. Video player, navigating by category in the left sidebar.
2. Embed code panel. Pauses playback and slides into view.
3. Full screen.
4. Post-roll.

FanSnap Search Results Filtering

FanSnap is an event ticket search site that provides faceted results filtering. Users simply enter an upcoming event, and FanSnap returns a list of available tickets from vendors like StubHub, provides filtering by price, seating area, and ticket vendor. If a venue diagram is available seats are overlaid over the venue's seating chart. Users can sort and star/favorite available tickets in their "short list", and then click a link to purchase the tickets at the ticket vendor's site.

1. Search screen.
2. Results screen with filtering options on the left, map of venue in center with markers color coded to ticket prices. Hovering over a marker shows ticket info. Results list shown on the right.
3. Filtering options modified in the left sidebar. Shows areas narrowed and collapsed to only the options selected. Number of results is narrowed and updated in the right.
4. "Short list" in the upper right sidebar shows tickets that have been favorited. Hovering over a result displays a mouseover in the map.
5. Clicking a result shows ticket info and option to purchase.

Apple Accordions

Apple's accordion module provides a method for displaying a good deal of informational and promotional content without overwhelming the interface. The types of things that are displayed in these are accordions are usually supporting content, so the desire to use a design pattern that hides and shows these panels of content is useful. Only one panel is visible at a time, and hovering over or clicking a panel heading brings its content into view with a smooth slide transition.

1. Supporting information, news, and store locations is displayed in an accordion of panels at the right.
2. Hovering over one of the blue panel headings displays that panel and hides all others.
3. On the "Downloads" page, download categories and top 10 lists of downloads are displayed.
4. The "Top Apple Downloads" panel in view.

Apple Carousels

Apple's Coverflow-like carousels are used on interior pages of to provide visual navigation of products using product images. A set of images is displayed in a wide panel with a horizontal scrollbar. Carousels are used primarily for promotion when most sites place a set of images in this upper area of the screen below the navigation. Apple utilizes this space to provide better findability of products within each section of the site.

1. The coverflow area opened up to Macs on the Mac page. The labels in the scrollbar are used to jump to product category in the horizontal scrolling list.
2. Clicking "Servers" jumps to the end of the list.

Hulu 3 Up Carousel

Hulu's new 3-up carousel is being utilized in the site's channels sections to offer a promotional space that takes up less screen height than their 1 up carousel, allowing the display of 3 promo items. This is very similar to the horizontal scrolling Cover Flow module in use on interior pages.

1. First set of channels. Scroll bar below allows the user to view more.
2. Second set of channels. Hovering over a channel reveals it's name and an "explore" button to jump to it.