Rofo Search Filtering

Rofo provides a faceted search engine for commercial real estate properties. The beta provides a search interface at the top of the home and results pages to set parameters including location, size, type of space, and budget. Slider controls are used to narrow size and budget. At present, changes in these settings require a manual page submission to update results. The top location shows some limitations on the number of visible values that can be displayed.

1. Submitting a search from the home page. Cities with properties are matched against the database and suggested via auto-completion.
2. Search results page.
3. Slider controls adjusted for size and budget. Search clicked to resubmit.
4. Selecting more values that are not visible in checkboxes for type of space or sliders in size.

CNET TV Video Player

CNET TV provides a video player that showcases their large library of content including product reviews, news coverage, and special reports. The main page of CNET TV features the video player in the center stage, with a short list of featured (hot) content flanking the left side, and a playlist on the right showing the currently playing video. The player controls are simple and easy to use, but at full screen, the controls a little soft and blurry. They offer options for downloading the clips and sharing on bookmarking services and embedding. Email button is a mailto: link.

The page is clean and offers good navigation options without overwhelming the user with too much information. A carousel at the bottom of the page shows thumbs of popular and new content as well as videos from their Loaded and News sections.

1. CNET TV page.
2. Video Player in center, featured videos on left, and playlist on right.
3. Showing Closed Captioning.
4. Showing Share options. Video Player

The WB brings its video site to the masses of OC and Friends fans and adds another network portal into the mix with Hulu. In terms of visual appearances and the high level navigation (IA), feels like the polar opposite in sensibility to Hulu's pared down appearances and very usable directory structure and show pages. On Hulu, once you arrive at a show page, everything you can watch whether it be a full episode or clip, is neatly organized and presented on the page. TheWB, while lusciously designed gives you a harder navigation experience.

The video player, on the other hand, is quite nice and easy to use. The sharing and commenting tools slide out a right-side drawer and push the player to the right of the stage area. The transition is slick. They also offer video clipping like Hulu. Unlike Hulu, TheWB's clipping controls move the screen with the playhead. We expect that Hulu will fix that one day. No one seems to have perfected this interface yet, but it's a nice option for users who like to embed and share.

1. The show page with video player stage on top.
2. The sharing and embedding drawer. Clipping sliders (the orange triangles) appear in the time line to share only a portion of the video.
3. Sharing the clip on Facebook.
4. Commenting.

MobileMe Calendar Date Selector

The date selection controls in MobileMe Calendar mimic the date selection segmented control in iCal. However, the control bar adds an additional drop-down menu for actions like creating events, and jumping to a specific date. The interface is simple. The addition of the action menu makes the functions from the iCal menu bar accessible without having to add to the web-based calendar interface.

1. The full calendar interface.
2. The action menu expanded.
3. Dialog for "Go to date" menu item.
4. Clicking into the input opens the calendar date picker.

VideoEgg Tabs

The VideoEgg Advertising Network site uses vertical tabs along the right of the page with labels properly oriented in the north-south direction. While doing tabs this way requires that they be handled as images or Flash, the metaphor is recognizable and its use makes sense immediately. Local navigation is handled inside the banner area.

1. Vertical tabs along right side of page.
2. Navigation detail. Local navigation seen in the large banner area to the left of the tabs.

Yahoo! Buzz Voting

Yahoo! Buzz pulls actively viewed and shared pages from its portal and puts them in a Digg-like interface with vote-to-promote buttons so users may actively push stories up and down the Buzz list. The digg/bury interface is simple. Stories are categorized by several main topic areas, and users may view the stories with the highest vote count, over several time slices, or sorted by recency.

1. When the user visits the site the first time, a guided tour jumps the user around the page to introduce them to the site's features. First they point out the buzz button.
2. The guide points out the first user who buzzed an entry to provide incentive to participate.
3. The guide points out the submission form.
4. On hover, the entry shows number of votes and the buzz down button.
5. Button changes to indicate that vote was submitted.

Ed Lives Here Glossary

Paper manufacturer NewPage provides the Ed Lives Here site, a useful resource with information about paper, printing, and design. One of the features of this site is a glossary of printing terms. The glossary provides categorized sub-glossaries, as well as the typical a-z index of terms, and a search input. Browsing through the glossary is facilitated by the A-Z links, which use a fish eye lens to bring focus to a section of the list.

Thanks to Matthew at PatternTap for the tip.

1. The glossary starting with "A" terms in view.
2. Jumping down to the "H" terms using the A-Z links. The H is focussed using the fish eye lens. Letters are enlarged on hover.
3. Viewing a sub-section of the glossary, which is categorized by issue.

Flickr Edit In Place Fields

Flickr's edit in place behaviors make it easy to change data on records without requiring the round trip to a full page editor form. They provided one of the earliest examples of this behavior, using AJAX to quickly update fields in place, and has remained the model to emulate for some time.

1. Flickr entry in user's photos page.
2. Hovering over the title field highlights it with background color to provide a subtl alert the user that it can be edited.
3. Clicking the title switches it from system text to an input form.

Panic Tabs and Carousel Panel

Panic's product page for Coda provides a hybrid interface utilizing both tabs along the top of the information panel, and arrows on the sides to slide through all of the pages in a carousel.

1. The product information panel in the full page.
2. Clicking the next arrow slides to the next panel in the carousel.
3. Clicking a tab further to the right, slides all panels off to the left until the target page is reached.

Yahoo! Autos Carousel and Accordion Panel

Yahoo! Autos has uses a nice hybrid design pattern for promoting the different categories of top cars selected by users. Situated in the right hand column, the arrows at the upper right allow the user to slide through the different lists. The details for the top car are shown in an exposed panel of the accordion, and the titles of the remaining 4 are displayed as well with large number to indicate order. Moving the cursor over one of the other titles slides that panel open and collapses the others out of view.

1. The User Picks panel is promoted on the right side of the page.
2. Hovering over the title of one of the cars expands the accordion to reveal that car's detail.
3. Clicking the arrows in the upper right slide to the previous or next list, and the dot indicator above the arrows show what page you're viewing in the set.