Panic Shopping Cart

Panic, the Mac software company that makes Coda and Transmit, has an apparel store with fun shopping cart behaviors that mimic the Mac's dock. The apparel store shows t-shirt listings, and a little cart dock at the bottom of the page that invites visitors to drag t-shirts down into it to add to cart. Clicking and dragging shows the ghosted t-shirt moving with the cursor until it snaps into the dock. Adding a bunch of t-shirts enables the carousel. When you drag t-shirts out of the dock, they disappear with a puff of smoke, just as items in the Mac dock do. Those who don't like to drag can use the plus sign icon.

The cart page shows a clean and simple form with all of your items to purchase, your information (shipping/billing info), and payment info. Short and without any fuss. I wish open source carts were easy enough to configure to be this simple.

1. Product page with shopping cart docked to bottom of viewport, doubling as a drop area for adding to cart.
2. Drag behavior to add to cart.
3. A simpler add icon is also provided.
4. Cart shown with carousel controls when reaching max number to display. Users can drag items out and they're removed with a puff of smoke.
5. Checkout page.

http://www.panic.com/goods/index.php

JS-Kit ECHO Commenting

JS-Kit's ECHO is a service that can be embedded in CMS as a replacement for commenting, and provides a real-time stream of diggs, tweets, comments. The interface, at first blush, looks a bit like an email composition form, with From, To, and Body Fields. Selecting the From drop down menu shows options for logging in your identity via JS-Kit or a third party social networking API. The To: field adds "This Page" by default, meaning you're adding a comment to this page. It also allows you to enter other destinations, e.g. Twitter, FaceBook, FriendFeed, to alert your contacts in those social networks of your comment.

1. Default view of form, not logged in.
2. Identifying yourself by selecting a social network or other participating community via the From pop up menu.
3. Identity selected (Google Profile), and From: now showing name and avatar. Options to select other identities still visible, as is log out link.
4. Selecting destinations for your comment in the To: input via the pop up menu. Page is default, and other social networks shown selected and added to the input. Clicking X icon removes.
5. Adding images. Caption option is available.
6. Follow options allow you to get email notification or RSS.
7. Comment added.

http://js-kit.com/

iTunes First Time User Welcome Messages

First time users of iTunes are presented with instruction screens for adding media to their library. The simple instruction panels provide links to buy media or to watch video tutorials showing how to purchase, import, and use the software.

1. First time user panel for Music with links to download or import media, and watch tutorials.
2. First time user panel for TV Shows.
3. Tutorial video from Help app that appears when user clicks the "Watch the tutorial" links in first time user panels.

chrome://speeddial/content/speeddial.xul

Kontain Search

Kontain is a social media site for sharing photos, video, and music. The site provides a large, simple search form at the top of most aggregate pages, and a pared down version of the search form in the upper right corner of single asset pages. A pull down menu to the right of the search input displays options for searching everything, or restricting to media types, users, or just updates.

The options are displayed as circles, and should function as radios. Unfortunately for me, on Firefox and Safari, the circles were sticking like check boxes, so I was a bit confused by this detail initially. The last selected option was always replaced in the form, but the other options could be toggled to have multiples selected. This may just be a bug, because the results are always scoped to the last selected option.

1. Site search at top of aggregate pages.
2. Pull down to scope search. Circles should function as radios, not checkboxes.
3. Search results shown, scoped to selected media type, with menu to change scope.
4. Compact site search in top right displays search scope pull down, but removes the submit button.

http://www.kontain.com/

New York Magazine Search

New York Magazine provides a site search form in the header with options to limit the scope of search, and features advanced filtering options on results page. The results page is simple on the surface, but provides powerful filtering options in the sidebar. The search strategy is shown with actions for removing terms from the search or clear all.

I found some of the behaviors on filtering options to be inconsistent with others. The Type and Publication Date facets provide tree-type fly out menus. But the Section and Author facets, provide bigger multi-column flyouts, triggered by "Show More" links. I haven't figured out my the trigger icon and style needed to be different.

