OfficeMax Faceted Search Results

OfficeMax search provides faceted filtering of results using controls in a left sidebar. Facets such as category, brand, and price show 5 terms per facet, allow the user to expand to see more terms if any, add and remove facet selections in any order. A breadcrumb trail is also provided to show the selections made, and can be used to clear all selections at once by clicking on the first term in the trail.

1. Search results for term "pencils."
2. Adding term "Mechanical Pencils" under Category Facet.
3. Adding "0.7mm" under Point Size Facet.

YouTube Media Annotation

YouTube have added media annotation controls that allow users to add comment bubbles, note boxes, and links (within YouTube only) to their own videos.

YouTube is not the first to add media annotations or commenting features like this, but the addition of this feature may mean we'll see more if it on video portals. The feature is similar to the video annotation that Bubbleply does. Viewers are not allowed to add annotations to other users' media as is done on Flickr and iminlikewithyou.

1. Click "Edit Annotations" button for a video in My Account page.
2. Entering a comment box in the editing form. A small yellow area is shown below the timeline to indicate the start and endpoints for the comment.
3. Entering a comment bubble. Bubble may be resized and moved by manipulating the handles.
4. Entering a comment area.

Conservation International Global Navigation

The Conservation International site provides an interesting take on the flyout or drop down global navigation bar. The site uses single, short action words set in very large type to indicate what you can do and name the sections of the site: Discover, Learn, Explore, Act, Give. These are nice pathfinder-type labels. When the user hovers over a links, the label expands to provide a phrase. For example, Learn becomes "Learn about the issues," and Explore becomes "Explore critical places." This is a nice implementation that keeps the design simple and bold, yet usable. It provides better scent to the links when the user decides to dig deeper into the site.

Flickr Sharing

Flickr have added a sharing interface for their photos and videos. Presumably this is because of the introduction of videos into the ecosystem. The interface is provided via an unobtrusive link that uses AJAX to display contextual menus when clicked.

Prior to the introduction of this interface, users had to go to click the "All Sizes" link to find URLs for the item.

1. "Share This" button appears to the right of photo or video title.
2. Clicking "Share This" displays sharing options, showing email sharing by default. Entering text provides auto-completion suggestions using user names.
3. Copying the item link.
4. Copying the embed code.
5. Posting to a blog. User must have blogs configured to see this option.
6. Posting to blog displays the "Blog this..." page.

SugarSync Creating and Moving Items

SugarSync's web-based document management application allows users to manage files that are kept on their computers. The interactions for creating and moving folders use an identical design pattern for placing items in a directory on the file system. This is similar to the Save As behavior in operating systems such as the Mac Finder and Windows Explorer, which will let users navigate to a disk drive, and then drill down deeply into a directory location.

1. Creating a new folder and saving to a location.
2. Moving a folder to a location.

SugarSync Uploading Files

SugarSync's upload file behavior uses a customized interface that is not typical. Instead of using the browser behavior for handling file uploads using <input type="file">, which typically provides an input and browse button in Firefox and Internet Explorer, SugarSync uses a single button to invoke the file browsing window, and then displays the file's name in HTML.

To be fair, Safari provides a slicker interface for file uploads, which doesn't display an input, but only a button, and then shows the file name next to the button when a file is found. Safari users can actually also drag file names into the browse button from the finder.

1. The file manager.
2. Clicking "Upload File" from the menu displays dialog to upload via web-based application or via desktop application.
3. Clicking web-based uploader displays web browser's File Upload window.
4. When the file has been selected, the window displays the found file name. User has the option to remove the file, upload it, or cancel.

Nivea Download Wizard

The Nivea brand advertising site features a very wizard for determining the type of logo file you should download depending on how the logo will be used. The visitor will answer questions about the purpose, application, and size needed. At the end of the process, a file is given to download. The questions are very easy to answer, and stepping the user through this process eliminates having to sift through a longer list of file types to determine the logo that would best suit the user's application.

1. User indicates the purpose for using the logo.
2. User indicates how the logo will be used&38212;in which type of application.
3. User indicates size of the logo.
4. System provides appropriate logo.

Tork Revolution Navigation

The Tork Revolution site features a Flash global/local navigation system that appears conventional on the surface, but positions the navigation elements in unconventional places on the page, using size, position, and color to indicate hierarchy.

1. The home page.
2. Clicking, Foodservice, one of the main entry points in the global nav pulls that word out of the nav and re-positions it at the top of the page.
3. Following a link to a sub-page, we are now viewing "Foodservice & Kitchen." The siblings of Kitchen are displayed above the heading in smaller text.
4. We clicked a sub-page under Kitchen&#8212;we are now 3 levels deep. Kitchen appears in smaller, yellow type above the heading alongside second-level siblings.

Facebook Form Auto-completion

Facebook's address auto-completion in the compose message form is one of the best examples of auto-completion behavior in a form. The interaction very closely mimics what you would expect to happen in the To field of email applications like Apple Mail and Outlook.

1. Cursor is in the To: field. Contextual help displayed below input.
2. Typing characters in the input invokes person/recipient auto-completion suggestions.
3. Selecting a person from auto-completion suggestions, entering a comma, or clicking enter displays the selected recipient in a block. The recipient's name cannot be edited, but it may be removed by using the backspace key or clicking the "x" next to the name.