Washington Post/Evri Related Content Module

The Washington Post uses a related content widget created by Evri that indexes content using person, place, and thing (subject) facets and allows the Post to display a list of related content beneath news. The widget, which is actually a bit of SVG/VML and JavaScript, provides a small visualization of topics in the article, and allows the user to do some filtering of the related content. Navigating to topic pages provides a complete filtering view for exploring and narrowing related content.

1. This widget appearing at the bottom of an article in the Washington Post allows users to find related content. A diagram lists all indexed people, places, things (subjects) found in the current article.
2. Selecting "Obama" shows the other concepts that have content associated with Obama. The list of Obama content is shown below the diagram.
3. Selecting "Obama" and "General Motors." The topics update in the link list above the radial diagram and the related content list below is also updated.
4. Clicking the "Obama" text link shows an Obama topic page with allows the user to further explore related topics, and filter news on the topic.

http://www.washingtonpost.com/wp-dyn/content/article/2009/02/23/AR2009022302176.html?hpid=topnews

Zappos Search Results Filtering

The Zappos' search engine provides a nice results filtering interfaces that presents the user with facets for refining their search. The user can click on the terms at the top of the search results page to narrow the set, and a breadcrumb trail shows the selections they've made. Each term in the breadcrumb provides a checkbox to remove any one of those selections and broaden their search.

1. Users run a search using the site's global search box. In this scenario, I used the term "Running" and we're viewing the search results page that provides facets for narrowing your search. Options for sorting are displayed above the results.
2. I've clicked a few terms in the following facets: Product Type - Shoes, Gender - Men's, Size - 8.5. A breadcrumb list is shown above showing the refinements I've made to my search and the results have been updated.
3. I've added a few more refinements, and the result set has been reduced from 908 to 19.
4. The breadcrumb trail showing what I've searched for provides checkboxes to remove terms from my search, and this screen shows that I've removed the color Black from my search.

http://www.zappos.com/

thesixtyone alerts

Music community site thesixtyone uses unobtrusive growl-like panels in the bottom right corner of the page for system alerts and messaging. Like growl or iminlikewithyou, these messages appear briefly and fade out. The effect is subtle and might be easily missed, but the addition of an ambient "pop" earcon (alert sound) tells you to look for the message. Nicely done.

1. System alerts appear in the bottom right corner, with accompanying alert sounds.

http://www.thesixtyone.com/

Huffduffer Registration

Huffduffer, a hybrid bookmarking/podcast service features a whimsical inline registration form that's formatted in sentences with blank areas that the user fills out with their name, password, etc. Kind of a fun, unexpected way to format the form. Reminds me of the kinds of forms you'd fill out by hand in days of old, which goes with the retro style of the site.

Via SwissMiss.

http://huffduffer.com/signup/

Gmail Move and Label Menus

Google modified the labeling (tagging) menus in Gmail to add a Move option to co-exist with the prior Label drop down menu. The Move menu allows the user to move an email to a single label and then archives it, removing it from the Inbox. The Label menu allows the user to add multiple labels to the email, but does not archive it. Both menus offer a label search input with auto-completion, as well as options to create new or manage existing labels.

This is one of those times when I feel comfortable enough wearing my own hat as a power user to say that while these efficiencies were added, they don't go far enough. Gmail has always seemed like an leader/innovator in pushing tags rather than folders for organizing email. So I think they can push for implementing advanced features that aren't the most simple to use at first. These menus really do make it easy to do more with labels without hitting the label menu over and over again for repeat actions.

What seems incomplete to me is the auto-completion behavior on the search input. I'm one of those ridiculous Gmail power users that organizes labels into facets by using prefixes, e.g. L: for lists, T: for tags, P: for projects, ~ for GTD labels, e.g. ~action, ~waiting, etc. So in my examples you'll see that I would be able to tag something L:cycling or T:cycling. But if I enter "cycling" in either of these search boxes, nothing gets found because Gmail only matches from the beginning of the labels. The right way to do it is to match against any text in the string, and luckily MailPlane, the desktop application for Gmail gets this right.