1. Header showing search form in upper left.
2. When the input is in focus, search options are displayed.
3. Search options shown with radio selected.
4. Search results showing search strategy in top of sidebar, and filters for refining search below. Sort options shown in inline list.
5. Showing the search strategy box after removing the term "Blog."
6. Single column flyout menu under Type facet > Blog.
7. Show More link for flyout menu under Section facet.
8. Multi-column flyout menu after clicking Show More link in Section facet.

http://nymag.com/

iStockphoto Search

iStockphoto takes a rather approach to search that offers plenty of options. When the user is logged out, they're presented with a search form on the front page with options that appear when the input is in focus. The user may then select typical options, e.g. size under photos, number of credits under illustration, format for video.

On the results page, a simpler search form is displayed at the top of the page. If the user is logged in, they don't see the search options drop down on the home page, but see a personalized home page with this simpler search form with checkboxes. The advanced search, however, provides all of the options seen on the anonymous user home page, plus additional options, e.g. search by color, shape, category, location of art on grid.

1. Anonymous users see a search form on the home page.
2. When the input is in focus, search options are displayed.
3. Logged in users see a simple search form in the header.
4. Search results allow the user to narrow by image type.
5. Advanced search provides numerous image search options.

http://www.istockphoto.com/index.php

Fever Progressive Disclosure

The Fever RSS news reader provides some useful progressive disclosure/enhancement behaviors that hide features until they are needed. Many of the primary features are also provided as keyboard shortcuts. The resulting experience provides a subtle and minimalist aesthetic without compromising features.

1. The initial view of the app shows groups of items and the pages linking to them. The main navigator is shown in left sidebar.
2. Selecting a category ("UX" in this example) displays a second column for browsing feeds in that category.
3. When the user hovers over the feed column, an A-Z jump list appears to the left as well as an overflow scroll bar in the right. Above the A-Z list is an X icon to hide the feed list. Hovering over a single feed displays an options menu and a refresh button.
4. Clicking a feed's options menu displays a drop down of options for the feed.

http://feedafever.com/

Virgin.com Header

The Virgin.com redesign sports a header that provides a boatload of functionality using mega fly out menus: locale selection, micro-site navigation, registration, login, and newsletter signup. I like that they make these options readily available wherever you are on the site. The longer drop downs like the registration form, for example, seem a little long for users on smaller screens, e.g. netbooks.

1. The global navigation bar provides mega drop downs with sub-nodes and links to their subsidiary companies that provide products and services under each category.
2. The login form is a simple drop down, with a link to register on a separate page.
3. The Sign Up drop down provides the full registration form in a big drop down.
4. Clicking Worldwide provides options to view the site for your geographic region. This option is also provided in the Flash hero below the navigation.
5. The Virgin Companies link provides navigation to micro-sites, and remains consistent as you navigate from site to site.

http://www.virgin.com/

Holland Festival Program Browser

The Holland Festival provides a program browser/calendar that provides an AJAX interface for viewing over 3 weeks of events in a grid. Drop down menus are provided to narrow or expand by genre, locale and route. A single toggle highlights featured events. And a sliding selector, which can be dragged to move the range left and right and with handles to narrow or expand the window, allows you to filter the days to be shown in the grid. Hovering over the individual events in the grid provides a link to show the details in a dialog layer.

1. The initial grid with all genres and locations shown.
2. Unchecking all genres allows the selection of individual values. Matches are highlighted in the grid and others are dimmed.
3. Selecting the Locations drop down and unchecking the "All" value allows the selection of individual values.
4. Velow the date range is narrowed using the handles, and the grid updates to show 1 column per day. The "Highlights" button is also checked and matches are shown with a yellow badge.

http://www.hollandfestival.nl/page.ocl?pageid=13