CNN.com Global Navigation

The CNN News portal provides a very dense global navigation header that's got quite a bit going on, but succeeds in drawing out the main entry points for news, featured or promoted points of interest, language/edition preference setting, search, and even a sticky alert area for late breaking news. It even borrows the idea of hot topics navigation per section from Newsvine, which allows for a more variable set of local navigation based on what's happening now, rather than on a rigid top-down IA.

While the density of the navigation might overwhelm some site designs, the clean, modern, and minimalist treatment of the page layout, and the the clear hierarchy of type and content elements make for a cohesive header and body, even given the density of content on the page.

1. Global navigation on home page.
2. Crime selected in primary navigation bar and hot topics updated to reflect section.
3. Navigation for featured sections--video, user centered news, and charitable action--are highlighted in the area adjacent to the primary navigation.
4. Hot topics navigation below the primary navigation bar and are re-scoped depending on section being viewed.
5. Setting edition preferences expands a big, clear form with radios for choices.
6. The Arabic edition selected.
7. The global navigation displayed with the page design.

http://www.cnn.com/

Delicious Global Navigation

The redesigned del.icio.us site provides drop down navigation to signed in users. Clicking the navigation label jumps to that section, or click the arrow to drill down in that section. They provide separators in the drop-down to chunk up the navigation options.

There's some inconsistency in the treatment of selected sections. The blue background of the nav link on Home implies selected color. But if you click the links in the global nav, the blue background on Home remains on Home. But on the home page, for instance, when you click the tabs for Popular Bookmarks and Explore Tags, the background shifts to the tab you click. This behavior could carry over to the global nav to be more useful. The different shades of gray for the other global navigation links are just a stylistic treatment I think, but they provide no feedback.

1. Site header for user that's not signed in.
2. Global nav on home page for signed in user.
3. Global nav on Bookmarks page showing drop down menu. Notice that Bookmarks link is not indicated with blue background.
4. Drop down for People.
5. Drop down for Tags.

http://delicious.com/

Delicious Tag Filtering

del.icio.us' tag filtering provides an excellent interface design for filtering tags without having to scan your tag list or tag bundles, which can turn out quite long over time. In a control area that looks and behaves like a hybrid breadcrumb trail, you enter a tag into an input. Tag suggestions are provided as you type. Build up that filter by adding tags, and each tag in your crumb path can be removed independent of the path you took by clicking the tag's adjacent X icon.

1. The tag filtering UI.
2. Adding a tag and viewing auto-complete or type ahead suggestions.
3. First tag, "iphone," added and you can see the tags that may be combined in the right sidebar under "Related Tags."
4. Second tag, "hacks," added and Related Tags is narrowed further.
5. Original "iphone" tag removed, and now viewing only "hacks."

http://delicious.com/

Enterprise 2.0 Conference Inline Login Form

The Enterprise 2.0 Conference site, which is run on Jive Clearspace, provides an inline form for logging into the site. Clicking the Login link in the header replaces the header content with a form where inputs and labels are displayed in a single row.

1. Header global navigation with login link.
2. Clicking login link replaces the navigation bar with the inline login form.

http://community.e2conf.com/index.jspa

Konigi Inline Login Form

Seems strange to feature this site here, but I'm building up a set of this inline form design convention. Konigi provides an unobtrusive control for logging in via the user's site login/password or Open ID login in a utility navigation area. Clicking one of these log in links allows the user to enter their credentials without navigating to a form on a separate page.

1. Header with login options in utility nav on the right.
2. Utility nav close up.
3. Clicking Log In hides the utility nav and displays inline login form.
4. Clicking Open ID hides the utility nav and displays inline Open ID login form.

http://konigi.com/

Amazon Unbox Video Player

Unbox is Amazon.com's Movie and TV Show store, which offers downloadable videos that may be played on a user's PC, TiVo, or portable media player. The Unbox video player provides a "Shop" browser, a carousel of poster images for viewing top selling and renting movies and TV shows. Sadly, you have to make your purchase via the Amazon.com web site, and can't purchase directly from the player. You also cannot browse videos by genre in the player's Shop.

The player itself is simple to use. The tabs along the top allow the user to switch between their purchased video, video player, their devices, and the shop. A drop down panel shows download status and storage space available, which is a nice touch that I appreciated. The player itself provides play/pause, reverse/forward, stop, volume, running/total time, scrubber, and view modes.

This feels very much like a first release. I only used the Windows Video Player, so I cannot comment on the TiVo experience (DirectTV Tivo customers cannot participate). There are some shortcomings in the browsing process, a problem that the Roku also suffers form in its first release. Neither Unbox or Roku compares with the browsing offered by the Apple TV.

What I liked is mainly that there was a different catalog of titles—some of which aren't available on iTunes or Netflix's Watch Immediately Inventory. The prices are competitive and the standard video quality was fine.

1. Full screen player.
2. Browsing library of my purchases in My Videos.
3. Browsing titles via the shop.
4. Viewing single TV Show page.
5. Download Status panel.

http://www.amazon.com/Unbox-Video-Downloads/b?ie=UTF8&node=16261631

New York Times Article Clipping

The New York Times' Times File Service allows users to save news items for reading later. Users click an Folder icon in the article tools adjacent to the article. When they navigate to their Times File, they see their list of shaved articles, with options for tagging, describing, and sharing the article via email. A nice feature of the Tiles File can be found under the Most Popular tab, where the most saved articles can be copied into your own library.

As a side note, there was a similar feature for news clipping in the innovative version of the IHT designed and developed by John Weir, but sadly all of the JavaScript from Weir's version was stripped out a recent IHT redesign.

1. Article page showing article tools to the right including the "Save" folder icon.
2. Clicking Save icon opens up a window with information about where the article was saved, and other articles saved by people who favorited the same item.
3. User's Times File.
4. Editing the article information, including description and tags. Didn't like the use of semi-colons. Commas seem an easier convention.
5. Most popular saved pages.

http://timesfile.nytimes.com/view.jsp

Pattern Tap Guided Tour

Pattern Tap positions some instructional copy at the top of their site for first time visitors. It displays information about what is on the page and how to use it. A right arrow navigation button allows the user to take a guided tour of the site. The user may dismiss the messages when they're done with the tour.

http://patterntap.com/

Thsrs Synonym Search

Ironic Sans provides Thsrs, a single-serving site that provides shorter synonyms for long words. Simple idea that's well executed. If you're Firefox user, this is even more useful as a search add on.

1. User enters a long word.
2. Shorter synonyms are returned if possible.
3. Would be even better if it caught spelling errors.

http://www.ironicsans.com/thsrs/