1. The Move menu offers options to move and archive the current message, as well as create new labels or mark as spam.
2. Typing text into the search input allows you to find an existing label, and offers the user an option to create the label if it doesn't exist.
3. This shows a match against my string "T:cyc."
4. Gmail only matches from the beginning of the string in their search capability. MailPlane's labelling panel (CMD-L) allows you to search for labels and matches anywhere in the string. So in my scenario above, I can find "cycling" without entering my prefixes.
5. The Label menu allows you to find labels and click checkboxes to apply more than one label to the message. Prior to this, Gmail users had to click the Label drop down menu repeatedly when adding more than one label.
6. Users click the apply button in the drop down menu to add the labels that were checked off.

http://gmail.com

NIKEFOOTBALL Search Box

The Nike Football site uses a deceptively simple trick to draw attention to its unobtrusive search box. The narrow sidebar navigation menu features what looks like a search box that is a bit too small to be usable. Clicking what you think is the search box expands a real search input adjacent to the sidebar in the body.

It's a clever method, but as you can see from the comments, it's not without problems. A good example of how simple solutions aren't always easy to come by.

1. A small search box appears in the top of the navigation menu sidebar.
2. Clicking search box shows the real search form in the body.

http://inside.nike.com/blogs/nikefootball-en__EMEA/

Shelfari Hybrid Buttons

Shelfari has a clever hybrid button/drop down menu to display actions on books. The button label shows the current status of the item, e.g. on my shelf, add to my shelf. When the user hovers over a button of a book that's not in your shelf, the label changes to "Add to I've Read". Clicking the drop down arrow shows other options for the book with shelf actions in the top half (I plan to read, I'm reading now, I've read), and the bottom half shows other attributes of your book (Favorite, I own, Wish list). All of these options are checkboxes, so you can select multiple values in the expanded actions.

See also Shelfari's updated button design.

1. Buttons for books appear to right, showing shelf status (Add to my self/On my shelf).
2. Label changes when hovering over button to show more specific default action, "Add to I've Read."
3. Drop down behavior shows other options for the book.
4. Multiple options allowed, and button label updates depending on selection.

http://www.shelfari.com/

Autoblog Pagination

Autoblog's photo galleries feature beautiful, large automobile photos. Each gallery shows large beveled previous/next buttons above and below the photo, with a [current photo]/[total photos] indicator above. Below, a strip of thumbnails shows the full list of images in the gallery. An indicator of the current photo in that strip, e.g. with a special border treatment would ice the cake.

http://www.autoblog.com/gallery

EffectiveUI Accordion Stacks

Effective UI has an interesting Flash UI for presenting menus on their home page using a stacked accordion. Upon landing on the home page, a series of stacked boxes are displayed with both a large descriptive heading of that section and shows the first mini-slide in that deck/stack to help you see what that section is about. Mousing over the first slide in the stack expands the stack to show the headings for the other nodes of content within it, and the user may now hover over the other items to view their descriptions. Clicking a card displays its content in an floated layer.

1. The front page showing series of stacks. The headings for each stack are shown below.
2. Mousing over a stack to expose all of the headings.
3. Clicking on a card to display its content.

http://www.effectiveui.com/

MSNBC Spectra Visual Newsreader Carousel

MSNBC.com's Spectra Visual Newsreader provides an interesting way of visually presenting channels of content from the massive news site. Adding channels drops media cards into the screen and rotates them in a 3D carousel.

Below the vortext of cards, a hybrid pagination scrollbar, which bests Apple's concept, allows the user to select cards to view one at a time. Previous/Next arrows allow linear progression. A helpful [current card]/[total cards] indicator is shown on the scroll bar. The currently selected card is shown below the carousel with media details and thumbnail. What really makes this control nail the experience is that after each card in the order is displayed, every prior card is tucked away into the stack. This hiding behavior is based on the linear order cards rather than hiding the ones the user has actually viewed. If they were eventually able to use the latter, the "read/viewed" status, as the criteria would make this that more interesting.

1. Full view of the Spectra Visual Newsreader.
2. Clicking on a card in the carousel displays details and the pagination controls update to show the number of the card in the stack.
3. Carousel showing prev/next, first/last, and scroll bar.
4. Selecting cards hide all prior items behind the current card deck/stack and show the remaining items in the carousel.

http://msnbcmedia.msn.com/i/msnbc/components/spectra/spectra.html